diff --git a/packages/vibrant-theme/src/lib/theme/darkModeColors.ts b/packages/vibrant-theme/src/lib/theme/darkModeColors.ts
index 1ff18a2b7..b94a815ac 100644
--- a/packages/vibrant-theme/src/lib/theme/darkModeColors.ts
+++ b/packages/vibrant-theme/src/lib/theme/darkModeColors.ts
@@ -30,6 +30,10 @@ export const darkModeColors: Colors = {
   surface3: palettes.globalBlack,
   surface4: palettes.neutral['40'],
   surfaceOnMedia: `${palettes.neutral['50']}66`,
+  surfaceUltraThin: `${palettes.neutral['20']}66`,
+  surfaceThin: `${palettes.neutral['20']}99`,
+  surfaceRegular: `${palettes.neutral['15']}bf`,
+  surfaceThick: `${palettes.neutral['10']}cc`,
   disable: palettes.whiteAlpha['15'],
   outline1: palettes.whiteAlpha['8'],
   outline2: palettes.whiteAlpha['15'],
diff --git a/packages/vibrant-theme/src/lib/theme/lightModeColors.ts b/packages/vibrant-theme/src/lib/theme/lightModeColors.ts
index 7313f9e1c..388f7240c 100644
--- a/packages/vibrant-theme/src/lib/theme/lightModeColors.ts
+++ b/packages/vibrant-theme/src/lib/theme/lightModeColors.ts
@@ -29,6 +29,10 @@ export const lightModeColors: Colors = {
   surface2: palettes.globalWhite,
   surface3: palettes.globalWhite,
   surface4: palettes.neutral['80'],
+  surfaceUltraThin: `${palettes.neutral['90']}66`,
+  surfaceThin: `${palettes.neutral['90']}99`,
+  surfaceRegular: `${palettes.neutral['95']}cc`,
+  surfaceThick: `${palettes.neutral['95']}f2`,
   surfaceOnMedia: `${palettes.neutral['50']}33`,
   disable: palettes.blackAlpha['10'],
   outline1: palettes.blackAlpha['5'],
diff --git a/packages/vibrant-theme/src/types/Colors.ts b/packages/vibrant-theme/src/types/Colors.ts
index f37398cfe..b61d3dda3 100644
--- a/packages/vibrant-theme/src/types/Colors.ts
+++ b/packages/vibrant-theme/src/types/Colors.ts
@@ -26,6 +26,10 @@ export const colorTokens = [
   'surface3',
   'surface4',
   'surfaceOnMedia',
+  'surfaceUltraThin',
+  'surfaceThin',
+  'surfaceRegular',
+  'surfaceThick',
   'disable',
   'outline1',
   'outline2',
@@ -94,6 +98,10 @@ export const BaseColorOnColorMap: { [color in BaseColorToken]: OnColorToken } =
   surface3: 'onView1',
   surface4: 'onView1',
   surfaceOnMedia: 'onView1',
+  surfaceUltraThin: 'onView1',
+  surfaceThin: 'onView1',
+  surfaceRegular: 'onView1',
+  surfaceThick: 'onView1',
   disable: 'onView3',
   background: 'onView1',
   inverseSurface: 'onInverseSurface',