diff --git a/styles/dist/dark.json b/styles/dist/dark.json
index c1be80296e59211adacd8d38a283425b1fae0352..dac975e8f0180569aa6854b26842fe4c778f5051 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 166e00731e343a4019dc1f910a30badef50d072f..806c50240eee862fa8435a0b459f5b38ca79e842 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 862d5afbe8503b95997111e3098941db15199868..c59a9dffadcd2ef87d4e88775928e961fb544a4a 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 993519c8f1fd9b5fd44ce4a679d10489dd04f901..21e8e4ba6fdc37f74c41bb0dbd3e9f82e7e532e1 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 5a556b36a308152fd44e56b8fa879178c62bfe9e..9ed6998725fec1a785a9bcefbfdd3c330c89b86c 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 eb67f5f8f215899a3d0dc128c52f45b7f44c1b7f..98f1fb4878f81667ac4343da810202bbdbcfcd8e 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 3dcf9ea6918300b2c156ca9b31be909dd67eab3e..77eb493591bd4c9bb14295c03a931e5125b10126 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 c17aaf5807eca53f0a2dd51ee72a6a96900298fc..a244267f468e7f88a76e8978393c039b1b32b0c7 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 aa422e03306a089b093ec0efec872ea829187767..7113ee555c2c76e476b58e98f71a7dbb32af1650 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;