From 75ebe8bcfab46055ca6d2182bac50493dae2a5d6 Mon Sep 17 00:00:00 2001
From: Jeremy Asuncion <jeremyasuncion808@gmail.com>
Date: Wed, 18 Sep 2024 14:31:11 -0700
Subject: [PATCH] feat: upgrade sds colors (#1078)

#747
Depends on #1077

Updates the SDS color names to use the new `sds-color-primitive-*`
syntax. In the future we should refactor these colors to use the
semantic equivalents

## Demo

https://dev-sds-upgrade.cryoet.dev.si.czi.technology
---
 .../app/components/AnnotatedObjectsList.tsx   |  7 +++--
 .../app/components/AuthorLegend.tsx           | 24 ++++++----------
 .../app/components/AuthorLink/AuthorLink.tsx  |  4 +--
 .../app/components/AuthorList/AuthorList.tsx  |  6 +++-
 .../app/components/Breadcrumbs.tsx            |  9 ++++--
 .../components/BrowseData/DatasetTable.tsx    |  9 +++---
 .../components/BrowseData/DepositionTable.tsx |  8 +++---
 .../app/components/CollapsibleList.tsx        |  4 +--
 .../data-portal/app/components/CopyBox.tsx    |  2 +-
 .../app/components/DatabaseEntry.tsx          | 11 ++++++--
 .../Dataset/DatasetMetadataTable.tsx          |  4 +--
 .../components/Dataset/DatasetOverview.tsx    |  4 +--
 .../app/components/Dataset/RunsTable.tsx      |  7 ++---
 .../components/InfoLink/InfoLink.tsx          |  2 +-
 .../AnnotationMetadataFilterSection.tsx       |  2 +-
 .../IncludedContentsFilterSection.tsx         |  3 +-
 .../components/Deposition/DatasetsTable.tsx   | 11 ++++----
 .../Deposition/DepositionMetadataTable.tsx    |  2 +-
 .../Deposition/DepositionOverview.tsx         |  6 ++--
 .../Deposition/MethodLinks/MethodLink.tsx     |  2 +-
 .../MethodLinks/MethodLinksMetadataTable.tsx  |  9 +++---
 .../MethodLinks/MethodLinksOverview.tsx       |  8 +++---
 .../components/Download/DirectDownloadTab.tsx |  2 +-
 .../app/components/Download/DownloadModal.tsx |  4 +--
 .../Download/DownloadOptionsContent.tsx       |  2 +-
 .../Download/SelectSaveDestination.tsx        |  4 +--
 .../Download/TomogramSelectorLabel.tsx        |  2 +-
 .../Download/TomogramSelectorOption.tsx       |  8 +++---
 .../data-portal/app/components/Drawer.tsx     |  2 +-
 .../Filters/DropdownFilterButton.tsx          | 10 +++----
 .../app/components/Filters/FilterSection.tsx  |  2 +-
 .../app/components/Filters/Filters.module.css | 27 ++++++++++++++----
 .../Filters/GroundTruthAnnotationFilter.tsx   |  2 +-
 .../components/Filters/MultiInputFilter.tsx   |  2 +-
 .../app/components/Filters/RegexFilter.tsx    |  2 +-
 .../app/components/Filters/SelectFilter.tsx   |  6 +++-
 .../components/Filters/TiltRangeFilter.tsx    |  2 +-
 .../data-portal/app/components/I18n.tsx       |  2 +-
 .../app/components/Index/IndexCTA.tsx         |  6 ++--
 .../app/components/Index/IndexContent.tsx     |  4 +--
 .../app/components/InlineMetadata.tsx         |  6 ++--
 .../data-portal/app/components/KeyPhoto.tsx   |  6 ++--
 .../app/components/Layout/CryoETHomeLink.tsx  |  4 +--
 .../app/components/Layout/Footer.tsx          | 10 +++----
 .../app/components/Layout/TopNavigation.tsx   |  6 ++--
 .../app/components/MDX/MdxPageTitle.tsx       |  2 +-
 .../MLChallenge/MLChallengeHeader.tsx         |  6 ++--
 .../components/MLChallenge/MainContent.tsx    | 28 +++++++++----------
 .../app/components/MenuDropdown.tsx           |  8 +++---
 .../app/components/MetadataDrawer.tsx         | 14 +++++++---
 .../app/components/ModalSubtitle.tsx          |  2 +-
 .../data-portal/app/components/PageHeader.tsx |  4 +--
 .../app/components/Radio/Radio.tsx            |  4 +--
 .../Run/AnnotationConfidenceTable.tsx         |  6 ++--
 .../components/ObjectIdLink/ObjectIdLink.tsx  |  2 +-
 .../components/Run/AnnotationOveriewTable.tsx |  6 ++--
 .../app/components/Run/AnnotationTable.tsx    | 22 +++++----------
 .../app/components/Run/RunHeader.tsx          |  8 ++++--
 .../components/Run/TomogramMetadataDrawer.tsx |  2 +-
 .../app/components/Run/TomogramTable.tsx      |  4 +--
 .../data-portal/app/components/Select.tsx     |  6 ++--
 .../app/components/Table/CellHeader.tsx       | 21 +++++++++-----
 .../app/components/Table/MetadataTable.tsx    |  6 ++--
 .../app/components/Table/PageTable.tsx        |  2 +-
 .../app/components/Table/TableCell.tsx        | 28 +++++++++++++------
 .../app/components/Table/TableCount.tsx       |  2 +-
 .../app/components/TablePageLayout.tsx        | 13 +++++----
 .../data-portal/app/components/Tabs.tsx       |  4 +--
 .../TiltSeriesQualityScoreBadge.tsx           |  9 ++++--
 .../data-portal/app/components/Tooltip.tsx    | 24 +++++++++++++---
 70 files changed, 283 insertions(+), 215 deletions(-)

diff --git a/frontend/packages/data-portal/app/components/AnnotatedObjectsList.tsx b/frontend/packages/data-portal/app/components/AnnotatedObjectsList.tsx
index bb81cd214..85a9864a9 100644
--- a/frontend/packages/data-portal/app/components/AnnotatedObjectsList.tsx
+++ b/frontend/packages/data-portal/app/components/AnnotatedObjectsList.tsx
@@ -1,4 +1,3 @@
-import { Tooltip } from '@czi-sds/components'
 import Paper from '@mui/material/Paper'
 import Skeleton from '@mui/material/Skeleton'
 import { range } from 'lodash-es'
@@ -8,6 +7,8 @@ import { ANNOTATED_OBJECTS_MAX } from 'app/constants/pagination'
 import { i18n } from 'app/i18n'
 import { cns } from 'app/utils/cns'
 
+import { Tooltip } from './Tooltip'
+
 function List({
   className,
   children,
@@ -62,7 +63,7 @@ export function AnnotatedObjectsList({
           <Tooltip
             classes={{ tooltip: '!p-0 !bg-transparent' }}
             placement="left"
-            title={
+            tooltip={
               <Paper className="p-sds-m text-black w-[250px]" elevation={4}>
                 <List className="font-semibold">{nodes}</List>
               </Paper>
@@ -70,7 +71,7 @@ export function AnnotatedObjectsList({
           >
             <div
               className={cns(
-                'bg-sds-gray-200 text-sds-gray-600 hover:cursor-pointer',
+                'bg-sds-color-primitive-gray-200 text-sds-color-primitive-gray-600 hover:cursor-pointer',
                 'text-sds-body-xxxs leading-sds-body-xxxs',
                 'rounded-sds-m py-sds-xxxs px-sds-xs inline',
               )}
diff --git a/frontend/packages/data-portal/app/components/AuthorLegend.tsx b/frontend/packages/data-portal/app/components/AuthorLegend.tsx
index 570ab1dd5..ce6769fdf 100644
--- a/frontend/packages/data-portal/app/components/AuthorLegend.tsx
+++ b/frontend/packages/data-portal/app/components/AuthorLegend.tsx
@@ -1,28 +1,30 @@
-import { Icon, Tooltip } from '@czi-sds/components'
+import { Icon } from '@czi-sds/components'
 
 import { I18n } from 'app/components/I18n'
 import { EnvelopeIcon, ORCIDIcon } from 'app/components/icons'
 import { cns } from 'app/utils/cns'
 
+import { Tooltip } from './Tooltip'
+
 function Legend() {
   return (
     <div className="flex flex-col gap-sds-m min-w-fit">
-      <h4 className="text-sds-header-xxs leading-sds-header-xxs font-semibold text-sds-gray-500">
+      <h4 className="text-sds-header-xxs leading-sds-header-xxs font-semibold text-sds-color-primitive-gray-500">
         <I18n i18nKey="authorNameLegend" />
       </h4>
-      <div className="grid grid-cols-[max-content_max-content] gap-x-sds-xl gap-y-sds-xxs text-sds-body-xs leading-sds-body-xs text-sds-gray-black">
+      <div className="grid grid-cols-[max-content_max-content] gap-x-sds-xl gap-y-sds-xxs text-sds-body-xs leading-sds-body-xs text-sds-color-primitive-common-black">
         <I18n i18nKey="boldedText" />
         <span className="font-semibold">
           <I18n i18nKey="primaryAuthor" />
         </span>
-        <span className="text-sds-gray-600">
+        <span className="text-sds-color-primitive-gray-600">
           <I18n i18nKey="normalText" />
         </span>
         <span className="font-semibold">
           <I18n i18nKey="author" />
         </span>
         <span className="mt-sds-xxxs">
-          <EnvelopeIcon className="text-sds-gray-400 align-baseline inline-block h-sds-icon-s w-sds-icon-s" />
+          <EnvelopeIcon className="text-sds-color-primitive-gray-400 align-baseline inline-block h-sds-icon-s w-sds-icon-s" />
         </span>
         <span className="font-semibold">
           <I18n i18nKey="correspondingAuthor" />
@@ -40,15 +42,7 @@ function Legend() {
 
 export function AuthorLegend({ inline = false }: { inline?: boolean }) {
   return (
-    <Tooltip
-      title={<Legend />}
-      classes={{
-        tooltip:
-          // need to specify background color because it's not visible locally
-          '!p-sds-m !min-w-fit border-solid border border-sds-gray-300 !bg-white',
-      }}
-      placement="top-start"
-    >
+    <Tooltip tooltip={<Legend />} placement="top">
       <div
         className={inline ? 'relative w-sds-icon-s h-sds-icon-s' : undefined}
       >
@@ -57,7 +51,7 @@ export function AuthorLegend({ inline = false }: { inline?: boolean }) {
           sdsSize={inline ? 's' : 'xs'}
           sdsType="button"
           className={cns(
-            '!text-inherit !inline-block !align-baseline !fill-sds-gray-500',
+            '!text-inherit !inline-block !align-baseline !fill-sds-color-primitive-gray-500',
             inline && 'absolute bottom-sds-xxxs',
           )}
         />
diff --git a/frontend/packages/data-portal/app/components/AuthorLink/AuthorLink.tsx b/frontend/packages/data-portal/app/components/AuthorLink/AuthorLink.tsx
index c7660ae96..389d34564 100644
--- a/frontend/packages/data-portal/app/components/AuthorLink/AuthorLink.tsx
+++ b/frontend/packages/data-portal/app/components/AuthorLink/AuthorLink.tsx
@@ -33,7 +33,7 @@ export function AuthorLink({
 
                 author.primary_author_status
                   ? 'border-black'
-                  : 'border-sds-gray-500',
+                  : 'border-sds-color-primitive-gray-500',
               ]
             : 'border-transparent',
         )}
@@ -48,7 +48,7 @@ export function AuthorLink({
       {author.corresponding_author_status && (
         <EnvelopeIcon
           className={cns(
-            'text-sds-gray-400 mx-sds-xxxs',
+            'text-sds-color-primitive-gray-400 mx-sds-xxxs',
             'mb-2 inline-block h-sds-icon-xs w-sds-icon-xs',
           )}
         />
diff --git a/frontend/packages/data-portal/app/components/AuthorList/AuthorList.tsx b/frontend/packages/data-portal/app/components/AuthorList/AuthorList.tsx
index 431dd401b..899be473e 100644
--- a/frontend/packages/data-portal/app/components/AuthorList/AuthorList.tsx
+++ b/frontend/packages/data-portal/app/components/AuthorList/AuthorList.tsx
@@ -80,7 +80,11 @@ export function AuthorList({
         ))}
       </span>
 
-      <span className={cns(subtle && !compact && 'text-sds-gray-600')}>
+      <span
+        className={cns(
+          subtle && !compact && 'text-sds-color-primitive-gray-600',
+        )}
+      >
         {compact
           ? otherCollapsed
           : authorsOther.map((author, i, arr) => (
diff --git a/frontend/packages/data-portal/app/components/Breadcrumbs.tsx b/frontend/packages/data-portal/app/components/Breadcrumbs.tsx
index fdc408ab7..a40a20549 100644
--- a/frontend/packages/data-portal/app/components/Breadcrumbs.tsx
+++ b/frontend/packages/data-portal/app/components/Breadcrumbs.tsx
@@ -21,7 +21,10 @@ function Breadcrumb({
   className?: string
 }) {
   return link ? (
-    <Link to={link} className={cns(className, 'hover:text-sds-info-400')}>
+    <Link
+      to={link}
+      className={cns(className, 'hover:text-sds-color-primitive-blue-400')}
+    >
       {text}
     </Link>
   ) : (
@@ -80,14 +83,14 @@ export function Breadcrumbs({
     >
       {returnToDepositionLink && (
         <Link
-          className="uppercase font-semibold text-sds-caps-xxxs leading-sds-caps-xxxs text-sds-primary-400"
+          className="uppercase font-semibold text-sds-caps-xxxs leading-sds-caps-xxxs text-sds-color-primitive-blue-400"
           to={returnToDepositionLink}
         >
           {t('returnToDeposition')}
         </Link>
       )}
 
-      <div className="flex flex-row gap-sds-s text-sds-body-s leading-sds-body-s text-sds-gray-black items-center whitespace-nowrap content-start">
+      <div className="flex flex-row gap-sds-s text-sds-body-s leading-sds-body-s text-sds-color-primitive-common-black items-center whitespace-nowrap content-start">
         <Breadcrumb
           text={t(variant === 'deposition' ? 'allDepositions' : 'allDatasets')}
           link={browseAllLink}
diff --git a/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx b/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
index c34f26413..37ea4fefa 100644
--- a/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
+++ b/frontend/packages/data-portal/app/components/BrowseData/DatasetTable.tsx
@@ -139,9 +139,9 @@ export function DatasetTable() {
                 <div className="flex flex-col flex-auto gap-sds-xxxs min-h-[100px]">
                   <p
                     className={cnsNoMerge(
-                      'text-sds-body-m leading-sds-body-m font-semibold text-sds-primary-400',
+                      'text-sds-body-m leading-sds-body-m font-semibold text-sds-color-primitive-blue-400',
                       !isClickingOnEmpiarId &&
-                        'group-hover:text-sds-primary-500',
+                        'group-hover:text-sds-color-primitive-blue-500',
                     )}
                   >
                     {isLoadingDebounced ? (
@@ -151,7 +151,7 @@ export function DatasetTable() {
                     )}
                   </p>
 
-                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600">
+                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
                     {isLoadingDebounced ? (
                       <Skeleton className="max-w-[120px]" variant="text" />
                     ) : (
@@ -159,7 +159,7 @@ export function DatasetTable() {
                     )}
                   </p>
 
-                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-500 mt-sds-s">
+                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-500 mt-sds-s">
                     {isLoadingDebounced ? (
                       <>
                         <Skeleton className="max-w-[80%] mt-2" variant="text" />
@@ -240,7 +240,6 @@ export function DatasetTable() {
             header: () => (
               <CellHeader
                 tooltip={<I18n i18nKey="runsTooltip" />}
-                arrowPadding={{ right: 270 }}
                 width={DatasetTableWidths.runs}
               >
                 {t('runs')}
diff --git a/frontend/packages/data-portal/app/components/BrowseData/DepositionTable.tsx b/frontend/packages/data-portal/app/components/BrowseData/DepositionTable.tsx
index d32bec52e..e1fd8712c 100644
--- a/frontend/packages/data-portal/app/components/BrowseData/DepositionTable.tsx
+++ b/frontend/packages/data-portal/app/components/BrowseData/DepositionTable.tsx
@@ -100,7 +100,7 @@ export function DepositionTable() {
                 <div className="flex flex-col flex-auto gap-sds-xxxs min-h-[100px]">
                   <p
                     className={cnsNoMerge(
-                      'text-sds-body-m leading-sds-body-m font-semibold text-sds-primary-400',
+                      'text-sds-body-m leading-sds-body-m font-semibold text-sds-color-primitive-blue-400',
                     )}
                   >
                     {isLoadingDebounced ? (
@@ -110,7 +110,7 @@ export function DepositionTable() {
                     )}
                   </p>
 
-                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600">
+                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
                     {isLoadingDebounced ? (
                       <Skeleton className="max-w-[120px]" variant="text" />
                     ) : (
@@ -120,7 +120,7 @@ export function DepositionTable() {
                     )}
                   </p>
 
-                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-500 mt-sds-s">
+                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-500 mt-sds-s">
                     {isLoadingDebounced ? (
                       <>
                         <Skeleton className="max-w-[80%] mt-2" variant="text" />
@@ -197,7 +197,7 @@ export function DepositionTable() {
                   )}
                 </p>
                 {/*              TODO: (kne42) uncomment this when we can fetch dataset counts properly
-                <p className="text-sds-gray-600 text-sds-body-xxs leading-sds-body-xxs">
+                <p className="text-sds-color-primitive-gray-600 text-sds-body-xxs leading-sds-body-xxs">
                   {isLoadingDebounced ? (
                     <Skeleton variant="text" className="max-w-[75%] mt-2" />
                   ) : (
diff --git a/frontend/packages/data-portal/app/components/CollapsibleList.tsx b/frontend/packages/data-portal/app/components/CollapsibleList.tsx
index 6c209b499..1ed6b0839 100644
--- a/frontend/packages/data-portal/app/components/CollapsibleList.tsx
+++ b/frontend/packages/data-portal/app/components/CollapsibleList.tsx
@@ -67,7 +67,7 @@ export function CollapsibleList({
         <div
           className={cns(
             'mt-sds-xxs font-semibold',
-            tableVariant && 'text-sds-primary-400',
+            tableVariant && 'text-sds-color-primitive-blue-400',
           )}
         >
           <button type="button" onClick={() => setCollapsed(!collapsed)}>
@@ -106,7 +106,7 @@ export function CollapsibleList({
       )}
     </div>
   ) : (
-    <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600">
+    <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
       {t('notSubmitted')}
     </p>
   )
diff --git a/frontend/packages/data-portal/app/components/CopyBox.tsx b/frontend/packages/data-portal/app/components/CopyBox.tsx
index af77bee52..7aed8df56 100644
--- a/frontend/packages/data-portal/app/components/CopyBox.tsx
+++ b/frontend/packages/data-portal/app/components/CopyBox.tsx
@@ -36,7 +36,7 @@ export function CopyBox({
 
       <div
         className={cns(
-          'bg-sds-gray-100 border-[0.5px] border-sds-gray-300',
+          'bg-sds-color-primitive-gray-100 border-[0.5px] border-sds-color-primitive-gray-300',
           'p-sds-default flex gap-sds-s',
         )}
       >
diff --git a/frontend/packages/data-portal/app/components/DatabaseEntry.tsx b/frontend/packages/data-portal/app/components/DatabaseEntry.tsx
index add8bd07c..29d190c13 100644
--- a/frontend/packages/data-portal/app/components/DatabaseEntry.tsx
+++ b/frontend/packages/data-portal/app/components/DatabaseEntry.tsx
@@ -36,13 +36,20 @@ export function DatabaseEntry(props: DatabaseEntryProps) {
     <p className="flex flex-row gap-sds-xs">
       {(!inline || dbtype === DatabaseType.DOI) && (
         <span
-          className={cns('text-sds-gray-black', !inline && 'font-semibold')}
+          className={cns(
+            'text-sds-color-primitive-common-black',
+            !inline && 'font-semibold',
+          )}
         >
           {LABEL_MAP.get(dbtype)}:
         </span>
       )}
       <Link
-        className={inline ? 'text-sds-info-400 truncate' : 'text-sds-gray-600'}
+        className={
+          inline
+            ? 'text-sds-color-primitive-blue-400 truncate'
+            : 'text-sds-color-primitive-gray-600'
+        }
         to={URL_MAP.get(dbtype) + id}
         variant={inline ? undefined : 'dashed-underlined'}
       >
diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx
index 7c97577fc..ae440cfe0 100644
--- a/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx
+++ b/frontend/packages/data-portal/app/components/Dataset/DatasetMetadataTable.tsx
@@ -30,7 +30,7 @@ export function DatasetMetadataTable({
       renderValue: (value) => {
         return (
           <Link
-            className="flex flex-row gap-sds-xs w-full items-center justify-center text-sds-info-400"
+            className="flex flex-row gap-sds-xs w-full items-center justify-center text-sds-color-primitive-blue-400"
             to={`/datasets/${dataset.id}`}
             target="_blank"
           >
@@ -39,7 +39,7 @@ export function DatasetMetadataTable({
               sdsIcon="ChevronRight"
               sdsSize="xs"
               sdsType="iconButton"
-              className="!w-[10px] !h-[10px] !fill-sds-primary-400"
+              className="!w-[10px] !h-[10px] !fill-sds-color-primitive-blue-400"
             />
           </Link>
         )
diff --git a/frontend/packages/data-portal/app/components/Dataset/DatasetOverview.tsx b/frontend/packages/data-portal/app/components/Dataset/DatasetOverview.tsx
index 5173ccf89..dda14b68b 100644
--- a/frontend/packages/data-portal/app/components/Dataset/DatasetOverview.tsx
+++ b/frontend/packages/data-portal/app/components/Dataset/DatasetOverview.tsx
@@ -8,10 +8,10 @@ import { cnsNoMerge } from 'app/utils/cns'
 
 import { PageHeaderSubtitle } from '../PageHeaderSubtitle'
 
-// use clsx here instead of cns since it erroneously merges text-sds-gray-500 and text-sds-caps-xxxs
+// use clsx here instead of cns since it erroneously merges text-sds-color-primitive-gray-500 and text-sds-caps-xxxs
 const sectionHeaderStyles = cnsNoMerge(
   'font-semibold uppercase',
-  'text-sds-gray-black',
+  'text-sds-color-primitive-common-black',
   'text-sds-caps-xxxs leading-sds-caps-xxxs tracking-sds-caps',
   'mb-sds-xs',
 )
diff --git a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx
index 449bfd8c1..14e34bd3e 100644
--- a/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx
+++ b/frontend/packages/data-portal/app/components/Dataset/RunsTable.tsx
@@ -103,7 +103,6 @@ export function RunsTable() {
         header: () => (
           <CellHeader
             tooltip={<I18n i18nKey="runsTooltip" />}
-            arrowPadding={{ right: 260 }}
             width={RunTableWidths.name}
           >
             {t('runName')}
@@ -124,9 +123,9 @@ export function RunsTable() {
                 ) : (
                   <Link
                     className={cnsNoMerge(
-                      'text-sds-body-m leading-sds-body-m font-semibold text-sds-primary-400',
+                      'text-sds-body-m leading-sds-body-m font-semibold text-sds-color-primitive-blue-400',
                       !isHoveringOverInteractable &&
-                        'hover:text-sds-primary-500',
+                        'hover:text-sds-color-primitive-blue-500',
                     )}
                     to={runUrl}
                   >
@@ -134,7 +133,7 @@ export function RunsTable() {
                   </Link>
                 )}
 
-                <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600">
+                <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
                   {isLoadingDebounced ? (
                     <Skeleton className="max-w-[120px]" variant="text" />
                   ) : (
diff --git a/frontend/packages/data-portal/app/components/Dataset/SampleAndExperimentConditionsTable/components/InfoLink/InfoLink.tsx b/frontend/packages/data-portal/app/components/Dataset/SampleAndExperimentConditionsTable/components/InfoLink/InfoLink.tsx
index a6f97ae26..647a3d8e8 100644
--- a/frontend/packages/data-portal/app/components/Dataset/SampleAndExperimentConditionsTable/components/InfoLink/InfoLink.tsx
+++ b/frontend/packages/data-portal/app/components/Dataset/SampleAndExperimentConditionsTable/components/InfoLink/InfoLink.tsx
@@ -33,7 +33,7 @@ export function InfoLink({
     // don't link if no patterns match
     if (link) {
       return (
-        <Link to={link} className="text-sds-info-400">
+        <Link to={link} className="text-sds-color-primitive-blue-400">
           {value}
         </Link>
       )
diff --git a/frontend/packages/data-portal/app/components/DatasetFilter/AnnotationMetadataFilterSection.tsx b/frontend/packages/data-portal/app/components/DatasetFilter/AnnotationMetadataFilterSection.tsx
index 74b2c0870..644dc24cd 100644
--- a/frontend/packages/data-portal/app/components/DatasetFilter/AnnotationMetadataFilterSection.tsx
+++ b/frontend/packages/data-portal/app/components/DatasetFilter/AnnotationMetadataFilterSection.tsx
@@ -19,7 +19,7 @@ export function AnnotationMetadataFilterSection({
   return (
     <FilterSection title={t('annotationMetadata')} border={false}>
       {depositionPageVariant && (
-        <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-500 pl-sds-s">
+        <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-500 pl-sds-s">
           {t('depositionAnnotationsOnly')}
         </p>
       )}
diff --git a/frontend/packages/data-portal/app/components/DatasetFilter/IncludedContentsFilterSection.tsx b/frontend/packages/data-portal/app/components/DatasetFilter/IncludedContentsFilterSection.tsx
index 2313b52f1..747328beb 100644
--- a/frontend/packages/data-portal/app/components/DatasetFilter/IncludedContentsFilterSection.tsx
+++ b/frontend/packages/data-portal/app/components/DatasetFilter/IncludedContentsFilterSection.tsx
@@ -113,7 +113,6 @@ export function IncludedContentsFilterSection({
           updateValue(QueryParams.AvailableFiles, options)
         }}
         title={`${t('resultsMustIncludeAllFileTypes')}:`}
-        popperClassName="max-w-[244px]"
         className={AVAILABLE_FILES_CLASS_NAME}
       />
 
@@ -129,7 +128,7 @@ export function IncludedContentsFilterSection({
         }
         details={
           depositionPageVariant ? (
-            <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-500">
+            <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-500">
               {t('withDepositionData')}
             </p>
           ) : undefined
diff --git a/frontend/packages/data-portal/app/components/Deposition/DatasetsTable.tsx b/frontend/packages/data-portal/app/components/Deposition/DatasetsTable.tsx
index 52eafa958..7996449ba 100644
--- a/frontend/packages/data-portal/app/components/Deposition/DatasetsTable.tsx
+++ b/frontend/packages/data-portal/app/components/Deposition/DatasetsTable.tsx
@@ -135,8 +135,8 @@ export function DatasetsTable() {
                 <div className="flex flex-col flex-auto gap-sds-xxxs min-h-[100px]">
                   <p
                     className={cnsNoMerge(
-                      'text-sds-body-m leading-sds-body-m font-semibold text-sds-primary-400',
-                      'group-hover:text-sds-primary-500',
+                      'text-sds-body-m leading-sds-body-m font-semibold text-sds-color-primitive-blue-400',
+                      'group-hover:text-sds-color-primitive-blue-500',
                     )}
                   >
                     {isLoadingDebounced ? (
@@ -146,7 +146,7 @@ export function DatasetsTable() {
                     )}
                   </p>
 
-                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600">
+                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
                     {isLoadingDebounced ? (
                       <Skeleton className="max-w-[120px]" variant="text" />
                     ) : (
@@ -154,7 +154,7 @@ export function DatasetsTable() {
                     )}
                   </p>
 
-                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-500 mt-sds-s">
+                  <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-500 mt-sds-s">
                     {isLoadingDebounced ? (
                       <>
                         <Skeleton className="max-w-[80%] mt-2" variant="text" />
@@ -202,12 +202,11 @@ export function DatasetsTable() {
                       <I18n i18nKey="runsTooltip" />
                       {t('symbolPeriod')}
                     </p>
-                    <p className="mt-sds-s text-sds-gray-600 text-sds-body-xxxs leading-sds-body-xxxs">
+                    <p className="mt-sds-s text-sds-color-primitive-gray-600 text-sds-body-xxxs leading-sds-body-xxxs">
                       <I18n i18nKey="runsTooltipDepositionSubtext" />
                     </p>
                   </div>
                 }
-                arrowPadding={{ right: 270 }}
                 width={DepositionPageDatasetTableWidths.runs}
                 subHeader={t('withDepositionData')}
               >
diff --git a/frontend/packages/data-portal/app/components/Deposition/DepositionMetadataTable.tsx b/frontend/packages/data-portal/app/components/Deposition/DepositionMetadataTable.tsx
index 26cdb804d..e5b8ec580 100644
--- a/frontend/packages/data-portal/app/components/Deposition/DepositionMetadataTable.tsx
+++ b/frontend/packages/data-portal/app/components/Deposition/DepositionMetadataTable.tsx
@@ -20,7 +20,7 @@ function CollapsibleDescription({ text }: { text: string }) {
       <p className={isCollapsed ? 'text-ellipsis line-clamp-3' : undefined}>
         {text}
       </p>
-      <div className="mt-sds-s font-semibold text-sds-primary-400">
+      <div className="mt-sds-s font-semibold text-sds-color-primitive-blue-400">
         <button type="button" onClick={() => setCollapsed((prev) => !prev)}>
           <span className="flex flex-row gap-sds-xxs items-center">
             <Icon
diff --git a/frontend/packages/data-portal/app/components/Deposition/DepositionOverview.tsx b/frontend/packages/data-portal/app/components/Deposition/DepositionOverview.tsx
index 1d9c69f01..dd877f78f 100644
--- a/frontend/packages/data-portal/app/components/Deposition/DepositionOverview.tsx
+++ b/frontend/packages/data-portal/app/components/Deposition/DepositionOverview.tsx
@@ -9,10 +9,10 @@ import { cnsNoMerge } from 'app/utils/cns'
 
 import { MethodLinksOverview } from './MethodLinks'
 
-// use clsx here instead of cns since it erroneously merges text-sds-gray-500 and text-sds-caps-xxxs
+// use clsx here instead of cns since it erroneously merges text-sds-color-primitive-gray-500 and text-sds-caps-xxxs
 const sectionHeaderStyles = cnsNoMerge(
   'font-semibold uppercase',
-  'text-sds-gray-black',
+  'text-sds-color-primitive-common-black',
   'text-sds-caps-xxxs leading-sds-caps-xxxs tracking-sds-caps',
   'mb-sds-xs',
 )
@@ -65,7 +65,7 @@ export function DepositionOverview() {
         <div className="flex-1 max-w-[260px]">
           <h3 className={sectionHeaderStyles}>{t('depositionData')}</h3>
           <p className="flex flex-row gap-sds-xs">
-            <span className="font-semibold text-sds-gray-black">
+            <span className="font-semibold text-sds-color-primitive-common-black">
               {t('annotations')}:
             </span>
             {annotationsCount.toLocaleString()}
diff --git a/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLink.tsx b/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLink.tsx
index ceaf12e2d..b55cedc1d 100644
--- a/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLink.tsx
+++ b/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLink.tsx
@@ -16,7 +16,7 @@ export function MethodLink({
 
   return (
     <span className={cns('flex flex-row', className)}>
-      <span className="text-sds-gray-black items-center flex flex-row">
+      <span className="text-sds-color-primitive-common-black items-center flex flex-row">
         {icon}
         <span className="font-semibold ml-sds-xxs mr-sds-xs">
           {t(i18nLabel)}:
diff --git a/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksMetadataTable.tsx b/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksMetadataTable.tsx
index 3d7238b87..e2375a634 100644
--- a/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksMetadataTable.tsx
+++ b/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksMetadataTable.tsx
@@ -30,7 +30,7 @@ function MethodLinkList({
 
   if (links.length === 0) {
     return (
-      <p className="text-sds-body-s leading-sds-body-s text-sds-gray-500">
+      <p className="text-sds-body-s leading-sds-body-s text-sds-color-primitive-gray-500">
         {t('notSubmitted')}
       </p>
     )
@@ -44,7 +44,8 @@ function MethodLinkList({
             {...link}
             className="text-sds-body-s leading-sds-body-s whitespace-nowrap overflow-hidden text-ellipsis"
             linkProps={{
-              className: 'text-sds-info-400 overflow-hidden text-ellipsis',
+              className:
+                'text-sds-color-primitive-blue-400  overflow-hidden text-ellipsis',
             }}
           />
         </li>
@@ -92,10 +93,10 @@ function MethodSummarySection({
     <div>
       {label && (
         <div className="flex flex-row gap-[10px] mt-sds-xs mb-[10px] items-center whitespace-nowrap">
-          <p className="uppercase text-sds-caps-xxxs leading-sds-caps-xxxs font-semibold text-sds-gray-600 basis-0 flex-initial">
+          <p className="uppercase text-sds-caps-xxxs leading-sds-caps-xxxs font-semibold text-sds-color-primitive-gray-600 basis-0 flex-initial">
             {label}
           </p>
-          <div className="flex-grow h-[1px] bg-sds-gray-300" />
+          <div className="flex-grow h-[1px] bg-sds-color-primitive-gray-300" />
         </div>
       )}
       <MetadataTable
diff --git a/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksOverview.tsx b/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksOverview.tsx
index 649c696ed..b62954acf 100644
--- a/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksOverview.tsx
+++ b/frontend/packages/data-portal/app/components/Deposition/MethodLinks/MethodLinksOverview.tsx
@@ -47,7 +47,7 @@ function MethodTypeSection({
             sdsIcon="InfoCircle"
             sdsSize="xs"
             sdsType="static"
-            className="!text-sds-gray-500"
+            className="!text-sds-color-primitive-gray-500"
           />
         </Tooltip>
       </p>
@@ -62,7 +62,7 @@ function MethodTypeSection({
               {...link}
               className="text-sds-body-xxs leading-sds-body-xxs"
               linkProps={{
-                className: 'text-sds-gray-600',
+                className: 'text-sds-color-primitive-gray-600',
                 variant: 'dashed-underlined',
               }}
             />
@@ -79,14 +79,14 @@ export function MethodLinksOverview() {
 
   const { deposition } = useDepositionById()
 
-  const separator = <div className="h-[1px] bg-sds-gray-300" />
+  const separator = <div className="h-[1px] bg-sds-color-primitive-gray-300" />
 
   return (
     <div>
       <PageHeaderSubtitle className="mb-sds-m">
         {t('annotationMethodsSummary')}
       </PageHeaderSubtitle>
-      <div className="p-sds-l flex flex-col gap-sds-l bg-sds-gray-100 rounded-sds-m">
+      <div className="p-sds-l flex flex-col gap-sds-l bg-sds-color-primitive-gray-100  rounded-sds-m">
         {deposition.annotation_methods
           .sort(
             (a, b) =>
diff --git a/frontend/packages/data-portal/app/components/Download/DirectDownloadTab.tsx b/frontend/packages/data-portal/app/components/Download/DirectDownloadTab.tsx
index ff0b6d409..a9144c2bf 100644
--- a/frontend/packages/data-portal/app/components/Download/DirectDownloadTab.tsx
+++ b/frontend/packages/data-portal/app/components/Download/DirectDownloadTab.tsx
@@ -40,7 +40,7 @@ export function DirectDownloadTab() {
         </Button>
       )}
 
-      <p className="text-sds-body-xs leading-sds-body-xs text-sds-gray-500">
+      <p className="text-sds-body-xs leading-sds-body-xs text-sds-color-primitive-gray-500">
         {t('ifYouEncounterIssuesWithDownloadTime')}
       </p>
     </div>
diff --git a/frontend/packages/data-portal/app/components/Download/DownloadModal.tsx b/frontend/packages/data-portal/app/components/Download/DownloadModal.tsx
index 59e0ee2ab..517ef3af1 100644
--- a/frontend/packages/data-portal/app/components/Download/DownloadModal.tsx
+++ b/frontend/packages/data-portal/app/components/Download/DownloadModal.tsx
@@ -87,7 +87,7 @@ function DownloadModalContent() {
   return (
     <Dialog
       classes={{
-        paper: '!max-w-[600px] border border-sds-gray-100',
+        paper: '!max-w-[600px] border border-sds-color-primitive-gray-100',
       }}
       onClose={closeModal}
       open={!!isModalOpen}
@@ -96,7 +96,7 @@ function DownloadModalContent() {
       <div className="flex justify-between">
         <div className="flex-col gap-sds-xxs py-sds-xxs">
           {modalData.subtitle && (
-            <p className="text-sds-gray-500 text-sds-body-xs leading-sds-body-xs">
+            <p className="text-sds-color-primitive-gray-500 text-sds-body-xs leading-sds-body-xs">
               {modalData.subtitle}
             </p>
           )}
diff --git a/frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx b/frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx
index 207e44c32..17b779bd5 100644
--- a/frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx
+++ b/frontend/packages/data-portal/app/components/Download/DownloadOptionsContent.tsx
@@ -139,7 +139,7 @@ export function DownloadOptionsContent() {
       </p>
 
       {downloadTab && (
-        <div className="border-b-2 border-sds-gray-200">
+        <div className="border-b-2 border-sds-color-primitive-gray-200">
           <Tabs
             onChange={(tab) =>
               setDownloadTab({
diff --git a/frontend/packages/data-portal/app/components/Download/SelectSaveDestination.tsx b/frontend/packages/data-portal/app/components/Download/SelectSaveDestination.tsx
index 930c6a59a..1aab28e76 100644
--- a/frontend/packages/data-portal/app/components/Download/SelectSaveDestination.tsx
+++ b/frontend/packages/data-portal/app/components/Download/SelectSaveDestination.tsx
@@ -10,12 +10,12 @@ export function SelectSaveDestination() {
           1. {t('selectSaveDestination')}:{' '}
         </span>
 
-        <span className="text-sds-body-xs leading-sds-body-xs text-sds-gray-500 lowercase">
+        <span className="text-sds-body-xs leading-sds-body-xs text-sds-color-primitive-gray-500 lowercase">
           — {t('optional')}
         </span>
       </p>
 
-      <p className="text-sds-header-xs leading-sds-header-xs text-sds-gray-600">
+      <p className="text-sds-header-xs leading-sds-header-xs text-sds-color-primitive-gray-600">
         {t('downloadWillSaveToCurrentDirectory')}
       </p>
     </>
diff --git a/frontend/packages/data-portal/app/components/Download/TomogramSelectorLabel.tsx b/frontend/packages/data-portal/app/components/Download/TomogramSelectorLabel.tsx
index fe539ca39..e57befdcd 100644
--- a/frontend/packages/data-portal/app/components/Download/TomogramSelectorLabel.tsx
+++ b/frontend/packages/data-portal/app/components/Download/TomogramSelectorLabel.tsx
@@ -22,7 +22,7 @@ export function TomogramSelectorInputLabel({
         tomogram.reconstruction_method,
         tomogram.processing,
       )}
-      <span className="text-sds-gray-500 ml-sds-xxs">
+      <span className="text-sds-color-primitive-gray-500 ml-sds-xxs">
         {t('unitAngstrom', { value: tomogram.voxel_spacing })}
       </span>
     </div>
diff --git a/frontend/packages/data-portal/app/components/Download/TomogramSelectorOption.tsx b/frontend/packages/data-portal/app/components/Download/TomogramSelectorOption.tsx
index b938e0f8e..fc8d3a912 100644
--- a/frontend/packages/data-portal/app/components/Download/TomogramSelectorOption.tsx
+++ b/frontend/packages/data-portal/app/components/Download/TomogramSelectorOption.tsx
@@ -20,18 +20,18 @@ export function TomogramSelectorOption({
           tomogram.processing,
         )}
       </div>
-      <div className="text-sds-body-xxs text-sds-gray-500">
+      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500">
         {t('tomogramId')}: {tomogram.id}
       </div>
-      <div className="text-sds-body-xxs text-sds-gray-500">
+      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500">
         {t('tomogramSampling')}:{' '}
         {t('unitAngstrom', { value: tomogram.voxel_spacing })} (
         {tomogram.size_x}, {tomogram.size_y}, {tomogram.size_z})px
       </div>
-      <div className="text-sds-body-xxs text-sds-gray-500">
+      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500">
         {t('reconstructionMethod')}: {tomogram.reconstruction_method}
       </div>
-      <div className="text-sds-body-xxs text-sds-gray-500 capitalize">
+      <div className="text-sds-body-xxs text-sds-color-primitive-gray-500 capitalize">
         {t('postProcessing')}: {tomogram.processing}
       </div>
     </div>
diff --git a/frontend/packages/data-portal/app/components/Drawer.tsx b/frontend/packages/data-portal/app/components/Drawer.tsx
index eaad22656..bc572a40e 100644
--- a/frontend/packages/data-portal/app/components/Drawer.tsx
+++ b/frontend/packages/data-portal/app/components/Drawer.tsx
@@ -28,7 +28,7 @@ export function Drawer({
           <motion.div
             ref={drawerRef}
             className={cns(
-              'flex flex-auto bg-sds-gray-white',
+              'flex flex-auto bg-sds-color-primitive-common-white',
               'max-w-[490px] min-w-[490px]',
               'z-20 fixed right-0',
 
diff --git a/frontend/packages/data-portal/app/components/Filters/DropdownFilterButton.tsx b/frontend/packages/data-portal/app/components/Filters/DropdownFilterButton.tsx
index 4128108b6..d95d3cdfb 100644
--- a/frontend/packages/data-portal/app/components/Filters/DropdownFilterButton.tsx
+++ b/frontend/packages/data-portal/app/components/Filters/DropdownFilterButton.tsx
@@ -43,7 +43,7 @@ export function DropdownFilterButton({
       <Button
         className={cns(
           'flex items-center gap-sds-xs group',
-          open && '!bg-sds-gray-100',
+          open && '!bg-sds-color-primitive-gray-100',
         )}
         ref={buttonRef}
         onClick={() => {
@@ -54,7 +54,7 @@ export function DropdownFilterButton({
         <span
           className={cns(
             'font-semibold group-hover:text-black transition-colors text-sm',
-            open ? 'text-black' : 'text-sds-gray-500',
+            open ? 'text-black' : 'text-sds-color-primitive-gray-500',
           )}
         >
           {label}
@@ -63,7 +63,7 @@ export function DropdownFilterButton({
         <Icon
           className={cns(
             'group-hover:!fill-black transition-colors',
-            open ? '!fill-black' : '!fill-sds-gray-500',
+            open ? '!fill-black' : '!fill-sds-color-primitive-gray-500',
           )}
           sdsIcon="ChevronDown"
           sdsSize="xs"
@@ -78,13 +78,13 @@ export function DropdownFilterButton({
             return (
               <div className="pl-sds-s flex flex-col">
                 {filter.label && (
-                  <p className="text-sds-body-xs leading-sds-body-xs text-sds-gray-500 uppercase">
+                  <p className="text-sds-body-xs leading-sds-body-xs text-sds-color-primitive-gray-500 uppercase">
                     {filter.label}
                   </p>
                 )}
 
                 <div>
-                  <div className="bg-sds-primary-400 rounded-sds-m py-sds-xxs px-sds-s inline-flex items-center gap-sds-s">
+                  <div className="bg-sds-color-primitive-blue-400 rounded-sds-m py-sds-xxs px-sds-s inline-flex items-center gap-sds-s">
                     <span className="text-sds-body-xs leading-sds-body-xs font-semibold text-white">
                       {getPrefixedId(filter.value, filter.queryParam)}
                     </span>
diff --git a/frontend/packages/data-portal/app/components/Filters/FilterSection.tsx b/frontend/packages/data-portal/app/components/Filters/FilterSection.tsx
index d4db34f79..38301a0e9 100644
--- a/frontend/packages/data-portal/app/components/Filters/FilterSection.tsx
+++ b/frontend/packages/data-portal/app/components/Filters/FilterSection.tsx
@@ -15,7 +15,7 @@ export function FilterSection({
     <div
       className={cns(
         'pl-sds-l py-sds-default',
-        border && 'border-b border-sds-gray-300',
+        border && 'border-b border-sds-color-primitive-gray-300',
       )}
     >
       <p className="font-semibold text-sds-header-s leading-sds-header-s pl-sds-s">
diff --git a/frontend/packages/data-portal/app/components/Filters/Filters.module.css b/frontend/packages/data-portal/app/components/Filters/Filters.module.css
index e4176d09f..a96ef3f35 100644
--- a/frontend/packages/data-portal/app/components/Filters/Filters.module.css
+++ b/frontend/packages/data-portal/app/components/Filters/Filters.module.css
@@ -1,10 +1,13 @@
 /* stylelint-disable selector-class-pattern */
 
 .boolean {
-  :global(.MuiTypography-root) {
-    font-size: theme('fontSize.sds-body-s') !important;
-    font-weight: theme('fontWeight.semibold') !important;
-    color: theme('colors.sds-color-primitive-gray-500') !important;
+  :global(.MuiFormControlLabel-root) {
+    @apply !m-0 !items-center;
+  }
+
+  :global(.MuiTypography-root) span span {
+    @apply !text-sds-body-s !leading-sds-body-s font-semibold;
+    @apply !text-sds-color-primitive-gray-500;
   }
 }
 
@@ -33,8 +36,22 @@
 }
 
 .popper {
+  /* stylelint-disable-next-line no-descending-specificity */
+  :global(.MuiPaper-root) {
+    @apply p-4;
+
+    /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector, no-descending-specificity */
+    & > div > div {
+      @apply m-0 p-0;
+    }
+  }
+
+  :global(.MuiAutocomplete-listbox) {
+    @apply !p-0;
+  }
+
   :global(.MuiMenuItem-root) > span:nth-child(1) {
-    @apply flex items-center justify-center;
+    @apply flex items-center p-0;
   }
 }
 
diff --git a/frontend/packages/data-portal/app/components/Filters/GroundTruthAnnotationFilter.tsx b/frontend/packages/data-portal/app/components/Filters/GroundTruthAnnotationFilter.tsx
index c134bf54f..fd93c9052 100644
--- a/frontend/packages/data-portal/app/components/Filters/GroundTruthAnnotationFilter.tsx
+++ b/frontend/packages/data-portal/app/components/Filters/GroundTruthAnnotationFilter.tsx
@@ -30,7 +30,7 @@ export function GroundTruthAnnotationFilter({
       />
       {/* FIXME: once sds upgraded to 0.20.x delete below line and remove fragment wrapper */}
       {depositionPageVariant && (
-        <p className="pl-[32px] text-sds-body-xxs leading-sds-body-xxs text-sds-gray-500">
+        <p className="pl-9 text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-500">
           {t('depositionAnnotationsOnly')}
         </p>
       )}
diff --git a/frontend/packages/data-portal/app/components/Filters/MultiInputFilter.tsx b/frontend/packages/data-portal/app/components/Filters/MultiInputFilter.tsx
index 700956ac1..58383a4a0 100644
--- a/frontend/packages/data-portal/app/components/Filters/MultiInputFilter.tsx
+++ b/frontend/packages/data-portal/app/components/Filters/MultiInputFilter.tsx
@@ -66,7 +66,7 @@ export function MultiInputFilter({
             {title ?? i18n.filterByAnyOfTheFollowing}
           </p>
 
-          <p className="text-sds-gray-600 text-sds-body-xxs leading-sds-body-xxs">
+          <p className="text-sds-color-primitive-gray-600 text-sds-body-xxs leading-sds-body-xxs">
             {subtitle ?? `(${i18n.limitOneValuePerField})`}
           </p>
         </>
diff --git a/frontend/packages/data-portal/app/components/Filters/RegexFilter.tsx b/frontend/packages/data-portal/app/components/Filters/RegexFilter.tsx
index 931de82ee..345304309 100644
--- a/frontend/packages/data-portal/app/components/Filters/RegexFilter.tsx
+++ b/frontend/packages/data-portal/app/components/Filters/RegexFilter.tsx
@@ -50,7 +50,7 @@ export function RegexFilter({
             {title}
           </p>
 
-          <p className="text-sds-gray-600 text-sds-body-xxs leading-sds-body-xxs">
+          <p className="text-sds-color-primitive-gray-600 text-sds-body-xxs leading-sds-body-xxs">
             {`(${t('limitOneValuePerField')})`}
           </p>
         </>
diff --git a/frontend/packages/data-portal/app/components/Filters/SelectFilter.tsx b/frontend/packages/data-portal/app/components/Filters/SelectFilter.tsx
index 1532774af..3ff5cb2bb 100644
--- a/frontend/packages/data-portal/app/components/Filters/SelectFilter.tsx
+++ b/frontend/packages/data-portal/app/components/Filters/SelectFilter.tsx
@@ -123,7 +123,11 @@ export function SelectFilter<
         groupBy,
         title,
         PopperBaseProps: {
-          className: cns(popperClassName, multiple && styles.popper),
+          className: cns(
+            '!w-full max-w-[240px]',
+            popperClassName,
+            styles.popper,
+          ),
         },
       }}
       InputDropdownProps={
diff --git a/frontend/packages/data-portal/app/components/Filters/TiltRangeFilter.tsx b/frontend/packages/data-portal/app/components/Filters/TiltRangeFilter.tsx
index 436959a4c..13f30ba4e 100644
--- a/frontend/packages/data-portal/app/components/Filters/TiltRangeFilter.tsx
+++ b/frontend/packages/data-portal/app/components/Filters/TiltRangeFilter.tsx
@@ -136,7 +136,7 @@ export function TiltRangeFilter() {
           />
         </div>
 
-        <p className="text-sds-gray-600 text-sds-body-xxs leading-sds-body-xxs">
+        <p className="text-sds-color-primitive-gray-600 text-sds-body-xxs leading-sds-body-xxs">
           {t('tiltRangeFilterDescription')}
         </p>
       </div>
diff --git a/frontend/packages/data-portal/app/components/I18n.tsx b/frontend/packages/data-portal/app/components/I18n.tsx
index 3ae713518..3c475a55a 100644
--- a/frontend/packages/data-portal/app/components/I18n.tsx
+++ b/frontend/packages/data-portal/app/components/I18n.tsx
@@ -37,7 +37,7 @@ export function I18n({ i18nKey, components, linkProps, ...props }: Props) {
 
         url: (
           <Link
-            className="text-sds-primary-500"
+            className="text-sds-color-primitive-blue-400"
             {...(linkProps as Required<Partial<VariantLinkProps>, 'to'>)}
           >
             {/* This will get replaced by I18next */}
diff --git a/frontend/packages/data-portal/app/components/Index/IndexCTA.tsx b/frontend/packages/data-portal/app/components/Index/IndexCTA.tsx
index e287c6a4d..060a69d98 100644
--- a/frontend/packages/data-portal/app/components/Index/IndexCTA.tsx
+++ b/frontend/packages/data-portal/app/components/Index/IndexCTA.tsx
@@ -39,7 +39,7 @@ export function IndexCTA() {
   const { t } = useI18n()
 
   return (
-    <div className="py-sds-xxl flex flex-col gap-sds-xl relative after:h-full after:w-[200vw] after:bg-sds-primary-100 after:absolute after:top-0 after:-translate-x-1/2 after:-z-10">
+    <div className="py-sds-xxl flex flex-col gap-sds-xl relative after:h-full after:w-[200vw] after:bg-sds-color-primitive-blue-100 after:absolute after:top-0 after:-translate-x-1/2 after:-z-10">
       <h3 className="font-sds-semibold font-semibold text-sds-header-xl leading-sds-header-xl">
         <I18n i18nKey="helpUsAchieveThisVision" />
       </h3>
@@ -55,14 +55,14 @@ export function IndexCTA() {
           buttonText={t('browseData')}
           url="/browse-data/datasets"
         />
-        <div className="bg-sds-gray-200 w-sds-xxxs row-span-2" />
+        <div className="bg-sds-color-primitive-gray-200 w-sds-xxxs row-span-2" />
         <CTA
           title={t('contributeYourData')}
           text={t('contributeCta')}
           buttonText={t('tellUsMore')}
           url={t('urlDataContributionForm')}
         />
-        <div className="bg-sds-gray-200 w-sds-xxxs row-span-2" />
+        <div className="bg-sds-color-primitive-gray-200 w-sds-xxxs row-span-2" />
         <CTA
           title={t('participateInOurCompetition')}
           text={t('participateInOurCompetitionCTA')}
diff --git a/frontend/packages/data-portal/app/components/Index/IndexContent.tsx b/frontend/packages/data-portal/app/components/Index/IndexContent.tsx
index 42ecbcd20..c638da400 100644
--- a/frontend/packages/data-portal/app/components/Index/IndexContent.tsx
+++ b/frontend/packages/data-portal/app/components/Index/IndexContent.tsx
@@ -46,8 +46,8 @@ export function IndexContent() {
         <IndexCTA />
         <IndexContributors />
         <div className="flex flex-col gap-sds-m">
-          <div className="flex-initial h-sds-xxxs bg-sds-gray-200" />
-          <p className="text-sds-body-xxxs leading-sds-body-xxxs text-sds-gray-600">
+          <div className="flex-initial h-sds-xxxs bg-sds-color-primitive-gray-200" />
+          <p className="text-sds-body-xxxs leading-sds-body-xxxs text-sds-color-primitive-gray-600">
             <I18n i18nKey="landingHeaderImageAttribution" />
           </p>
         </div>
diff --git a/frontend/packages/data-portal/app/components/InlineMetadata.tsx b/frontend/packages/data-portal/app/components/InlineMetadata.tsx
index 9426bdc4c..b4dc920cf 100644
--- a/frontend/packages/data-portal/app/components/InlineMetadata.tsx
+++ b/frontend/packages/data-portal/app/components/InlineMetadata.tsx
@@ -24,7 +24,7 @@ export function InlineMetadata({
         <li
           className={cns(
             'flex flex-row items-baseline justify-left gap-sds-xxs',
-            subheader && 'text-sds-gray-500',
+            subheader && 'text-sds-color-primitive-gray-500',
           )}
           key={key + value}
         >
@@ -32,7 +32,7 @@ export function InlineMetadata({
             className={cnsNoMerge(
               'font-semibold',
               subheader
-                ? 'text-sds-gray-600 tracking-sds-body-xxs text-sds-caps-xxs leading-sds-caps-xxs'
+                ? 'text-sds-color-primitive-gray-600 tracking-sds-body-xxs text-sds-caps-xxs leading-sds-caps-xxs'
                 : 'text-sds-body-xxs leading-sds-body-xxs',
               uppercase && 'uppercase',
               subheader && uppercase && 'tracking-sds-caps',
@@ -59,7 +59,7 @@ export function InlineMetadata({
 
   if (label) {
     return (
-      <div className="flex flex-row gap-sds-xl text-sds-gray-black items-baseline">
+      <div className="flex flex-row gap-sds-xl text-sds-color-primitive-common-black items-baseline">
         <span className="text-sds-caps-xxxs leading-sds-caps-xxxs font-semibold uppercase tracking-sds-caps">
           {label}
         </span>
diff --git a/frontend/packages/data-portal/app/components/KeyPhoto.tsx b/frontend/packages/data-portal/app/components/KeyPhoto.tsx
index 91de3e2dd..2c1a80ead 100644
--- a/frontend/packages/data-portal/app/components/KeyPhoto.tsx
+++ b/frontend/packages/data-portal/app/components/KeyPhoto.tsx
@@ -25,7 +25,7 @@ export function KeyPhoto({
     <div
       className={cns(
         'flex-shrink-0 basis-[134px] aspect-[4/3] min-w-[134px]',
-        'flex items-center justify-center bg-sds-gray-100',
+        'flex items-center justify-center bg-sds-color-primitive-gray-100',
         'rounded-sds-m',
 
         // crop image to container dimensions
@@ -41,7 +41,7 @@ export function KeyPhoto({
           'group-hover:before:flex-wrap',
           'group-hover:before:content-center',
           'group-hover:before:content-i18n',
-          'group-hover:before:text-sds-gray-white',
+          'group-hover:before:text-sds-color-primitive-common-white',
           'group-hover:before:font-semibold',
           'group-hover:before:text-center',
         ],
@@ -59,7 +59,7 @@ export function KeyPhoto({
           />
         ))
         .otherwise(() => (
-          <KeyPhotoFallbackIcon className="text-sds-gray-200 font-normal aspect-square w-1/5" />
+          <KeyPhotoFallbackIcon className="text-sds-color-primitive-gray-200 font-normal aspect-square w-1/5" />
         ))}
     </div>
   )
diff --git a/frontend/packages/data-portal/app/components/Layout/CryoETHomeLink.tsx b/frontend/packages/data-portal/app/components/Layout/CryoETHomeLink.tsx
index 940aa45f5..84631b7a9 100644
--- a/frontend/packages/data-portal/app/components/Layout/CryoETHomeLink.tsx
+++ b/frontend/packages/data-portal/app/components/Layout/CryoETHomeLink.tsx
@@ -3,11 +3,11 @@ import { i18n } from 'app/i18n'
 
 export function CryoETHomeLink() {
   return (
-    <div className="flex items-center gap-sds-s text-sds-gray-white">
+    <div className="flex items-center gap-sds-s text-sds-color-primitive-common-white">
       <Link className="text-sds-header-m font-semibold ml-2 " to="/">
         {i18n.title}
       </Link>
-      <div className="px-sds-xs py-sds-xxxs bg-sds-info-400 rounded-sds-m text-sds-body-xxxs">
+      <div className="px-sds-xs py-sds-xxxs bg-sds-color-primitive-blue-400 rounded-sds-m text-sds-body-xxxs">
         {i18n.beta}
       </div>
     </div>
diff --git a/frontend/packages/data-portal/app/components/Layout/Footer.tsx b/frontend/packages/data-portal/app/components/Layout/Footer.tsx
index fc02995be..055e422d9 100644
--- a/frontend/packages/data-portal/app/components/Layout/Footer.tsx
+++ b/frontend/packages/data-portal/app/components/Layout/Footer.tsx
@@ -47,14 +47,14 @@ export function Footer() {
       {LEGAL_LINKS.map(({ label, href }, idx) => (
         <Fragment key={label + href}>
           <Link
-            className="text-sds-gray-white hover:text-sds-gray-300"
+            className="text-sds-color-primitive-common-white hover:text-sds-color-primitive-gray-300"
             to={href}
           >
             {label}
           </Link>
 
           {idx !== LEGAL_LINKS.length - 1 && (
-            <div className="h-sds-l w-px bg-sds-gray-300" />
+            <div className="h-sds-l w-px bg-sds-color-primitive-gray-300" />
           )}
         </Fragment>
       ))}
@@ -67,7 +67,7 @@ export function Footer() {
         <CZIIcon />
       </Link>
 
-      <div className="h-[34px] w-px bg-sds-gray-white/30" />
+      <div className="h-[34px] w-px bg-sds-color-primitive-common-white/30" />
 
       <Link to="https://www.czimaginginstitute.org/">
         <ImageInstituteIcon />
@@ -76,7 +76,7 @@ export function Footer() {
   )
 
   return (
-    <footer className="bg-sds-gray-black min-h-[213px] p-sds-xxl flex flex-col flex-shrink-0">
+    <footer className="bg-sds-color-primitive-common-black min-h-[213px] p-sds-xxl flex flex-col flex-shrink-0">
       <div className="flex items-center flex-wrap flex-col sm:flex-row sm:gap-y-sds-xxl">
         <CryoETHomeLink />
 
@@ -93,7 +93,7 @@ export function Footer() {
           {DEV_LINKS.map(({ label, href }) => (
             <Link
               key={label + href}
-              className="text-sds-gray-white hover:text-sds-gray-300"
+              className="text-sds-color-primitive-common-white hover:text-sds-color-primitive-gray-300"
               to={href}
             >
               {label}
diff --git a/frontend/packages/data-portal/app/components/Layout/TopNavigation.tsx b/frontend/packages/data-portal/app/components/Layout/TopNavigation.tsx
index 8c00fb849..b204cd1f9 100644
--- a/frontend/packages/data-portal/app/components/Layout/TopNavigation.tsx
+++ b/frontend/packages/data-portal/app/components/Layout/TopNavigation.tsx
@@ -39,7 +39,7 @@ export function TopNavigation() {
   return (
     <nav
       className={cns(
-        'bg-sds-gray-black text-sds-gray-white',
+        'bg-sds-color-primitive-common-black text-sds-color-primitive-common-white',
         'flex h-[45px] flex-shrink-0 items-center px-sds-xl',
         'sticky top-0 z-30',
       )}
@@ -55,8 +55,8 @@ export function TopNavigation() {
             'text-sds-header-s leading-sds-header-s font-semibold mr-sds-xxl p-0',
 
             link.isActive(pathname)
-              ? 'text-sds-gray-white'
-              : 'text-sds-gray-400 hover:text-sds-gray-white',
+              ? 'text-sds-color-primitive-common-white'
+              : 'text-sds-color-primitive-gray-400 hover:text-sds-color-primitive-common-white',
           )}
           to={link.link}
           key={link.link}
diff --git a/frontend/packages/data-portal/app/components/MDX/MdxPageTitle.tsx b/frontend/packages/data-portal/app/components/MDX/MdxPageTitle.tsx
index d8bf6b749..bf7735a4f 100644
--- a/frontend/packages/data-portal/app/components/MDX/MdxPageTitle.tsx
+++ b/frontend/packages/data-portal/app/components/MDX/MdxPageTitle.tsx
@@ -18,7 +18,7 @@ export function MdxPageTitle({
       </h1>
 
       {lastModified && (
-        <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600">
+        <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
           {t('lastUpdated')}: {lastModified}
         </p>
       )}
diff --git a/frontend/packages/data-portal/app/components/MLChallenge/MLChallengeHeader.tsx b/frontend/packages/data-portal/app/components/MLChallenge/MLChallengeHeader.tsx
index 2cbf6bcfb..5c1aa80a8 100644
--- a/frontend/packages/data-portal/app/components/MLChallenge/MLChallengeHeader.tsx
+++ b/frontend/packages/data-portal/app/components/MLChallenge/MLChallengeHeader.tsx
@@ -3,7 +3,7 @@ import { useI18n } from 'app/hooks/useI18n'
 function ChallengeInfo({ title, content }: { title: string; content: string }) {
   return (
     <div className="font-semibold">
-      <p className="text-sds-header-xxxs leading-sds-header-xxxs text-sds-gray-600">
+      <p className="text-sds-header-xxxs leading-sds-header-xxxs text-sds-color-primitive-gray-600">
         {title}
       </p>
       <p className="text-sds-body-l leading-sds-body-l">{content}</p>
@@ -15,7 +15,7 @@ export function MLChallengeHeader() {
   const { t } = useI18n()
 
   return (
-    <div className="bg-sds-primary-200 flex flex-col justify-center py-sds-xxl text-center">
+    <div className="bg-sds-color-primitive-blue-200 flex flex-col justify-center py-sds-xxl text-center">
       <h1 className="text-sds-header-xxl leading-sds-header-xxl font-semibold">
         {t('cryoetDataAnnotationMLComp')}
       </h1>
@@ -26,7 +26,7 @@ export function MLChallengeHeader() {
 
       <div className="flex items-center mt-sds-xl justify-center">
         <ChallengeInfo title={t('starts')} content={t('fall2024')} />
-        <div className="h-full w-px bg-sds-gray-400 mx-sds-xl" />
+        <div className="h-full w-px bg-sds-color-primitive-gray-400 mx-sds-xl" />
         <ChallengeInfo title={t('prizes')} content={t('prizeTotal')} />
       </div>
     </div>
diff --git a/frontend/packages/data-portal/app/components/MLChallenge/MainContent.tsx b/frontend/packages/data-portal/app/components/MLChallenge/MainContent.tsx
index e3dcf3fcb..c07c1d2c3 100644
--- a/frontend/packages/data-portal/app/components/MLChallenge/MainContent.tsx
+++ b/frontend/packages/data-portal/app/components/MLChallenge/MainContent.tsx
@@ -37,10 +37,10 @@ function Section({
         'py-sds-xxl flex flex-col',
         color &&
           'relative after:h-full after:w-[200vw] after:absolute after:top-0 after:-translate-x-1/2 after:-z-10',
-        color === 'primary100' && 'after:bg-sds-primary-100 ',
-        color === 'primary200' && 'after:bg-sds-primary-200 ',
-        color === 'gray100' && 'after:bg-sds-gray-100 ',
-        color === 'gray500' && 'after:bg-sds-gray-500 ',
+        color === 'primary100' && 'after:bg-sds-color-primitive-blue-100 ',
+        color === 'primary200' && 'after:bg-sds-color-primitive-blue-200 ',
+        color === 'gray100' && 'after:bg-sds-color-primitive-gray-100 ',
+        color === 'gray500' && 'after:bg-sds-color-primitive-gray-500 ',
         className,
       )}
     >
@@ -111,7 +111,7 @@ export function MainContent() {
           <h2 className="text-sds-header-xl leading-sds-header-xl font-semibold mb-sds-xl">
             {t('competitionDetails')}
           </h2>
-          <p className="text-sds-caps-xxs leading-sds-caps-xxs font-semibold uppercase text-sds-gray-500">
+          <p className="text-sds-caps-xxs leading-sds-caps-xxs font-semibold uppercase text-sds-color-primitive-gray-500">
             {t('moreInfoComingSoon')}
           </p>
         </div>
@@ -122,7 +122,7 @@ export function MainContent() {
         <h2 className="text-sds-header-xl leading-sds-header-xl font-semibold mb-sds-xl">
           {t('howToParticipate')}
         </h2>
-        <p className="text-sds-caps-xxs leading-sds-caps-xxs font-semibold uppercase text-sds-gray-500">
+        <p className="text-sds-caps-xxs leading-sds-caps-xxs font-semibold uppercase text-sds-color-primitive-gray-500">
           {t('moreInfoComingSoon')}
         </p>
       </Section>
@@ -132,9 +132,9 @@ export function MainContent() {
         <h2 className="text-sds-header-xl leading-sds-header-xl font-semibold">
           {t('competitionData')}
         </h2>
-        <div className="p-sds-xxl bg-sds-gray-white border border-sds-gray-200 rounded-sds-m shadow-sds-l flex flex-row gap-sds-xxl justify-between">
+        <div className="p-sds-xxl bg-sds-color-primitive-common-white border border-sds-color-primitive-gray-200 rounded-sds-m shadow-sds-l flex flex-row gap-sds-xxl justify-between">
           <div>
-            <p className="text-sds-caps-xxxs leading-sds-caps-xxxs font-semibold uppercase text-sds-gray-500 mb-sds-xs">
+            <p className="text-sds-caps-xxxs leading-sds-caps-xxxs font-semibold uppercase text-sds-color-primitive-gray-500 mb-sds-xs">
               {t('competitionDataset')}:
             </p>
             <p className="text-sds-header-m leading-sds-header-m font-semibold mb-sds-l">
@@ -147,7 +147,7 @@ export function MainContent() {
               <I18n i18nKey="competitionDataDetails2" />
             </p>
           </div>
-          <FolderIcon className="text-sds-gray-300 min-w-[150px] min-h-[150px]" />
+          <FolderIcon className="text-sds-color-primitive-gray-300 min-w-[150px] min-h-[150px]" />
         </div>
       </Section>
 
@@ -157,7 +157,7 @@ export function MainContent() {
           <h2 className="text-sds-header-xl leading-sds-header-xl font-semibold">
             {t('aboutCryoEtData')}
           </h2>
-          <p className="text-sds-caps-xxs leading-sds-caps-xxs text-sds-gray-500 uppercase font-semibold">
+          <p className="text-sds-caps-xxs leading-sds-caps-xxs text-sds-color-primitive-gray-500 uppercase font-semibold">
             <I18n i18nKey="moreInfoComingSoon" />
           </p>
         </div>
@@ -175,7 +175,7 @@ export function MainContent() {
           <p className="text-sds-body-s leading-sds-body-s">
             {t('tutorialsSectionContent')}
           </p>
-          <p className="text-sds-caps-xxs leading-sds-caps-xxs text-sds-gray-500 uppercase font-semibold">
+          <p className="text-sds-caps-xxs leading-sds-caps-xxs text-sds-color-primitive-gray-500 uppercase font-semibold">
             <I18n i18nKey="comingFall2024" />
           </p>
         </div>
@@ -239,8 +239,8 @@ export function MainContent() {
           />
         </div>
         <div className="flex flex-col items-center">
-          <div className="w-full h-[2px] bg-sds-gray-200 mb-sds-xxl" />
-          <p className="text-sds-caps-xxs leading-sds-caps-xxs uppercase font-semibold text-sds-gray-500 mb-sds-l">
+          <div className="w-full h-[2px] bg-sds-color-primitive-gray-200 mb-sds-xxl" />
+          <p className="text-sds-caps-xxs leading-sds-caps-xxs uppercase font-semibold text-sds-color-primitive-gray-500 mb-sds-l">
             {t('sponsoredBy')}:
           </p>
           <div className="flex flex-col screen-1024:flex-row gap-sds-xl items-center w-full justify-between">
@@ -265,7 +265,7 @@ export function MainContent() {
         <h2 className="text-sds-header-xl leading-sds-header-xl font-semibold mb-sds-xl">
           {t('faq')}
         </h2>
-        <p className="text-sds-caps-xxs leading-sds-caps-xxs font-semibold uppercase text-sds-gray-500">
+        <p className="text-sds-caps-xxs leading-sds-caps-xxs font-semibold uppercase text-sds-color-primitive-gray-500">
           {t('moreInfoComingSoon')}
         </p>
       </Section>
diff --git a/frontend/packages/data-portal/app/components/MenuDropdown.tsx b/frontend/packages/data-portal/app/components/MenuDropdown.tsx
index 477938cd6..6bea74258 100644
--- a/frontend/packages/data-portal/app/components/MenuDropdown.tsx
+++ b/frontend/packages/data-portal/app/components/MenuDropdown.tsx
@@ -26,8 +26,8 @@ export function MenuDropdown({
             'font-semibold',
 
             anchorEl
-              ? 'text-sds-gray-white'
-              : 'text-sds-gray-400 group-hover:text-sds-gray-white',
+              ? 'text-sds-color-primitive-common-white'
+              : 'text-sds-color-primitive-gray-400 group-hover:text-sds-color-primitive-common-white',
           )}
         >
           {title}
@@ -39,8 +39,8 @@ export function MenuDropdown({
           sdsType="iconButton"
           className={cns(
             anchorEl
-              ? '!w-[10px] !h-[10px] !fill-sds-gray-white'
-              : '!w-[10px] !h-[10px] !fill-sds-gray-400 group-hover:!fill-sds-gray-white',
+              ? '!w-[10px] !h-[10px] !fill-sds-color-primitive-common-white'
+              : '!w-[10px] !h-[10px] !fill-sds-color-primitive-gray-400 group-hover:!fill-sds-color-primitive-common-white',
           )}
         />
       </button>
diff --git a/frontend/packages/data-portal/app/components/MetadataDrawer.tsx b/frontend/packages/data-portal/app/components/MetadataDrawer.tsx
index 43b6250ad..b8d4914be 100644
--- a/frontend/packages/data-portal/app/components/MetadataDrawer.tsx
+++ b/frontend/packages/data-portal/app/components/MetadataDrawer.tsx
@@ -68,7 +68,7 @@ export function MetadataDrawer({
       >
         <header className="flex items-start justify-between px-sds-xl pt-sds-xl pb-sds-xxl">
           <div className="flex flex-col gap-sds-s">
-            <p className="text-xs text-sds-gray-600 font-semibold uppercase">
+            <p className="text-xs text-sds-color-primitive-gray-600 font-semibold uppercase">
               {label}
             </p>
 
@@ -80,12 +80,18 @@ export function MetadataDrawer({
           <Button
             onClick={handleClose}
             data-testid={TestIds.MetadataDrawerCloseButton}
+            className="!min-w-[36px] !min-h-[36px] !max-w-[36px] !max-h-[36px]"
           >
-            <Icon color="gray" sdsIcon="XMark" sdsSize="xs" sdsType="button" />
+            <Icon
+              className="!fill-sds-color-primitive-gray-500"
+              sdsIcon="XMark"
+              sdsSize="l"
+              sdsType="button"
+            />
           </Button>
         </header>
 
-        <div className="px-sds-xl border-b-2 border-sds-gray-200">
+        <div className="px-sds-xl border-b-2 border-sds-color-primitive-gray-200">
           <Tabs
             className="!m-0"
             tabs={TAB_OPTIONS}
@@ -100,7 +106,7 @@ export function MetadataDrawer({
             'px-sds-xl pt-sds-xl pb-sds-xxl',
 
             drawer.activeTab === MetadataTab.Metadata &&
-              'divide-y divide-sds-gray-300',
+              'divide-y divide-sds-color-primitive-gray-300',
           )}
         >
           {drawer.activeTab === MetadataTab.Metadata && children}
diff --git a/frontend/packages/data-portal/app/components/ModalSubtitle.tsx b/frontend/packages/data-portal/app/components/ModalSubtitle.tsx
index ff2ebc993..fa8f1816e 100644
--- a/frontend/packages/data-portal/app/components/ModalSubtitle.tsx
+++ b/frontend/packages/data-portal/app/components/ModalSubtitle.tsx
@@ -8,7 +8,7 @@ export function ModalSubtitle({
   value: ReactNode
 }) {
   return (
-    <p className="text-sds-gray-500 text-sds-body-xs leading-sds-body-xs">
+    <p className="text-sds-color-primitive-gray-500 text-sds-body-xs leading-sds-body-xs">
       <span className="font-semibold">{label}: </span>
       <span>{value}</span>
     </p>
diff --git a/frontend/packages/data-portal/app/components/PageHeader.tsx b/frontend/packages/data-portal/app/components/PageHeader.tsx
index a41a6d204..8c6e0ca84 100644
--- a/frontend/packages/data-portal/app/components/PageHeader.tsx
+++ b/frontend/packages/data-portal/app/components/PageHeader.tsx
@@ -70,7 +70,7 @@ export function PageHeader({
                   className={cns(
                     'row-start-1 col-start-2',
                     'flex self-start items-center justify-end gap-sds-xs',
-                    'text-xs text-sds-gray-600',
+                    'text-xs text-sds-color-primitive-gray-600',
                   )}
                 >
                   {releaseDate && (
@@ -80,7 +80,7 @@ export function PageHeader({
                   )}
 
                   {releaseDate && lastModifiedDate && (
-                    <div className="h-3 w-px bg-sds-gray-400" />
+                    <div className="h-3 w-px bg-sds-color-primitive-gray-400" />
                   )}
 
                   {lastModifiedDate && (
diff --git a/frontend/packages/data-portal/app/components/Radio/Radio.tsx b/frontend/packages/data-portal/app/components/Radio/Radio.tsx
index 0fedc0f51..143b8b89e 100644
--- a/frontend/packages/data-portal/app/components/Radio/Radio.tsx
+++ b/frontend/packages/data-portal/app/components/Radio/Radio.tsx
@@ -29,7 +29,7 @@ export function Radio({
       className: cns(
         'flex gap-sds-default p-sds-l transition-colors text-left',
 
-        isActive && 'bg-sds-gray-100',
+        isActive && 'bg-sds-color-primitive-gray-100',
       ),
 
       ...(isActive
@@ -57,7 +57,7 @@ export function Radio({
         <span className="text-sds-header-s leading-sds-header-s font-semibold">
           {label}
         </span>
-        <span className="text-sds-gray-600 text-sds-body-xs leading-sds-body-xs">
+        <span className="text-sds-color-primitive-gray-600 text-sds-body-xs leading-sds-body-xs">
           {description}
         </span>
 
diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationConfidenceTable.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationConfidenceTable.tsx
index 838f189cb..66139dc2b 100644
--- a/frontend/packages/data-portal/app/components/Run/AnnotationConfidenceTable.tsx
+++ b/frontend/packages/data-portal/app/components/Run/AnnotationConfidenceTable.tsx
@@ -28,7 +28,7 @@ export function AnnotationConfidenceTable() {
               ? t('notApplicable')
               : annotation.ground_truth_used ?? '--',
           ],
-          className: 'text-sds-gray-500',
+          className: 'text-sds-color-primitive-gray-500',
         },
         {
           label: t('precision'),
@@ -37,7 +37,7 @@ export function AnnotationConfidenceTable() {
               ? t('notApplicable')
               : annotation.confidence_precision ?? '--',
           ],
-          className: 'text-sds-gray-500',
+          className: 'text-sds-color-primitive-gray-500',
         },
         {
           label: t('recall'),
@@ -46,7 +46,7 @@ export function AnnotationConfidenceTable() {
               ? t('notApplicable')
               : annotation.confidence_recall ?? '--',
           ],
-          className: 'text-sds-gray-500',
+          className: 'text-sds-color-primitive-gray-500',
         },
       ]}
     />
diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationObjectTable/components/ObjectIdLink/ObjectIdLink.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationObjectTable/components/ObjectIdLink/ObjectIdLink.tsx
index d1de21a57..03c2b92e0 100644
--- a/frontend/packages/data-portal/app/components/Run/AnnotationObjectTable/components/ObjectIdLink/ObjectIdLink.tsx
+++ b/frontend/packages/data-portal/app/components/Run/AnnotationObjectTable/components/ObjectIdLink/ObjectIdLink.tsx
@@ -16,7 +16,7 @@ export function ObjectIdLink({ id }: { id: string }) {
   // don't link if no patterns match
   if (link) {
     return (
-      <Link to={link} className="text-sds-primary-400">
+      <Link to={link} className="text-sds-color-primitive-blue-400">
         {id}
       </Link>
     )
diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx
index 86617d8ad..e602e91ad 100644
--- a/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx
+++ b/frontend/packages/data-portal/app/components/Run/AnnotationOveriewTable.tsx
@@ -62,7 +62,7 @@ export function AnnotationOverviewTable() {
                 values: ['Deposition Name'],
                 renderValue: () => (
                   <Link
-                    className="text-sds-primary-400"
+                    className="text-sds-color-primitive-blue-400"
                     to={`/deposition/${annotation.deposition?.id}`}
                   >
                     {annotation.deposition?.title}
@@ -117,14 +117,14 @@ export function AnnotationOverviewTable() {
                             className="text-sds-header-s leading-sds-header-s whitespace-nowrap overflow-hidden text-ellipsis"
                             linkProps={{
                               className:
-                                'text-sds-info-400 overflow-hidden text-ellipsis',
+                                'text-sds-color-primitive-blue-400 overflow-hidden text-ellipsis',
                             }}
                           />
                         </li>
                       ))}
                     </ul>
                   ) : (
-                    <p className="text-sds-body-s leading-sds-body-s text-sds-gray-500">
+                    <p className="text-sds-body-s leading-sds-body-s text-sds-color-primitive-gray-500">
                       {t('notSubmitted')}
                     </p>
                   ),
diff --git a/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx b/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx
index ebd1e874b..36e3fe67f 100644
--- a/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx
+++ b/frontend/packages/data-portal/app/components/Run/AnnotationTable.tsx
@@ -63,7 +63,7 @@ function ConfidenceValue({ value }: { value: number }) {
   return (
     <div className="flex flex-col gap-sds-xxxs">
       <p className="text-sds-header-s leading-sds-header-s">{value}%</p>
-      <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600">
+      <p className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
         {t('confidence')}
       </p>
     </div>
@@ -124,7 +124,7 @@ export function AnnotationTable() {
               {typeof value === 'number' ? (
                 <ConfidenceValue value={value} />
               ) : (
-                <p className="text-sds-body-xs leading-sds-body-xs text-sds-gray-500">
+                <p className="text-sds-body-xs leading-sds-body-xs text-sds-color-primitive-gray-500">
                   {t('na')}
                 </p>
               )}
@@ -168,8 +168,8 @@ export function AnnotationTable() {
                     className={cnsNoMerge(
                       'px-sds-xs py-sds-xxxs',
                       'flex items-center justify-center',
-                      'rounded-sds-m bg-sds-info-200',
-                      'text-sds-body-xxxs leading-sds-body-xxxs text-sds-info-600 whitespace-nowrap',
+                      'rounded-sds-m bg-sds-color-primitive-blue-200',
+                      'text-sds-body-xxxs leading-sds-body-xxxs text-sds-color-primitive-blue-600 whitespace-nowrap',
                     )}
                   >
                     {t('groundTruth')}
@@ -178,7 +178,7 @@ export function AnnotationTable() {
               )}
             </div>
 
-            <div className=" text-sds-gray-600 text-sds-body-xxs leading-sds-header-xxs">
+            <div className=" text-sds-color-primitive-gray-600 text-sds-body-xxs leading-sds-header-xxs">
               <AuthorList authors={annotation.authors} compact />
             </div>
           </TableCell>
@@ -280,20 +280,12 @@ export function AnnotationTable() {
         key: 'confidence_precision',
         header: t('precision'),
         tooltipI18nKey: 'precisionTooltip',
-
-        cellHeaderProps: {
-          arrowPadding: { left: 100 },
-        },
       }),
 
       getConfidenceCell({
         key: 'confidence_recall',
         header: t('recall'),
         tooltipI18nKey: 'recallTooltip',
-
-        cellHeaderProps: {
-          arrowPadding: { left: 120 },
-        },
       }),
 
       columnHelper.display({
@@ -452,11 +444,11 @@ function RowDivider({
 
   return (
     <tr
-      className="bg-sds-gray-100 border-t border-sds-gray-300"
+      className="bg-sds-color-primitive-gray-100 border-t border-sds-color-primitive-gray-300"
       data-testid={TestIds.AnnotationTableDivider}
     >
       <td
-        className="text-sds-header-xxs text-sds-gray-500 p-sds-s leading-sds-header-xs"
+        className="text-sds-header-xxs text-sds-color-primitive-gray-500 p-sds-s leading-sds-header-xs"
         colSpan={1000}
       >
         {t(groundTruth ? 'groundTruthAnnotations' : 'otherAnnotations', {
diff --git a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
index 704df9741..f6114f149 100644
--- a/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
+++ b/frontend/packages/data-portal/app/components/Run/RunHeader.tsx
@@ -128,14 +128,18 @@ export function RunHeader() {
                     key: t('frames'),
                     value: framesCount > 0 ? t('available') : t('notSubmitted'),
                     valueClass:
-                      framesCount > 0 ? undefined : 'text-sds-gray-500',
+                      framesCount > 0
+                        ? undefined
+                        : 'text-sds-color-primitive-gray-500',
                   },
                   {
                     key: t('tiltSeries'),
                     value:
                       tiltSeriesCount > 0 ? t('available') : t('notSubmitted'),
                     valueClass:
-                      tiltSeriesCount > 0 ? undefined : 'text-sds-gray-500',
+                      tiltSeriesCount > 0
+                        ? undefined
+                        : 'text-sds-color-primitive-gray-500',
                   },
                   {
                     key: t('alignmentFile'),
diff --git a/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx b/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx
index f1253aee0..bd8a71ef6 100644
--- a/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx
+++ b/frontend/packages/data-portal/app/components/Run/TomogramMetadataDrawer.tsx
@@ -65,7 +65,7 @@ export function TomogramMetadataDrawer() {
             values: [tomogram.deposition?.title ?? ''],
             renderValue: (value: string) => (
               <Link
-                className="text-sds-primary-400"
+                className="text-sds-color-primitive-blue-400"
                 to={`/deposition/${tomogram.deposition?.id}`}
               >
                 {value}
diff --git a/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx b/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx
index 8bd7d8067..2c220315b 100644
--- a/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx
+++ b/frontend/packages/data-portal/app/components/Run/TomogramTable.tsx
@@ -77,7 +77,7 @@ export function TomogramsTable() {
             <div className="text-sds-body-xxs">
               {t('tomogramId')}: {original.id}
             </div>
-            <div className=" text-sds-gray-600 text-sds-body-xxs leading-sds-header-xxs">
+            <div className=" text-sds-color-primitive-gray-600 text-sds-body-xxs leading-sds-header-xxs">
               <AuthorList authors={original.authors} compact />
             </div>
           </TableCell>
@@ -120,7 +120,7 @@ export function TomogramsTable() {
         cell: ({ getValue, row: { original } }) => (
           <TableCell width={TomogramTableWidths.voxelSpacing}>
             {t('unitAngstrom', { value: getValue() })}
-            <div className="text-sds-body-xxs leading-sds-body-xxs text-sds-gray-600">
+            <div className="text-sds-body-xxs leading-sds-body-xxs text-sds-color-primitive-gray-600">
               ({original.size_x}, {original.size_y}, {original.size_z})px
             </div>
           </TableCell>
diff --git a/frontend/packages/data-portal/app/components/Select.tsx b/frontend/packages/data-portal/app/components/Select.tsx
index 2e2217d26..f81ea0f38 100644
--- a/frontend/packages/data-portal/app/components/Select.tsx
+++ b/frontend/packages/data-portal/app/components/Select.tsx
@@ -115,7 +115,7 @@ export function Select({
         {tooltip && (
           <Tooltip tooltip={tooltip} {...tooltipProps}>
             <Icon
-              className="!fill-sds-gray-500 hover:!fill-sds-primary-400"
+              className="!fill-sds-color-primitive-gray-500 hover:!fill-sds-color-primitive-blue-400"
               sdsIcon="InfoCircle"
               sdsSize="xs"
               sdsType="static"
@@ -129,8 +129,8 @@ export function Select({
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         className={cns(
-          'w-full !bg-white hover:!border-sds-primary-400',
-          open && '!border-sds-primary-400',
+          'w-full !bg-white hover:!border-sds-color-primitive-blue-400',
+          open && '!border-sds-color-primitive-blue-400',
         )}
         label={label}
         sdsStage="userInput"
diff --git a/frontend/packages/data-portal/app/components/Table/CellHeader.tsx b/frontend/packages/data-portal/app/components/Table/CellHeader.tsx
index 593b79291..1c470e06a 100644
--- a/frontend/packages/data-portal/app/components/Table/CellHeader.tsx
+++ b/frontend/packages/data-portal/app/components/Table/CellHeader.tsx
@@ -5,7 +5,7 @@ import {
 import { ReactNode } from 'react'
 
 import {
-  getTooltipProps,
+  Tooltip,
   TooltipArrowPadding,
   TooltipOffset,
 } from 'app/components/Tooltip'
@@ -28,6 +28,7 @@ export function CellHeader({
   | 'tooltipSubtitle'
   | 'tooltipText'
   | 'width'
+  | 'ref'
 > & {
   arrowPadding?: TooltipArrowPadding
   children?: ReactNode
@@ -41,11 +42,6 @@ export function CellHeader({
     <SDSCellHeader
       {...props}
       shouldShowTooltipOnHover={!!tooltip}
-      tooltipProps={getTooltipProps({ arrowPadding, offset })}
-      // TODO Remove ts-ignore when types is updated to use ReactNode
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      tooltipText={tooltip}
       style={{
         maxWidth: columnWidth?.max,
         minWidth: columnWidth?.min,
@@ -54,7 +50,18 @@ export function CellHeader({
       }}
       hideSortIcon={!showSort}
     >
-      <p className="line-clamp-1">{children}</p>
+      <p className="line-clamp-1">
+        <Tooltip
+          className="inline"
+          tooltip={tooltip}
+          arrowPadding={arrowPadding}
+          offset={offset}
+          placement="top"
+        >
+          {children}
+        </Tooltip>
+      </p>
+
       {subHeader && (
         <p className="text-sds-body-xxxs leading-sds-body-xxxs font-normal">
           {subHeader}
diff --git a/frontend/packages/data-portal/app/components/Table/MetadataTable.tsx b/frontend/packages/data-portal/app/components/Table/MetadataTable.tsx
index 9eedb9cbc..1366933b6 100644
--- a/frontend/packages/data-portal/app/components/Table/MetadataTable.tsx
+++ b/frontend/packages/data-portal/app/components/Table/MetadataTable.tsx
@@ -38,7 +38,9 @@ export function MetadataTable({
 
             return (
               <TableRow
-                className={cns((idx + 1) % 2 !== 0 && 'bg-sds-gray-100')}
+                className={cns(
+                  (idx + 1) % 2 !== 0 && 'bg-sds-color-primitive-gray-100',
+                )}
                 key={datum.label + values.join(', ')}
               >
                 <TableCell
@@ -49,7 +51,7 @@ export function MetadataTable({
                 >
                   <span
                     className={cnsNoMerge(
-                      'text-sds-gray-600 items-end font-semibold flex flex-row gap-sds-xxs',
+                      'text-sds-color-primitive-gray-600 items-end font-semibold flex flex-row gap-sds-xxs',
                       small
                         ? 'text-sds-header-xxs leading-sds-header-xxs'
                         : 'text-sds-header-s leading-sds-header-s',
diff --git a/frontend/packages/data-portal/app/components/Table/PageTable.tsx b/frontend/packages/data-portal/app/components/Table/PageTable.tsx
index 697470882..cbde3f66c 100644
--- a/frontend/packages/data-portal/app/components/Table/PageTable.tsx
+++ b/frontend/packages/data-portal/app/components/Table/PageTable.tsx
@@ -14,7 +14,7 @@ export function PageTable<T>({ hoverType, ...props }: PageTableProps<T>) {
         container: '!min-w-fit !overflow-x-visible px-sds-xl',
         row: cns(
           hoverType === 'group' &&
-            'group hover:!bg-sds-gray-100 hover:cursor-pointer',
+            'group hover:!bg-sds-color-primitive-gray-100 hover:cursor-pointer',
           hoverType === 'none' && 'hover:!bg-inherit',
         ),
       }}
diff --git a/frontend/packages/data-portal/app/components/Table/TableCell.tsx b/frontend/packages/data-portal/app/components/Table/TableCell.tsx
index 2abe31d86..d7963351f 100644
--- a/frontend/packages/data-portal/app/components/Table/TableCell.tsx
+++ b/frontend/packages/data-portal/app/components/Table/TableCell.tsx
@@ -1,9 +1,9 @@
-import { CellBasic, CellComponent } from '@czi-sds/components'
+import { CellComponent } from '@czi-sds/components'
 import Skeleton from '@mui/material/Skeleton'
 import { ReactNode } from 'react'
 import { match } from 'ts-pattern'
 
-import { getTooltipProps, Tooltip, TooltipProps } from 'app/components/Tooltip'
+import { Tooltip, TooltipProps } from 'app/components/Tooltip'
 import { TableColumnWidth } from 'app/constants/table'
 import { useIsLoading } from 'app/hooks/useIsLoading'
 import { cns } from 'app/utils/cns'
@@ -54,11 +54,21 @@ export function TableCell({
 
   if (primaryText) {
     return (
-      <CellBasic
-        primaryText={primaryText}
-        tooltipProps={getTooltipProps(tooltipProps)}
-        {...cellProps}
-      />
+      <td
+        className={cns('align-top px-3 py-4', cellProps.className)}
+        style={cellProps.style}
+      >
+        <p className="text-sds-body-s leading-sds-body-s font-normal">
+          <Tooltip
+            className="inline"
+            tooltip={primaryText}
+            placement="top"
+            {...tooltipProps}
+          >
+            {primaryText}
+          </Tooltip>
+        </p>
+      </td>
     )
   }
 
@@ -72,8 +82,8 @@ export function TableCell({
 
   if (tooltip) {
     content = (
-      <Tooltip tooltip={tooltip} {...tooltipProps}>
-        <div>{content}</div>
+      <Tooltip className="inline" tooltip={tooltip} {...tooltipProps}>
+        {content}
       </Tooltip>
     )
   }
diff --git a/frontend/packages/data-portal/app/components/Table/TableCount.tsx b/frontend/packages/data-portal/app/components/Table/TableCount.tsx
index 114c399ce..7024aa291 100644
--- a/frontend/packages/data-portal/app/components/Table/TableCount.tsx
+++ b/frontend/packages/data-portal/app/components/Table/TableCount.tsx
@@ -15,7 +15,7 @@ export function TableCount({
   const { isLoadingDebounced } = useIsLoading()
 
   return (
-    <p className="text-sds-body-xs text-sds-gray-500 whitespace-nowrap mr-sds-xxl">
+    <p className="text-sds-body-xs text-sds-color-primitive-gray-500 whitespace-nowrap mr-sds-xxl">
       {isLoadingDebounced ? (
         <Skeleton className="max-w-" variant="text" />
       ) : (
diff --git a/frontend/packages/data-portal/app/components/TablePageLayout.tsx b/frontend/packages/data-portal/app/components/TablePageLayout.tsx
index d3e964820..1a9b68bc2 100644
--- a/frontend/packages/data-portal/app/components/TablePageLayout.tsx
+++ b/frontend/packages/data-portal/app/components/TablePageLayout.tsx
@@ -83,7 +83,7 @@ export function TablePageLayout({
                 label: (
                   <div>
                     <span>{tab.title}</span>
-                    <span className="text-sds-gray-500 ml-[16px]">
+                    <span className="text-sds-color-primitive-gray-500 ml-[16px]">
                       {tab.filteredCount}
                     </span>
                   </div>
@@ -153,7 +153,7 @@ function TablePageTabContent({
           <div
             className={cns(
               'flex flex-col flex-shrink-0 w-[235px]',
-              'border-t border-r border-sds-gray-300',
+              'border-t border-r border-sds-color-primitive-gray-300',
             )}
           >
             {filterPanel}
@@ -164,8 +164,9 @@ function TablePageTabContent({
           className={cns(
             'flex flex-col flex-auto screen-2040:items-center',
             'pb-sds-xxl',
-            'border-t border-sds-gray-300',
+            'border-t border-sds-color-primitive-gray-300',
             'overflow-x-scroll max-w-full',
+            !banner && 'pt-sds-xl',
           )}
         >
           <div
@@ -176,14 +177,14 @@ function TablePageTabContent({
               filterPanel && 'screen-2040:translate-x-[-100px] max-w-content',
             )}
           >
-            <div className="flex mb-sds-xl px-sds-xl">{banner}</div>
+            {banner && <div className="flex px-sds-xl">{banner}</div>}
 
             <div
               className={cns(
                 'ml-sds-xl p-sds-m flex items-center gap-x-sds-xl  screen-1024:mr-sds-xl',
                 // NOTE: The title background color is gray on the browse datasets and browse depositions pages
                 // If we want to add a description to the single deposition or single run pages, we may need to update this
-                !!description && 'bg-sds-gray-100',
+                !!description && 'bg-sds-color-primitive-gray-100',
               )}
             >
               <p className="text-sds-header-l leading-sds-header-l font-semibold">
@@ -200,7 +201,7 @@ function TablePageTabContent({
                 {learnMoreLink && (
                   <Link
                     to={learnMoreLink}
-                    className="text-sds-primary-400 ml-sds-xxs"
+                    className="text-sds-color-primitive-blue-400 ml-sds-xxs"
                   >
                     {t('learnMore')}
                   </Link>
diff --git a/frontend/packages/data-portal/app/components/Tabs.tsx b/frontend/packages/data-portal/app/components/Tabs.tsx
index d1dcdb242..595716826 100644
--- a/frontend/packages/data-portal/app/components/Tabs.tsx
+++ b/frontend/packages/data-portal/app/components/Tabs.tsx
@@ -29,7 +29,7 @@ export function Tabs<T>({
           // Translate to overlap with bottom gray border used in different places
           // in the UI.
           root: 'translate-y-[2px] !min-h-0',
-          indicator: 'bg-sds-primary-500',
+          indicator: 'bg-sds-color-primitive-blue-500',
           flexContainer: 'gap-sds-xl !pb-sds-xxs',
         }}
       >
@@ -37,7 +37,7 @@ export function Tabs<T>({
           <Tab
             classes={{
               root: cns(
-                'text-sds-gray-500 !text-sds-body-s',
+                'text-sds-color-primitive-gray-500 !text-sds-body-s',
                 '!leading-sds-body-s !font-semibold',
                 '!p-0 !min-w-[max-content] !min-h-0',
                 'transition-colors',
diff --git a/frontend/packages/data-portal/app/components/TiltSeriesQualityScoreBadge.tsx b/frontend/packages/data-portal/app/components/TiltSeriesQualityScoreBadge.tsx
index 414ede671..81af2ede2 100644
--- a/frontend/packages/data-portal/app/components/TiltSeriesQualityScoreBadge.tsx
+++ b/frontend/packages/data-portal/app/components/TiltSeriesQualityScoreBadge.tsx
@@ -24,11 +24,13 @@ export function TiltSeriesQualityScoreBadge({
         match(score)
           .with(
             TiltSeriesScore.VeryPoor,
-            () => 'bg-sds-error-400 text-sds-gray-white',
+            () =>
+              'bg-sds-color-primitive-red-400 text-sds-color-primitive-common-white',
           )
           .with(
             TiltSeriesScore.Poor,
-            () => 'bg-sds-warning-400 text-sds-gray-white',
+            () =>
+              'bg-sds-color-primitive-yellow-400 text-sds-color-primitive-common-white',
           )
           .with(
             P.union(
@@ -36,7 +38,8 @@ export function TiltSeriesQualityScoreBadge({
               TiltSeriesScore.Good,
               TiltSeriesScore.Excellent,
             ),
-            () => 'bg-sds-success-400 text-sds-gray-white',
+            () =>
+              'bg-sds-color-primitive-green-400 text-sds-color-primitive-common-white',
           )
           .otherwise(() => ''),
       )}
diff --git a/frontend/packages/data-portal/app/components/Tooltip.tsx b/frontend/packages/data-portal/app/components/Tooltip.tsx
index 5b362d97f..d63faeeeb 100644
--- a/frontend/packages/data-portal/app/components/Tooltip.tsx
+++ b/frontend/packages/data-portal/app/components/Tooltip.tsx
@@ -4,7 +4,7 @@ import {
 } from '@czi-sds/components'
 import { ReactNode } from 'react'
 
-import { cnsNoMerge } from 'app/utils/cns'
+import { cns, cnsNoMerge } from 'app/utils/cns'
 
 export type TooltipOffset = [number, number]
 
@@ -35,16 +35,22 @@ export function getTooltipProps({
   sdsStyle,
   center,
   size = 'm',
+  classes,
 }: Pick<
   TooltipProps,
-  'arrowPadding' | 'offset' | 'sdsStyle' | 'center' | 'size'
+  'arrowPadding' | 'offset' | 'sdsStyle' | 'center' | 'size' | 'classes'
 > = {}) {
   return {
     arrow: true,
     leaveDelay: 0,
 
     classes: {
-      arrow: sdsStyle === 'dark' ? '!text-black' : '!text-white',
+      ...classes,
+
+      arrow: cns(
+        sdsStyle === 'dark' ? '!text-black' : '!text-white',
+        classes?.arrow,
+      ),
 
       tooltip: cnsNoMerge(
         '!px-sds-l !py-2',
@@ -53,6 +59,8 @@ export function getTooltipProps({
         '!font-normal !text-sds-body-xs !leading-sds-body-xs',
         'shadow-lg',
         size === 's' && 'w-[200px]',
+        'border-solid border border-sds-color-primitive-gray-300',
+        classes?.tooltip,
       ),
     },
 
@@ -93,12 +101,20 @@ export function Tooltip({
   sdsStyle,
   center,
   size,
+  classes,
   ...props
 }: TooltipProps) {
   return (
     <SDSTooltip
       title={tooltip}
-      {...getTooltipProps({ arrowPadding, offset, sdsStyle, center, size })}
+      {...getTooltipProps({
+        arrowPadding,
+        offset,
+        sdsStyle,
+        center,
+        size,
+        classes,
+      })}
       {...props}
     >
       <div className={className}>{children}</div>