diff --git a/static/app/components/charts/breakdownBars.tsx b/static/app/components/charts/breakdownBars.tsx
index 3fa98c6f07dfcd..00dd61d7675c41 100644
--- a/static/app/components/charts/breakdownBars.tsx
+++ b/static/app/components/charts/breakdownBars.tsx
@@ -86,7 +86,9 @@ const Label = styled('span')`
 const Bar = styled('div')<{active?: boolean}>`
   border-radius: 2px;
   background-color: ${p =>
-    p.active ? p.theme.colors.blue200 : p.theme.tokens.border.primary};
+    p.active
+      ? p.theme.tokens.background.transparent.accent.muted
+      : p.theme.tokens.border.primary};
   position: absolute;
   top: 0;
   left: 0;
diff --git a/static/app/components/charts/miniBarChart.tsx b/static/app/components/charts/miniBarChart.tsx
index dfa43d7104c29c..6133199f285f9e 100644
--- a/static/app/components/charts/miniBarChart.tsx
+++ b/static/app/components/charts/miniBarChart.tsx
@@ -275,7 +275,7 @@ function MiniBarChart({
   ...props
 }: Props) {
   const theme = useTheme();
-  const xAxisLineColor: string = theme.tokens.graphics.muted;
+  const xAxisLineColor: string = theme.tokens.border.transparent.neutral.muted;
 
   const updatedSeries: BarChartSeries[] = useMemo(() => {
     if (!series?.length) {
@@ -288,7 +288,11 @@ function MiniBarChart({
 
     const colorList = Array.isArray(colors)
       ? colors
-      : [theme.colors.gray400, theme.colors.blue400, theme.colors.blue400];
+      : [
+          theme.tokens.dataviz.semantic.neutral,
+          theme.tokens.dataviz.semantic.accent,
+          theme.tokens.dataviz.semantic.accent,
+        ];
 
     for (let i = 0; i < series.length; i++) {
       const original = series[i]!;
@@ -324,8 +328,8 @@ function MiniBarChart({
     emphasisColors,
     stacked,
     colors,
-    theme.colors.gray400,
-    theme.colors.blue400,
+    theme.tokens.dataviz.semantic.neutral,
+    theme.tokens.dataviz.semantic.accent,
   ]);
 
   const chartOptions = useMemo(() => {
diff --git a/static/app/components/charts/releaseSeries.tsx b/static/app/components/charts/releaseSeries.tsx
index c3ecfe2548a5ef..43e08b55c4093c 100644
--- a/static/app/components/charts/releaseSeries.tsx
+++ b/static/app/components/charts/releaseSeries.tsx
@@ -251,7 +251,7 @@ class ReleaseSeries extends Component<ReleaseSeriesProps, State> {
     const markLine = MarkLine({
       animation: false,
       lineStyle: {
-        color: theme.colors.blue400,
+        color: theme.tokens.dataviz.semantic.release,
         opacity: 0.3,
         type: 'solid',
         ...lineStyle,
@@ -314,7 +314,7 @@ class ReleaseSeries extends Component<ReleaseSeriesProps, State> {
     return {
       id: 'release-lines',
       seriesName: 'Releases',
-      color: theme.colors.blue200,
+      color: theme.tokens.dataviz.semantic.release,
       data: [],
       markLine,
     };
diff --git a/static/app/components/checkInTimeline/timelineZoom.tsx b/static/app/components/checkInTimeline/timelineZoom.tsx
index 2f941a4eed050d..fe67658b0ca441 100644
--- a/static/app/components/checkInTimeline/timelineZoom.tsx
+++ b/static/app/components/checkInTimeline/timelineZoom.tsx
@@ -173,9 +173,9 @@ function useTimelineZoom<E extends HTMLElement>({enabled = true, onSelect}: Opti
 
 const Selection = styled(motion.div)`
   pointer-events: none;
-  background: ${p => p.theme.colors.gray200};
-  border-left: 1px solid ${p => p.theme.colors.blue200};
-  border-right: 1px solid ${p => p.theme.colors.blue200};
+  background: ${p => p.theme.tokens.background.transparent.neutral.muted};
+  border-left: 1px solid ${p => p.theme.tokens.border.transparent.accent.moderate};
+  border-right: 1px solid ${p => p.theme.tokens.border.transparent.accent.moderate};
   height: 100%;
   position: absolute;
   top: 0;
diff --git a/static/app/components/contentSliderDiff/index.tsx b/static/app/components/contentSliderDiff/index.tsx
index 550f27ba085b38..485dd96b585311 100644
--- a/static/app/components/contentSliderDiff/index.tsx
+++ b/static/app/components/contentSliderDiff/index.tsx
@@ -206,7 +206,7 @@ const DragHandle = styled('div')`
   &:hover,
   &:active {
     &::after {
-      background: ${p => p.theme.colors.blue500};
+      background: ${p => p.theme.tokens.graphics.accent.vibrant};
     }
   }
 
@@ -219,7 +219,7 @@ const DragHandle = styled('div')`
   }
 
   &[data-resizing]::after {
-    background: ${p => p.theme.colors.blue500};
+    background: ${p => p.theme.tokens.graphics.accent.vibrant};
   }
 `;
 
diff --git a/static/app/components/core/alert/alert.tsx b/static/app/components/core/alert/alert.tsx
index 47e0e5c249d9c4..a7c6acfb065bef 100644
--- a/static/app/components/core/alert/alert.tsx
+++ b/static/app/components/core/alert/alert.tsx
@@ -68,32 +68,32 @@ function getAlertTokens(variant: AlertProps['variant'], theme: Theme) {
   switch (variant) {
     case 'info':
       return {
-        background: theme.colors.blue100,
-        iconBackground: theme.colors.chonk.blue400,
-        border: theme.tokens.border.accent,
+        background: theme.tokens.background.transparent.accent.muted,
+        iconBackground: theme.tokens.background.accent.vibrant,
+        border: theme.tokens.border.accent.moderate,
       };
     case 'danger':
       return {
-        background: theme.colors.red100,
-        iconBackground: theme.colors.chonk.red400,
-        border: theme.tokens.border.danger,
+        background: theme.tokens.background.transparent.danger.muted,
+        iconBackground: theme.tokens.background.danger.vibrant,
+        border: theme.tokens.border.danger.moderate,
       };
     case 'warning':
       return {
-        background: theme.colors.yellow100,
-        iconBackground: theme.colors.chonk.yellow400,
-        border: theme.tokens.border.warning,
+        background: theme.tokens.background.transparent.warning.muted,
+        iconBackground: theme.tokens.background.warning.vibrant,
+        border: theme.tokens.border.warning.moderate,
       };
     case 'success':
       return {
-        background: theme.colors.green100,
-        iconBackground: theme.colors.chonk.green400,
-        border: theme.tokens.border.success,
+        background: theme.tokens.background.transparent.success.muted,
+        iconBackground: theme.tokens.background.success.vibrant,
+        border: theme.tokens.border.success.moderate,
       };
     case 'muted':
       return {
-        background: theme.colors.surface500,
-        iconBackground: theme.colors.surface500,
+        background: theme.tokens.background.primary,
+        iconBackground: theme.tokens.background.primary,
         border: theme.tokens.border.primary,
       };
     default:
diff --git a/static/app/components/core/badge/badge.tsx b/static/app/components/core/badge/badge.tsx
index 9f8805f9470afd..63f6834a25dcef 100644
--- a/static/app/components/core/badge/badge.tsx
+++ b/static/app/components/core/badge/badge.tsx
@@ -71,7 +71,7 @@ function makeBadgeTheme(p: BadgeProps, theme: Theme): React.CSSProperties {
     case 'info':
       return {
         color: theme.tokens.content.accent,
-        background: theme.colors.blue100,
+        background: theme.tokens.background.transparent.accent.muted,
       };
     case 'promotion':
       return {
diff --git a/static/app/components/core/badge/tag.tsx b/static/app/components/core/badge/tag.tsx
index 615319cb109eae..2896cf0ca47687 100644
--- a/static/app/components/core/badge/tag.tsx
+++ b/static/app/components/core/badge/tag.tsx
@@ -83,17 +83,17 @@ function makeTagPillTheme(type: TagVariant, theme: Theme): React.CSSProperties {
     case 'info':
       return {
         color: theme.tokens.content.accent,
-        background: theme.colors.blue100,
+        background: theme.tokens.background.transparent.accent.muted,
       };
     case 'promotion':
       return {
         color: theme.tokens.content.promotion,
-        background: theme.colors.pink100,
+        background: theme.tokens.background.transparent.promotion.muted,
       };
     case 'danger':
       return {
         color: theme.tokens.content.danger,
-        background: theme.colors.red100,
+        background: theme.tokens.background.transparent.danger.muted,
       };
     case 'warning':
       return {
@@ -103,7 +103,7 @@ function makeTagPillTheme(type: TagVariant, theme: Theme): React.CSSProperties {
     case 'success':
       return {
         color: theme.tokens.content.success,
-        background: theme.colors.green100,
+        background: theme.tokens.background.transparent.success.muted,
       };
     default:
       unreachable(type);
diff --git a/static/app/components/core/button/styles.tsx b/static/app/components/core/button/styles.tsx
index 4f1bdd181f8db3..3e72eb1bcdc5e0 100644
--- a/static/app/components/core/button/styles.tsx
+++ b/static/app/components/core/button/styles.tsx
@@ -1,5 +1,4 @@
 import type {DO_NOT_USE_ButtonProps as ButtonProps} from 'sentry/components/core/button/types';
-import {chonkFor} from 'sentry/components/core/chonk';
 // eslint-disable-next-line boundaries/element-types
 import {type SVGIconProps} from 'sentry/icons/svgIcon';
 // eslint-disable-next-line boundaries/element-types
@@ -269,33 +268,33 @@ function getButtonTheme(type: ButtonType, theme: Theme) {
   switch (type) {
     case 'default':
       return {
-        surface: theme.colors.surface500,
-        background: theme.colors.surface100,
-        color: theme.colors.gray800,
+        surface: theme.tokens.interactive.chonky.embossed.neutral.background,
+        background: theme.tokens.interactive.chonky.embossed.neutral.chonk,
+        color: theme.tokens.interactive.chonky.embossed.neutral.content.primary,
       };
     case 'accent':
       return {
-        surface: theme.colors.chonk.blue400,
-        background: chonkFor(theme, theme.colors.chonk.blue400),
-        color: theme.colors.white,
+        surface: theme.tokens.interactive.chonky.embossed.accent.background,
+        background: theme.tokens.interactive.chonky.embossed.accent.chonk,
+        color: theme.tokens.interactive.chonky.embossed.accent.content,
       };
     case 'warning':
       return {
-        surface: theme.colors.chonk.yellow400,
-        background: chonkFor(theme, theme.colors.chonk.yellow400),
-        color: theme.colors.black,
+        surface: theme.tokens.interactive.chonky.embossed.warning.background,
+        background: theme.tokens.interactive.chonky.embossed.warning.chonk,
+        color: theme.tokens.interactive.chonky.embossed.warning.content,
       };
     case 'danger':
       return {
-        surface: theme.colors.chonk.red400,
-        background: chonkFor(theme, theme.colors.chonk.red400),
-        color: theme.colors.white,
+        surface: theme.tokens.interactive.chonky.embossed.danger.background,
+        background: theme.tokens.interactive.chonky.embossed.danger.chonk,
+        color: theme.tokens.interactive.chonky.embossed.danger.content,
       };
     case 'transparent':
       return {
-        surface: 'transparent',
-        background: 'transparent',
-        color: theme.colors.gray800,
+        surface: theme.tokens.interactive.transparent.neutral.background.rest,
+        background: theme.tokens.interactive.transparent.neutral.background.rest,
+        color: theme.tokens.interactive.transparent.neutral.content.primary,
       };
     case 'link':
       return {
diff --git a/static/app/components/core/checkbox/checkbox.tsx b/static/app/components/core/checkbox/checkbox.tsx
index fa28c62cdc9464..7d810451cc2f30 100644
--- a/static/app/components/core/checkbox/checkbox.tsx
+++ b/static/app/components/core/checkbox/checkbox.tsx
@@ -23,11 +23,13 @@ const NativeHiddenCheckbox = styled('input')`
   cursor: pointer;
 
   & + * {
-    color: ${p => p.theme.colors.white};
-    border: 1px solid ${p => p.theme.colors.surface100};
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.rest};
+    color: ${p => p.theme.tokens.content.onVibrant.light};
+    border: 1px solid ${p => p.theme.tokens.border.primary};
 
     svg {
-      stroke: ${p => p.theme.colors.white};
+      stroke: ${p => p.theme.tokens.content.onVibrant.light};
     }
   }
 
@@ -37,22 +39,23 @@ const NativeHiddenCheckbox = styled('input')`
 
   &:disabled + *,
   &[aria-disabled='true'] + * {
-    background-color: ${p => p.theme.colors.surface500};
-    border: 1px solid ${p => p.theme.colors.surface100};
+    opacity: ${p => p.theme.tokens.interactive.disabled};
     cursor: not-allowed;
   }
 
   &:checked + *,
   &:indeterminate + * {
-    background-color: ${p => p.theme.colors.chonk.blue400};
-    color: ${p => p.theme.white};
+    background-color: ${p =>
+      p.theme.tokens.interactive.chonky.debossed.accent.background};
+    color: ${p => p.theme.tokens.content.onVibrant.light};
   }
 
   &:disabled:checked + *,
   &:disabled:indeterminate + * {
-    background-color: ${p => p.theme.colors.chonk.blue400};
-    border: 1px solid ${p => p.theme.colors.chonk.blue400};
-    opacity: 0.6;
+    background-color: ${p =>
+      p.theme.tokens.interactive.chonky.debossed.accent.background};
+    border: 1px solid ${p => p.theme.tokens.interactive.chonky.debossed.accent.chonk};
+    opacity: ${p => p.theme.tokens.interactive.disabled};
   }
 `;
 
diff --git a/static/app/components/core/chonk.ts b/static/app/components/core/chonk.ts
index 020d49317b27c9..50c5959f0cf983 100644
--- a/static/app/components/core/chonk.ts
+++ b/static/app/components/core/chonk.ts
@@ -1,28 +1,5 @@
-import color from 'color';
-
 import type {Theme} from 'sentry/utils/theme';
 
-const cache = new Map<{baseColor: string; type: 'light' | 'dark'}, string>();
-
-export function chonkFor(theme: Theme, baseColor: string) {
-  const cacheKey = {baseColor, type: theme.type};
-  if (cache.has(cacheKey)) {
-    return cache.get(cacheKey)!;
-  }
-  const input = color(baseColor).hsl();
-
-  const result =
-    theme.type === 'dark'
-      ? color.hsl(input.hue(), input.saturationl() * 0.1, input.lightness() * 0.1).hex()
-      : color
-          .hsl(input.hue(), input.saturationl() * 0.85, input.lightness() * 0.85)
-          .hex();
-
-  cache.set(cacheKey, result);
-
-  return result;
-}
-
 export function debossedBackground(theme: Theme) {
   return {
     backgroundColor: theme.type === 'dark' ? 'rgba(8,0,24,0.28)' : 'rgba(0,0,112,0.03)',
diff --git a/static/app/components/core/code/codeBlock.tsx b/static/app/components/core/code/codeBlock.tsx
index 70c623753b4d8a..34785fb3d6257f 100644
--- a/static/app/components/core/code/codeBlock.tsx
+++ b/static/app/components/core/code/codeBlock.tsx
@@ -284,7 +284,7 @@ const Tab = styled('button')<{isSelected: boolean}>`
   color: var(--prism-comment);
   ${p =>
     p.isSelected
-      ? `border-bottom: 3px solid ${p.theme.colors.blue400};
+      ? `border-bottom: 3px solid ${p.theme.tokens.graphics.accent.vibrant};
       padding-bottom: 5px;
       color: var(--prism-base);`
       : ''}
diff --git a/static/app/components/core/radio/radio.tsx b/static/app/components/core/radio/radio.tsx
index a251d657b61272..2e6b053b0e9a71 100644
--- a/static/app/components/core/radio/radio.tsx
+++ b/static/app/components/core/radio/radio.tsx
@@ -26,7 +26,7 @@ const radioStyles = (props: RadioProps & {theme: Theme}): StrictCSSObject => ({
   width: radioConfig[props.size ?? 'md'].outerSize,
   height: radioConfig[props.size ?? 'md'].outerSize,
 
-  borderRadius: '50%',
+  borderRadius: props.theme.radius.full,
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -36,15 +36,15 @@ const radioStyles = (props: RadioProps & {theme: Theme}): StrictCSSObject => ({
 
   /* TODO(bootstrap): Our bootstrap CSS adds this, we can remove when we remove that */
   margin: '0 !important',
-  border: `1px solid ${props.theme.colors.surface100} !important`,
+  border: `1px solid ${props.theme.tokens.border.primary} !important`,
 
   '&:after': {
     content: '""',
     display: 'block',
     width: radioConfig[props.size ?? 'md'].innerSize,
     height: radioConfig[props.size ?? 'md'].innerSize,
-    borderRadius: '50%',
-    backgroundColor: props.theme.colors.white,
+    borderRadius: props.theme.radius.full,
+    backgroundColor: props.theme.tokens.content.onVibrant.light,
     transition: `all ${props.theme.motion.smooth.moderate}`,
     opacity: 0,
   },
@@ -54,8 +54,8 @@ const radioStyles = (props: RadioProps & {theme: Theme}): StrictCSSObject => ({
   },
 
   '&:checked': {
-    backgroundColor: props.theme.colors.chonk.blue400,
-    border: `1px solid ${props.theme.colors.chonk.blue400}`,
+    backgroundColor: props.theme.tokens.interactive.chonky.debossed.accent.background,
+    border: `1px solid ${props.theme.tokens.interactive.chonky.debossed.accent.chonk}`,
 
     '&:after': {
       animation: `${growIn} ${props.theme.motion.smooth.moderate}`,
@@ -64,7 +64,7 @@ const radioStyles = (props: RadioProps & {theme: Theme}): StrictCSSObject => ({
   },
 
   '&:disabled': {
-    opacity: 0.6,
+    opacity: props.theme.tokens.interactive.disabled,
     cursor: 'not-allowed',
   },
 });
diff --git a/static/app/components/core/segmentedControl/segmentedControl.tsx b/static/app/components/core/segmentedControl/segmentedControl.tsx
index fea59960d938d6..781cf2f2e7e8e9 100644
--- a/static/app/components/core/segmentedControl/segmentedControl.tsx
+++ b/static/app/components/core/segmentedControl/segmentedControl.tsx
@@ -41,7 +41,9 @@ function getTextColor({
   isDisabled?: boolean;
 }) {
   if (isSelected) {
-    return priority === 'default' ? theme.colors.blue500 : undefined;
+    return priority === 'default'
+      ? theme.tokens.interactive.chonky.embossed.neutral.content.accent
+      : undefined;
   }
 
   return theme.tokens.content.secondary;
diff --git a/static/app/components/core/select/select.tsx b/static/app/components/core/select/select.tsx
index 681b6905f0a361..15dacf5179b70d 100644
--- a/static/app/components/core/select/select.tsx
+++ b/static/app/components/core/select/select.tsx
@@ -167,7 +167,7 @@ const getStylesConfig = ({
       ...(state.isMulti && {
         maxHeight: 'inherit',
         overflowY: 'auto',
-        scrollbarColor: `${theme.colors.blue200} ${theme.tokens.background.primary}`,
+        scrollbarColor: `${theme.tokens.graphics.accent.moderate} ${theme.tokens.background.primary}`,
       }),
     }),
     input: provided => ({
@@ -323,8 +323,8 @@ export const CheckWrap = styled('div')<{
           margin-top: 2px;
           ${p.isSelected &&
           css`
-            background: ${p.theme.colors.blue400};
-            border-color: ${p.theme.colors.blue400};
+            background: ${p.theme.tokens.background.accent.vibrant};
+            border-color: ${p.theme.tokens.background.accent.vibrant};
           `}
         `
       : css`
diff --git a/static/app/components/core/slider/slider.tsx b/static/app/components/core/slider/slider.tsx
index 7f16d2197fc256..667b1610a1b56a 100644
--- a/static/app/components/core/slider/slider.tsx
+++ b/static/app/components/core/slider/slider.tsx
@@ -1,7 +1,6 @@
 import {useState, type CSSProperties} from 'react';
 import styled from '@emotion/styled';
 
-import {chonkFor} from 'sentry/components/core/chonk';
 import {space} from 'sentry/styles/space';
 
 interface BaseProps
@@ -98,7 +97,7 @@ const StepsContainer = styled('div')`
     height: 12px;
     width: 2px;
     border-radius: ${p => p.theme.radius.lg};
-    background: ${p => p.theme.colors.surface100};
+    background: ${p => p.theme.tokens.interactive.chonky.debossed.neutral.background};
   }
 `;
 
@@ -115,7 +114,9 @@ const StepMark = styled('span')<{filled?: boolean}>`
     width: 2px;
     border-radius: ${p => p.theme.radius.lg};
     background: ${p =>
-      p.filled ? p.theme.colors.chonk.blue400 : p.theme.colors.surface100};
+      p.filled
+        ? p.theme.tokens.interactive.chonky.debossed.accent.background
+        : p.theme.tokens.interactive.chonky.debossed.neutral.background};
   }
 `;
 
@@ -178,8 +179,8 @@ const StyledSlider = styled('input')`
     min-width: calc(${p => p.theme.radius['2xs']} * 6);
     width: var(--p, 50%);
     height: 4px;
-    background: ${p => p.theme.colors.chonk.blue400};
-    border: 1px solid ${p => p.theme.colors.chonk.blue400};
+    background: ${p => p.theme.tokens.interactive.chonky.debossed.accent.background};
+    border: 1px solid ${p => p.theme.tokens.border.accent.vibrant};
     border-radius: ${p => p.theme.radius['2xs']};
   }
 
@@ -187,8 +188,9 @@ const StyledSlider = styled('input')`
   &::-webkit-slider-runnable-track {
     width: 100%;
     height: 4px;
-    background: ${p => p.theme.colors.surface100};
-    border: 1px solid ${p => p.theme.colors.surface100};
+    background: ${p => p.theme.tokens.interactive.chonky.debossed.neutral.background};
+    border: 1px solid
+      ${p => p.theme.tokens.interactive.chonky.debossed.neutral.background};
     border-radius: ${p => p.theme.radius['2xs']};
   }
 
@@ -196,9 +198,10 @@ const StyledSlider = styled('input')`
     appearance: none;
     width: 16px;
     height: 16px;
-    background: ${p => p.theme.colors.white};
-    border: 1px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
-    border-bottom: 2px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
+    background: ${p => p.theme.tokens.content.onVibrant.light};
+    border: 1px solid ${p => p.theme.tokens.interactive.chonky.debossed.accent.background};
+    border-bottom: 2px solid
+      ${p => p.theme.tokens.interactive.chonky.debossed.accent.background};
     border-radius: ${p => p.theme.radius.sm};
     transform: translateY(-7px);
     z-index: 10;
@@ -208,8 +211,9 @@ const StyledSlider = styled('input')`
   &::-moz-range-track {
     width: 100%;
     height: 4px;
-    background: ${p => p.theme.colors.surface100};
-    border: 1px solid ${p => p.theme.colors.surface100};
+    background: ${p => p.theme.tokens.interactive.chonky.debossed.neutral.background};
+    border: 1px solid
+      ${p => p.theme.tokens.interactive.chonky.debossed.neutral.background};
     border-radius: ${p => p.theme.radius['2xs']};
   }
 
@@ -217,9 +221,10 @@ const StyledSlider = styled('input')`
     appearance: none;
     width: 16px;
     height: 16px;
-    background: ${p => p.theme.colors.white};
-    border: 1px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
-    border-bottom: 2px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
+    background: ${p => p.theme.tokens.content.onVibrant.light};
+    border: 1px solid ${p => p.theme.tokens.interactive.chonky.debossed.accent.background};
+    border-bottom: 2px solid
+      ${p => p.theme.tokens.interactive.chonky.debossed.accent.background};
     border-radius: ${p => p.theme.radius.sm};
     transform: translateY(-7px);
     z-index: 1;
@@ -262,9 +267,9 @@ const SliderLabel = styled('span')`
   padding-inline: ${space(0.5)};
   width: min-content;
   text-align: center;
-  background: ${p => p.theme.colors.chonk.blue400};
-  border: 1px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
-  color: ${p => p.theme.white};
+  background: ${p => p.theme.tokens.background.accent.vibrant};
+  border: 1px solid ${p => p.theme.tokens.border.accent.vibrant};
+  color: ${p => p.theme.tokens.content.onVibrant.light};
   border-radius: ${p => p.theme.radius['2xs']};
   z-index: ${p => p.theme.zIndex.tooltip};
 `;
diff --git a/static/app/components/core/switch/switch.tsx b/static/app/components/core/switch/switch.tsx
index c912d620acd844..f70dd1ad227e41 100644
--- a/static/app/components/core/switch/switch.tsx
+++ b/static/app/components/core/switch/switch.tsx
@@ -1,7 +1,5 @@
 import styled from '@emotion/styled';
 
-import {chonkFor} from 'sentry/components/core/chonk';
-
 export interface SwitchProps
   extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onClick'> {
   ref?: React.Ref<HTMLInputElement>;
@@ -42,17 +40,20 @@ const NativeHiddenCheckbox = styled('input')<{
     border-radius: ${p => p.theme.radius.sm};
     pointer-events: none;
 
-    background: ${p => p.theme.colors.surface200};
-    border-top: 3px solid ${p => p.theme.colors.surface100};
-    border-right: 1px solid ${p => p.theme.colors.surface100};
-    border-bottom: 1px solid ${p => p.theme.colors.surface100};
-    border-left: 1px solid ${p => p.theme.colors.surface100};
+    background: ${p => p.theme.tokens.interactive.chonky.debossed.neutral.background};
+    border-top: 3px solid ${p => p.theme.tokens.interactive.chonky.debossed.neutral.chonk};
+    border-right: 1px solid
+      ${p => p.theme.tokens.interactive.chonky.debossed.neutral.chonk};
+    border-bottom: 1px solid
+      ${p => p.theme.tokens.interactive.chonky.debossed.neutral.chonk};
+    border-left: 1px solid
+      ${p => p.theme.tokens.interactive.chonky.debossed.neutral.chonk};
     transition: all 100ms ease-in-out;
 
     > div {
       border-radius: ${p => p.theme.radius.sm};
-      background: ${p => p.theme.colors.surface500};
-      border: 1px solid ${p => p.theme.colors.surface100};
+      background: ${p => p.theme.tokens.interactive.chonky.embossed.neutral.background};
+      border: 1px solid ${p => p.theme.tokens.interactive.chonky.embossed.neutral.chonk};
 
       width: ${p => toggleButtonSize[p.nativeSize].width}px;
       height: ${p => toggleButtonSize[p.nativeSize].height}px;
@@ -81,7 +82,7 @@ const NativeHiddenCheckbox = styled('input')<{
         /* stylelint-disable */
         background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="${p =>
           urlEscapeHex(
-            p.theme.tokens.content.muted
+            p.theme.tokens.interactive.chonky.embossed.neutral.content.secondary
           )}" d="M5.03 3.97a.75.75 0 0 0-1.06 1.06L6.94 8l-2.97 2.97a.75.75 0 1 0 1.06 1.06L8 9.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L9.06 8l2.97-2.97a.75.75 0 0 0-1.06-1.06L8 6.94 5.03 3.97Z" clip-rule="evenodd"/></svg>');
         /* stylelint-enable */
       }
@@ -89,15 +90,17 @@ const NativeHiddenCheckbox = styled('input')<{
   }
 
   &:checked + div {
-    background: ${p => p.theme.colors.chonk.blue400};
-    border-top: 3px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
-    border-right: 1px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
-    border-bottom: 1px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
-    border-left: 1px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
+    background: ${p => p.theme.tokens.interactive.chonky.debossed.accent.background};
+    border-top: 3px solid ${p => p.theme.tokens.interactive.chonky.debossed.accent.chonk};
+    border-right: 1px solid
+      ${p => p.theme.tokens.interactive.chonky.debossed.accent.chonk};
+    border-bottom: 1px solid
+      ${p => p.theme.tokens.interactive.chonky.debossed.accent.chonk};
+    border-left: 1px solid ${p => p.theme.tokens.interactive.chonky.debossed.accent.chonk};
 
     > div {
-      background: ${p => p.theme.colors.surface500};
-      border: 1px solid ${p => chonkFor(p.theme, p.theme.colors.chonk.blue400)};
+      background: ${p => p.theme.tokens.interactive.chonky.embossed.neutral.background};
+      border: 1px solid ${p => p.theme.tokens.interactive.chonky.embossed.neutral.chonk};
       transform: translateY(-1px)
         translateX(
           ${p =>
@@ -109,7 +112,7 @@ const NativeHiddenCheckbox = styled('input')<{
         /* stylelint-disable */
         background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="${p =>
           urlEscapeHex(
-            p.theme.tokens.content.accent
+            p.theme.tokens.interactive.chonky.embossed.neutral.content.accent
           )}" fill-rule="evenodd" d="M13.53 4.22c.3.3.3.77 0 1.06l-6.5 6.5a.75.75 0 0 1-1.08-.02l-3.5-3.75A.75.75 0 0 1 3.55 7l2.97 3.18 5.95-5.95c.3-.3.77-.3 1.06 0Z" clip-rule="evenodd"/></svg>');
         /* stylelint-enable */
       }
diff --git a/static/app/components/core/tabs/tab.tsx b/static/app/components/core/tabs/tab.tsx
index 1d036703c22741..09d895054bf0a5 100644
--- a/static/app/components/core/tabs/tab.tsx
+++ b/static/app/components/core/tabs/tab.tsx
@@ -35,8 +35,8 @@ const StyledTabWrap = styled('li', {
 }>`
   color: ${p =>
     p.selected
-      ? p.theme.tokens.component.link.accent.default
-      : p.theme.tokens.component.link.muted.default};
+      ? p.theme.tokens.interactive.link.accent.rest
+      : p.theme.tokens.interactive.link.neutral.rest};
   white-space: nowrap;
   cursor: pointer;
 
@@ -126,29 +126,30 @@ const innerWrapStyles = ({
   li:not([aria-disabled]):hover & {
     background-color: ${selected
       ? variant === 'floating'
-        ? theme.colors.blue200
-        : theme.colors.blue100
-      : theme.colors.gray100};
+        ? theme.tokens.interactive.transparent.accent.selected.background.hover
+        : theme.tokens.interactive.transparent.accent.selected.background.rest
+      : theme.tokens.interactive.transparent.neutral.background.hover};
     color: ${selected
-      ? theme.tokens.component.link.accent.hover
-      : theme.tokens.component.link.muted.hover};
+      ? theme.tokens.interactive.link.accent.hover
+      : theme.tokens.interactive.link.neutral.hover};
   }
 
   li:not([aria-disabled]):active & {
     background-color: ${selected
       ? variant === 'floating'
-        ? theme.colors.blue300
-        : theme.colors.blue200
-      : theme.colors.gray200};
+        ? theme.tokens.interactive.transparent.accent.selected.background.active
+        : theme.tokens.interactive.transparent.accent.selected.background.hover
+      : theme.tokens.interactive.transparent.neutral.background.active};
     color: ${selected
-      ? theme.tokens.component.link.accent.active
-      : theme.tokens.component.link.muted.active};
+      ? theme.tokens.interactive.link.accent.active
+      : theme.tokens.interactive.link.neutral.active};
   }
 
   ${variant === 'floating' &&
   selected &&
   css`
-    background-color: ${theme.colors.blue100};
+    background-color: ${theme.tokens.interactive.transparent.accent.selected.background
+      .rest};
   `}
 `;
 
@@ -159,7 +160,8 @@ const StyledTabSelectionIndicator = styled('div')<{
   position: absolute;
   border-radius: 1px;
   pointer-events: none;
-  background: ${p => (p.selected ? p.theme.colors.blue400 : 'transparent')};
+  background: ${p =>
+    p.selected ? p.theme.tokens.graphics.accent.vibrant : 'transparent'};
 
   li[aria-disabled] & {
     opacity: 0.6;
diff --git a/static/app/components/core/toast/toast.tsx b/static/app/components/core/toast/toast.tsx
index 70fbefe74356d8..acda5874e6b163 100644
--- a/static/app/components/core/toast/toast.tsx
+++ b/static/app/components/core/toast/toast.tsx
@@ -7,7 +7,6 @@ import {Container, Flex} from '@sentry/scraps/layout';
 
 import type {Indicator} from 'sentry/actionCreators/indicator';
 import {Button} from 'sentry/components/core/button';
-import {chonkFor} from 'sentry/components/core/chonk';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import TextOverflow from 'sentry/components/textOverflow';
 import {IconCheckmark, IconRefresh, IconWarning} from 'sentry/icons';
@@ -97,24 +96,24 @@ function getContainerTheme(theme: Theme, type: Indicator['type']): React.CSSProp
   switch (type) {
     case 'success':
       return {
-        background: theme.colors.green100,
-        borderBottom: `2px solid ${theme.tokens.border.success}`,
-        border: `1px solid ${chonkFor(theme, theme.colors.chonk.green400)}`,
-        boxShadow: `0 3px 0 0px ${chonkFor(theme, theme.colors.chonk.green400)}`,
+        background: theme.tokens.background.transparent.success.muted,
+        borderBottom: `2px solid ${theme.tokens.border.success.moderate}`,
+        border: `1px solid ${theme.tokens.border.success.moderate}`,
+        boxShadow: `0 3px 0 0px ${theme.tokens.shadow.elevationLow}`,
       };
     case 'error':
       return {
-        background: theme.colors.red100,
-        borderBottom: `2px solid ${theme.tokens.border.danger}`,
-        border: `1px solid ${chonkFor(theme, theme.colors.chonk.red400)}`,
-        boxShadow: `0 3px 0 0px ${chonkFor(theme, theme.colors.chonk.red400)}`,
+        background: theme.tokens.background.transparent.danger.muted,
+        borderBottom: `2px solid ${theme.tokens.border.danger.moderate}`,
+        border: `1px solid ${theme.tokens.border.danger.moderate}`,
+        boxShadow: `0 3px 0 0px ${theme.tokens.shadow.elevationLow}`,
       };
     default:
       return {
-        background: theme.tokens.background.primary,
-        borderBottom: `2px solid ${theme.tokens.border.accent}`,
-        border: `1px solid ${chonkFor(theme, theme.colors.chonk.blue400)}`,
-        boxShadow: `0 3px 0 0px ${chonkFor(theme, theme.colors.chonk.blue400)}`,
+        background: theme.tokens.background.overlay,
+        borderBottom: `2px solid ${theme.tokens.border.primary}`,
+        border: `1px solid ${theme.tokens.border.primary}`,
+        boxShadow: `0 3px 0 0px ${theme.tokens.shadow.elevationLow}`,
       };
   }
 }
@@ -158,18 +157,18 @@ function getToastIconContainerTheme(
   switch (type) {
     case 'success':
       return {
-        background: theme.colors.chonk.green400,
-        borderRight: `1px solid ${chonkFor(theme, theme.colors.chonk.green400)}`,
+        background: theme.tokens.background.success.vibrant,
+        borderRight: `1px solid ${theme.tokens.border.success.moderate}`,
       };
     case 'error':
       return {
-        background: theme.colors.chonk.red400,
-        borderRight: `1px solid ${chonkFor(theme, theme.colors.chonk.red400)}`,
+        background: theme.tokens.background.danger.vibrant,
+        borderRight: `1px solid ${theme.tokens.border.danger.moderate}`,
       };
     default:
       return {
-        background: theme.tokens.background.primary,
-        borderRight: `1px solid ${chonkFor(theme, theme.colors.chonk.blue400)}`,
+        background: theme.tokens.background.overlay,
+        borderRight: `1px solid ${theme.tokens.border.primary}`,
       };
   }
 }
@@ -186,9 +185,9 @@ const ToastIconContainer = styled('div')<{type: Indicator['type']}>`
     height: 16px;
     color: ${p =>
       p.type === 'success'
-        ? p.theme.colors.black
+        ? p.theme.tokens.content.onVibrant.dark
         : p.type === 'error'
-          ? p.theme.colors.white
+          ? p.theme.tokens.content.onVibrant.light
           : undefined} !important;
   }
 `;
diff --git a/static/app/components/events/autofix/autofixChanges.tsx b/static/app/components/events/autofix/autofixChanges.tsx
index 958eead4a32187..f4be79048dbb51 100644
--- a/static/app/components/events/autofix/autofixChanges.tsx
+++ b/static/app/components/events/autofix/autofixChanges.tsx
@@ -441,7 +441,7 @@ const Title = styled('div')`
   margin-top: ${space(1)};
   margin-bottom: ${space(1)};
   text-decoration: underline dashed;
-  text-decoration-color: ${p => p.theme.colors.blue400};
+  text-decoration-color: ${p => p.theme.tokens.border.accent.vibrant};
   text-decoration-thickness: 1px;
   text-underline-offset: 4px;
 `;
diff --git a/static/app/components/events/autofix/autofixHighlightPopup.tsx b/static/app/components/events/autofix/autofixHighlightPopup.tsx
index 43ddda924fd417..6284d9d899d357 100644
--- a/static/app/components/events/autofix/autofixHighlightPopup.tsx
+++ b/static/app/components/events/autofix/autofixHighlightPopup.tsx
@@ -827,13 +827,13 @@ const CircularSeerIcon = styled('div')`
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  background: ${p => p.theme.colors.blue400};
+  background: ${p => p.theme.tokens.background.accent.vibrant};
   flex-shrink: 0;
 
   > svg {
     width: 18px;
     height: 18px;
-    color: ${p => p.theme.white};
+    color: ${p => p.theme.tokens.content.onVibrant.light};
   }
 `;
 
diff --git a/static/app/components/events/breadcrumbs/utils.tsx b/static/app/components/events/breadcrumbs/utils.tsx
index aeed784364f460..31feccf23e4b44 100644
--- a/static/app/components/events/breadcrumbs/utils.tsx
+++ b/static/app/components/events/breadcrumbs/utils.tsx
@@ -267,31 +267,31 @@ function getBreadcrumbColorConfig(
   switch (type) {
     case BreadcrumbType.ERROR:
       return {
-        title: theme.colors.red500,
-        icon: theme.colors.red500,
-        iconBorder: theme.colors.red200,
+        title: theme.tokens.content.danger,
+        icon: theme.tokens.content.danger,
+        iconBorder: theme.tokens.border.transparent.danger.moderate,
       };
     case BreadcrumbType.WARNING:
       return {
-        title: theme.colors.yellow500,
-        icon: theme.colors.yellow500,
-        iconBorder: theme.colors.yellow200,
+        title: theme.tokens.content.warning,
+        icon: theme.tokens.content.warning,
+        iconBorder: theme.tokens.border.transparent.warning.moderate,
       };
     case BreadcrumbType.NAVIGATION:
     case BreadcrumbType.HTTP:
     case BreadcrumbType.QUERY:
     case BreadcrumbType.TRANSACTION:
       return {
-        title: theme.colors.green500,
-        icon: theme.colors.green500,
-        iconBorder: theme.colors.green200,
+        title: theme.tokens.content.success,
+        icon: theme.tokens.content.success,
+        iconBorder: theme.tokens.border.transparent.success.moderate,
       };
     case BreadcrumbType.USER:
     case BreadcrumbType.UI:
       return {
-        title: theme.colors.blue500,
-        icon: theme.colors.blue500,
-        iconBorder: theme.colors.blue200,
+        title: theme.tokens.content.accent,
+        icon: theme.tokens.content.accent,
+        iconBorder: theme.tokens.border.transparent.accent.moderate,
       };
     case BreadcrumbType.SYSTEM:
     case BreadcrumbType.SESSION:
@@ -299,22 +299,22 @@ function getBreadcrumbColorConfig(
     case BreadcrumbType.NETWORK:
     case BreadcrumbType.CONNECTIVITY:
       return {
-        title: theme.colors.pink500,
-        icon: theme.colors.pink500,
-        iconBorder: theme.colors.pink200,
+        title: theme.tokens.content.promotion,
+        icon: theme.tokens.content.promotion,
+        iconBorder: theme.tokens.border.transparent.promotion.moderate,
       };
     case BreadcrumbType.INFO:
       return {
-        title: theme.colors.blue500,
-        icon: theme.colors.blue400,
-        iconBorder: theme.colors.blue200,
+        title: theme.tokens.content.accent,
+        icon: theme.tokens.content.accent,
+        iconBorder: theme.tokens.border.transparent.accent.moderate,
       };
     case BreadcrumbType.DEBUG:
     default:
       return {
         title: theme.tokens.content.primary,
-        icon: theme.tokens.content.muted,
-        iconBorder: theme.tokens.content.muted,
+        icon: theme.tokens.content.primary,
+        iconBorder: theme.tokens.border.transparent.neutral.moderate,
       };
   }
 }
diff --git a/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx b/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx
index 78a40301d12159..aa04b9742cfe74 100644
--- a/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx
+++ b/static/app/components/events/eventReplay/replayInlineOnboardingPanel.tsx
@@ -110,7 +110,7 @@ export default function ReplayInlineOnboardingPanel({
 }
 
 const PurpleText = styled('span')`
-  color: ${p => p.theme.colors.blue400};
+  color: ${p => p.theme.tokens.content.accent};
   font-weight: ${p => p.theme.fontWeight.bold};
 `;
 
diff --git a/static/app/components/events/interfaces/breadcrumbs/breadcrumbs.tsx b/static/app/components/events/interfaces/breadcrumbs/breadcrumbs.tsx
index 2486fab4c646fa..514452f59199ac 100644
--- a/static/app/components/events/interfaces/breadcrumbs/breadcrumbs.tsx
+++ b/static/app/components/events/interfaces/breadcrumbs/breadcrumbs.tsx
@@ -326,7 +326,7 @@ const PanelDragHandle = styled('div')`
 
   &:hover::after,
   &.is-held:after {
-    background: ${p => p.theme.colors.blue400};
+    background: ${p => p.theme.tokens.graphics.accent.vibrant};
   }
 `;
 
diff --git a/static/app/components/events/interfaces/sourceMapsDebuggerModal.tsx b/static/app/components/events/interfaces/sourceMapsDebuggerModal.tsx
index 9006490bd14fdc..531679ee0a8baa 100644
--- a/static/app/components/events/interfaces/sourceMapsDebuggerModal.tsx
+++ b/static/app/components/events/interfaces/sourceMapsDebuggerModal.tsx
@@ -651,10 +651,10 @@ export function SourceMapsDebuggerModal({
                 <StyledProgressRing
                   progressColor={
                     activeTab === 'debug-ids'
-                      ? theme.colors.blue400
-                      : theme.colors.gray400
+                      ? theme.tokens.graphics.accent.vibrant
+                      : theme.tokens.graphics.neutral.vibrant
                   }
-                  backgroundColor={theme.colors.gray200}
+                  backgroundColor={theme.tokens.background.transparent.neutral.muted}
                   value={sourceResolutionResults.debugIdProgressPercent * 100}
                   size={16}
                   barWidth={4}
@@ -674,9 +674,11 @@ export function SourceMapsDebuggerModal({
               >
                 <StyledProgressRing
                   progressColor={
-                    activeTab === 'release' ? theme.colors.blue400 : theme.colors.gray400
+                    activeTab === 'release'
+                      ? theme.tokens.graphics.accent.vibrant
+                      : theme.tokens.graphics.neutral.vibrant
                   }
-                  backgroundColor={theme.colors.gray200}
+                  backgroundColor={theme.tokens.background.transparent.neutral.muted}
                   value={sourceResolutionResults.releaseProgressPercent * 100}
                   size={16}
                   barWidth={4}
@@ -692,9 +694,11 @@ export function SourceMapsDebuggerModal({
               >
                 <StyledProgressRing
                   progressColor={
-                    activeTab === 'fetching' ? theme.colors.blue400 : theme.colors.gray400
+                    activeTab === 'fetching'
+                      ? theme.tokens.graphics.accent.vibrant
+                      : theme.tokens.graphics.neutral.vibrant
                   }
-                  backgroundColor={theme.colors.gray200}
+                  backgroundColor={theme.tokens.background.transparent.neutral.muted}
                   value={sourceResolutionResults.scrapingProgressPercent * 100}
                   size={16}
                   barWidth={4}
diff --git a/static/app/components/events/interfaces/spans/minimap.tsx b/static/app/components/events/interfaces/spans/minimap.tsx
index 384853bc048bac..e9fd8f53f4dc67 100644
--- a/static/app/components/events/interfaces/spans/minimap.tsx
+++ b/static/app/components/events/interfaces/spans/minimap.tsx
@@ -45,7 +45,7 @@ class ActualMinimap extends PureComponent<{
               style={{
                 backgroundColor:
                   payload.type === 'span_group_chain'
-                    ? this.props.theme.colors.blue400
+                    ? this.props.theme.tokens.background.accent.vibrant
                     : spanBarColor,
                 left: spanLeft,
                 width: spanWidth,
@@ -71,7 +71,7 @@ class ActualMinimap extends PureComponent<{
                 return (
                   <MinimapSpanBar
                     style={{
-                      backgroundColor: this.props.theme.colors.blue400,
+                      backgroundColor: this.props.theme.tokens.background.accent.vibrant,
                       left: spanLeft,
                       width: spanWidth,
                       minWidth: 0,
diff --git a/static/app/components/events/rrwebReplayer/baseRRWebReplayer.tsx b/static/app/components/events/rrwebReplayer/baseRRWebReplayer.tsx
index 1b2643124d406b..0ad7dffb1efd18 100644
--- a/static/app/components/events/rrwebReplayer/baseRRWebReplayer.tsx
+++ b/static/app/components/events/rrwebReplayer/baseRRWebReplayer.tsx
@@ -53,7 +53,7 @@ const BaseRRWebReplayer = styled(BaseRRWebReplayerComponent)`
     display: inline-block;
     width: 32px;
     height: 32px;
-    background: ${p => p.theme.colors.blue400};
+    background: ${p => p.theme.tokens.background.accent.vibrant};
     border-radius: 100%;
     transform: translate(-50%, -50%);
     opacity: 0.3;
@@ -75,7 +75,7 @@ const BaseRRWebReplayer = styled(BaseRRWebReplayerComponent)`
       border-color 0.2s ease-in-out;
   }
   .replayer-mouse.touch-device.touch-active {
-    border-color: ${p => p.theme.colors.blue200};
+    border-color: ${p => p.theme.tokens.border.transparent.accent.muted};
     transition:
       left 0.25s linear,
       top 0.25s linear,
@@ -208,7 +208,7 @@ const BaseRRWebReplayer = styled(BaseRRWebReplayerComponent)`
     left: 0;
     top: 3px;
     border-radius: 3px;
-    background: ${p => p.theme.colors.blue200};
+    background: ${p => p.theme.tokens.background.transparent.accent.muted};
   }
 
   .rr-progress__handler {
@@ -218,7 +218,7 @@ const BaseRRWebReplayer = styled(BaseRRWebReplayerComponent)`
     position: absolute;
     top: 6px;
     transform: translate(-50%, -50%);
-    background: ${p => p.theme.colors.blue400};
+    background: ${p => p.theme.tokens.background.accent.vibrant};
   }
 
   .rr-controller__btns {
diff --git a/static/app/components/events/viewHierarchy/node.tsx b/static/app/components/events/viewHierarchy/node.tsx
index 968ac18a4f04ce..e1fb969c252b31 100644
--- a/static/app/components/events/viewHierarchy/node.tsx
+++ b/static/app/components/events/viewHierarchy/node.tsx
@@ -86,10 +86,10 @@ const IconWrapper = styled('button')<{collapsible: boolean; isExpanded: boolean}
           }
         `
       : css`
-          background: ${p.theme.colors.blue400};
-          border: 1px solid ${p.theme.colors.blue400};
+          background: ${p.theme.tokens.background.accent.vibrant};
+          border: 1px solid ${p.theme.tokens.border.accent.vibrant};
           &:hover {
-            background: ${p.theme.colors.blue200};
+            background: ${p.theme.tokens.background.transparent.accent.muted};
           }
         `}
 `;
diff --git a/static/app/components/events/viewHierarchy/wireframe.tsx b/static/app/components/events/viewHierarchy/wireframe.tsx
index 180592027e80f3..733b2e7d897578 100644
--- a/static/app/components/events/viewHierarchy/wireframe.tsx
+++ b/static/app/components/events/viewHierarchy/wireframe.tsx
@@ -113,7 +113,8 @@ function Wireframe({hierarchy, selectedNode, onNodeSelect, platform}: WireframeP
       const overlay = overlayRef?.getContext('2d');
       if (overlay) {
         setupCanvasContext(overlay, modelToView);
-        overlay.fillStyle = theme.colors.blue200;
+        overlay.fillStyle =
+          theme.tokens.interactive.transparent.accent.selected.background.rest;
 
         if (selectedRect) {
           overlay.fillRect(
@@ -125,12 +126,18 @@ function Wireframe({hierarchy, selectedNode, onNodeSelect, platform}: WireframeP
         }
 
         if (hoverRect) {
-          overlay.fillStyle = theme.colors.blue100;
+          overlay.fillStyle =
+            theme.tokens.interactive.transparent.accent.selected.background.hover;
           overlay.fillRect(hoverRect.x, hoverRect.y, hoverRect.width, hoverRect.height);
         }
       }
     },
-    [overlayRef, setupCanvasContext, theme.colors.blue100, theme.colors.blue200]
+    [
+      overlayRef,
+      setupCanvasContext,
+      theme.tokens.interactive.transparent.accent.selected.background.rest,
+      theme.tokens.interactive.transparent.accent.selected.background.hover,
+    ]
   );
 
   const drawViewHierarchy = useCallback(
diff --git a/static/app/components/feedback/feedbackItem/feedbackItemUsername.tsx b/static/app/components/feedback/feedbackItem/feedbackItemUsername.tsx
index b280789339d0c2..a1cbe407a9bc7e 100644
--- a/static/app/components/feedback/feedbackItem/feedbackItemUsername.tsx
+++ b/static/app/components/feedback/feedbackItem/feedbackItemUsername.tsx
@@ -116,5 +116,5 @@ export default function FeedbackItemUsername({className, feedbackIssue, style}:
 }
 
 const Purple = styled('span')`
-  color: ${p => p.theme.colors.blue400};
+  color: ${p => p.theme.tokens.content.accent};
 `;
diff --git a/static/app/components/feedback/feedbackItem/feedbackScreenshot.tsx b/static/app/components/feedback/feedbackItem/feedbackScreenshot.tsx
index 94def5ab0970a1..7fa90b80881e87 100644
--- a/static/app/components/feedback/feedbackItem/feedbackScreenshot.tsx
+++ b/static/app/components/feedback/feedbackItem/feedbackScreenshot.tsx
@@ -91,7 +91,7 @@ const StyledLoadingIndicator = styled('div')`
   align-items: center;
   justify-content: center;
   height: 100%;
-  background: ${p => p.theme.colors.blue100};
+  background: ${p => p.theme.tokens.background.transparent.accent.muted};
 `;
 
 const StyledImageButton = styled('button')`
@@ -125,7 +125,7 @@ const FileDownload = styled('a')`
 `;
 
 const File = styled(StyledPanel)`
-  background: ${p => p.theme.colors.blue100};
+  background: ${p => p.theme.tokens.background.transparent.accent.muted};
   padding: ${space(2)};
   max-width: 300px;
 `;
diff --git a/static/app/components/feedback/feedbackItem/feedbackUrl.tsx b/static/app/components/feedback/feedbackItem/feedbackUrl.tsx
index a05738d3c43fe0..d7539ff8410856 100644
--- a/static/app/components/feedback/feedbackItem/feedbackUrl.tsx
+++ b/static/app/components/feedback/feedbackItem/feedbackUrl.tsx
@@ -44,7 +44,9 @@ export default function FeedbackUrl({eventData, feedbackItem}: Props) {
       title={t('URL')}
     >
       <StyledTextCopyInput
-        style={urlIsLink ? {cursor: 'pointer', color: theme.colors.blue500} : undefined}
+        style={
+          urlIsLink ? {cursor: 'pointer', color: theme.tokens.content.accent} : undefined
+        }
         onClick={
           urlIsLink
             ? e => {
diff --git a/static/app/components/feedback/feedbackItem/messageSection.tsx b/static/app/components/feedback/feedbackItem/messageSection.tsx
index 4b71fe9fc6babc..2c84d66db240fe 100644
--- a/static/app/components/feedback/feedbackItem/messageSection.tsx
+++ b/static/app/components/feedback/feedbackItem/messageSection.tsx
@@ -34,13 +34,13 @@ export default function MessageSection({eventData, feedbackItem}: Props) {
 
 const Blockquote = styled('blockquote')`
   margin: 0;
-  background: ${p => p.theme.colors.blue100};
+  background: ${p => p.theme.tokens.background.transparent.accent.muted};
 
   display: flex;
   flex-direction: column;
   gap: ${space(2)};
 
-  border-left: 2px solid ${p => p.theme.colors.blue400};
+  border-left: 2px solid ${p => p.theme.tokens.graphics.accent.vibrant};
   padding: ${space(2)};
 
   & > pre {
diff --git a/static/app/components/feedback/feedbackItem/replayInlineCTAPanel.tsx b/static/app/components/feedback/feedbackItem/replayInlineCTAPanel.tsx
index 2bfc3d3d901cc8..1ada771579d77b 100644
--- a/static/app/components/feedback/feedbackItem/replayInlineCTAPanel.tsx
+++ b/static/app/components/feedback/feedbackItem/replayInlineCTAPanel.tsx
@@ -39,6 +39,6 @@ export default function ReplayInlineCTAPanel() {
 }
 
 const PurpleText = styled('span')`
-  color: ${p => p.theme.colors.blue400};
+  color: ${p => p.theme.tokens.content.accent};
   font-weight: ${p => p.theme.fontWeight.bold};
 `;
diff --git a/static/app/components/feedback/list/feedbackListItem.tsx b/static/app/components/feedback/list/feedbackListItem.tsx
index ac1b856890fd03..d6eeca48b201f2 100644
--- a/static/app/components/feedback/list/feedbackListItem.tsx
+++ b/static/app/components/feedback/list/feedbackListItem.tsx
@@ -184,10 +184,11 @@ const LinkedFeedbackCard = styled(Link)`
     color: ${p => p.theme.tokens.content.primary};
   }
   &[data-selected='true'] {
-    background: ${p => p.theme.colors.blue100};
-    border: 1px solid ${p => p.theme.colors.blue200};
+    background: ${p =>
+      p.theme.tokens.interactive.transparent.accent.selected.background.rest};
+    border: 1px solid ${p => p.theme.tokens.border.transparent.accent.muted};
     border-radius: ${space(0.75)};
-    color: ${p => p.theme.colors.blue400};
+    color: ${p => p.theme.tokens.interactive.transparent.accent.content.primary};
   }
 
   display: grid;
@@ -235,7 +236,7 @@ const DotRow = styled(Row)`
 const UnreadIndicator = styled('div')`
   width: 8px;
   height: 8px;
-  background-color: ${p => p.theme.colors.blue500};
+  background-color: ${p => p.theme.tokens.graphics.accent.vibrant};
   border-radius: 50%;
 `;
 
diff --git a/static/app/components/footer.tsx b/static/app/components/footer.tsx
index be4aee376821b7..e6ea9f622c2c7e 100644
--- a/static/app/components/footer.tsx
+++ b/static/app/components/footer.tsx
@@ -93,7 +93,7 @@ function BaseFooter({className}: Props) {
 }
 
 const WaitingIndicator = styled('div')`
-  --pulsingIndicatorRing: ${p => p.theme.colors.gray200};
+  --pulsingIndicatorRing: ${p => p.theme.tokens.border.transparent.neutral.muted};
   ${pulsingIndicatorStyles};
   contain: layout;
 `;
@@ -120,7 +120,7 @@ const FooterLink = styled(ExternalLink)`
   color: ${p => p.theme.tokens.content.secondary};
   &:focus-visible {
     outline: none;
-    box-shadow: ${p => p.theme.colors.blue400} 0 2px 0;
+    box-shadow: ${p => p.theme.tokens.focus.default} 0 2px 0;
   }
 `;
 
diff --git a/static/app/components/forms/fieldGroup/fieldWrapper.tsx b/static/app/components/forms/fieldGroup/fieldWrapper.tsx
index d60e330f66cb19..abc868afd11466 100644
--- a/static/app/components/forms/fieldGroup/fieldWrapper.tsx
+++ b/static/app/components/forms/fieldGroup/fieldWrapper.tsx
@@ -52,7 +52,7 @@ export const FieldWrapper = styled('div')<FieldWrapperProps>`
         display: block;
         position: absolute;
         inset: -1px;
-        border: 1px solid ${p.theme.colors.blue400};
+        border: 1px solid ${p.theme.tokens.focus.default};
         pointer-events: none;
       }
     `}
diff --git a/static/app/components/forms/fields/segmentedRadioField.tsx b/static/app/components/forms/fields/segmentedRadioField.tsx
index 5bf7425633f09d..84ead221385f8e 100644
--- a/static/app/components/forms/fields/segmentedRadioField.tsx
+++ b/static/app/components/forms/fields/segmentedRadioField.tsx
@@ -121,8 +121,8 @@ const RadioItem = styled('label', {shouldForwardProp})<{
   margin: 0;
 
   &[aria-checked='true'] {
-    border-color: ${p => p.theme.colors.blue400} !important;
-    box-shadow: inset 0 0 0 1px ${p => p.theme.colors.blue400};
+    border-color: ${p => p.theme.tokens.border.accent.vibrant} !important;
+    box-shadow: inset 0 0 0 1px ${p => p.theme.tokens.border.accent.vibrant};
     z-index: ${p => p.theme.zIndex.initial};
   }
 
diff --git a/static/app/components/forms/spinner.tsx b/static/app/components/forms/spinner.tsx
index ec9ed5de8db5b9..4f8c6d89dc090e 100644
--- a/static/app/components/forms/spinner.tsx
+++ b/static/app/components/forms/spinner.tsx
@@ -15,8 +15,8 @@ const Spinner = styled('div')`
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  border: 2px solid ${p => p.theme.tokens.border.primary};
-  border-left-color: ${p => p.theme.colors.blue400};
+  border: 2px solid ${p => p.theme.tokens.border.transparent.neutral.muted};
+  border-left-color: ${p => p.theme.tokens.border.accent.vibrant};
   margin-left: auto;
 `;
 
diff --git a/static/app/components/globalDrawer/components.tsx b/static/app/components/globalDrawer/components.tsx
index 08ae6c6cf915bf..88c3824a2063a5 100644
--- a/static/app/components/globalDrawer/components.tsx
+++ b/static/app/components/globalDrawer/components.tsx
@@ -248,7 +248,7 @@ const ResizeHandle = styled('div')`
   &:hover,
   &:active {
     &::after {
-      background: ${p => p.theme.colors.blue500};
+      background: ${p => p.theme.tokens.graphics.accent.vibrant};
     }
   }
 
@@ -265,7 +265,7 @@ const ResizeHandle = styled('div')`
   }
 
   &[data-resizing]::after {
-    background: ${p => p.theme.colors.blue500};
+    background: ${p => p.theme.tokens.graphics.accent.vibrant};
   }
 `;
 
diff --git a/static/app/components/group/releaseChart.tsx b/static/app/components/group/releaseChart.tsx
index 3e5ef7942f350c..def6a6b673cff7 100644
--- a/static/app/components/group/releaseChart.tsx
+++ b/static/app/components/group/releaseChart.tsx
@@ -193,7 +193,14 @@ function GroupReleaseChart(props: Props) {
           showTimeInTooltip
           showMarkLineLabel
           height={42}
-          colors={environment ? undefined : [theme.colors.blue400, theme.colors.blue400]}
+          colors={
+            environment
+              ? undefined
+              : [
+                  theme.tokens.dataviz.semantic.accent,
+                  theme.tokens.dataviz.semantic.accent,
+                ]
+          }
           series={series}
           grid={{
             top: 6,
diff --git a/static/app/components/keyValueData/index.stories.tsx b/static/app/components/keyValueData/index.stories.tsx
index 00ec134702da1f..0427908902a8bd 100644
--- a/static/app/components/keyValueData/index.stories.tsx
+++ b/static/app/components/keyValueData/index.stories.tsx
@@ -261,7 +261,7 @@ function generateContentItems(theme: Theme): KeyValueDataContentProps[] {
         key: 'subject-node',
         subject: 'custom subject node',
         subjectNode: (
-          <span style={{color: theme.colors.blue400}}>
+          <span style={{color: theme.tokens.content.accent}}>
             Custom Subject Node <IconSentry />
           </span>
         ),
diff --git a/static/app/components/performance/waterfall/constants.tsx b/static/app/components/performance/waterfall/constants.tsx
index 0c9bc2c4dc16cb..6387524f51f04f 100644
--- a/static/app/components/performance/waterfall/constants.tsx
+++ b/static/app/components/performance/waterfall/constants.tsx
@@ -26,23 +26,31 @@ export function getSpanBarColors(
       return {
         primary: '#dedae3',
         alternate: '#f4f2f7',
-        insetTextColor: theme.colors.gray400,
+        insetTextColor: theme.tokens.content.primary,
       };
     case SpanBarType.AFFECTED:
-      return {primary: '#f55459', alternate: '#faa9ac', insetTextColor: theme.white};
+      return {
+        primary: '#f55459',
+        alternate: '#faa9ac',
+        insetTextColor: theme.tokens.content.onVibrant.light,
+      };
     case SpanBarType.AUTOGROUPED:
       return {
-        primary: theme.colors.blue400,
+        primary: theme.tokens.background.accent.vibrant,
         alternate: '#d1dff9',
-        insetTextColor: theme.colors.gray400,
+        insetTextColor: theme.tokens.content.primary,
       };
     case SpanBarType.AUTOGROUPED_AND_AFFECTED:
       return {
         primary: '#f55459',
         alternate: '#faa9ac',
-        insetTextColor: theme.white,
+        insetTextColor: theme.tokens.content.onVibrant.light,
       };
     default:
-      return {primary: '', alternate: '', insetTextColor: theme.white};
+      return {
+        primary: '',
+        alternate: '',
+        insetTextColor: theme.tokens.content.onVibrant.light,
+      };
   }
 }
diff --git a/static/app/components/prevent/summary.tsx b/static/app/components/prevent/summary.tsx
index 65132844db1195..01168769a87e01 100644
--- a/static/app/components/prevent/summary.tsx
+++ b/static/app/components/prevent/summary.tsx
@@ -115,16 +115,21 @@ export function SummaryCard({label, tooltip, value, filterBy, extra}: SummaryCar
 
 const SummaryCardContainer = styled(Flex)<{isClickable?: boolean; isFiltered?: boolean}>`
   border: 1px solid
-    ${p => (p.isFiltered ? p.theme.colors.blue400 : p.theme.tokens.border.primary)};
+    ${p =>
+      p.isFiltered
+        ? p.theme.tokens.border.accent.vibrant
+        : p.theme.tokens.border.primary};
   background: ${p =>
-    p.isFiltered ? p.theme.colors.blue100 : p.theme.tokens.background.primary};
+    p.isFiltered
+      ? p.theme.tokens.background.transparent.accent.muted
+      : p.theme.tokens.background.primary};
   border-radius: ${p => p.theme.radius.md};
 
   ${p =>
     p.isClickable &&
     `
     &:hover {
-      background: ${p.theme.backgroundSecondary};
+      background: ${p.theme.tokens.background.secondary};
     }
   `}
 `;
diff --git a/static/app/components/prevent/virtualRenderers/colorBar.tsx b/static/app/components/prevent/virtualRenderers/colorBar.tsx
index 3ebc4704d9dc7b..fe0739eec13980 100644
--- a/static/app/components/prevent/virtualRenderers/colorBar.tsx
+++ b/static/app/components/prevent/virtualRenderers/colorBar.tsx
@@ -19,7 +19,8 @@ const StyledColorBar = styled('div')<{isHighlighted: boolean}>`
   height: 100%;
   width: calc(100% + 72px);
 
-  background-color: ${p => (p.isHighlighted ? p.theme.colors.blue200 : 'inherit')};
+  background-color: ${p =>
+    p.isHighlighted ? p.theme.tokens.background.transparent.accent.muted : 'inherit'};
 `;
 
 const ColorBarWrapper = styled('div')`
diff --git a/static/app/components/prevent/virtualRenderers/lineNumber.tsx b/static/app/components/prevent/virtualRenderers/lineNumber.tsx
index c7de3f0b3350c3..727f5d40208680 100644
--- a/static/app/components/prevent/virtualRenderers/lineNumber.tsx
+++ b/static/app/components/prevent/virtualRenderers/lineNumber.tsx
@@ -111,32 +111,41 @@ const LineNumberWrapper = styled('div')<{
 
     if (p.isHighlighted) {
       return css`
-        ${generatePseudoElement({background: p.theme.colors.blue100})}
-        border-right: ${space(0.25)} solid ${p.theme.colors.blue400};
+        ${generatePseudoElement({
+          background: p.theme.tokens.background.transparent.accent.muted,
+        })}
+        border-right: ${space(0.25)} solid ${p.theme.tokens.border.accent.vibrant};
       `;
     }
     if (p.coverage === 'H') {
       return css`
-        ${generatePseudoElement({background: p.theme.colors.green100})}
-        border-right: ${space(0.25)} solid ${p.theme.colors.green400};
+        ${generatePseudoElement({
+          background: p.theme.tokens.background.transparent.success.muted,
+        })}
+        border-right: ${space(0.25)} solid ${p.theme.tokens.border.success.vibrant};
       `;
     }
     if (p.coverage === 'M') {
       return css`
-        ${generatePseudoElement({background: p.theme.colors.red100})}
-        border-right: ${space(0.25)} solid ${p.theme.colors.red400};
+        ${generatePseudoElement({
+          background: p.theme.tokens.background.transparent.danger.muted,
+        })}
+        border-right: ${space(0.25)} solid ${p.theme.tokens.border.danger.vibrant};
       `;
     }
     if (p.coverage === 'P') {
       return css`
-        ${generatePseudoElement({background: p.theme.colors.yellow100})}
-        border-right: ${space(0.25)} solid ${p.theme.colors.yellow400};
+        ${generatePseudoElement({
+          background: p.theme.tokens.background.transparent.warning.muted,
+        })}
+        border-right: ${space(0.25)} solid ${p.theme.tokens.border.warning.vibrant};
       `;
     }
 
     return css`
       background-color: var(--prism-block-background);
-      border-right: ${space(0.25)} solid ${p.theme.colors.gray200};
+      border-right: ${space(0.25)} solid
+        ${p.theme.tokens.border.transparent.neutral.muted};
     `;
   }}
 `;
diff --git a/static/app/components/profiling/flamegraph/callTreeTable.tsx b/static/app/components/profiling/flamegraph/callTreeTable.tsx
index 8abd02939aa6e2..3143025146cbbd 100644
--- a/static/app/components/profiling/flamegraph/callTreeTable.tsx
+++ b/static/app/components/profiling/flamegraph/callTreeTable.tsx
@@ -46,7 +46,7 @@ export const CallTreeTable = styled('div')`
     }
 
     &[tabindex='0'] {
-      background: ${p => p.theme.colors.blue400};
+      background: ${p => p.theme.tokens.background.accent.vibrant};
       color: #fff;
 
       .${CallTreeTableClassNames.WEIGHT} {
diff --git a/static/app/components/progressBar.tsx b/static/app/components/progressBar.tsx
index 62227fe2607288..719a7a751e811f 100644
--- a/static/app/components/progressBar.tsx
+++ b/static/app/components/progressBar.tsx
@@ -66,7 +66,7 @@ const ProgressBar = styled(({className, value}: Props) => (
   :before {
     content: ' ';
     width: ${p => p.value}%;
-    background-color: ${p => p.theme.colors.chonk.blue400};
+    background-color: ${p => p.theme.tokens.background.accent.vibrant};
     position: absolute;
   }
 
diff --git a/static/app/components/replays/breadcrumbs/gridlines.tsx b/static/app/components/replays/breadcrumbs/gridlines.tsx
index e7e560ecbbb231..58d24533706865 100644
--- a/static/app/components/replays/breadcrumbs/gridlines.tsx
+++ b/static/app/components/replays/breadcrumbs/gridlines.tsx
@@ -6,7 +6,8 @@ import {countColumns} from 'sentry/components/replays/utils';
 type LineStyle = 'dotted' | 'solid' | 'none';
 
 const DarkerLine = styled(Timeline.Col)<{lineStyle: LineStyle}>`
-  border-right: 1px ${p => p.lineStyle} ${p => p.theme.colors.gray200};
+  border-right: 1px ${p => p.lineStyle}
+    ${p => p.theme.tokens.border.transparent.neutral.muted};
   text-align: right;
   line-height: 14px;
 `;
diff --git a/static/app/components/replays/breadcrumbs/replayTimeline.tsx b/static/app/components/replays/breadcrumbs/replayTimeline.tsx
index 8f82cefffdf09e..ca5110dfbf64ff 100644
--- a/static/app/components/replays/breadcrumbs/replayTimeline.tsx
+++ b/static/app/components/replays/breadcrumbs/replayTimeline.tsx
@@ -90,6 +90,7 @@ const CenteredStack = styled(Stacked)`
 `;
 
 const VisibleStack = styled(Stacked)`
+  background: ${p => p.theme.tokens.background.secondary};
   height: 100%;
   width: 100%;
 `;
diff --git a/static/app/components/replays/diff/picker/crumbItem.tsx b/static/app/components/replays/diff/picker/crumbItem.tsx
index 929279aff23f43..415306e51b6f5d 100644
--- a/static/app/components/replays/diff/picker/crumbItem.tsx
+++ b/static/app/components/replays/diff/picker/crumbItem.tsx
@@ -60,12 +60,12 @@ const CenterRelative = styled('div')`
 `;
 
 const ErrorLine = styled('div')`
-  border: 1px solid ${p => p.theme.colors.blue500};
+  border: 1px solid ${p => p.theme.tokens.border.accent.vibrant};
   height: 100%;
 `;
 
 const ErrorLabel = styled('div')`
-  color: ${p => p.theme.colors.blue500};
+  color: ${p => p.theme.tokens.content.accent};
   position: absolute;
   top: 0;
   transform: translate(-50%, -100%);
diff --git a/static/app/components/replays/player/replayPlayer.tsx b/static/app/components/replays/player/replayPlayer.tsx
index 4bf3f2540a4690..3f6416097992bc 100644
--- a/static/app/components/replays/player/replayPlayer.tsx
+++ b/static/app/components/replays/player/replayPlayer.tsx
@@ -51,7 +51,7 @@ function useReplayerInstance() {
         duration: 0.75 * 1000,
         lineCap: 'round',
         lineWidth: 2,
-        strokeStyle: theme.colors.blue200,
+        strokeStyle: theme.tokens.border.accent.moderate,
       },
       plugins: getPlugins(webFrames),
       skipInactive: initialPrefsRef.current.isSkippingInactive,
diff --git a/static/app/components/replays/player/scrubber.tsx b/static/app/components/replays/player/scrubber.tsx
index 1fc891394770dc..0d0df692ebbabe 100644
--- a/static/app/components/replays/player/scrubber.tsx
+++ b/static/app/components/replays/player/scrubber.tsx
@@ -56,7 +56,7 @@ const Meter = styled('div')`
   height: 100%;
   width: 100%;
   pointer-events: none;
-  background: ${p => p.theme.colors.gray200};
+  background: ${p => p.theme.tokens.background.secondary};
 `;
 
 const RangeWrapper = styled('div')`
@@ -140,7 +140,7 @@ export const TimelineScrubber = styled(Scrubber)`
    */
   ${PlaybackTimeValue},
   ${MouseTrackingValue} {
-    border-right: ${space(0.25)} solid ${p => p.theme.colors.blue400};
+    border-right: ${space(0.25)} solid ${p => p.theme.tokens.graphics.accent.vibrant};
   }
 `;
 
@@ -149,7 +149,6 @@ export const PlayerScrubber = styled(Scrubber)`
 
   ${Meter} {
     border-radius: ${p => p.theme.radius.md};
-    background: ${p => p.theme.tokens.border.transparent.neutral.muted};
   }
 
   ${RangeWrapper} {
@@ -165,7 +164,7 @@ export const PlayerScrubber = styled(Scrubber)`
   }
 
   ${PlaybackTimeValue} {
-    background: ${p => p.theme.colors.blue200};
+    background: ${p => p.theme.tokens.background.accent.vibrant};
     border-radius: ${p => p.theme.radius.md};
 
     /**
@@ -175,12 +174,12 @@ export const PlayerScrubber = styled(Scrubber)`
      *           PlaybackTimeValue @ 20s
      */
     :after {
-      background: ${p => p.theme.colors.blue400};
+      background: ${p => p.theme.tokens.background.accent.vibrant};
     }
   }
 
   ${MouseTrackingValue} {
-    background: ${p => p.theme.tokens.border.transparent.neutral.muted};
+    background: ${p => p.theme.tokens.background.transparent.accent.muted};
     border-radius: ${p => p.theme.radius.md};
 
     /**
@@ -191,7 +190,7 @@ export const PlayerScrubber = styled(Scrubber)`
      *      MouseTrackingValue @ 10s
      */
     :after {
-      background: ${p => p.theme.colors.gray500};
+      background: ${p => p.theme.tokens.background.overlay};
     }
   }
 
@@ -206,7 +205,7 @@ export const PlayerScrubber = styled(Scrubber)`
     pointer-events: none;
     box-sizing: content-box;
     border-radius: var(--size);
-    border: solid ${p => p.theme.white};
+    border: solid ${p => p.theme.tokens.border.onVibrant.light};
     border-width: var(--borderWidth);
     position: absolute;
     top: 0;
diff --git a/static/app/components/replays/player/styles.tsx b/static/app/components/replays/player/styles.tsx
index 64ebbc774ecd3d..db176d1a5e1133 100644
--- a/static/app/components/replays/player/styles.tsx
+++ b/static/app/components/replays/player/styles.tsx
@@ -59,7 +59,7 @@ export const sentryReplayerCss = (theme: Theme) => css`
     display: inline-block;
     width: 32px;
     height: 32px;
-    background: ${theme.colors.blue400};
+    background: ${theme.tokens.background.accent.vibrant};
     border-radius: 100%;
     transform: translate(-50%, -50%);
     opacity: 0.3;
@@ -81,7 +81,7 @@ export const sentryReplayerCss = (theme: Theme) => css`
       border-color 0.2s ease-in-out;
   }
   .replayer-mouse.touch-device.touch-active {
-    border-color: ${theme.colors.blue200};
+    border-color: ${theme.tokens.border.transparent.accent.moderate};
     transition:
       left 0.25s linear,
       top 0.25s linear,
diff --git a/static/app/components/replays/replayContext.tsx b/static/app/components/replays/replayContext.tsx
index 08c2e2346bc395..37eb2008a008c0 100644
--- a/static/app/components/replays/replayContext.tsx
+++ b/static/app/components/replays/replayContext.tsx
@@ -355,7 +355,7 @@ export function Provider({
           duration: 0.75 * 1000,
           lineCap: 'round',
           lineWidth: 2,
-          strokeStyle: theme.colors.blue200,
+          strokeStyle: theme.tokens.border.accent.moderate,
         },
         plugins: [CanvasReplayerPlugin(events)],
         skipInactive: initialPrefsRef.current.isSkippingInactive,
@@ -388,7 +388,7 @@ export function Provider({
       hasNewEvents,
       isFetching,
       setReplayFinished,
-      theme.colors.blue200,
+      theme.tokens.border.accent.moderate,
     ]
   );
 
diff --git a/static/app/components/replays/table/replayTableColumns.tsx b/static/app/components/replays/table/replayTableColumns.tsx
index 90996563cf8757..64b7fa69971898 100644
--- a/static/app/components/replays/table/replayTableColumns.tsx
+++ b/static/app/components/replays/table/replayTableColumns.tsx
@@ -642,7 +642,7 @@ const UnreadIndicator = styled('div')`
   height: 8px;
   border-radius: 50%;
 
-  background-color: ${p => p.theme.colors.blue500};
+  background-color: ${p => p.theme.tokens.graphics.accent.vibrant};
   &[data-has-viewed='true'] {
     background-color: transparent;
   }
diff --git a/static/app/components/replays/videoReplayerWithInteractions.tsx b/static/app/components/replays/videoReplayerWithInteractions.tsx
index 50fb8c1cb34c61..f20749e2299202 100644
--- a/static/app/components/replays/videoReplayerWithInteractions.tsx
+++ b/static/app/components/replays/videoReplayerWithInteractions.tsx
@@ -67,7 +67,7 @@ export class VideoReplayerWithInteractions {
         duration: 0.75 * 1000,
         lineCap: 'round',
         lineWidth: 2,
-        strokeStyle: theme.colors.blue200,
+        strokeStyle: theme.tokens.border.accent.moderate,
       },
       plugins: [],
       skipInactive: false,
diff --git a/static/app/components/replays/virtualizedGrid/bodyCell.tsx b/static/app/components/replays/virtualizedGrid/bodyCell.tsx
index 03c81349552491..564bd67fecce68 100644
--- a/static/app/components/replays/virtualizedGrid/bodyCell.tsx
+++ b/static/app/components/replays/virtualizedGrid/bodyCell.tsx
@@ -5,7 +5,7 @@ import {space} from 'sentry/styles/space';
 
 const cellBackground = (p: CellProps & {theme: Theme}) => {
   if (p.isSelected) {
-    return `background-color: ${p.theme.colors.blue400};`;
+    return `background-color: ${p.theme.tokens.background.accent.vibrant};`;
   }
   if (p.isStatusError) {
     return `background-color: ${p.theme.colors.red100};`;
diff --git a/static/app/components/replays/virtualizedGrid/gridTable.tsx b/static/app/components/replays/virtualizedGrid/gridTable.tsx
index 89e1bde511ec82..7ce939a37bf698 100644
--- a/static/app/components/replays/virtualizedGrid/gridTable.tsx
+++ b/static/app/components/replays/virtualizedGrid/gridTable.tsx
@@ -7,7 +7,7 @@ export const GridTable = styled(FluidHeight)`
   border-radius: ${p => p.theme.radius.md};
 
   .beforeHoverTime + .afterHoverTime:before {
-    border-top: 1px solid ${p => p.theme.colors.blue200};
+    border-top: 1px solid ${p => p.theme.tokens.border.transparent.accent.moderate};
     content: '';
     left: 0;
     position: absolute;
@@ -16,7 +16,7 @@ export const GridTable = styled(FluidHeight)`
   }
 
   .beforeHoverTime:last-child:before {
-    border-bottom: 1px solid ${p => p.theme.colors.blue200};
+    border-bottom: 1px solid ${p => p.theme.tokens.border.transparent.accent.moderate};
     content: '';
     right: 0;
     position: absolute;
@@ -25,7 +25,7 @@ export const GridTable = styled(FluidHeight)`
   }
 
   .beforeCurrentTime + .afterCurrentTime:before {
-    border-top: 1px solid ${p => p.theme.colors.blue400};
+    border-top: 1px solid ${p => p.theme.tokens.border.transparent.accent.vibrant};
     content: '';
     left: 0;
     position: absolute;
@@ -34,7 +34,7 @@ export const GridTable = styled(FluidHeight)`
   }
 
   .beforeCurrentTime:last-child:before {
-    border-bottom: 1px solid ${p => p.theme.colors.blue400};
+    border-bottom: 1px solid ${p => p.theme.tokens.border.transparent.accent.vibrant};
     content: '';
     right: 0;
     position: absolute;
diff --git a/static/app/components/searchBar/searchDropdown.tsx b/static/app/components/searchBar/searchDropdown.tsx
index feee18ce4813c5..425f4ca4769735 100644
--- a/static/app/components/searchBar/searchDropdown.tsx
+++ b/static/app/components/searchBar/searchDropdown.tsx
@@ -600,7 +600,8 @@ const RestOfWordsContainer = styled('span')<{
   hasSplit?: boolean;
   isFirstWordHidden?: boolean;
 }>`
-  color: ${p => (p.hasSplit ? p.theme.colors.blue500 : p.theme.tokens.content.primary)};
+  color: ${p =>
+    p.hasSplit ? p.theme.tokens.content.accent : p.theme.tokens.content.primary};
   margin-left: ${p => (p.isFirstWordHidden ? space(1) : '0px')};
 `;
 
diff --git a/static/app/components/searchQueryBuilder/askSeer/askSeerConsentOption.tsx b/static/app/components/searchQueryBuilder/askSeer/askSeerConsentOption.tsx
index 2102a11002ea45..925e297b78f695 100644
--- a/static/app/components/searchQueryBuilder/askSeer/askSeerConsentOption.tsx
+++ b/static/app/components/searchQueryBuilder/askSeer/askSeerConsentOption.tsx
@@ -70,10 +70,10 @@ const SeerConsentText = styled('p')`
 `;
 
 const TooltipSubExternalLink = styled(ExternalLink)`
-  color: ${p => p.theme.colors.blue500};
+  color: ${p => p.theme.tokens.content.accent};
 
   :hover {
-    color: ${p => p.theme.colors.blue500};
+    color: ${p => p.theme.tokens.content.accent};
     text-decoration: underline;
   }
 `;
diff --git a/static/app/components/searchQueryBuilder/askSeer/components.tsx b/static/app/components/searchQueryBuilder/askSeer/components.tsx
index 3b8c4682c2db5a..3c6336bc33850f 100644
--- a/static/app/components/searchQueryBuilder/askSeer/components.tsx
+++ b/static/app/components/searchQueryBuilder/askSeer/components.tsx
@@ -7,7 +7,7 @@ export const AskSeerPane = styled('div')`
   justify-content: flex-start;
   padding: 0;
   border-bottom: 1px solid ${p => p.theme.tokens.border.secondary};
-  background-color: ${p => p.theme.colors.blue100};
+  background-color: ${p => p.theme.tokens.background.transparent.accent.muted};
   width: 100%;
 `;
 
@@ -24,7 +24,7 @@ export const AskSeerListItem = styled('div')<{
   border-radius: 0;
   background-color: none;
   box-shadow: none;
-  color: ${p => p.theme.colors.blue500};
+  color: ${p => p.theme.tokens.content.accent};
   font-size: ${p => p.theme.fontSize.md};
   font-weight: ${p => p.theme.fontWeight.bold};
   text-align: left;
@@ -39,8 +39,8 @@ export const AskSeerListItem = styled('div')<{
   }
 
   &[aria-selected='true'] {
-    background: ${p => p.theme.colors.blue100};
-    color: ${p => p.theme.colors.blue500};
+    background: ${p => p.theme.tokens.background.transparent.accent.muted};
+    color: ${p => p.theme.tokens.content.accent};
   }
 `;
 
@@ -49,7 +49,7 @@ export const AskSeerLabel = styled('span')<{
   width?: 'auto';
 }>`
   ${p => p.theme.overflowEllipsis};
-  color: ${p => p.theme.colors.blue500};
+  color: ${p => p.theme.tokens.content.accent};
   font-size: ${p => p.theme.fontSize.md};
   font-weight: ${p => p.fontWeight ?? p.theme.fontWeight.bold};
   display: flex;
diff --git a/static/app/components/searchQueryBuilder/askSeerCombobox/askSeerSearchHeader.tsx b/static/app/components/searchQueryBuilder/askSeerCombobox/askSeerSearchHeader.tsx
index 762214957c8475..70a2430776f1c6 100644
--- a/static/app/components/searchQueryBuilder/askSeerCombobox/askSeerSearchHeader.tsx
+++ b/static/app/components/searchQueryBuilder/askSeerCombobox/askSeerSearchHeader.tsx
@@ -26,5 +26,5 @@ const HeaderWrapper = styled('div')`
 `;
 
 const StyledIconSeer = styled(IconSeer)`
-  color: ${p => p.theme.colors.blue500};
+  color: ${p => p.theme.tokens.content.accent};
 `;
diff --git a/static/app/components/searchQueryBuilder/askSeerCombobox/askSeerSearchListBox.tsx b/static/app/components/searchQueryBuilder/askSeerCombobox/askSeerSearchListBox.tsx
index 1fb70b90489030..1cb01368dac13d 100644
--- a/static/app/components/searchQueryBuilder/askSeerCombobox/askSeerSearchListBox.tsx
+++ b/static/app/components/searchQueryBuilder/askSeerCombobox/askSeerSearchListBox.tsx
@@ -67,18 +67,19 @@ const StyledOption = styled('li')<{isFocused: boolean}>`
   list-style: none;
   transition: background-color 0.2s ease;
   padding: ${p => p.theme.space.xs} ${p => p.theme.space.xl};
-  background-color: ${p => (p.isFocused ? p.theme.colors.blue100 : 'transparent')};
+  background-color: ${p =>
+    p.isFocused ? p.theme.tokens.background.transparent.accent.muted : 'transparent'};
 
   &:hover {
-    background-color: ${p => p.theme.colors.blue100};
+    background-color: ${p => p.theme.tokens.background.transparent.accent.muted};
   }
 
   &:focus {
-    background-color: ${p => p.theme.colors.blue100};
+    background-color: ${p => p.theme.tokens.background.transparent.accent.muted};
   }
 
   &[aria-selected='true'] {
-    background-color: ${p => p.theme.colors.blue100};
+    background-color: ${p => p.theme.tokens.background.transparent.accent.muted};
   }
 
   &[data-is-none-of-these],
diff --git a/static/app/components/searchQueryBuilder/askSeerCombobox/askSeerSearchPopover.tsx b/static/app/components/searchQueryBuilder/askSeerCombobox/askSeerSearchPopover.tsx
index b2624e4169bf9c..121909bc5e2a30 100644
--- a/static/app/components/searchQueryBuilder/askSeerCombobox/askSeerSearchPopover.tsx
+++ b/static/app/components/searchQueryBuilder/askSeerCombobox/askSeerSearchPopover.tsx
@@ -54,7 +54,7 @@ const ListBoxOverlay = styled(Overlay)`
 `;
 
 const BackgroundColorWrapper = styled('div')`
-  background-color: ${p => p.theme.colors.blue100};
+  background-color: ${p => p.theme.tokens.background.transparent.accent.muted};
 `;
 
 const StyledPositionWrapper = styled('div')<{visible?: boolean}>`
diff --git a/static/app/components/searchQueryBuilder/askSeerCombobox/askSeerSearchSkeleton.tsx b/static/app/components/searchQueryBuilder/askSeerCombobox/askSeerSearchSkeleton.tsx
index b1c7d3566983b0..9d9fdfb9a27d3d 100644
--- a/static/app/components/searchQueryBuilder/askSeerCombobox/askSeerSearchSkeleton.tsx
+++ b/static/app/components/searchQueryBuilder/askSeerCombobox/askSeerSearchSkeleton.tsx
@@ -59,7 +59,7 @@ const SkeletonCell = styled('div')`
 const SkeletonLine = styled('div')<{width: string}>`
   height: 16px;
   width: ${p => p.width};
-  background: ${p => p.theme.colors.blue200};
+  background: ${p => p.theme.tokens.background.transparent.accent.muted};
   border-radius: 4px;
   animation: pulse 1.5s ease-in-out infinite;
 
diff --git a/static/app/components/searchQueryBuilder/formattedQuery.tsx b/static/app/components/searchQueryBuilder/formattedQuery.tsx
index 0024706d149f87..3b89c68b54ec64 100644
--- a/static/app/components/searchQueryBuilder/formattedQuery.tsx
+++ b/static/app/components/searchQueryBuilder/formattedQuery.tsx
@@ -216,7 +216,7 @@ export const FilterWrapper = styled('div')`
 const FilterValue = styled('div')`
   width: 100%;
   max-width: 300px;
-  color: ${p => p.theme.colors.blue500};
+  color: ${p => p.theme.tokens.content.accent};
   ${p => p.theme.overflowEllipsis};
 `;
 
diff --git a/static/app/components/searchQueryBuilder/index.tsx b/static/app/components/searchQueryBuilder/index.tsx
index d5e5264ff675a1..68a9a82e53d367 100644
--- a/static/app/components/searchQueryBuilder/index.tsx
+++ b/static/app/components/searchQueryBuilder/index.tsx
@@ -337,7 +337,7 @@ const ActionButton = styled(Button)<{active?: boolean}>`
   ${p =>
     p.active &&
     css`
-      background-color: ${p.theme.colors.blue200};
+      background-color: ${p.theme.tokens.background.transparent.accent.muted};
     `}
 `;
 
diff --git a/static/app/components/searchQueryBuilder/tokens/filter/aggregateKey.tsx b/static/app/components/searchQueryBuilder/tokens/filter/aggregateKey.tsx
index 563b8039ec319e..877fe6aa7ba399 100644
--- a/static/app/components/searchQueryBuilder/tokens/filter/aggregateKey.tsx
+++ b/static/app/components/searchQueryBuilder/tokens/filter/aggregateKey.tsx
@@ -169,7 +169,7 @@ const KeyEditing = styled('div')`
 
   :focus-within {
     ${Parameters} {
-      background-color: ${p => p.theme.colors.blue100};
+      background-color: ${p => p.theme.tokens.background.transparent.accent.muted};
       height: 100%;
     }
   }
diff --git a/static/app/components/searchQueryBuilder/tokens/filter/filter.tsx b/static/app/components/searchQueryBuilder/tokens/filter/filter.tsx
index 458fb28aaac9ea..0aea506a215ef6 100644
--- a/static/app/components/searchQueryBuilder/tokens/filter/filter.tsx
+++ b/static/app/components/searchQueryBuilder/tokens/filter/filter.tsx
@@ -293,14 +293,14 @@ const FilterValueGridCell = styled(BaseGridCell)`
 
 const ValueButton = styled(UnstyledButton)`
   padding: 0 ${p => p.theme.space['2xs']};
-  color: ${p => p.theme.colors.blue500};
+  color: ${p => p.theme.tokens.content.accent};
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
   width: 100%;
   max-width: 400px;
 
   :focus {
-    background-color: ${p => p.theme.colors.blue100};
+    background-color: ${p => p.theme.tokens.background.transparent.accent.muted};
     border-left: 1px solid ${p => p.theme.tokens.border.secondary};
     border-right: 1px solid ${p => p.theme.tokens.border.secondary};
   }
@@ -308,13 +308,13 @@ const ValueButton = styled(UnstyledButton)`
 
 const ValueEditing = styled('div')`
   padding: 0 ${p => p.theme.space['2xs']};
-  color: ${p => p.theme.colors.blue500};
+  color: ${p => p.theme.tokens.content.accent};
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
   max-width: 100%;
 
   :focus-within {
-    background-color: ${p => p.theme.colors.blue100};
+    background-color: ${p => p.theme.tokens.background.transparent.accent.muted};
     border-left: 1px solid ${p => p.theme.tokens.border.secondary};
     border-right: 1px solid ${p => p.theme.tokens.border.secondary};
   }
diff --git a/static/app/components/searchQueryBuilder/tokens/filter/filterKey.tsx b/static/app/components/searchQueryBuilder/tokens/filter/filterKey.tsx
index 14c80f363f0531..16dd9e4717856e 100644
--- a/static/app/components/searchQueryBuilder/tokens/filter/filterKey.tsx
+++ b/static/app/components/searchQueryBuilder/tokens/filter/filterKey.tsx
@@ -88,7 +88,7 @@ const KeyButton = styled(UnstyledButton)`
   max-width: 400px;
 
   :focus {
-    background-color: ${p => p.theme.colors.blue100};
+    background-color: ${p => p.theme.tokens.background.transparent.accent.muted};
     border-left: 1px solid ${p => p.theme.tokens.border.secondary};
     border-right: 1px solid ${p => p.theme.tokens.border.secondary};
   }
@@ -96,7 +96,7 @@ const KeyButton = styled(UnstyledButton)`
 
 const KeyEditing = styled('div')`
   padding: 0 ${space(0.25)};
-  color: ${p => p.theme.colors.blue500};
+  color: ${p => p.theme.tokens.content.accent};
   border-left: 1px solid transparent;
   border-right: 1px solid transparent;
   max-width: 100%;
diff --git a/static/app/components/searchQueryBuilder/tokens/filterKeyListBox/index.tsx b/static/app/components/searchQueryBuilder/tokens/filterKeyListBox/index.tsx
index cb369039bc3ab3..0c23b5faa95665 100644
--- a/static/app/components/searchQueryBuilder/tokens/filterKeyListBox/index.tsx
+++ b/static/app/components/searchQueryBuilder/tokens/filterKeyListBox/index.tsx
@@ -551,9 +551,9 @@ const SectionButton = styled(Button)`
   border: 0;
 
   &[aria-selected='true'] {
-    background-color: ${p => p.theme.colors.blue100};
-    box-shadow: inset 0 0 0 1px ${p => p.theme.colors.blue100};
-    color: ${p => p.theme.colors.blue400};
+    background-color: ${p => p.theme.tokens.background.transparent.accent.muted};
+    box-shadow: inset 0 0 0 1px ${p => p.theme.tokens.border.transparent.accent.muted};
+    color: ${p => p.theme.tokens.content.accent};
     font-weight: ${p => p.theme.fontWeight.bold};
   }
 `;
diff --git a/static/app/components/searchSyntax/renderer.tsx b/static/app/components/searchSyntax/renderer.tsx
index b4412a6a499c9d..28a41a9a532a24 100644
--- a/static/app/components/searchSyntax/renderer.tsx
+++ b/static/app/components/searchSyntax/renderer.tsx
@@ -294,20 +294,32 @@ const colorType = (p: TokenGroupProps) =>
 function makeSearchTokenVariants(theme: Theme) {
   return {
     searchTokenBorder: {
-      valid: theme.colors.blue200,
-      validActive: modifyColor(theme.colors.blue200).opaquer(1).string(),
-      invalid: theme.colors.red200,
-      invalidActive: modifyColor(theme.colors.red200).opaquer(1).string(),
-      warning: theme.colors.yellow200,
-      warningActive: modifyColor(theme.colors.yellow200).opaquer(1).string(),
+      valid: theme.tokens.border.transparent.accent.muted,
+      validActive: modifyColor(theme.tokens.border.transparent.accent.moderate)
+        .opaquer(1)
+        .string(),
+      invalid: theme.tokens.border.transparent.danger.muted,
+      invalidActive: modifyColor(theme.tokens.border.transparent.danger.moderate)
+        .opaquer(1)
+        .string(),
+      warning: theme.tokens.border.transparent.warning.muted,
+      warningActive: modifyColor(theme.tokens.border.transparent.warning.moderate)
+        .opaquer(1)
+        .string(),
     },
     searchTokenBackground: {
-      valid: theme.colors.blue100,
-      validActive: modifyColor(theme.colors.blue100).opaquer(1.0).string(),
-      invalid: theme.colors.red100,
-      invalidActive: modifyColor(theme.colors.red100).opaquer(0.8).string(),
-      warning: theme.colors.yellow100,
-      warningActive: modifyColor(theme.colors.yellow100).opaquer(0.8).string(),
+      valid: theme.tokens.background.transparent.accent.muted,
+      validActive: modifyColor(theme.tokens.background.transparent.accent.muted)
+        .opaquer(1.0)
+        .string(),
+      invalid: theme.tokens.background.transparent.danger.muted,
+      invalidActive: modifyColor(theme.tokens.background.transparent.danger.muted)
+        .opaquer(0.8)
+        .string(),
+      warning: theme.tokens.background.transparent.warning.muted,
+      warningActive: modifyColor(theme.tokens.background.transparent.warning.muted)
+        .opaquer(0.8)
+        .string(),
     },
   };
 }
@@ -322,7 +334,7 @@ const TokenGroup = styled('span')<TokenGroupProps>`
       ? p.theme.colors.red500
       : p.warning
         ? p.theme.colors.gray500
-        : p.theme.colors.blue500};
+        : p.theme.tokens.content.accent};
 
   position: relative;
   animation-name: ${shakeAnimation};
@@ -442,16 +454,16 @@ const InList = styled('span')`
   &:before {
     content: '[';
     font-weight: ${p => p.theme.fontWeight.bold};
-    color: ${p => p.theme.colors.blue500};
+    color: ${p => p.theme.tokens.content.accent};
   }
   &:after {
     content: ']';
     font-weight: ${p => p.theme.fontWeight.bold};
-    color: ${p => p.theme.colors.blue500};
+    color: ${p => p.theme.tokens.content.accent};
   }
 
   ${Value} {
-    color: ${p => p.theme.colors.blue500};
+    color: ${p => p.theme.tokens.content.accent};
   }
 `;
 
diff --git a/static/app/components/serviceIncidentDetails.tsx b/static/app/components/serviceIncidentDetails.tsx
index f019e7fcc48966..76b10c1d40f2c4 100644
--- a/static/app/components/serviceIncidentDetails.tsx
+++ b/static/app/components/serviceIncidentDetails.tsx
@@ -185,10 +185,10 @@ function getIndicatorColor({
   theme: Theme;
 }): string {
   const indicatorColor: Record<StatusPageIncidentUpdate['status'], string> = {
-    investigating: theme.colors.red200,
-    identified: theme.colors.blue200,
-    monitoring: theme.colors.yellow200,
-    resolved: theme.colors.green200,
+    investigating: theme.tokens.background.transparent.danger.muted,
+    identified: theme.tokens.background.transparent.accent.muted,
+    monitoring: theme.tokens.background.transparent.warning.muted,
+    resolved: theme.tokens.background.transparent.success.muted,
   };
   return indicatorColor[status];
 }
diff --git a/static/app/components/stream/group.tsx b/static/app/components/stream/group.tsx
index 2b2ee164f7ecec..e726bfd580b3ac 100644
--- a/static/app/components/stream/group.tsx
+++ b/static/app/components/stream/group.tsx
@@ -769,7 +769,7 @@ const CheckboxLabel = styled('label')`
 const UnreadIndicator = styled('div')`
   width: 8px;
   height: 8px;
-  background-color: ${p => p.theme.colors.blue500};
+  background-color: ${p => p.theme.tokens.graphics.accent.vibrant};
   border-radius: 50%;
   margin-top: 1px;
   margin-left: ${space(2)};
diff --git a/static/app/components/stream/groupChart.tsx b/static/app/components/stream/groupChart.tsx
index 3008c15b5d6585..f49e25b1513169 100644
--- a/static/app/components/stream/groupChart.tsx
+++ b/static/app/components/stream/groupChart.tsx
@@ -69,7 +69,11 @@ function GroupChart({
           showMarkLine && max > 0
             ? MarkLine({
                 silent: true,
-                lineStyle: {color: theme.colors.gray200, type: 'dotted', width: 1},
+                lineStyle: {
+                  color: theme.tokens.border.transparent.neutral.muted,
+                  type: 'dotted',
+                  width: 1,
+                },
                 data: [
                   {
                     type: 'max',
@@ -78,7 +82,7 @@ function GroupChart({
                 label: {
                   show: true,
                   position: 'start',
-                  color: `${theme.colors.gray200}`,
+                  color: `${theme.tokens.content.secondary}`,
                   fontFamily: 'Rubik',
                   fontSize: 10,
                   formatter: `${formattedMarkLine}`,
@@ -88,8 +92,8 @@ function GroupChart({
       },
     ];
     return {
-      colors: [theme.colors.gray400],
-      emphasisColors: [theme.colors.blue400],
+      colors: [theme.tokens.dataviz.semantic.neutral],
+      emphasisColors: [theme.tokens.dataviz.semantic.accent],
       series,
     };
   }, [showSecondaryPoints, secondaryStats, showMarkLine, stats, theme]);
diff --git a/static/app/components/tables/gridEditable/styles.tsx b/static/app/components/tables/gridEditable/styles.tsx
index dfedd6d8830cec..8a5782bf69420a 100644
--- a/static/app/components/tables/gridEditable/styles.tsx
+++ b/static/app/components/tables/gridEditable/styles.tsx
@@ -322,7 +322,7 @@ export const GridResizer = styled('div')<{dataRows: number}>`
    */
   &:active::after,
   &:focus::after {
-    background-color: ${p => p.theme.colors.blue400};
+    background-color: ${p => p.theme.tokens.focus.default};
   }
 
   /**
@@ -336,7 +336,7 @@ export const GridResizer = styled('div')<{dataRows: number}>`
     display: block;
     width: 7px;
     height: ${GRID_HEAD_ROW_HEIGHT}px;
-    background-color: ${p => p.theme.colors.blue400};
+    background-color: ${p => p.theme.tokens.graphics.accent.vibrant};
     opacity: 0.4;
   }
 `;
diff --git a/static/app/components/tours/tour.stories.tsx b/static/app/components/tours/tour.stories.tsx
index 319fd03d89ad15..9ea5790a432955 100644
--- a/static/app/components/tours/tour.stories.tsx
+++ b/static/app/components/tours/tour.stories.tsx
@@ -392,7 +392,7 @@ function TourProvider({
 
 const BlurBoundary = styled('div')`
   position: relative;
-  border: 1px dashed ${p => p.theme.colors.blue500};
+  border: 1px dashed ${p => p.theme.tokens.border.accent.vibrant};
   padding: ${space(2)};
   margin: ${space(1)} ${space(2)};
 `;
diff --git a/static/app/components/workflowEngine/ui/conditionBadge.tsx b/static/app/components/workflowEngine/ui/conditionBadge.tsx
index 242434c0bc6430..58b12163af5a63 100644
--- a/static/app/components/workflowEngine/ui/conditionBadge.tsx
+++ b/static/app/components/workflowEngine/ui/conditionBadge.tsx
@@ -4,7 +4,7 @@ import {space} from 'sentry/styles/space';
 
 export const ConditionBadge = styled('span')`
   display: inline-block;
-  background-color: ${p => p.theme.colors.blue400};
+  background-color: ${p => p.theme.tokens.background.accent.vibrant};
   padding: 0 ${space(0.75)};
   border-radius: ${p => p.theme.radius.md};
   color: ${p => p.theme.white};
diff --git a/static/app/components/workflowEngine/ui/purpleTextButton.tsx b/static/app/components/workflowEngine/ui/purpleTextButton.tsx
index e9285d8345c488..29f1d54bc8ab3b 100644
--- a/static/app/components/workflowEngine/ui/purpleTextButton.tsx
+++ b/static/app/components/workflowEngine/ui/purpleTextButton.tsx
@@ -4,7 +4,7 @@ import {Button} from 'sentry/components/core/button';
 import {space} from 'sentry/styles/space';
 
 export const PurpleTextButton = styled(Button)`
-  color: ${p => p.theme.colors.blue400};
+  color: ${p => p.theme.tokens.content.accent};
   font-weight: normal;
   margin: 0 -${space(1)};
   width: fit-content;
diff --git a/static/app/stories/view/storyTableOfContents.tsx b/static/app/stories/view/storyTableOfContents.tsx
index c64223a6961575..98ac51fd00cff9 100644
--- a/static/app/stories/view/storyTableOfContents.tsx
+++ b/static/app/stories/view/storyTableOfContents.tsx
@@ -284,7 +284,7 @@ const StoryIndexList = styled('ul')`
   list-style: none;
   padding-left: ${p => p.theme.space.md};
   padding-right: ${p => p.theme.space.md};
-  border-left: 1px solid ${p => p.theme.tokens.border.muted};
+  border-left: 1px solid ${p => p.theme.tokens.border.primary};
   margin: 0;
   margin-left: -${p => p.theme.space.xl};
   display: flex;
@@ -306,8 +306,8 @@ const StyledLink = styled('a')<{hasActiveChild: boolean; isActive: boolean}>`
   position: relative;
 
   &:hover {
-    background: ${p => p.theme.tokens.background.tertiary};
-    color: ${p => p.theme.tokens.content.primary};
+    background: ${p => p.theme.tokens.interactive.transparent.neutral.background.hover};
+    color: ${p => p.theme.tokens.interactive.link.neutral.hover};
   }
 
   ${p =>
diff --git a/static/app/stories/view/storyTree.tsx b/static/app/stories/view/storyTree.tsx
index bb63e408a39585..a5ad2f3c1d1df4 100644
--- a/static/app/stories/view/storyTree.tsx
+++ b/static/app/stories/view/storyTree.tsx
@@ -748,14 +748,17 @@ const FolderLink = styled(Link, {
   align-items: center;
   gap: ${p => p.theme.space.xs};
   color: ${p =>
-    p.active ? p.theme.tokens.content.accent : p.theme.tokens.content.muted};
+    p.active
+      ? p.theme.tokens.interactive.link.accent.rest
+      : p.theme.tokens.interactive.link.neutral.rest};
   padding: ${p => p.theme.space.md};
   padding-left: ${p => p.theme.space.sm};
   position: relative;
   transition: none;
 
   &:before {
-    background: ${p => p.theme.colors.blue100};
+    background: ${p =>
+      p.theme.tokens.interactive.transparent.accent.selected.background.rest};
     content: '';
     inset: 0 ${p => p.theme.space.md} 0 -${p => p.theme.space['2xs']};
     position: absolute;
@@ -779,20 +782,30 @@ const FolderLink = styled(Link, {
 
   &:hover {
     color: ${p =>
-      p.active ? p.theme.tokens.content.accent : p.theme.tokens.content.primary};
+      p.active
+        ? p.theme.tokens.interactive.link.accent.hover
+        : p.theme.tokens.interactive.link.neutral.hover};
 
     &:before {
-      background: ${p => (p.active ? p.theme.colors.blue100 : p.theme.colors.gray100)};
+      background: ${p =>
+        p.active
+          ? p.theme.tokens.interactive.transparent.accent.selected.background.hover
+          : p.theme.tokens.interactive.transparent.neutral.background.hover};
       opacity: 1;
     }
   }
 
   &:active {
     color: ${p =>
-      p.active ? p.theme.tokens.content.accent : p.theme.tokens.content.primary};
+      p.active
+        ? p.theme.tokens.interactive.link.accent.active
+        : p.theme.tokens.interactive.link.neutral.active};
 
     &:before {
-      background: ${p => (p.active ? p.theme.colors.blue200 : p.theme.colors.gray200)};
+      background: ${p =>
+        p.active
+          ? p.theme.tokens.interactive.transparent.accent.selected.background.active
+          : p.theme.tokens.interactive.transparent.neutral.background.active};
       opacity: 1;
     }
   }
diff --git a/static/app/styles/global.tsx b/static/app/styles/global.tsx
index dae5675a550911..271385e091fc01 100644
--- a/static/app/styles/global.tsx
+++ b/static/app/styles/global.tsx
@@ -190,7 +190,7 @@ const styles = (theme: Theme, isDark: boolean) => css`
   }
 
   pre {
-    background-color: ${theme.backgroundSecondary};
+    background-color: ${theme.tokens.background.secondary};
     white-space: pre-wrap;
     overflow-x: auto;
 
@@ -267,8 +267,8 @@ const styles = (theme: Theme, isDark: boolean) => css`
           }
         }
         .loading .loading-indicator {
-          border-color: ${theme.backgroundSecondary};
-          border-left-color: ${theme.colors.blue400};
+          border-color: ${theme.tokens.background.transparent.neutral.muted};
+          border-left-color: ${theme.tokens.background.accent.vibrant};
         }
 
         .pattern-bg {
@@ -281,7 +281,7 @@ const styles = (theme: Theme, isDark: boolean) => css`
             &.active {
               a {
                 color: ${theme.tokens.content.primary} !important;
-                border-bottom-color: ${theme.active} !important;
+                border-bottom-color: ${theme.tokens.border.accent.vibrant} !important;
               }
             }
 
@@ -326,10 +326,10 @@ const styles = (theme: Theme, isDark: boolean) => css`
               background: transparent;
             }
             .title {
-              background-color: ${theme.backgroundSecondary};
+              background-color: ${theme.tokens.background.secondary};
             }
             &.is-expandable .title {
-              background-color: ${theme.backgroundSecondary};
+              background-color: ${theme.tokens.background.secondary};
             }
             .context {
               background: ${theme.tokens.background.primary};
diff --git a/static/app/utils/profiling/flamegraph/flamegraphTheme.tsx b/static/app/utils/profiling/flamegraph/flamegraphTheme.tsx
index 1704b00b0d8a44..94911248b02de3 100644
--- a/static/app/utils/profiling/flamegraph/flamegraphTheme.tsx
+++ b/static/app/utils/profiling/flamegraph/flamegraphTheme.tsx
@@ -197,19 +197,33 @@ export const makeLightFlamegraphTheme = (theme: Theme): FlamegraphTheme => {
       // Charts
       CPU_CHART_COLORS: chartColors.map(c => hexToColorChannels(c, 0.8)),
       MEMORY_CHART_COLORS: [
-        hexToColorChannels(theme.colors.yellow400, 1),
-        hexToColorChannels(theme.colors.red400, 1),
+        hexToColorChannels(theme.tokens.background.warning.vibrant, 1),
+        hexToColorChannels(theme.tokens.background.danger.vibrant, 1),
       ],
       UI_FRAME_COLOR_SLOW: hexToColorChannels(theme.colors.yellow300, 1),
-      UI_FRAME_COLOR_FROZEN: hexToColorChannels(theme.colors.red400, 1),
-      BATTERY_CHART_COLORS: [hexToColorChannels(theme.colors.blue400, 1)],
+      UI_FRAME_COLOR_FROZEN: hexToColorChannels(
+        theme.tokens.background.danger.vibrant,
+        1
+      ),
+      BATTERY_CHART_COLORS: [
+        hexToColorChannels(theme.tokens.background.accent.vibrant, 1),
+      ],
 
       // Preset colors
-      FRAME_APPLICATION_COLOR: hexToColorChannels(theme.colors.blue400, 0.4),
-      FRAME_SYSTEM_COLOR: hexToColorChannels(theme.colors.red400, 0.3),
-      DIFFERENTIAL_DECREASE: hexToColorChannels(theme.colors.blue400, 0.6),
-      DIFFERENTIAL_INCREASE: hexToColorChannels(theme.colors.red400, 0.4),
-      SAMPLE_TICK_COLOR: hexToColorChannels(theme.colors.red400, 0.5),
+      FRAME_APPLICATION_COLOR: hexToColorChannels(
+        theme.tokens.background.accent.vibrant,
+        0.4
+      ),
+      FRAME_SYSTEM_COLOR: hexToColorChannels(theme.tokens.background.danger.vibrant, 0.3),
+      DIFFERENTIAL_DECREASE: hexToColorChannels(
+        theme.tokens.background.accent.vibrant,
+        0.6
+      ),
+      DIFFERENTIAL_INCREASE: hexToColorChannels(
+        theme.tokens.background.danger.vibrant,
+        0.4
+      ),
+      SAMPLE_TICK_COLOR: hexToColorChannels(theme.tokens.background.danger.vibrant, 0.5),
 
       // Cursors and labels
       LABEL_FONT_COLOR: theme.tokens.content.primary,
@@ -221,29 +235,31 @@ export const makeLightFlamegraphTheme = (theme: Theme): FlamegraphTheme => {
       // Special states
       FOCUSED_FRAME_BORDER_COLOR: theme.tokens.focus.default,
       HIGHLIGHTED_LABEL_COLOR: `rgba(240, 240, 0, 1)`,
-      HOVERED_FRAME_BORDER_COLOR: theme.colors.gray400,
-      SELECTED_FRAME_BORDER_COLOR: theme.colors.blue500,
+      HOVERED_FRAME_BORDER_COLOR: theme.tokens.border.transparent.neutral.vibrant,
+      SELECTED_FRAME_BORDER_COLOR: theme.tokens.graphics.accent.vibrant,
 
       // Search results
       SEARCH_RESULT_FRAME_COLOR: 'vec4(0.99, 0.70, 0.35, 1.0)',
       SEARCH_RESULT_SPAN_COLOR: '#fdb359',
 
       // Patterns
-      SPAN_FRAME_LINE_PATTERN_BACKGROUND: theme.colors.gray100,
-      SPAN_FRAME_LINE_PATTERN: theme.colors.gray200,
+      SPAN_FRAME_LINE_PATTERN_BACKGROUND:
+        theme.tokens.background.transparent.neutral.muted,
+      SPAN_FRAME_LINE_PATTERN: theme.tokens.border.transparent.neutral.moderate,
 
       // Fallbacks
       SPAN_FALLBACK_COLOR: [0, 0, 0, 0.1],
       FRAME_FALLBACK_COLOR: [0.5, 0.5, 0.6, 0.1],
 
       // Layout colors
-      GRID_LINE_COLOR: theme.colors.surface200,
-      GRID_FRAME_BACKGROUND_COLOR: theme.colors.surface400,
+      GRID_LINE_COLOR: theme.tokens.border.transparent.neutral.muted,
+      GRID_FRAME_BACKGROUND_COLOR: theme.tokens.background.secondary,
 
-      MINIMAP_POSITION_OVERLAY_BORDER_COLOR: theme.colors.gray300,
-      MINIMAP_POSITION_OVERLAY_COLOR: theme.colors.gray200,
+      MINIMAP_POSITION_OVERLAY_BORDER_COLOR:
+        theme.tokens.border.transparent.neutral.moderate,
+      MINIMAP_POSITION_OVERLAY_COLOR: theme.tokens.background.transparent.neutral.muted,
 
-      SPAN_FRAME_BORDER: theme.colors.gray300,
+      SPAN_FRAME_BORDER: theme.tokens.background.transparent.neutral.muted,
       STACK_TO_COLOR: makeStackToColor([0, 0, 0, 0.035]),
     },
   };
@@ -288,19 +304,33 @@ export const makeDarkFlamegraphTheme = (theme: Theme): FlamegraphTheme => {
       // Charts
       CPU_CHART_COLORS: chartColors.map(c => hexToColorChannels(c, 0.8)),
       MEMORY_CHART_COLORS: [
-        hexToColorChannels(theme.colors.yellow400, 1),
-        hexToColorChannels(theme.colors.red400, 1),
+        hexToColorChannels(theme.tokens.background.warning.vibrant, 1),
+        hexToColorChannels(theme.tokens.background.danger.vibrant, 1),
       ],
       UI_FRAME_COLOR_SLOW: hexToColorChannels(theme.colors.yellow300, 1),
-      UI_FRAME_COLOR_FROZEN: hexToColorChannels(theme.colors.red400, 1),
-      BATTERY_CHART_COLORS: [hexToColorChannels(theme.colors.blue400, 1)],
+      UI_FRAME_COLOR_FROZEN: hexToColorChannels(
+        theme.tokens.background.danger.vibrant,
+        1
+      ),
+      BATTERY_CHART_COLORS: [
+        hexToColorChannels(theme.tokens.background.accent.vibrant, 1),
+      ],
 
       // Preset colors
-      FRAME_APPLICATION_COLOR: hexToColorChannels(theme.colors.blue400, 0.6),
-      FRAME_SYSTEM_COLOR: hexToColorChannels(theme.colors.red400, 0.5),
-      DIFFERENTIAL_DECREASE: hexToColorChannels(theme.colors.blue400, 0.6),
-      DIFFERENTIAL_INCREASE: hexToColorChannels(theme.colors.red400, 0.4),
-      SAMPLE_TICK_COLOR: hexToColorChannels(theme.colors.red400, 0.5),
+      FRAME_APPLICATION_COLOR: hexToColorChannels(
+        theme.tokens.background.accent.vibrant,
+        0.6
+      ),
+      FRAME_SYSTEM_COLOR: hexToColorChannels(theme.tokens.background.danger.vibrant, 0.5),
+      DIFFERENTIAL_DECREASE: hexToColorChannels(
+        theme.tokens.background.accent.vibrant,
+        0.6
+      ),
+      DIFFERENTIAL_INCREASE: hexToColorChannels(
+        theme.tokens.background.danger.vibrant,
+        0.4
+      ),
+      SAMPLE_TICK_COLOR: hexToColorChannels(theme.tokens.background.danger.vibrant, 0.5),
 
       // Cursors and labels
       LABEL_FONT_COLOR: theme.tokens.content.primary,
@@ -311,9 +341,9 @@ export const makeDarkFlamegraphTheme = (theme: Theme): FlamegraphTheme => {
 
       // Special states
       FOCUSED_FRAME_BORDER_COLOR: theme.tokens.focus.default,
-      HIGHLIGHTED_LABEL_COLOR: theme.colors.yellow400,
+      HIGHLIGHTED_LABEL_COLOR: theme.tokens.background.warning.vibrant,
       HOVERED_FRAME_BORDER_COLOR: theme.colors.gray400,
-      SELECTED_FRAME_BORDER_COLOR: theme.colors.blue500,
+      SELECTED_FRAME_BORDER_COLOR: theme.tokens.graphics.accent.vibrant,
 
       // Search results
       SEARCH_RESULT_FRAME_COLOR: 'vec4(0.99, 0.70, 0.35, 1.0)',
diff --git a/static/app/utils/profiling/hooks/useVirtualizedTree/virtualizedTreeUtils.tsx b/static/app/utils/profiling/hooks/useVirtualizedTree/virtualizedTreeUtils.tsx
index 16703a09cd2ee3..90f13776f89946 100644
--- a/static/app/utils/profiling/hooks/useVirtualizedTree/virtualizedTreeUtils.tsx
+++ b/static/app/utils/profiling/hooks/useVirtualizedTree/virtualizedTreeUtils.tsx
@@ -32,7 +32,9 @@ function updateGhostRow({
   element.style.height = `${rowHeight}px`;
   element.style.position = 'absolute';
   element.style.backgroundColor =
-    interaction === 'clicked' ? theme.colors.blue400 : theme.colors.surface300;
+    interaction === 'clicked'
+      ? theme.tokens.background.accent.vibrant
+      : theme.tokens.background.secondary;
   element.style.pointerEvents = 'none';
   element.style.willChange = 'transform, opacity';
   element.style.transform = `translateY(${rowHeight * selectedNodeIndex - scrollTop}px)`;
diff --git a/static/app/utils/usePrismTokens.stories.tsx b/static/app/utils/usePrismTokens.stories.tsx
index ad2177b2b5e39d..7a6e4823cc3eab 100644
--- a/static/app/utils/usePrismTokens.stories.tsx
+++ b/static/app/utils/usePrismTokens.stories.tsx
@@ -124,7 +124,7 @@ const Line = styled('div')`
 `;
 
 const LineNumber = styled('div')`
-  background: ${p => p.theme.colors.blue500};
-  color: ${p => p.theme.white};
+  background: ${p => p.theme.tokens.background.accent.vibrant};
+  color: ${p => p.theme.tokens.content.onVibrant.light};
   padding: 0 ${space(1)};
 `;
diff --git a/static/app/views/admin/installWizard/index.tsx b/static/app/views/admin/installWizard/index.tsx
index 413294da60a6be..14ea5e0e3c498d 100644
--- a/static/app/views/admin/installWizard/index.tsx
+++ b/static/app/views/admin/installWizard/index.tsx
@@ -150,8 +150,8 @@ const Pattern = styled('div')`
     content: '';
     background-image: linear-gradient(
       to right,
-      ${p => p.theme.colors.blue200} 0%,
-      ${p => p.theme.colors.blue400} 100%
+      ${p => p.theme.tokens.background.transparent.accent.muted} 0%,
+      ${p => p.theme.tokens.background.accent.vibrant} 100%
     );
     background-repeat: repeat-y;
   }
diff --git a/static/app/views/alerts/rules/issue/details/sidebar.tsx b/static/app/views/alerts/rules/issue/details/sidebar.tsx
index 3e165717ecbd5f..80a2a87106cbcf 100644
--- a/static/app/views/alerts/rules/issue/details/sidebar.tsx
+++ b/static/app/views/alerts/rules/issue/details/sidebar.tsx
@@ -215,7 +215,7 @@ const ChevronContainer = styled('div')`
 
 const Badge = styled('span')`
   display: inline-block;
-  background-color: ${p => p.theme.colors.blue400};
+  background-color: ${p => p.theme.tokens.background.accent.vibrant};
   padding: 0 ${space(0.75)};
   border-radius: ${p => p.theme.radius.md};
   color: ${p => p.theme.white};
@@ -228,7 +228,7 @@ const Badge = styled('span')`
 
 const ConditionsBadge = styled('span')`
   display: block;
-  background-color: ${p => p.theme.colors.surface300};
+  background-color: ${p => p.theme.tokens.background.secondary};
   padding: 0 ${space(0.75)};
   border-radius: ${p => p.theme.radius.md};
   color: ${p => p.theme.tokens.content.primary};
diff --git a/static/app/views/alerts/rules/issue/index.tsx b/static/app/views/alerts/rules/issue/index.tsx
index 8df0e23ced0dd8..a62681b6cd6927 100644
--- a/static/app/views/alerts/rules/issue/index.tsx
+++ b/static/app/views/alerts/rules/issue/index.tsx
@@ -1670,7 +1670,7 @@ const ChevronContainer = styled('div')`
 
 const Badge = styled('span')`
   min-width: 56px;
-  background-color: ${p => p.theme.colors.blue400};
+  background-color: ${p => p.theme.tokens.background.accent.vibrant};
   padding: 0 ${space(0.75)};
   border-radius: ${p => p.theme.radius.md};
   color: ${p => p.theme.white};
diff --git a/static/app/views/alerts/rules/metric/utils/anomalyChart.tsx b/static/app/views/alerts/rules/metric/utils/anomalyChart.tsx
index 0c0bcaaa35bd62..cc1cb76a1247dd 100644
--- a/static/app/views/alerts/rules/metric/utils/anomalyChart.tsx
+++ b/static/app/views/alerts/rules/metric/utils/anomalyChart.tsx
@@ -67,7 +67,9 @@ export function getAnomalyMarkerSeries(
             },
           ]);
           // Create a marker line for the start of the anomaly
-          series.push(createAnomalyMarkerSeries(opts.theme.colors.blue400, start));
+          series.push(
+            createAnomalyMarkerSeries(opts.theme.tokens.dataviz.semantic.accent, start)
+          );
         }
         // reset the start/end to capture the next anomaly block
         start = undefined;
@@ -77,7 +79,9 @@ export function getAnomalyMarkerSeries(
   if (start && end) {
     // push in the last block
     // Create a marker line for the start of the anomaly
-    series.push(createAnomalyMarkerSeries(opts.theme.colors.blue400, start));
+    series.push(
+      createAnomalyMarkerSeries(opts.theme.tokens.dataviz.semantic.accent, start)
+    );
     anomalyBlocks.push([
       {
         xAxis: start,
diff --git a/static/app/views/dashboards/dashboard.tsx b/static/app/views/dashboards/dashboard.tsx
index a96fda76f4edab..ad27df5c84710b 100644
--- a/static/app/views/dashboards/dashboard.tsx
+++ b/static/app/views/dashboards/dashboard.tsx
@@ -466,7 +466,7 @@ const GridLayout = styled(WidthProvider(Responsive))`
   margin: -${space(2)};
 
   .react-grid-item.react-grid-placeholder {
-    background: ${p => p.theme.colors.blue200};
+    background: ${p => p.theme.tokens.background.transparent.accent.muted};
     border-radius: ${p => p.theme.radius.md};
   }
 `;
diff --git a/static/app/views/dashboards/widgetBuilder/components/widgetTemplatesList.tsx b/static/app/views/dashboards/widgetBuilder/components/widgetTemplatesList.tsx
index d59320ba914036..1d2f8c7a834d60 100644
--- a/static/app/views/dashboards/widgetBuilder/components/widgetTemplatesList.tsx
+++ b/static/app/views/dashboards/widgetBuilder/components/widgetTemplatesList.tsx
@@ -156,7 +156,9 @@ const TemplateCard = styled('div')<{selected: boolean}>`
   padding: ${space(2)};
   border: none;
   background-color: ${p =>
-    p.selected ? p.theme.colors.blue100 : p.theme.tokens.background.primary};
+    p.selected
+      ? p.theme.tokens.background.transparent.accent.muted
+      : p.theme.tokens.background.primary};
   border-radius: ${p => p.theme.radius.md};
   margin: ${p => (p.selected ? space(2) : space(0.5))} 0px;
 
@@ -164,12 +166,12 @@ const TemplateCard = styled('div')<{selected: boolean}>`
 
   &:focus,
   &:hover {
-    background-color: ${p => p.theme.colors.blue100};
+    background-color: ${p => p.theme.tokens.background.transparent.accent.muted};
     outline: none;
   }
 
   &:active {
-    background-color: ${p => p.theme.colors.blue100};
+    background-color: ${p => p.theme.tokens.background.transparent.accent.muted};
   }
 `;
 
diff --git a/static/app/views/dashboards/widgets/timeSeriesWidget/releaseSeries.tsx b/static/app/views/dashboards/widgets/timeSeriesWidget/releaseSeries.tsx
index a9ed621b23dad1..667fefad4387c7 100644
--- a/static/app/views/dashboards/widgets/timeSeriesWidget/releaseSeries.tsx
+++ b/static/app/views/dashboards/widgets/timeSeriesWidget/releaseSeries.tsx
@@ -19,12 +19,12 @@ export function ReleaseSeries(
     id: 'release-lines',
     name: t('Releases'),
     renderItem: () => null,
-    color: theme.colors.blue200,
+    color: theme.tokens.dataviz.semantic.release,
     data: [],
     markLine: MarkLine({
       animation: false,
       lineStyle: {
-        color: theme.colors.blue400,
+        color: theme.tokens.dataviz.semantic.release,
         opacity: 0.3,
         type: 'solid',
       },
diff --git a/static/app/views/detectors/components/detectorTypeForm.tsx b/static/app/views/detectors/components/detectorTypeForm.tsx
index 71f5e9e184f09d..ca6c5b40e435f2 100644
--- a/static/app/views/detectors/components/detectorTypeForm.tsx
+++ b/static/app/views/detectors/components/detectorTypeForm.tsx
@@ -217,7 +217,8 @@ const Visualization = styled('div')`
 function MetricVisualization() {
   const theme = useTheme();
   const danger = theme.colors.red400;
-  const defaultChartColor = theme.chart.getColorPalette(0)[0] ?? theme.colors.blue500;
+  const defaultChartColor =
+    theme.chart.getColorPalette(0)[0] ?? theme.tokens.graphics.accent.vibrant;
 
   return (
     <svg fill="none" viewBox="0 0 480 56">
diff --git a/static/app/views/explore/components/schemaHints/schemaHintsList.tsx b/static/app/views/explore/components/schemaHints/schemaHintsList.tsx
index 179cc7fbfe2ad4..0e8e1858dadfac 100644
--- a/static/app/views/explore/components/schemaHints/schemaHintsList.tsx
+++ b/static/app/views/explore/components/schemaHints/schemaHintsList.tsx
@@ -511,5 +511,5 @@ const HintOperator = styled('span')`
 
 const HintValue = styled('span')`
   font-weight: ${p => p.theme.fontWeight.normal};
-  color: ${p => p.theme.colors.blue500};
+  color: ${p => p.theme.tokens.content.accent};
 `;
diff --git a/static/app/views/explore/logs/styles.tsx b/static/app/views/explore/logs/styles.tsx
index 3536a28023336f..85700d29140741 100644
--- a/static/app/views/explore/logs/styles.tsx
+++ b/static/app/views/explore/logs/styles.tsx
@@ -35,7 +35,7 @@ export const LogTableRow = styled(TableRow)<LogTableRowProps>`
     cursor: ${p => (p.isClickable ? 'pointer' : 'default')};
 
     &:hover {
-      background-color: ${p => p.theme.backgroundSecondary};
+      background-color: ${p => p.theme.tokens.background.secondary};
     }
 
     &:not(:last-child) {
@@ -49,16 +49,16 @@ export const LogTableRow = styled(TableRow)<LogTableRowProps>`
   }
 
   &[data-row-highlighted='true']:not(thead > &) {
-    background-color: ${p => p.theme.colors.yellow100};
-    color: ${p => p.theme.colors.red400};
+    background-color: ${p => p.theme.tokens.background.transparent.warning.muted};
+    color: ${p => p.theme.tokens.content.danger};
 
     &:hover {
-      background-color: ${p => p.theme.colors.yellow200};
+      background-color: ${p => p.theme.tokens.background.transparent.warning.muted};
     }
   }
 
   &.beforeHoverTime + &.afterHoverTime:before {
-    border-top: 1px solid ${p => p.theme.colors.blue200};
+    border-top: 1px solid ${p => p.theme.tokens.border.accent.moderate};
     content: '';
     left: 0;
     position: absolute;
@@ -67,7 +67,7 @@ export const LogTableRow = styled(TableRow)<LogTableRowProps>`
   }
 
   &.beforeHoverTime:last-child:before {
-    border-bottom: 1px solid ${p => p.theme.colors.blue200};
+    border-bottom: 1px solid ${p => p.theme.tokens.border.accent.moderate};
     content: '';
     right: 0;
     position: absolute;
@@ -76,7 +76,7 @@ export const LogTableRow = styled(TableRow)<LogTableRowProps>`
   }
 
   &.beforeCurrentTime + &.afterCurrentTime:before {
-    border-top: 1px solid ${p => p.theme.colors.blue400};
+    border-top: 1px solid ${p => p.theme.tokens.border.accent.vibrant};
     content: '';
     left: 0;
     position: absolute;
@@ -85,7 +85,7 @@ export const LogTableRow = styled(TableRow)<LogTableRowProps>`
   }
 
   &.beforeCurrentTime:last-child:before {
-    border-bottom: 1px solid ${p => p.theme.colors.blue400};
+    border-bottom: 1px solid ${p => p.theme.tokens.border.accent.vibrant};
     content: '';
     right: 0;
     position: absolute;
@@ -317,68 +317,67 @@ export function getLogColors(level: SeverityLevel, theme: Theme) {
   switch (level) {
     case SeverityLevel.DEFAULT:
       return {
-        background: theme.colors.gray200,
-        backgroundLight: theme.backgroundSecondary,
-        border: theme.tokens.border.primary,
-        borderHover: theme.tokens.border.primary,
-        color: theme.colors.gray200,
+        background: theme.tokens.graphics.neutral.vibrant,
+        backgroundLight: theme.tokens.background.transparent.neutral.muted,
+        border: theme.tokens.border.neutral.moderate,
+        borderHover: theme.tokens.border.neutral.vibrant,
+        color: theme.tokens.content.secondary,
       };
     case SeverityLevel.TRACE:
       return {
-        background: theme.colors.blue400,
-        backgroundLight: theme.colors.blue100,
-        border: theme.colors.blue200,
-        borderHover: theme.colors.blue400,
-        color: theme.colors.blue500,
+        background: theme.tokens.graphics.accent.vibrant,
+        backgroundLight: theme.tokens.background.transparent.accent.muted,
+        border: theme.tokens.border.accent.moderate,
+        borderHover: theme.tokens.border.accent.vibrant,
+        color: theme.tokens.content.accent,
       };
     case SeverityLevel.WARN:
       return {
-        background: theme.colors.yellow400,
-        backgroundLight: theme.colors.yellow100,
-        border: theme.colors.yellow200,
-        borderHover: theme.colors.yellow400,
-        color: theme.colors.yellow500,
+        background: theme.tokens.graphics.warning.vibrant,
+        backgroundLight: theme.tokens.background.transparent.warning.muted,
+        border: theme.tokens.border.warning.moderate,
+        borderHover: theme.tokens.border.warning.vibrant,
+        color: theme.tokens.content.warning,
       };
     case SeverityLevel.ERROR:
-      // All these colours are likely changing, so we'll hold off moving them into theme for now.
       return {
-        background: '#FF7738', // Matches the legacy error level color
-        backgroundLight: 'rgba(245, 113, 54, 0.11)',
-        border: 'rgba(245, 113, 54, 0.55)',
-        borderHover: '#FF7738',
-        color: '#b34814',
+        background: theme.tokens.graphics.danger.vibrant,
+        backgroundLight: theme.tokens.background.transparent.danger.muted,
+        border: theme.tokens.border.danger.moderate,
+        borderHover: theme.tokens.border.danger.vibrant,
+        color: theme.tokens.content.danger,
       };
     case SeverityLevel.FATAL:
       return {
-        background: theme.colors.red400,
-        backgroundLight: theme.colors.red100,
-        border: theme.colors.red200,
-        borderHover: theme.colors.red400,
-        color: theme.colors.red500,
+        background: theme.tokens.graphics.danger.vibrant,
+        backgroundLight: theme.tokens.background.transparent.danger.muted,
+        border: theme.tokens.border.danger.moderate,
+        borderHover: theme.tokens.border.danger.vibrant,
+        color: theme.tokens.content.danger,
       };
     case SeverityLevel.DEBUG:
       return {
-        background: theme.colors.gray400,
-        backgroundLight: theme.colors.gray100,
-        border: theme.colors.gray200,
-        borderHover: theme.colors.gray400,
-        color: theme.colors.gray400,
+        background: theme.tokens.graphics.neutral.vibrant,
+        backgroundLight: theme.tokens.background.transparent.neutral.muted,
+        border: theme.tokens.border.neutral.moderate,
+        borderHover: theme.tokens.border.neutral.vibrant,
+        color: theme.tokens.content.primary,
       };
     case SeverityLevel.INFO:
       return {
-        background: theme.colors.blue400,
-        backgroundLight: theme.colors.blue100,
-        border: theme.colors.blue200,
-        borderHover: theme.colors.blue400,
-        color: theme.colors.blue500,
+        background: theme.tokens.graphics.accent.vibrant,
+        backgroundLight: theme.tokens.background.transparent.accent.muted,
+        border: theme.tokens.border.transparent.accent.moderate,
+        borderHover: theme.tokens.border.transparent.accent.vibrant,
+        color: theme.tokens.content.accent,
       };
     case SeverityLevel.UNKNOWN:
       return {
-        background: theme.colors.gray400,
-        backgroundLight: theme.colors.gray100,
-        border: theme.colors.gray200,
-        borderHover: theme.colors.gray400,
-        color: theme.colors.gray200,
+        background: theme.tokens.graphics.neutral.vibrant,
+        backgroundLight: theme.tokens.background.transparent.neutral.muted,
+        border: theme.tokens.border.neutral.moderate,
+        borderHover: theme.tokens.border.neutral.vibrant,
+        color: theme.tokens.content.secondary,
       };
     default:
       unreachable(level);
diff --git a/static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTableRow.tsx b/static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTableRow.tsx
index a54d5b93dfff90..bb1b7d48427059 100644
--- a/static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTableRow.tsx
+++ b/static/app/views/explore/metrics/metricInfoTabs/metricsSamplesTableRow.tsx
@@ -200,7 +200,7 @@ export function SampleTableRow({
       <WrappingText
         style={{
           maxWidth: MAX_TELEMETRY_WIDTH,
-          color: theme.colors.blue500,
+          color: theme.tokens.content.accent,
           alignItems: 'center',
           justifyContent: 'flex-end',
         }}
diff --git a/static/app/views/explore/toolbar/toolbarVisualize.tsx b/static/app/views/explore/toolbar/toolbarVisualize.tsx
index 723ccf3448ee42..e4323ab380d476 100644
--- a/static/app/views/explore/toolbar/toolbarVisualize.tsx
+++ b/static/app/views/explore/toolbar/toolbarVisualize.tsx
@@ -252,8 +252,8 @@ export function VisualizeLabel({index, onClick, visualize}: VisualizeLabelProps)
 const Label = styled('div')`
   cursor: pointer;
   border-radius: ${p => p.theme.radius.md};
-  background-color: ${p => p.theme.colors.blue100};
-  color: ${p => p.theme.colors.blue400};
+  background-color: ${p => p.theme.tokens.background.transparent.accent.muted};
+  color: ${p => p.theme.tokens.content.accent};
   font-weight: ${p => p.theme.fontWeight.bold};
   width: 24px;
   height: 36px;
diff --git a/static/app/views/insights/browser/webVitals/components/pageOverviewSidebar.tsx b/static/app/views/insights/browser/webVitals/components/pageOverviewSidebar.tsx
index 5c49f4673d56f4..951cd37754c16d 100644
--- a/static/app/views/insights/browser/webVitals/components/pageOverviewSidebar.tsx
+++ b/static/app/views/insights/browser/webVitals/components/pageOverviewSidebar.tsx
@@ -508,7 +508,7 @@ const CardContent = styled('div')`
 `;
 
 const StyledIconSeer = styled(IconSeer)`
-  color: ${p => p.theme.colors.blue500};
+  color: ${p => p.theme.tokens.content.accent};
 `;
 
 const ViewIssueButtonContainer = styled('div')`
diff --git a/static/app/views/insights/browser/webVitals/components/performanceScoreRingWithTooltips.tsx b/static/app/views/insights/browser/webVitals/components/performanceScoreRingWithTooltips.tsx
index afe34c1fda826b..ad5707196efc91 100644
--- a/static/app/views/insights/browser/webVitals/components/performanceScoreRingWithTooltips.tsx
+++ b/static/app/views/insights/browser/webVitals/components/performanceScoreRingWithTooltips.tsx
@@ -348,7 +348,8 @@ const ProgressRingContainer = styled('div')``;
 
 const ProgressRingText = styled('text')<{isLink?: boolean}>`
   font-size: ${p => p.theme.fontSize.md};
-  fill: ${p => (p.isLink ? p.theme.colors.blue400 : p.theme.tokens.content.primary)};
+  fill: ${p =>
+    p.isLink ? p.theme.tokens.content.accent : p.theme.tokens.content.primary};
   font-weight: ${p => p.theme.fontWeight.bold};
   text-transform: uppercase;
   text-anchor: middle;
diff --git a/static/app/views/insights/crons/components/monitorCreateForm.tsx b/static/app/views/insights/crons/components/monitorCreateForm.tsx
index 9f0744b686abf4..525d1c40923fbc 100644
--- a/static/app/views/insights/crons/components/monitorCreateForm.tsx
+++ b/static/app/views/insights/crons/components/monitorCreateForm.tsx
@@ -250,7 +250,7 @@ const SchedulePanel = styled(Panel)<{highlighted: boolean}>`
   ${p =>
     p.highlighted
       ? css`
-          border: 2px solid ${p.theme.colors.blue400};
+          border: 2px solid ${p.theme.tokens.border.accent.vibrant};
         `
       : css`
           padding: 1px;
diff --git a/static/app/views/insights/pages/agents/components/aiSpanList.tsx b/static/app/views/insights/pages/agents/components/aiSpanList.tsx
index fefcea23662039..28d9fa3eda7b81 100644
--- a/static/app/views/insights/pages/agents/components/aiSpanList.tsx
+++ b/static/app/views/insights/pages/agents/components/aiSpanList.tsx
@@ -415,16 +415,18 @@ const ListItemContainer = styled('div')<{
   border-radius: ${p => p.theme.radius.md};
   cursor: pointer;
   background-color: ${p =>
-    p.isSelected ? p.theme.backgroundSecondary : p.theme.tokens.background.primary};
+    p.isSelected
+      ? p.theme.tokens.background.secondary
+      : p.theme.tokens.background.primary};
   outline: ${p =>
     p.isSelected
       ? p.hasErrors
-        ? `2px solid ${p.theme.colors.red200}`
-        : `2px solid ${p.theme.colors.blue200}`
+        ? `2px solid ${p.theme.tokens.focus.invalid}`
+        : `2px solid ${p.theme.tokens.focus.default}`
       : 'none'};
 
   &:hover {
-    background-color: ${p => p.theme.backgroundSecondary};
+    background-color: ${p => p.theme.tokens.background.secondary};
   }
 `;
 
@@ -434,7 +436,7 @@ const DurationBar = styled('div')<{
 }>`
   width: 100%;
   height: 4px;
-  background-color: ${p => p.theme.colors.gray200};
+  background-color: ${p => p.theme.tokens.dataviz.semantic.other};
   border-radius: 2px;
   position: relative;
 
@@ -467,7 +469,7 @@ const TransactionButton = styled('button')`
   font-weight: ${p => p.theme.fontWeight.normal};
 
   &:hover:not(:disabled) {
-    background-color: ${p => p.theme.backgroundSecondary};
+    background-color: ${p => p.theme.tokens.background.secondary};
   }
 
   &:first-child {
diff --git a/static/app/views/issueDetails/groupTags/groupTagsTab.tsx b/static/app/views/issueDetails/groupTags/groupTagsTab.tsx
index 515dd31fd50efd..602c8fefdba4b6 100644
--- a/static/app/views/issueDetails/groupTags/groupTagsTab.tsx
+++ b/static/app/views/issueDetails/groupTags/groupTagsTab.tsx
@@ -220,7 +220,7 @@ const TagBarGlobalSelectionLink = styled(GlobalSelectionLink)`
     color: ${p => p.theme.tokens.content.primary};
     text-decoration: underline;
     ${TagBarBackground} {
-      background: ${p => p.theme.colors.blue400};
+      background: ${p => p.theme.tokens.background.accent.vibrant};
     }
   }
 `;
diff --git a/static/app/views/issueDetails/streamline/eventGraph.tsx b/static/app/views/issueDetails/streamline/eventGraph.tsx
index 07fe1cf46a3b4c..22f11e5d4c5d5e 100644
--- a/static/app/views/issueDetails/streamline/eventGraph.tsx
+++ b/static/app/views/issueDetails/streamline/eventGraph.tsx
@@ -9,7 +9,6 @@ import {
 import {useTheme} from '@emotion/react';
 import styled from '@emotion/styled';
 import {mergeRefs, useResizeObserver} from '@react-aria/utils';
-import Color from 'color';
 
 import {Text} from '@sentry/scraps/text';
 
@@ -355,8 +354,6 @@ export function EventGraph({
 
   const series = useMemo((): BarChartSeries[] => {
     const seriesData: BarChartSeries[] = [];
-    const translucentGray300 = Color(theme.colors.gray400).alpha(0.5).string();
-    const lightGray300 = Color(theme.colors.gray400).alpha(0.2).string();
 
     if (visibleSeries === EventGraphSeries.USER) {
       if (isUnfilteredStatsEnabled) {
@@ -364,8 +361,8 @@ export function EventGraph({
           seriesName: t('Total users'),
           itemStyle: {
             borderRadius: [2, 2, 0, 0],
-            borderColor: theme.colors.gray200,
-            color: lightGray300,
+            borderColor: theme.tokens.border.transparent.neutral.muted,
+            color: theme.tokens.dataviz.semantic.neutral,
           },
           barGap: '-100%', // Makes bars overlap completely
           data: unfilteredUserSeries,
@@ -377,8 +374,10 @@ export function EventGraph({
         seriesName: isUnfilteredStatsEnabled ? t('Matching users') : t('Users'),
         itemStyle: {
           borderRadius: [2, 2, 0, 0],
-          borderColor: theme.colors.gray200,
-          color: isUnfilteredStatsEnabled ? theme.colors.blue400 : translucentGray300,
+          borderColor: theme.tokens.border.transparent.neutral.muted,
+          color: isUnfilteredStatsEnabled
+            ? theme.tokens.dataviz.semantic.accent
+            : theme.tokens.dataviz.semantic.other,
         },
         data: userSeries,
         animation: false,
@@ -390,8 +389,8 @@ export function EventGraph({
           seriesName: t('Total events'),
           itemStyle: {
             borderRadius: [2, 2, 0, 0],
-            borderColor: theme.colors.gray200,
-            color: lightGray300,
+            borderColor: theme.tokens.border.transparent.neutral.muted,
+            color: theme.tokens.dataviz.semantic.other,
           },
           barGap: '-100%', // Makes bars overlap completely
           data: unfilteredEventSeries,
@@ -403,8 +402,10 @@ export function EventGraph({
         seriesName: isUnfilteredStatsEnabled ? t('Matching events') : t('Events'),
         itemStyle: {
           borderRadius: [2, 2, 0, 0],
-          borderColor: theme.colors.gray200,
-          color: isUnfilteredStatsEnabled ? theme.colors.blue400 : translucentGray300,
+          borderColor: theme.tokens.border.transparent.neutral.muted,
+          color: isUnfilteredStatsEnabled
+            ? theme.tokens.dataviz.semantic.accent
+            : theme.tokens.dataviz.semantic.neutral,
         },
         data: eventSeries,
         animation: false,
diff --git a/static/app/views/issueDetails/streamline/hooks/useReleaseMarkLineSeries.tsx b/static/app/views/issueDetails/streamline/hooks/useReleaseMarkLineSeries.tsx
index 0925b107fa9a17..85ea2467760906 100644
--- a/static/app/views/issueDetails/streamline/hooks/useReleaseMarkLineSeries.tsx
+++ b/static/app/views/issueDetails/streamline/hooks/useReleaseMarkLineSeries.tsx
@@ -33,7 +33,7 @@ export function useReleaseMarkLineSeries({
   const markLine = MarkLine({
     animation: false,
     lineStyle: {
-      color: theme.colors.blue400,
+      color: theme.tokens.graphics.accent.vibrant,
       opacity: 0.3,
       type: 'solid',
     },
@@ -91,7 +91,7 @@ export function useReleaseMarkLineSeries({
     seriesName: t('Releases'),
     data: [],
     markLine,
-    color: theme.colors.blue500,
+    color: theme.tokens.graphics.accent.vibrant,
     type: 'line',
   };
 }
diff --git a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx
index 2c5c7c1f6290f6..6d6c3dcc50fece 100644
--- a/static/app/views/issueDetails/streamline/issueTagsPreview.tsx
+++ b/static/app/views/issueDetails/streamline/issueTagsPreview.tsx
@@ -432,11 +432,11 @@ const LegendTitle = styled('div')`
 `;
 
 const DistributionsDrawerLink = styled(Link)`
-  color: ${p => p.theme.colors.blue400};
+  color: ${p => p.theme.tokens.content.accent};
   align-self: flex-start;
 
   &:hover {
-    color: ${p => p.theme.colors.blue500};
+    color: ${p => p.theme.tokens.content.accent};
   }
 `;
 
diff --git a/static/app/views/issueList/pages/dynamicGrouping.tsx b/static/app/views/issueList/pages/dynamicGrouping.tsx
index 51002f31f3a153..55e093d268aefd 100644
--- a/static/app/views/issueList/pages/dynamicGrouping.tsx
+++ b/static/app/views/issueList/pages/dynamicGrouping.tsx
@@ -1021,7 +1021,7 @@ const CardContainer = styled('div')`
 
   &:hover {
     background: ${p => p.theme.tokens.background.secondary};
-    border-color: ${p => p.theme.colors.blue200};
+    border-color: ${p => p.theme.tokens.border.accent.moderate};
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   }
 `;
@@ -1109,18 +1109,18 @@ const StatusTag = styled('div')<{color: 'purple' | 'yellow' | 'red'}>`
     switch (p.color) {
       case 'purple':
         return `
-          background: ${p.theme.colors.blue100};
-          color: ${p.theme.colors.blue400};
+          background: ${p.theme.tokens.background.transparent.accent.muted};
+          color: ${p.theme.tokens.content.accent};
         `;
       case 'yellow':
         return `
-          background: ${p.theme.colors.yellow100};
-          color: ${p.theme.colors.yellow400};
+          background: ${p.theme.tokens.background.transparent.warning.muted};
+          color: ${p.theme.tokens.content.warning};
         `;
       case 'red':
         return `
-          background: ${p.theme.colors.red100};
-          color: ${p.theme.colors.red400};
+          background: ${p.theme.tokens.background.transparent.danger.muted};
+          color: ${p.theme.tokens.content.danger};
         `;
       default:
         return '';
@@ -1225,7 +1225,7 @@ const ShowMoreButton = styled('button')`
 
   &:hover {
     background: ${p => p.theme.backgroundTertiary};
-    border-color: ${p => p.theme.colors.blue400};
+    border-color: ${p => p.theme.tokens.border.accent.vibrant};
     color: ${p => p.theme.tokens.content.primary};
   }
 `;
diff --git a/static/app/views/nav/primary/components.tsx b/static/app/views/nav/primary/components.tsx
index b715a8b35da5a5..bbcbab0fe41374 100644
--- a/static/app/views/nav/primary/components.tsx
+++ b/static/app/views/nav/primary/components.tsx
@@ -336,7 +336,7 @@ const NavLink = styled(Link, {
   gap: ${p => (p.isMobile ? space(1) : space(0.5))};
 
   /* Disable default link styles and only apply them to the icon container */
-  color: ${p => p.theme.tokens.content.muted};
+  color: ${p => p.theme.tokens.interactive.link.neutral.rest};
   outline: none;
   box-shadow: none;
   transition: none;
@@ -368,31 +368,33 @@ const NavLink = styled(Link, {
     ${NavLinkIconContainer} {
       outline: none;
       box-shadow: 0 0 0 2px ${p => p.theme.tokens.focus.default};
-      background-color: ${p => p.theme.colors.blue100};
     }
   }
 
   &:hover,
   &[aria-selected='true'] {
-    color: ${p => p.theme.tokens.content.muted};
+    color: ${p => p.theme.tokens.interactive.link.neutral.hover};
     ${NavLinkIconContainer} {
-      background-color: ${p => p.theme.colors.gray100};
+      background-color: ${p =>
+        p.theme.tokens.interactive.transparent.neutral.background.hover};
     }
   }
 
   &[aria-current='page'] {
-    color: ${p => p.theme.tokens.content.accent};
+    color: ${p => p.theme.tokens.interactive.link.accent.rest};
 
     &::before {
       opacity: 1;
     }
     ${NavLinkIconContainer} {
-      background-color: ${p => p.theme.colors.blue100};
+      background-color: ${p =>
+        p.theme.tokens.interactive.transparent.accent.selected.background.rest};
     }
 
     &:hover {
-      ${NavLinkIconContainer} {
-        background-color: ${p => p.theme.colors.blue100};
+      color: ${p => p.theme.tokens.interactive.link.accent.hover} ${NavLinkIconContainer} {
+        background-color: ${p =>
+          p.theme.tokens.interactive.transparent.accent.selected.background.hover};
       }
     }
   }
@@ -443,7 +445,7 @@ export const SidebarItemUnreadIndicator = styled('span')<{isMobile: boolean}>`
   text-align: center;
   color: ${p => p.theme.white};
   font-size: ${p => p.theme.fontSize.xs};
-  background: ${p => p.theme.colors.blue500};
+  background: ${p => p.theme.tokens.graphics.accent.vibrant};
   width: 10px;
   height: 10px;
   border-radius: 50%;
diff --git a/static/app/views/nav/primary/whatsNew/item.tsx b/static/app/views/nav/primary/whatsNew/item.tsx
index 4c2e82d68a51ce..ad4e4e100ba9ea 100644
--- a/static/app/views/nav/primary/whatsNew/item.tsx
+++ b/static/app/views/nav/primary/whatsNew/item.tsx
@@ -65,7 +65,7 @@ const SidebarPanelItemRoot = styled('div')`
 
 const Title = styled(ExternalLink)<Pick<BroadcastPanelItemProps, 'hasSeen'>>`
   font-size: ${p => p.theme.fontSize.lg};
-  color: ${p => p.theme.colors.blue500};
+  color: ${p => p.theme.tokens.content.accent};
   ${p => !p.hasSeen && `font-weight: ${p.theme.fontWeight.bold}`};
   &:focus-visible {
     box-shadow: none;
diff --git a/static/app/views/nav/secondary/secondary.tsx b/static/app/views/nav/secondary/secondary.tsx
index 9bf8ad883807ed..337b4c1b896f50 100644
--- a/static/app/views/nav/secondary/secondary.tsx
+++ b/static/app/views/nav/secondary/secondary.tsx
@@ -374,7 +374,7 @@ const Item = styled(Link)<ItemProps>`
   justify-content: center;
   align-items: center;
   position: relative;
-  color: ${p => p.theme.tokens.component.link.muted.default};
+  color: ${p => p.theme.tokens.interactive.link.neutral.rest};
   padding: ${p =>
     p.layout === NavLayout.MOBILE
       ? `${space(0.75)} ${space(1.5)} ${space(0.75)} 48px`
@@ -396,26 +396,30 @@ const Item = styled(Link)<ItemProps>`
     height: 20px;
     left: -${space(1.5)};
     border-radius: ${p => p.theme.radius['2xs']};
-    background-color: ${p => p.theme.colors.blue400};
+    background-color: ${p => p.theme.tokens.graphics.accent.vibrant};
     transition: opacity 0.1s ease-in-out;
     opacity: 0;
   }
 
   &:hover {
-    color: ${p => p.theme.tokens.component.link.muted.default};
-    background-color: ${p => p.theme.colors.gray100};
+    color: ${p => p.theme.tokens.interactive.link.neutral.hover};
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.hover};
   }
 
   &[aria-selected='true'] {
-    color: ${p => p.theme.tokens.component.link.accent.default};
-    background-color: ${p => p.theme.colors.blue100};
+    color: ${p => p.theme.tokens.interactive.link.accent.rest};
+    background-color: ${p =>
+      p.theme.tokens.interactive.transparent.accent.selected.background.rest};
 
     &::before {
       opacity: 1;
     }
     /* Override the default hover styles */
     &:hover {
-      background-color: ${p => p.theme.colors.blue200};
+      color: ${p => p.theme.tokens.interactive.link.accent.hover};
+      background-color: ${p =>
+        p.theme.tokens.interactive.transparent.accent.selected.background.hover};
     }
   }
 `;
diff --git a/static/app/views/nav/secondary/secondarySidebar.tsx b/static/app/views/nav/secondary/secondarySidebar.tsx
index f38a4e5b22edfd..b66d48b95dd87d 100644
--- a/static/app/views/nav/secondary/secondarySidebar.tsx
+++ b/static/app/views/nav/secondary/secondarySidebar.tsx
@@ -122,7 +122,7 @@ const ResizeHandle = styled('div')<{atMaxWidth: boolean; atMinWidth: boolean}>`
   &:hover,
   &:active {
     &::after {
-      background: ${p => p.theme.colors.blue500};
+      background: ${p => p.theme.tokens.graphics.accent.vibrant};
     }
   }
 
diff --git a/static/app/views/nav/secondary/sections/issues/issueViews/issueViewItem.tsx b/static/app/views/nav/secondary/sections/issues/issueViews/issueViewItem.tsx
index d6dcc1d507c94d..43a4e84e9288db 100644
--- a/static/app/views/nav/secondary/sections/issues/issueViews/issueViewItem.tsx
+++ b/static/app/views/nav/secondary/sections/issues/issueViews/issueViewItem.tsx
@@ -253,7 +253,7 @@ const UnsavedChangesIndicator = styled('div')<{isActive: boolean}>`
   }
 
   border-radius: 50%;
-  background: ${p => p.theme.colors.blue500};
+  background: ${p => p.theme.tokens.graphics.accent.vibrant};
   border: solid 2px ${p => p.theme.colors.surface300};
   position: absolute;
   width: 10px;
diff --git a/static/app/views/onboarding/components/pageCorners.tsx b/static/app/views/onboarding/components/pageCorners.tsx
index 5bb46536425a8e..453db38fe5873f 100644
--- a/static/app/views/onboarding/components/pageCorners.tsx
+++ b/static/app/views/onboarding/components/pageCorners.tsx
@@ -162,6 +162,6 @@ const Container = styled('div')`
   left: 0;
   right: 0;
   bottom: 0;
-  color: ${p => p.theme.colors.blue200};
+  color: ${p => p.theme.tokens.background.transparent.accent.muted};
   opacity: 0.4;
 `;
diff --git a/static/app/views/onboarding/components/stepper.tsx b/static/app/views/onboarding/components/stepper.tsx
index 9806a85758014d..479ad9ca645145 100644
--- a/static/app/views/onboarding/components/stepper.tsx
+++ b/static/app/views/onboarding/components/stepper.tsx
@@ -23,7 +23,7 @@ const StepperIndicator = styled('span')<{clickable?: boolean}>`
 const StepperTransitionIndicator = styled(motion.span)`
   height: 8px;
   width: 80px;
-  background-color: ${p => p.theme.colors.chonk.blue400};
+  background-color: ${p => p.theme.tokens.background.accent.vibrant};
   position: absolute;
 `;
 
diff --git a/static/app/views/performance/newTraceDetails/trace.tsx b/static/app/views/performance/newTraceDetails/trace.tsx
index e0c68578cc008c..54b1ee46ad306e 100644
--- a/static/app/views/performance/newTraceDetails/trace.tsx
+++ b/static/app/views/performance/newTraceDetails/trace.tsx
@@ -699,7 +699,7 @@ function VerticalTimestampIndicators({
 const TraceStylingWrapper = styled('div')`
   margin: auto;
   overscroll-behavior: none;
-  box-shadow: 0 0 0 1px ${p => p.theme.tokens.border.primary};
+  box-shadow: 0 0 0 1px ${p => p.theme.tokens.border.neutral.muted};
   position: absolute;
   left: 0;
   top: 0;
@@ -810,7 +810,7 @@ const TraceStylingWrapper = styled('div')`
 
     &:hover {
       &:before {
-        background-color: ${p => p.theme.colors.blue400};
+        background-color: ${p => p.theme.tokens.background.accent.vibrant};
       }
     }
   }
@@ -982,11 +982,11 @@ const TraceStylingWrapper = styled('div')`
       top: 26px;
 
       &.CurrentReplayTimestamp {
-        background: ${p => p.theme.colors.blue400};
+        background: ${p => p.theme.tokens.graphics.accent.vibrant};
       }
 
       &.HoverReplayTimestamp {
-        background: ${p => p.theme.colors.blue200};
+        background: ${p => p.theme.tokens.background.transparent.accent.muted};
       }
     }
 
@@ -1031,16 +1031,16 @@ const TraceStylingWrapper = styled('div')`
   &.light {
     .TracePattern {
       &.info {
-        --pattern-odd: ${p => p.theme.colors.blue500};
-        --pattern-even: ${p => p.theme.colors.blue400};
+        --pattern-odd: ${p => p.theme.tokens.content.accent};
+        --pattern-even: ${p => p.theme.tokens.graphics.accent.vibrant};
       }
       &.warning {
         --pattern-odd: ${p => p.theme.colors.yellow500};
         --pattern-even: ${p => p.theme.colors.yellow400};
       }
       &.occurence {
-        --pattern-odd: ${p => p.theme.colors.blue500};
-        --pattern-even: ${p => p.theme.colors.blue400};
+        --pattern-odd: ${p => p.theme.tokens.content.accent};
+        --pattern-even: ${p => p.theme.tokens.graphics.accent.vibrant};
       }
 
       &.profile {
@@ -1073,16 +1073,16 @@ const TraceStylingWrapper = styled('div')`
   &.dark {
     .TracePattern {
       &.info {
-        --pattern-odd: ${p => p.theme.colors.blue500};
-        --pattern-even: ${p => p.theme.colors.blue400};
+        --pattern-odd: ${p => p.theme.tokens.content.accent};
+        --pattern-even: ${p => p.theme.tokens.graphics.accent.vibrant};
       }
       &.warning {
         --pattern-odd: ${p => p.theme.colors.yellow500};
         --pattern-even: ${p => p.theme.colors.yellow400};
       }
       &.occurence {
-        --pattern-odd: ${p => p.theme.colors.blue500};
-        --pattern-even: ${p => p.theme.colors.blue400};
+        --pattern-odd: ${p => p.theme.tokens.content.accent};
+        --pattern-even: ${p => p.theme.tokens.graphics.accent.vibrant};
       }
 
       &.profile {
@@ -1120,11 +1120,12 @@ const TraceStylingWrapper = styled('div')`
     font-size: ${p => p.theme.fontSize.sm};
     transform: translateZ(0);
 
-    --row-background-odd: ${p => p.theme.backgroundSecondary};
-    --row-background-hover: ${p => p.theme.backgroundTertiary};
-    --row-background-focused: ${p => p.theme.backgroundTertiary};
-    --row-outline: ${p => p.theme.colors.blue400};
-    --row-children-button-border-color: ${p => p.theme.tokens.border.primary};
+    --row-background-odd: ${p => p.theme.tokens.background.secondary};
+    --row-background-hover: ${p =>
+      p.theme.tokens.interactive.transparent.neutral.background.hover};
+    --row-background-focused: ${p => p.theme.tokens.background.tertiary};
+    --row-outline: ${p => p.theme.tokens.focus.default};
+    --row-children-button-border-color: ${p => p.theme.tokens.border.neutral.muted};
 
     /* allow empty blocks so we can keep an exhaustive list of classnames for future reference */
     /* stylelint-disable */
@@ -1270,10 +1271,10 @@ const TraceStylingWrapper = styled('div')`
     }
 
     &.Highlight {
-      box-shadow: inset 0 0 0 1px ${p => p.theme.colors.blue400} !important;
+      box-shadow: inset 0 0 0 1px ${p => p.theme.tokens.border.accent.vibrant} !important;
 
       .TraceLeftColumn {
-        box-shadow: inset 0px 0 0px 1px ${p => p.theme.colors.blue400} !important;
+        box-shadow: inset 0px 0 0px 1px ${p => p.theme.tokens.border.accent.vibrant} !important;
       }
     }
 
@@ -1310,7 +1311,7 @@ const TraceStylingWrapper = styled('div')`
     }
 
     &.Autogrouped {
-      color: ${p => p.theme.colors.blue400};
+      color: ${p => p.theme.tokens.content.accent};
 
       .TraceDescription {
         font-weight: ${p => p.theme.fontWeight.bold};
@@ -1318,30 +1319,30 @@ const TraceStylingWrapper = styled('div')`
 
       .TraceChildrenCountWrapper {
         button {
-          color: ${p => p.theme.white};
-          background-color: ${p => p.theme.colors.blue400};
+          color: ${p => p.theme.tokens.content.onVibrant.light};
+          background-color: ${p => p.theme.tokens.background.accent.vibrant};
         }
         svg {
-          fill: ${p => p.theme.white};
+          fill: ${p => p.theme.tokens.content.onVibrant.light};
         }
       }
 
       &.error {
-        color: ${p => p.theme.colors.red400};
+        color: ${p => p.theme.tokens.content.danger};
 
         .TraceChildrenCountWrapper {
           button {
-            color: ${p => p.theme.white};
-            background-color: ${p => p.theme.colors.red400};
+            color: ${p => p.theme.tokens.content.onVibrant.light};
+            background-color: ${p => p.theme.tokens.background.danger.vibrant};
           }
         }
       }
     }
 
     &.Collapsed {
-      background-color: ${p => p.theme.backgroundSecondary};
-      border-bottom: 1px solid ${p => p.theme.tokens.border.primary};
-      border-top: 1px solid ${p => p.theme.tokens.border.primary};
+      background-color: ${p => p.theme.tokens.background.secondary};
+      border-bottom: 1px solid ${p => p.theme.tokens.border.neutral.muted};
+      border-top: 1px solid ${p => p.theme.tokens.border.neutral.muted};
 
       .TraceLeftColumn {
         padding-left: 14px;
@@ -1551,11 +1552,11 @@ const TraceStylingWrapper = styled('div')`
       .TraceVerticalConnector,
       .TraceVerticalLastChildConnector,
       .TraceExpandedVerticalConnector {
-        border-left: 2px dashed ${p => p.theme.tokens.border.primary};
+        border-left: 2px dashed ${p => p.theme.tokens.border.neutral.muted};
       }
 
       &::before {
-        border-bottom: 2px dashed ${p => p.theme.tokens.border.primary};
+        border-bottom: 2px dashed ${p => p.theme.tokens.border.neutral.muted};
       }
     }
 
@@ -1571,7 +1572,7 @@ const TraceStylingWrapper = styled('div')`
       display: block;
       width: 50%;
       height: 2px;
-      border-bottom: 2px solid ${p => p.theme.tokens.border.primary};
+      border-bottom: 2px solid ${p => p.theme.tokens.border.neutral.muted};
       position: absolute;
       left: 0;
       top: 50%;
@@ -1580,7 +1581,7 @@ const TraceStylingWrapper = styled('div')`
 
     &::after {
       content: '';
-      background-color: ${p => p.theme.tokens.border.primary};
+      background-color: ${p => p.theme.tokens.border.neutral.muted};
       border-radius: 50%;
       height: 6px;
       width: 6px;
@@ -1598,10 +1599,10 @@ const TraceStylingWrapper = styled('div')`
     bottom: 0;
     height: 100%;
     width: 2px;
-    border-left: 2px solid ${p => p.theme.tokens.border.primary};
+    border-left: 2px solid ${p => p.theme.tokens.border.neutral.muted};
 
     &.Orphaned {
-      border-left: 2px dashed ${p => p.theme.tokens.border.primary};
+      border-left: 2px dashed ${p => p.theme.tokens.border.neutral.muted};
     }
   }
 
@@ -1612,7 +1613,7 @@ const TraceStylingWrapper = styled('div')`
     bottom: 0;
     height: 50%;
     width: 2px;
-    border-left: 2px solid ${p => p.theme.tokens.border.primary};
+    border-left: 2px solid ${p => p.theme.tokens.border.neutral.muted};
     border-bottom-left-radius: 4px;
   }
 
@@ -1622,7 +1623,7 @@ const TraceStylingWrapper = styled('div')`
     height: 50%;
     left: 50%;
     width: 2px;
-    border-left: 2px solid ${p => p.theme.tokens.border.primary};
+    border-left: 2px solid ${p => p.theme.tokens.border.neutral.muted};
   }
 
   .TraceOperation {
diff --git a/static/app/views/performance/newTraceDetails/traceDrawer/traceDrawer.tsx b/static/app/views/performance/newTraceDetails/traceDrawer/traceDrawer.tsx
index 74cc75fd07ae97..fa2728309397ec 100644
--- a/static/app/views/performance/newTraceDetails/traceDrawer/traceDrawer.tsx
+++ b/static/app/views/performance/newTraceDetails/traceDrawer/traceDrawer.tsx
@@ -638,7 +638,7 @@ const Tab = styled('li')`
   }
 
   &:hover {
-    border-bottom: 2px solid ${p => p.theme.colors.blue200};
+    border-bottom: 2px solid ${p => p.theme.tokens.border.accent.vibrant};
 
     button:last-child {
       transition: all 0.3s ease-in-out 500ms;
@@ -647,7 +647,7 @@ const Tab = styled('li')`
     }
   }
   &[aria-selected='true'] {
-    border-bottom: 2px solid ${p => p.theme.colors.blue500};
+    border-bottom: 2px solid ${p => p.theme.tokens.graphics.accent.vibrant};
   }
 `;
 
diff --git a/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/baseNode.spec.tsx b/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/baseNode.spec.tsx
index 86ee0e591aca1f..f91db83cb697e8 100644
--- a/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/baseNode.spec.tsx
+++ b/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/baseNode.spec.tsx
@@ -36,7 +36,7 @@ class TestNode extends BaseNode {
   }
 
   makeBarColor(theme: Theme): string {
-    return theme.colors.blue400;
+    return theme.tokens.graphics.accent.vibrant;
   }
 
   printNode(): string {
@@ -726,7 +726,9 @@ describe('BaseNode', () => {
         title: 'Trace Header Title',
         subtitle: 'GET /api/users',
       });
-      expect(node.makeBarColor(ThemeFixture())).toEqual(ThemeFixture().blue300);
+      expect(node.makeBarColor(ThemeFixture())).toEqual(
+        ThemeFixture().tokens.graphics.accent.vibrant
+      );
       expect(node.printNode()).toBe('Print Node(test-id)');
       expect(node.analyticsName()).toBe('test');
 
diff --git a/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/parentAutogroupNode.spec.tsx b/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/parentAutogroupNode.spec.tsx
index db99e81a22a5cd..f47e8e8cfefcb3 100644
--- a/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/parentAutogroupNode.spec.tsx
+++ b/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/parentAutogroupNode.spec.tsx
@@ -750,7 +750,7 @@ describe('ParentAutogroupNode', () => {
       node.errors.add(mockError);
 
       const theme = ThemeFixture();
-      expect(node.makeBarColor(theme)).toBe(theme.colors.red400);
+      expect(node.makeBarColor(theme)).toBe(theme.tokens.graphics.danger.vibrant);
     });
 
     it('should return blue color when no errors are present', () => {
@@ -771,7 +771,7 @@ describe('ParentAutogroupNode', () => {
 
       // No errors added, should default to blue
       const theme = ThemeFixture();
-      expect(node.makeBarColor(theme)).toBe(theme.colors.blue400);
+      expect(node.makeBarColor(theme)).toBe(theme.tokens.graphics.accent.vibrant);
     });
   });
 
diff --git a/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/parentAutogroupNode.tsx b/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/parentAutogroupNode.tsx
index 40f910cbc1b52b..16fa312f5316fd 100644
--- a/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/parentAutogroupNode.tsx
+++ b/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/parentAutogroupNode.tsx
@@ -164,10 +164,10 @@ export class ParentAutogroupNode extends BaseNode<TraceTree.ChildrenAutogroup> {
 
   makeBarColor(theme: Theme): string {
     if (this.errors.size > 0) {
-      return theme.colors.red400;
+      return theme.tokens.graphics.danger.vibrant;
     }
 
-    return theme.colors.blue400;
+    return theme.tokens.graphics.accent.vibrant;
   }
 
   resolveValueFromSearchKey(_key: string): any | null {
diff --git a/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/siblingAutogroupNode.spec.tsx b/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/siblingAutogroupNode.spec.tsx
index a6f9a802712ad8..4d7cc6bb86e294 100644
--- a/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/siblingAutogroupNode.spec.tsx
+++ b/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/siblingAutogroupNode.spec.tsx
@@ -314,7 +314,7 @@ describe('SiblingAutogroupNode', () => {
       node.errors.add(mockError);
 
       const theme = ThemeFixture();
-      expect(node.makeBarColor(theme)).toBe(theme.colors.red400);
+      expect(node.makeBarColor(theme)).toBe(theme.tokens.graphics.danger.vibrant);
     });
 
     it('should return blue color when no errors are present', () => {
@@ -324,7 +324,7 @@ describe('SiblingAutogroupNode', () => {
 
       // No errors added, should default to blue
       const theme = ThemeFixture();
-      expect(node.makeBarColor(theme)).toBe(theme.colors.blue400);
+      expect(node.makeBarColor(theme)).toBe(theme.tokens.graphics.accent.vibrant);
     });
   });
 
diff --git a/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/siblingAutogroupNode.tsx b/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/siblingAutogroupNode.tsx
index de319c5571d902..77b3ddc014106b 100644
--- a/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/siblingAutogroupNode.tsx
+++ b/static/app/views/performance/newTraceDetails/traceModels/traceTreeNode/siblingAutogroupNode.tsx
@@ -93,10 +93,10 @@ export class SiblingAutogroupNode extends BaseNode<TraceTree.SiblingAutogroup> {
 
   makeBarColor(theme: Theme): string {
     if (this.errors.size > 0) {
-      return theme.colors.red400;
+      return theme.tokens.graphics.danger.vibrant;
     }
 
-    return theme.colors.blue400;
+    return theme.tokens.graphics.accent.vibrant;
   }
 
   resolveValueFromSearchKey(_key: string): any | null {
diff --git a/static/app/views/performance/newTraceDetails/traceShortcutsModal.tsx b/static/app/views/performance/newTraceDetails/traceShortcutsModal.tsx
index 38c53094bd58fb..9e3fb4bce6cd14 100644
--- a/static/app/views/performance/newTraceDetails/traceShortcutsModal.tsx
+++ b/static/app/views/performance/newTraceDetails/traceShortcutsModal.tsx
@@ -83,6 +83,6 @@ const Shortcut = styled('li')`
   strong {
     display: inline-block;
     min-width: 130px;
-    color: ${p => p.theme.colors.blue400};
+    color: ${p => p.theme.tokens.content.accent};
   }
 `;
diff --git a/static/app/views/performance/newTraceDetails/traceTabsAndVitals.tsx b/static/app/views/performance/newTraceDetails/traceTabsAndVitals.tsx
index 15e87963b28ddb..6592034da7097e 100644
--- a/static/app/views/performance/newTraceDetails/traceTabsAndVitals.tsx
+++ b/static/app/views/performance/newTraceDetails/traceTabsAndVitals.tsx
@@ -114,5 +114,5 @@ export function TraceTabsAndVitals({
 }
 
 const StyledPlaceholder = styled(TraceHeaderComponents.StyledPlaceholder)`
-  background-color: ${p => p.theme.colors.blue100};
+  background-color: ${p => p.theme.tokens.background.transparent.accent.muted};
 `;
diff --git a/static/app/views/performance/newTraceDetails/traceWaterfallStyles.tsx b/static/app/views/performance/newTraceDetails/traceWaterfallStyles.tsx
index f6df67be0c4421..d8da825f7ab162 100644
--- a/static/app/views/performance/newTraceDetails/traceWaterfallStyles.tsx
+++ b/static/app/views/performance/newTraceDetails/traceWaterfallStyles.tsx
@@ -1,14 +1,14 @@
 import type {Theme} from '@emotion/react';
 
 export const traceGridCssVariables = ({theme}: {theme: Theme}) => `
-  --info: ${theme.colors.blue500};
-  --warning: ${theme.colors.yellow400};
-  --debug: ${theme.colors.blue400};
-  --error: ${theme.tokens.graphics.danger};
-  --fatal: ${theme.tokens.graphics.danger};
-  --default: ${theme.colors.gray400};
-  --unknown: ${theme.colors.gray400};
-  --profile: ${theme.colors.blue400};
-  --autogrouped: ${theme.colors.blue400};
-  --occurence: ${theme.colors.blue400};
+  --info: ${theme.tokens.graphics.accent.vibrant};
+  --warning: ${theme.tokens.graphics.warning.vibrant};
+  --debug: ${theme.tokens.graphics.accent.vibrant};
+  --error: ${theme.tokens.graphics.danger.vibrant};
+  --fatal: ${theme.tokens.graphics.danger.vibrant};
+  --default: ${theme.tokens.graphics.neutral.vibrant};
+  --unknown: ${theme.tokens.graphics.neutral.vibrant};
+  --profile: ${theme.tokens.graphics.accent.vibrant};
+  --autogrouped: ${theme.tokens.graphics.accent.vibrant};
+  --occurence: ${theme.tokens.graphics.accent.vibrant};
 `;
diff --git a/static/app/views/performance/transactionSummary/transactionOverview/trendChart/content.tsx b/static/app/views/performance/transactionSummary/transactionOverview/trendChart/content.tsx
index 3068ff7f442d4e..0c49c7b855c98d 100644
--- a/static/app/views/performance/transactionSummary/transactionOverview/trendChart/content.tsx
+++ b/static/app/views/performance/transactionSummary/transactionOverview/trendChart/content.tsx
@@ -70,7 +70,7 @@ function Content({
         .map(values => {
           return {
             ...values,
-            color: theme.colors.blue400,
+            color: theme.tokens.background.accent.vibrant,
             lineStyle: {
               opacity: 0.75,
               width: 1,
@@ -123,7 +123,7 @@ function Content({
     ? smoothedResults.map(values => {
         return {
           ...values,
-          color: theme.colors.blue400,
+          color: theme.tokens.background.accent.vibrant,
           lineStyle: {
             opacity: 1,
           },
diff --git a/static/app/views/preprod/buildComparison/main/sizeCompareSelectionContent.tsx b/static/app/views/preprod/buildComparison/main/sizeCompareSelectionContent.tsx
index 59f1ff404ab65a..cd415e970d96bd 100644
--- a/static/app/views/preprod/buildComparison/main/sizeCompareSelectionContent.tsx
+++ b/static/app/views/preprod/buildComparison/main/sizeCompareSelectionContent.tsx
@@ -359,7 +359,7 @@ const BuildItemBranchTag = styled('span')`
   padding: ${p => p.theme.space['2xs']} ${p => p.theme.space.sm};
   background-color: ${p => p.theme.colors.gray100};
   border-radius: ${p => p.theme.radius.md};
-  color: ${p => p.theme.colors.blue500};
+  color: ${p => p.theme.tokens.content.accent};
   font-size: ${p => p.theme.fontSize.sm};
   font-weight: ${p => p.theme.fontWeight.normal};
 `;
diff --git a/static/app/views/preprod/buildDetails/main/insights/insightInfoModal.tsx b/static/app/views/preprod/buildDetails/main/insights/insightInfoModal.tsx
index 50424e27f34fa9..1501775e38ad58 100644
--- a/static/app/views/preprod/buildDetails/main/insights/insightInfoModal.tsx
+++ b/static/app/views/preprod/buildDetails/main/insights/insightInfoModal.tsx
@@ -35,5 +35,5 @@ export const InlineCode = styled('code')`
   border-radius: ${p => p.theme.radius.md};
   font-family: ${p => p.theme.text.familyMono};
   font-size: ${p => p.theme.fontSize.sm};
-  color: ${p => p.theme.colors.blue400};
+  color: ${p => p.theme.tokens.content.accent};
 `;
diff --git a/static/app/views/prevent/preventAI/onboarding.tsx b/static/app/views/prevent/preventAI/onboarding.tsx
index e08cb21c85a96c..7712efcbf4b25d 100644
--- a/static/app/views/prevent/preventAI/onboarding.tsx
+++ b/static/app/views/prevent/preventAI/onboarding.tsx
@@ -251,8 +251,8 @@ const StepNumber = styled('div')`
   justify-content: center;
   width: 24px;
   height: 24px;
-  background-color: ${p => p.theme.colors.blue400};
-  color: ${p => p.theme.white};
+  background-color: ${p => p.theme.tokens.background.accent.vibrant};
+  color: ${p => p.theme.tokens.content.onVibrant.light};
   border-radius: 50%;
   font-size: ${p => p.theme.fontSize.md};
   font-weight: 600;
diff --git a/static/app/views/projectDetail/charts/projectErrorsBasicChart.tsx b/static/app/views/projectDetail/charts/projectErrorsBasicChart.tsx
index fc18da24356120..93a49b0bdae04f 100644
--- a/static/app/views/projectDetail/charts/projectErrorsBasicChart.tsx
+++ b/static/app/views/projectDetail/charts/projectErrorsBasicChart.tsx
@@ -95,7 +95,10 @@ function ProjectErrorsBasicChart({projectId, onTotalValuesChange}: Props) {
         series={series}
         isGroupedByDate
         showTimeInTooltip
-        colors={theme => [theme.colors.blue400, theme.colors.blue200]}
+        colors={theme => [
+          theme.tokens.dataviz.semantic.accent,
+          theme.tokens.dataviz.semantic.neutral,
+        ]}
         grid={{left: '10px', right: '10px', top: '40px', bottom: '0px'}}
       />
     </Fragment>
diff --git a/static/app/views/projectDetail/projectCharts.tsx b/static/app/views/projectDetail/projectCharts.tsx
index 87954944740f53..ad3257a09919a6 100644
--- a/static/app/views/projectDetail/projectCharts.tsx
+++ b/static/app/views/projectDetail/projectCharts.tsx
@@ -351,7 +351,10 @@ class ProjectCharts extends Component<Props, State> {
                   location={location}
                   organization={organization}
                   onTotalValuesChange={this.handleTotalValuesChange}
-                  colors={[theme.chart.getColorPalette(0)[0], theme.colors.blue200]}
+                  colors={[
+                    theme.chart.getColorPalette(0)[0],
+                    theme.tokens.border.accent.moderate,
+                  ]}
                 />
               )}
               {displayMode === DisplayModes.FAILURE_RATE && (
@@ -368,7 +371,10 @@ class ProjectCharts extends Component<Props, State> {
                   location={location}
                   organization={organization}
                   onTotalValuesChange={this.handleTotalValuesChange}
-                  colors={[theme.colors.red400, theme.colors.blue200]}
+                  colors={[
+                    theme.tokens.dataviz.semantic.bad,
+                    theme.tokens.border.accent.moderate,
+                  ]}
                 />
               )}
               {displayMode === DisplayModes.TPM && (
@@ -385,7 +391,10 @@ class ProjectCharts extends Component<Props, State> {
                   location={location}
                   organization={organization}
                   onTotalValuesChange={this.handleTotalValuesChange}
-                  colors={[theme.colors.yellow400, theme.colors.blue200]}
+                  colors={[
+                    theme.tokens.dataviz.semantic.meh,
+                    theme.tokens.border.accent.moderate,
+                  ]}
                   disablePrevious
                 />
               )}
@@ -403,7 +412,10 @@ class ProjectCharts extends Component<Props, State> {
                     location={location}
                     organization={organization}
                     onTotalValuesChange={this.handleTotalValuesChange}
-                    colors={[theme.colors.blue400, theme.colors.blue200]}
+                    colors={[
+                      theme.tokens.dataviz.semantic.accent,
+                      theme.tokens.dataviz.semantic.neutral,
+                    ]}
                     interval={this.barChartInterval}
                     chartComponent={BarChart}
                     disableReleases
@@ -428,7 +440,10 @@ class ProjectCharts extends Component<Props, State> {
                   location={location}
                   organization={organization}
                   onTotalValuesChange={this.handleTotalValuesChange}
-                  colors={[theme.colors.gray200, theme.colors.blue200]}
+                  colors={[
+                    theme.tokens.dataviz.semantic.neutral,
+                    theme.tokens.border.accent.moderate,
+                  ]}
                   interval={this.barChartInterval}
                   chartComponent={BarChart}
                   disableReleases
diff --git a/static/app/views/projectsDashboard/projectChart.tsx b/static/app/views/projectsDashboard/projectChart.tsx
index caf45385abe45a..2d251f27938e9a 100644
--- a/static/app/views/projectsDashboard/projectChart.tsx
+++ b/static/app/views/projectsDashboard/projectChart.tsx
@@ -58,12 +58,12 @@ export function ProjectChart({
       xAxisIndex: 1,
       yAxisIndex: 1,
       itemStyle: {
-        color: theme.chart.neutral,
+        color: theme.tokens.dataviz.semantic.neutral,
         opacity: 0.8,
       },
       emphasis: {
         itemStyle: {
-          color: theme.chart.neutral,
+          color: theme.tokens.dataviz.semantic.neutral,
           opacity: 1.0,
         },
       },
@@ -84,12 +84,12 @@ export function ProjectChart({
       xAxisIndex: 0,
       yAxisIndex: 0,
       itemStyle: {
-        color: theme.colors.blue400,
+        color: theme.tokens.dataviz.semantic.accent,
         opacity: 0.6,
       },
       emphasis: {
         itemStyle: {
-          color: theme.colors.blue400,
+          color: theme.tokens.dataviz.semantic.accent,
           opacity: 0.8,
         },
       },
diff --git a/static/app/views/pullRequest/details/main/prFilesList.tsx b/static/app/views/pullRequest/details/main/prFilesList.tsx
index 08da71831cbb31..fb9eb11d9c58a5 100644
--- a/static/app/views/pullRequest/details/main/prFilesList.tsx
+++ b/static/app/views/pullRequest/details/main/prFilesList.tsx
@@ -242,7 +242,7 @@ const DiffRow = styled('tr')`
     background-color: ${p => p.theme.backgroundSecondary};
 
     td {
-      color: ${p => p.theme.colors.blue400};
+      color: ${p => p.theme.tokens.content.accent};
       font-weight: ${p => p.theme.fontWeight.bold};
     }
   }
diff --git a/static/app/views/releases/detail/overview/sidebar/totalCrashFreeUsers.tsx b/static/app/views/releases/detail/overview/sidebar/totalCrashFreeUsers.tsx
index 070e7532c6b1ee..ca4a99cec24dda 100644
--- a/static/app/views/releases/detail/overview/sidebar/totalCrashFreeUsers.tsx
+++ b/static/app/views/releases/detail/overview/sidebar/totalCrashFreeUsers.tsx
@@ -131,7 +131,7 @@ const Row = styled('div')`
     width: ${DOT_SIZE}px;
     height: ${DOT_SIZE}px;
     border-radius: 100%;
-    background-color: ${p => p.theme.colors.blue400};
+    background-color: ${p => p.theme.tokens.graphics.accent.vibrant};
     position: absolute;
     top: 0;
     left: -${Math.floor(DOT_SIZE / 2)}px;
diff --git a/static/app/views/releases/list/releaseCard/releaseCardProjectRow.tsx b/static/app/views/releases/list/releaseCard/releaseCardProjectRow.tsx
index b99955b24e3e34..f7f22637baabda 100644
--- a/static/app/views/releases/list/releaseCard/releaseCardProjectRow.tsx
+++ b/static/app/views/releases/list/releaseCard/releaseCardProjectRow.tsx
@@ -166,7 +166,10 @@ function ReleaseCardProjectRow({
 
                     return `${value.toLocaleString()} ${suffix}`;
                   }}
-                  colors={[theme.colors.blue400, theme.colors.gray200]}
+                  colors={[
+                    theme.tokens.dataviz.semantic.accent,
+                    theme.tokens.dataviz.semantic.other,
+                  ]}
                 />
               </LazyLoad>
             </AdoptionWrapper>
diff --git a/static/app/views/releases/releaseBubbles/useReleaseBubbles.tsx b/static/app/views/releases/releaseBubbles/useReleaseBubbles.tsx
index d166b1c22a8d5b..b913fc23d82f0f 100644
--- a/static/app/views/releases/releaseBubbles/useReleaseBubbles.tsx
+++ b/static/app/views/releases/releaseBubbles/useReleaseBubbles.tsx
@@ -191,7 +191,7 @@ function ReleaseBubbleSeries({
         // in the "padding" areas (i.e. so tooltips open)
         lineWidth: bubblePadding,
         stroke: 'transparent',
-        fill: theme.colors.blue500,
+        fill: theme.tokens.graphics.accent.vibrant,
         // TODO: figure out correct opacity calculations
         opacity: Math.round((Number(numberReleases) / avgReleases) * 50) / 100,
       },
@@ -205,7 +205,7 @@ function ReleaseBubbleSeries({
     renderItem: renderReleaseBubble,
     name: t('Releases'),
     data,
-    color: theme.colors.blue500,
+    color: theme.tokens.graphics.accent.vibrant,
     animation: false,
     markLine: {
       silent: true,
@@ -527,7 +527,7 @@ export function useReleaseBubbles({
           type: 'custom',
           renderItem: () => null,
           markArea: {
-            itemStyle: {color: theme.colors.blue500, opacity: 0.1},
+            itemStyle: {color: theme.tokens.graphics.accent.vibrant, opacity: 0.1},
             data: [
               [
                 {
@@ -643,7 +643,7 @@ export function useReleaseBubbles({
       legendSelected,
       releaseBubbleGrid,
       releaseBubbleXAxis,
-      theme.colors.blue500,
+      theme.tokens.graphics.accent.vibrant,
     ]
   );
 
diff --git a/static/app/views/relocation/uploadBackup.tsx b/static/app/views/relocation/uploadBackup.tsx
index c26b1a6424e66c..ba4208e6d08a23 100644
--- a/static/app/views/relocation/uploadBackup.tsx
+++ b/static/app/views/relocation/uploadBackup.tsx
@@ -237,7 +237,9 @@ const UploadWell = styled('div')<{draggedOver: boolean}>`
   border: 1px ${props => (props.draggedOver ? 'solid' : 'dashed')}
     ${p => p.theme.tokens.border.primary};
   background: ${props =>
-    props.draggedOver ? p => p.theme.colors.blue100 : p => p.theme.colors.surface500};
+    props.draggedOver
+      ? p => p.theme.tokens.background.transparent.accent.muted
+      : p => p.theme.tokens.background.primary};
 
   .upload-icon {
     color: ${p => p.theme.colors.gray800};
diff --git a/static/app/views/replays/detail/ai/chapterList.tsx b/static/app/views/replays/detail/ai/chapterList.tsx
index a247b0efbe2e0d..9fa2ee89cdf831 100644
--- a/static/app/views/replays/detail/ai/chapterList.tsx
+++ b/static/app/views/replays/detail/ai/chapterList.tsx
@@ -284,24 +284,24 @@ const ChapterWrapper = styled('details')`
   }
 
   &.activeChapter .beforeCurrentTime:last-child {
-    border-bottom-color: ${p => p.theme.colors.blue400};
+    border-bottom-color: ${p => p.theme.tokens.border.accent.vibrant};
   }
 
   /* the border-top is used to eliminate some of the top gap */
 
   &:hover {
-    border-top: 1px solid ${p => p.theme.backgroundSecondary};
+    border-top: 1px solid ${p => p.theme.tokens.background.secondary};
   }
 
   [data-is-feedback='true'] {
     &:hover {
-      border-top: 1px solid ${p => p.theme.colors.pink100};
+      border-top: 1px solid ${p => p.theme.tokens.border.promotion.muted};
     }
   }
 
   [data-is-error='true'] {
     &:hover {
-      border-top: 1px solid ${p => p.theme.colors.red100};
+      border-top: 1px solid ${p => p.theme.tokens.border.danger.muted};
     }
   }
 `;
@@ -314,7 +314,7 @@ const ChapterBreadcrumbRow = styled(BreadcrumbRow)`
   }
 
   &:hover {
-    background-color: ${p => p.theme.backgroundSecondary};
+    background-color: ${p => p.theme.tokens.background.secondary};
   }
 `;
 
@@ -341,18 +341,18 @@ const Chapter = styled('summary')`
   }
 
   [data-is-feedback='true'] & {
-    color: ${p => p.theme.colors.pink400};
+    color: ${p => p.theme.tokens.content.promotion};
 
     &:hover {
-      background-color: ${p => p.theme.colors.pink100};
+      background-color: ${p => p.theme.tokens.background.transparent.promotion.muted};
     }
   }
 
   [data-is-error='true'] & {
-    color: ${p => p.theme.colors.red400};
+    color: ${p => p.theme.tokens.content.danger};
 
     &:hover {
-      background-color: ${p => p.theme.colors.red100};
+      background-color: ${p => p.theme.tokens.background.transparent.danger.muted};
     }
   }
 `;
diff --git a/static/app/views/replays/detail/errorList/index.tsx b/static/app/views/replays/detail/errorList/index.tsx
index a5273d9ae656a9..4cd3874bb6ea15 100644
--- a/static/app/views/replays/detail/errorList/index.tsx
+++ b/static/app/views/replays/detail/errorList/index.tsx
@@ -202,7 +202,7 @@ const ErrorTable = styled('div')`
   border-radius: ${p => p.theme.radius.md};
 
   .beforeHoverTime + .afterHoverTime:before {
-    border-top: 1px solid ${p => p.theme.colors.blue200};
+    border-top: 1px solid ${p => p.theme.tokens.border.accent.moderate};
     content: '';
     left: 0;
     position: absolute;
@@ -211,7 +211,7 @@ const ErrorTable = styled('div')`
   }
 
   .beforeHoverTime:last-child:before {
-    border-bottom: 1px solid ${p => p.theme.colors.blue200};
+    border-bottom: 1px solid ${p => p.theme.tokens.border.accent.moderate};
     content: '';
     right: 0;
     position: absolute;
@@ -220,7 +220,7 @@ const ErrorTable = styled('div')`
   }
 
   .beforeCurrentTime + .afterCurrentTime:before {
-    border-top: 1px solid ${p => p.theme.colors.blue400};
+    border-top: 1px solid ${p => p.theme.tokens.border.accent.vibrant};
     content: '';
     left: 0;
     position: absolute;
@@ -229,7 +229,7 @@ const ErrorTable = styled('div')`
   }
 
   .beforeCurrentTime:last-child:before {
-    border-bottom: 1px solid ${p => p.theme.colors.blue400};
+    border-bottom: 1px solid ${p => p.theme.tokens.border.accent.vibrant};
     content: '';
     right: 0;
     position: absolute;
diff --git a/static/app/views/replays/detail/memoryPanel/memoryChart.tsx b/static/app/views/replays/detail/memoryPanel/memoryChart.tsx
index c956cf65654b96..286fe0f6d2f1e1 100644
--- a/static/app/views/replays/detail/memoryPanel/memoryChart.tsx
+++ b/static/app/views/replays/detail/memoryPanel/memoryChart.tsx
@@ -247,7 +247,11 @@ const MemoryChartSeries = memo(
             symbol: ['', ''],
             data: [],
             label: {show: false},
-            lineStyle: {type: 'solid', color: theme.colors.blue400, width: 2},
+            lineStyle: {
+              type: 'solid',
+              color: theme.tokens.graphics.accent.vibrant,
+              width: 2,
+            },
           },
         },
         {
@@ -258,11 +262,15 @@ const MemoryChartSeries = memo(
             symbol: ['', ''],
             data: [],
             label: {show: false},
-            lineStyle: {type: 'solid', color: theme.colors.blue200, width: 2},
+            lineStyle: {
+              type: 'solid',
+              color: theme.tokens.graphics.neutral.moderate,
+              width: 2,
+            },
           },
         },
       ],
-      [theme.colors.blue200, theme.colors.blue400]
+      [theme.tokens.graphics.accent.vibrant, theme.tokens.graphics.neutral.moderate]
     );
 
     const series = useMemo(
diff --git a/static/app/views/replays/detail/tabItemContainer.tsx b/static/app/views/replays/detail/tabItemContainer.tsx
index 97925d10a20437..bdeb57f62a3752 100644
--- a/static/app/views/replays/detail/tabItemContainer.tsx
+++ b/static/app/views/replays/detail/tabItemContainer.tsx
@@ -15,17 +15,17 @@ const TabItemContainer = styled('div')`
   }
 
   .beforeHoverTime + .afterHoverTime {
-    border-top-color: ${p => p.theme.colors.blue200};
+    border-top-color: ${p => p.theme.tokens.border.accent.moderate};
   }
   .beforeHoverTime:last-child {
-    border-bottom-color: ${p => p.theme.colors.blue200};
+    border-bottom-color: ${p => p.theme.tokens.border.accent.moderate};
   }
 
   .beforeCurrentTime + .afterCurrentTime {
-    border-top-color: ${p => p.theme.colors.blue400};
+    border-top-color: ${p => p.theme.tokens.border.accent.vibrant};
   }
   .beforeCurrentTime:last-child {
-    border-bottom-color: ${p => p.theme.colors.blue400};
+    border-bottom-color: ${p => p.theme.tokens.border.accent.vibrant};
   }
 `;
 
diff --git a/static/app/views/replays/selectors/selectorLink.tsx b/static/app/views/replays/selectors/selectorLink.tsx
index 5afb41f3a0e9ce..3cca12637791f1 100644
--- a/static/app/views/replays/selectors/selectorLink.tsx
+++ b/static/app/views/replays/selectors/selectorLink.tsx
@@ -63,7 +63,7 @@ const StyledLink = styled(Link)`
 `;
 
 const StyledTextOverflow = styled(TextOverflow)`
-  color: ${p => p.theme.colors.blue400};
+  color: ${p => p.theme.tokens.content.accent};
 `;
 
 const TooltipContainer = styled('div')`
diff --git a/static/app/views/seerExplorer/blockComponents.tsx b/static/app/views/seerExplorer/blockComponents.tsx
index 642c562cb03b74..9a78aada7dcfac 100644
--- a/static/app/views/seerExplorer/blockComponents.tsx
+++ b/static/app/views/seerExplorer/blockComponents.tsx
@@ -539,19 +539,19 @@ const ResponseDot = styled('div')<{
   background: ${p => {
     switch (p.status) {
       case 'loading':
-        return p.theme.colors.pink500;
+        return p.theme.tokens.content.promotion;
       case 'pending':
-        return p.theme.colors.pink500;
+        return p.theme.tokens.content.promotion;
       case 'content':
-        return p.theme.colors.blue500;
+        return p.theme.tokens.content.accent;
       case 'success':
-        return p.theme.colors.green500;
+        return p.theme.tokens.content.success;
       case 'failure':
-        return p.theme.colors.red500;
+        return p.theme.tokens.content.danger;
       case 'mixed':
-        return p.theme.colors.yellow500;
+        return p.theme.tokens.content.warning;
       default:
-        return p.theme.colors.blue500;
+        return p.theme.tokens.content.accent;
     }
   }};
 
diff --git a/static/app/views/seerExplorer/panelContainers.tsx b/static/app/views/seerExplorer/panelContainers.tsx
index 8637489bc0fce5..763fc4a6a8f6ca 100644
--- a/static/app/views/seerExplorer/panelContainers.tsx
+++ b/static/app/views/seerExplorer/panelContainers.tsx
@@ -163,7 +163,7 @@ const MinimizedOverlay = styled(motion.div)`
     left: 0;
     right: 0;
     bottom: 0;
-    background: ${p => p.theme.colors.blue200};
+    background: ${p => p.theme.tokens.background.transparent.accent.muted};
     border-radius: inherit;
     z-index: -1;
     pointer-events: none;
diff --git a/static/app/views/settings/components/settingsPageHeader.tsx b/static/app/views/settings/components/settingsPageHeader.tsx
index bf62440db94f60..0d363d56056b0a 100644
--- a/static/app/views/settings/components/settingsPageHeader.tsx
+++ b/static/app/views/settings/components/settingsPageHeader.tsx
@@ -85,7 +85,8 @@ const Title = styled('div')<TitleProps>`
   margin: ${space(4)} ${space(2)} ${space(3)} 0;
 `;
 const Subtitle = styled('div')<{colorSubtitle?: boolean}>`
-  color: ${p => (p.colorSubtitle ? p.theme.colors.blue500 : p.theme.colors.gray500)};
+  color: ${p =>
+    p.colorSubtitle ? p.theme.tokens.content.accent : p.theme.colors.gray500};
   font-weight: ${p => p.theme.fontWeight.normal};
   font-size: ${p => p.theme.fontSize.md};
   padding: ${space(1.5)} 0 0;
diff --git a/static/gsApp/components/dataConsentModal.tsx b/static/gsApp/components/dataConsentModal.tsx
index 7970ad13a8bad3..3b2aec64789b16 100644
--- a/static/gsApp/components/dataConsentModal.tsx
+++ b/static/gsApp/components/dataConsentModal.tsx
@@ -228,7 +228,7 @@ const LearnMore = styled(ExternalLink)`
 
   &:hover {
     text-decoration: underline;
-    text-decoration-color: ${p => p.theme.blue200};
+    text-decoration-color: ${p => p.theme.tokens.border.accent.moderate};
   }
 `;
 
diff --git a/static/gsApp/utils/useFeedbackInit.tsx b/static/gsApp/utils/useFeedbackInit.tsx
index a8e4f6b7ba2243..f3c13130c95da1 100644
--- a/static/gsApp/utils/useFeedbackInit.tsx
+++ b/static/gsApp/utils/useFeedbackInit.tsx
@@ -42,8 +42,8 @@ export default function useFeedbackInit() {
       #sentry-feedback {
         --foreground: ${theme.tokens.content.primary};
         --background: ${theme.tokens.background.primary};
-        --accent-foreground: ${theme.colors.white};
-        --accent-background: ${theme.colors.chonk.blue400};
+        --accent-foreground: ${theme.tokens.content.onVibrant.light};
+        --accent-background: ${theme.tokens.background.accent.vibrant};
         --success-color: ${theme.tokens.content.success};
         --error-color: ${theme.tokens.content.danger};
         --outline: 1px auto ${theme.tokens.border.accent};