diff --git a/styles/dist/dark.json b/styles/dist/dark.json
index c1be80296e..dac975e8f0 100644
--- a/styles/dist/dark.json
+++ b/styles/dist/dark.json
@@ -332,6 +332,11 @@
       "description": "Step: 900",
       "type": "color"
     },
+    "onMedia": {
+      "value": "#0707071a",
+      "description": "Step: 875",
+      "type": "color"
+    },
     "ok": {
       "value": "#1b944726",
       "description": "Step: 600",
diff --git a/styles/dist/light.json b/styles/dist/light.json
index 166e00731e..806c50240e 100644
--- a/styles/dist/light.json
+++ b/styles/dist/light.json
@@ -332,6 +332,11 @@
       "description": "Step: 250",
       "type": "color"
     },
+    "onMedia": {
+      "value": "#b8b8b84d",
+      "description": "Step: 250",
+      "type": "color"
+    },
     "ok": {
       "value": "#1b944726",
       "description": "Step: 600",
diff --git a/styles/dist/solarized-dark.json b/styles/dist/solarized-dark.json
index 862d5afbe8..c59a9dffad 100644
--- a/styles/dist/solarized-dark.json
+++ b/styles/dist/solarized-dark.json
@@ -271,6 +271,10 @@
       "value": "#657b83",
       "type": "color"
     },
+    "onMedia": {
+      "value": "#002b361a",
+      "type": "color"
+    },
     "ok": {
       "value": "#85990026",
       "type": "color"
diff --git a/styles/dist/solarized-light.json b/styles/dist/solarized-light.json
index 993519c8f1..21e8e4ba6f 100644
--- a/styles/dist/solarized-light.json
+++ b/styles/dist/solarized-light.json
@@ -271,6 +271,10 @@
       "value": "#839496",
       "type": "color"
     },
+    "onMedia": {
+      "value": "#fdf6e31a",
+      "type": "color"
+    },
     "ok": {
       "value": "#85990026",
       "type": "color"
diff --git a/styles/dist/tokens.json b/styles/dist/tokens.json
index 5a556b36a3..9ed6998725 100644
--- a/styles/dist/tokens.json
+++ b/styles/dist/tokens.json
@@ -1514,6 +1514,11 @@
         "description": "Step: 900",
         "type": "color"
       },
+      "onMedia": {
+        "value": "#0707071a",
+        "description": "Step: 875",
+        "type": "color"
+      },
       "ok": {
         "value": "#1b944726",
         "description": "Step: 600",
@@ -2207,6 +2212,11 @@
         "description": "Step: 250",
         "type": "color"
       },
+      "onMedia": {
+        "value": "#b8b8b84d",
+        "description": "Step: 250",
+        "type": "color"
+      },
       "ok": {
         "value": "#1b944726",
         "description": "Step: 600",
@@ -2839,6 +2849,10 @@
         "value": "#657b83",
         "type": "color"
       },
+      "onMedia": {
+        "value": "#002b361a",
+        "type": "color"
+      },
       "ok": {
         "value": "#85990026",
         "type": "color"
@@ -3406,6 +3420,10 @@
         "value": "#839496",
         "type": "color"
       },
+      "onMedia": {
+        "value": "#fdf6e31a",
+        "type": "color"
+      },
       "ok": {
         "value": "#85990026",
         "type": "color"
diff --git a/styles/src/themes/base16.ts b/styles/src/themes/base16.ts
index eb67f5f8f2..98f1fb4878 100644
--- a/styles/src/themes/base16.ts
+++ b/styles/src/themes/base16.ts
@@ -82,6 +82,7 @@ export function createTheme(name: string, isLight: boolean, neutral: ColorToken[
     muted: neutral[3],
     focused: neutral[3],
     active: neutral[3],
+    onMedia: withOpacity(neutral[0], 0.1),
     ok: withOpacity(accent.green, 0.15),
     error: withOpacity(accent.red, 0.15),
     warning: withOpacity(accent.yellow, 0.15),
diff --git a/styles/src/themes/dark.ts b/styles/src/themes/dark.ts
index 3dcf9ea691..77eb493591 100644
--- a/styles/src/themes/dark.ts
+++ b/styles/src/themes/dark.ts
@@ -65,6 +65,7 @@ const borderColor = {
   muted: colors.neutral[675],
   focused: colors.indigo[500],
   active: colors.neutral[900],
+  onMedia: withOpacity(colors.neutral[875], 0.1),
   ok: withOpacity(colors.green[600], 0.15),
   error: withOpacity(colors.red[500], 0.15),
   warning: withOpacity(colors.amber[400], 0.15),
diff --git a/styles/src/themes/light.ts b/styles/src/themes/light.ts
index c17aaf5807..a244267f46 100644
--- a/styles/src/themes/light.ts
+++ b/styles/src/themes/light.ts
@@ -65,6 +65,7 @@ const borderColor = {
   muted: colors.neutral[100],
   focused: colors.indigo[500],
   active: colors.neutral[250],
+  onMedia: withOpacity(colors.neutral[250], 0.3),
   ok: withOpacity(colors.green[600], 0.15),
   error: withOpacity(colors.red[500], 0.15),
   warning: withOpacity(colors.amber[400], 0.15),
diff --git a/styles/src/themes/theme.ts b/styles/src/themes/theme.ts
index aa422e0330..7113ee555c 100644
--- a/styles/src/themes/theme.ts
+++ b/styles/src/themes/theme.ts
@@ -87,6 +87,10 @@ export default interface Theme {
     muted: ColorToken;
     focused: ColorToken;
     active: ColorToken;
+    /**
+    * Used for rendering borders on top of media like avatars, images, video, etc.
+    */
+    onMedia: ColorToken;
     ok: ColorToken;
     error: ColorToken;
     warning: ColorToken;