diff --git a/packages/vibrant-theme/src/lib/palettes/palettes.ts b/packages/vibrant-theme/src/lib/palettes/palettes.ts
index 5fe565b8c..12348717a 100644
--- a/packages/vibrant-theme/src/lib/palettes/palettes.ts
+++ b/packages/vibrant-theme/src/lib/palettes/palettes.ts
@@ -180,6 +180,7 @@ export const palettes = {
 
   whiteAlpha: {
     5: '#ffffff0d',
+    8: '#ffffff14',
     10: '#ffffff1a',
     15: '#ffffff26',
     20: '#ffffff33',
diff --git a/packages/vibrant-theme/src/lib/theme/darkModeColors.ts b/packages/vibrant-theme/src/lib/theme/darkModeColors.ts
index 73bae3907..1ff18a2b7 100644
--- a/packages/vibrant-theme/src/lib/theme/darkModeColors.ts
+++ b/packages/vibrant-theme/src/lib/theme/darkModeColors.ts
@@ -29,9 +29,10 @@ export const darkModeColors: Colors = {
   surface2: palettes.neutral['10'],
   surface3: palettes.globalBlack,
   surface4: palettes.neutral['40'],
+  surfaceOnMedia: `${palettes.neutral['50']}66`,
   disable: palettes.whiteAlpha['15'],
-  outline1: palettes.whiteAlpha['15'],
-  outline2: palettes.whiteAlpha['5'],
+  outline1: palettes.whiteAlpha['8'],
+  outline2: palettes.whiteAlpha['15'],
   outlineNeutral: palettes.neutral['95'],
   outlineDisable: palettes.whiteAlpha['10'],
   outlinePrimary: palettes.orange['60'],
@@ -40,7 +41,7 @@ export const darkModeColors: Colors = {
   outlineSuccess: palettes.green['50'],
   outlineWarning: palettes.yellow['75'],
   onView1: palettes.neutral['95'],
-  onView2: palettes.neutral['70'],
+  onView2: `${palettes.neutral['95']}a6`,
   onView3: palettes.neutral['50'],
   onViewPrimary: palettes.orange['65'],
   onViewInformative: palettes.blue['60'],
diff --git a/packages/vibrant-theme/src/lib/theme/lightModeColors.ts b/packages/vibrant-theme/src/lib/theme/lightModeColors.ts
index 00d1a1e12..7313f9e1c 100644
--- a/packages/vibrant-theme/src/lib/theme/lightModeColors.ts
+++ b/packages/vibrant-theme/src/lib/theme/lightModeColors.ts
@@ -29,9 +29,10 @@ export const lightModeColors: Colors = {
   surface2: palettes.globalWhite,
   surface3: palettes.globalWhite,
   surface4: palettes.neutral['80'],
+  surfaceOnMedia: `${palettes.neutral['50']}33`,
   disable: palettes.blackAlpha['10'],
-  outline1: palettes.blackAlpha['10'],
-  outline2: palettes.blackAlpha['5'],
+  outline1: palettes.blackAlpha['5'],
+  outline2: palettes.blackAlpha['10'],
   outlineNeutral: palettes.neutral['5'],
   outlineDisable: palettes.blackAlpha['5'],
   outlinePrimary: palettes.orange['60'],
@@ -40,13 +41,13 @@ export const lightModeColors: Colors = {
   outlineSuccess: palettes.green['50'],
   outlineWarning: palettes.yellow['75'],
   onView1: palettes.neutral['5'],
-  onView2: palettes.neutral['40'],
+  onView2: `${palettes.neutral['25']}cc`,
   onView3: palettes.neutral['60'],
   onViewPrimary: palettes.orange['65'],
   onViewInformative: palettes.blue['55'],
   onViewError: palettes.red['55'],
   onViewSuccess: palettes.green['55'],
-  onViewWarning: palettes.yellow['50'],
+  onViewWarning: palettes.yellow['65'],
   background: palettes.globalWhite,
   inverseSurface: palettes.neutral['15'],
   onInverseSurface: palettes.neutral['95'],
diff --git a/packages/vibrant-theme/src/types/Colors.ts b/packages/vibrant-theme/src/types/Colors.ts
index 40d152b3e..f37398cfe 100644
--- a/packages/vibrant-theme/src/types/Colors.ts
+++ b/packages/vibrant-theme/src/types/Colors.ts
@@ -25,6 +25,7 @@ export const colorTokens = [
   'surface2',
   'surface3',
   'surface4',
+  'surfaceOnMedia',
   'disable',
   'outline1',
   'outline2',
@@ -92,6 +93,7 @@ export const BaseColorOnColorMap: { [color in BaseColorToken]: OnColorToken } =
   surface2: 'onView1',
   surface3: 'onView1',
   surface4: 'onView1',
+  surfaceOnMedia: 'onView1',
   disable: 'onView3',
   background: 'onView1',
   inverseSurface: 'onInverseSurface',