diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts
index dfb631d07016c5dcba150681a35eb1396709cb09..091aba7801d216a4d658a1181d0efcdf0f3b17cc 100644
--- a/styles/src/styleTree/tabBar.ts
+++ b/styles/src/styleTree/tabBar.ts
@@ -36,7 +36,7 @@ export default function tabBar(colorScheme: ColorScheme) {
   const activePaneActiveTab = {
     ...tab,
     background: background(elevation.top),
-    text: text(elevation.top, "sans", "base", "active", { size: "sm" }),
+    text: text(elevation.top, "sans", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false
@@ -52,7 +52,7 @@ export default function tabBar(colorScheme: ColorScheme) {
   const inactivePaneActiveTab = {
     ...tab,
     background: background(layer),
-    text: text(layer, "sans", "base", "active", { size: "sm" }),
+    text: text(layer, "sans", "base", "variant", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index 2a2b56258e851a7eb47024d29435c5ee0c941551..00ae645703457da35f1b96ce5815605fdda6cb93 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -144,13 +144,69 @@ function elevation(ramps: RampSet, isLight: boolean, shadow?: Shadow): Elevation
     ramps,
 
     bottom: topLayer(ramps, isLight),
-    middle: topLayer(ramps, isLight),
+    middle: middleLayer(ramps, isLight),
     top: topLayer(ramps, isLight),
 
     shadow,
   };
 }
 
+function middleLayer(ramps: RampSet, isLight: boolean): Layer {
+  let defaultStyle: Style = {
+    background: ramps.neutral(0.2).hex(),
+    border: ramps.neutral(0.7).hex(),
+    foreground: ramps.neutral(1).hex(),
+  };
+
+  let variantStyle: Style = {
+    background: ramps.neutral(0.3).hex(),
+    border: ramps.neutral(0.6).hex(),
+    foreground: ramps.neutral(0.8).hex(),
+  };
+
+  let hoveredStyle: Style = {
+    background: ramps.neutral(0.4).hex(),
+    border: ramps.neutral(1.0).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let pressedStyle: Style = {
+    background: ramps.neutral(0.55).hex(),
+    border: ramps.neutral(0.9).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let activeStyle: Style = {
+    background: ramps.neutral(0.8).hex(),
+    border: ramps.neutral(0.8).hex(),
+    foreground: ramps.neutral(0.1).hex(),
+  };
+
+  let disabledStyle: Style = {
+    background: ramps.neutral(0.25).hex(),
+    border: ramps.neutral(1).hex(),
+    foreground: ramps.neutral(0.9).hex(),
+  };
+
+  let styleSet: StyleSet = {
+    default: defaultStyle,
+    variant: variantStyle,
+    hovered: hoveredStyle,
+    pressed: pressedStyle,
+    active: activeStyle,
+    disabled: disabledStyle,
+  };
+
+  return {
+    base: styleSet,
+    on: styleSet,
+    info: styleSet,
+    positive: styleSet,
+    warning: styleSet,
+    negative: styleSet
+  };
+}
+
 function topLayer(ramps: RampSet, isLight: boolean): Layer {
   let defaultStyle: Style = {
     background: ramps.neutral(0).hex(),
@@ -164,7 +220,6 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
     foreground: ramps.neutral(0.8).hex(),
   };
 
-
   let hoveredStyle: Style = {
     background: ramps.neutral(0.4).hex(),
     border: ramps.neutral(1.0).hex(),