diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index 11e2c704d376ae1de57503f0c5f274d2182169e6..b27a98e804df523f475a2950b6da58076831c5b2 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -777,7 +777,7 @@ pub struct Layer {
     pub base: StyleSet,
     pub variant: StyleSet,
     pub on: StyleSet,
-    pub info: StyleSet,
+    pub accent: StyleSet,
     pub positive: StyleSet,
     pub warning: StyleSet,
     pub negative: StyleSet,
@@ -790,6 +790,7 @@ pub struct StyleSet {
     pub disabled: Style,
     pub hovered: Style,
     pub pressed: Style,
+    pub inverted: Style,
 }
 
 #[derive(Clone, Deserialize, Default)]
diff --git a/crates/theme_testbench/src/theme_testbench.rs b/crates/theme_testbench/src/theme_testbench.rs
index 9ff90c4427c3bb8f0bfe44f3977928b634fec88a..2b5cadb398065abe1ea6295f9f32c5b0e5955fd0 100644
--- a/crates/theme_testbench/src/theme_testbench.rs
+++ b/crates/theme_testbench/src/theme_testbench.rs
@@ -107,7 +107,7 @@ impl ThemeTestbench {
                     .boxed(),
             )
             .with_child(
-                Self::render_button_set(3, layer_index, "info", &layer.info, cx)
+                Self::render_button_set(3, layer_index, "accent", &layer.accent, cx)
                     .flex(1., false)
                     .boxed(),
             )
@@ -187,6 +187,14 @@ impl ThemeTestbench {
                 Some(|style_set| &style_set.disabled),
                 cx,
             ))
+            .with_child(Self::render_button(
+                set_index * 6 + 5,
+                layer_index,
+                "inverted",
+                &style_set,
+                Some(|style_set| &style_set.inverted),
+                cx,
+            ))
     }
 
     fn render_button(
diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts
index 694f43496872c3b7c35b3fc6bee845639e41f640..1aa45c8c57f927566128e62b422646ea2278c03f 100644
--- a/styles/src/styleTree/commandPalette.ts
+++ b/styles/src/styleTree/commandPalette.ts
@@ -9,7 +9,7 @@ export default function commandPalette(colorScheme: ColorScheme) {
     key: {
       text: text(layer, "mono", "on", "default", { size: "xs" }),
       cornerRadius: 2,
-      background: withOpacity(background(layer, "on"), 0.5),
+      background: background(layer, "on"),
       padding: {
         top: 1,
         bottom: 1,
@@ -22,7 +22,7 @@ export default function commandPalette(colorScheme: ColorScheme) {
         left: 2,
       },
       active: {
-        text: text(layer, "mono", "on", "active", { size: "xs" }),
+        text: text(layer, "mono", "on", "inverted", { size: "xs" }),
         background: withOpacity(background(layer, "on"), 0.2),
       },
     },
diff --git a/styles/src/styleTree/components.ts b/styles/src/styleTree/components.ts
index 8170d38577620c6ec7fae305a8b06509b296ba84..3062a73130cb1a9641086af32bc3b49221e9538d 100644
--- a/styles/src/styleTree/components.ts
+++ b/styles/src/styleTree/components.ts
@@ -6,14 +6,14 @@ function isStyleSet(key: any): key is StyleSets {
     "base",
     "variant",
     "on",
-    "info",
+    "accent",
     "positive",
     "warning",
     "negative",
   ].includes(key);
 }
 function isStyle(key: any): key is Styles {
-  return ["default", "active", "disabled", "hovered", "pressed"].includes(key);
+  return ["default", "active", "disabled", "hovered", "pressed", "inverted"].includes(key);
 }
 function getStyle(
   layer: Layer,
diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts
index 6199ba64c5cf71160414aa853e532e9ec51fb040..67e38cdc62d3d5466ac640acd50754721bb5356d 100644
--- a/styles/src/styleTree/editor.ts
+++ b/styles/src/styleTree/editor.ts
@@ -36,8 +36,8 @@ export default function editor(colorScheme: ColorScheme) {
         }),
       },
       message: {
-        text: text(layer, "sans", styleSet, { size: "sm" }),
-        highlightText: text(layer, "sans", styleSet, {
+        text: text(layer, "sans", styleSet, "inverted", { size: "sm" }),
+        highlightText: text(layer, "sans", styleSet, "inverted", {
           size: "sm",
           weight: "bold",
         }),
@@ -153,7 +153,7 @@ export default function editor(colorScheme: ColorScheme) {
       .neutral(0.5)
       .alpha(0.4)
       .hex(), // TODO: This was blend * 2
-    errorColor: foreground(layer, "negative"),
+    errorColor: background(layer, "negative"),
     gutterBackground: background(layer),
     gutterPaddingFactor: 3.5,
     lineNumber: foreground(layer, "disabled"),
@@ -225,7 +225,7 @@ export default function editor(colorScheme: ColorScheme) {
     },
     errorDiagnostic: diagnostic(elevation.middle, "negative"),
     warningDiagnostic: diagnostic(elevation.middle, "warning"),
-    informationDiagnostic: diagnostic(elevation.middle, "info"),
+    informationDiagnostic: diagnostic(elevation.middle, "accent"),
     hintDiagnostic: diagnostic(elevation.middle, "warning"),
     invalidErrorDiagnostic: diagnostic(elevation.middle, "base"),
     invalidHintDiagnostic: diagnostic(elevation.middle, "base"),
diff --git a/styles/src/styleTree/hoverPopover.ts b/styles/src/styleTree/hoverPopover.ts
index 56121f20e2ee6bd59ec13052edaa02b1d95154e8..67b619890f87fa42cfb9972d50097855bb94c107 100644
--- a/styles/src/styleTree/hoverPopover.ts
+++ b/styles/src/styleTree/hoverPopover.ts
@@ -23,8 +23,8 @@ export default function HoverPopover(elevation: Elevation) {
     container: baseContainer,
     infoContainer: {
       ...baseContainer,
-      background: background(layer, "info"),
-      border: border(layer, "info"),
+      background: background(layer, "accent"),
+      border: border(layer, "accent"),
     },
     warningContainer: {
       ...baseContainer,
diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts
index 22b91e8d922f24811a6db463eb5349aa899df5eb..79479c108fb40e081f0ee9c32255d78826f60d44 100644
--- a/styles/src/styleTree/picker.ts
+++ b/styles/src/styleTree/picker.ts
@@ -26,11 +26,11 @@ export default function picker(colorScheme: ColorScheme) {
       },
       cornerRadius: 8,
       text: text(layer, "sans", "variant"),
-      highlightText: text(layer, "sans", "info", { weight: "bold" }),
+      highlightText: text(layer, "sans", "accent", { weight: "bold" }),
       active: {
-        background: background(layer, "active"),
-        text: text(layer, "sans", "active"),
-        highlightText: text(layer, "sans", "info", "active", {
+        background: background(layer, "base", "inverted"),
+        text: text(layer, "sans", "base", "inverted"),
+        highlightText: text(layer, "sans", "accent", "inverted", {
           weight: "bold",
         }),
       },
diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts
index 65bd2025d5916f4987fd3c1ff47f06c86008df0f..7af530b2731f0d1df51f92c99cb9ff311cf8341c 100644
--- a/styles/src/styleTree/statusBar.ts
+++ b/styles/src/styleTree/statusBar.ts
@@ -111,7 +111,7 @@ export default function statusBar(colorScheme: ColorScheme) {
         padding: 2,
         margin: { bottom: -1, right: -1 },
         border: border(layer),
-        background: background(layer, "info"),
+        background: background(layer, "accent"),
       },
     },
   };
diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts
index 1bde8ad83e3917a1b74d1702d41265b40f5d524f..01ea3b3dd7196b3b14e361b3ff6ffb35f5074b7b 100644
--- a/styles/src/styleTree/tabBar.ts
+++ b/styles/src/styleTree/tabBar.ts
@@ -31,7 +31,7 @@ export default function tabBar(colorScheme: ColorScheme) {
 
     // Indicators
     iconConflict: foreground(layer, "warning"),
-    iconDirty: foreground(layer, "info"),
+    iconDirty: foreground(layer, "accent"),
 
     // When two tabs of the same name are open, a label appears next to them
     description: {
diff --git a/styles/src/themes/common/colorScheme.ts b/styles/src/themes/common/colorScheme.ts
index 0265e6a3d0944e61e33f1e759f9d418583ec1bec..c0118a67c3bef6256d5a111090b4aa799ad9f335 100644
--- a/styles/src/themes/common/colorScheme.ts
+++ b/styles/src/themes/common/colorScheme.ts
@@ -49,7 +49,7 @@ export interface Layer {
   base: StyleSet;
   variant: StyleSet;
   on: StyleSet;
-  info: StyleSet;
+  accent: StyleSet;
   positive: StyleSet;
   warning: StyleSet;
   negative: StyleSet;
@@ -74,6 +74,7 @@ export interface StyleSet {
   disabled: Style;
   hovered: Style;
   pressed: Style;
+  inverted: Style;
 }
 
 export interface Style {
diff --git a/styles/src/themes/common/ramps.ts b/styles/src/themes/common/ramps.ts
index cffd6f7af4e657c362bb585e5d23816d08014582..5d6f6ad3d3f7666d060b3f82ca53543d0d8df5cf 100644
--- a/styles/src/themes/common/ramps.ts
+++ b/styles/src/themes/common/ramps.ts
@@ -12,9 +12,8 @@ import {
 } from "./colorScheme";
 
 export function colorRamp(color: Color): Scale {
-  let hue = color.hsl()[0];
-  let endColor = chroma.hsl(hue, 0.88, 0.96);
-  let startColor = chroma.hsl(hue, 0.68, 0.12);
+  let endColor = color.desaturate(1).brighten(5);
+  let startColor = color.desaturate(1).darken(5);
   return chroma.scale([startColor, color, endColor]).mode("hsl");
 }
 
@@ -58,9 +57,9 @@ export function createColorScheme(
     magenta: baseRamps.magenta,
   };
 
-  let lowest = elevation(resampleSet(baseSet, evenSamples(0, 1)), isLight);
+  let lowest = elevation(resampleSet(baseSet, evenSamples(0, 1)));
 
-  let middle = elevation(resampleSet(baseSet, evenSamples(0.08, 1)), isLight, {
+  let middle = elevation(resampleSet(baseSet, evenSamples(0.08, 1)), {
     blur: 4,
     color: baseSet
       .neutral(isLight ? 7 : 0)
@@ -71,7 +70,7 @@ export function createColorScheme(
   });
   lowest.above = middle;
 
-  let highest = elevation(resampleSet(baseSet, evenSamples(0.16, 1)), isLight, {
+  let highest = elevation(resampleSet(baseSet, evenSamples(0.16, 1)), {
     blur: 16,
     color: baseSet
       .neutral(isLight ? 7 : 0)
@@ -139,35 +138,63 @@ function resample(scale: Scale, samples: number[]): Scale {
 
 function elevation(
   ramps: RampSet,
-  isLight: boolean,
   shadow?: Shadow
 ): Elevation {
   return {
     ramps,
 
-    bottom: bottomLayer(ramps, isLight),
-    middle: middleLayer(ramps, isLight),
-    top: topLayer(ramps, isLight),
+    bottom: bottomLayer(ramps),
+    middle: middleLayer(ramps),
+    top: topLayer(ramps),
 
     shadow,
   };
 }
 
-interface StyleColors {
-  default: number | Color;
-  hovered: number | Color;
-  pressed: number | Color;
-  active: number | Color;
-  disabled: number | Color;
+function bottomLayer(ramps: RampSet): Layer {
+  return {
+    base: buildStyleSet(ramps.neutral, 0.2, 1),
+    variant: buildStyleSet(ramps.neutral, 0.2, 0.7),
+    on: buildStyleSet(ramps.neutral, 0.1, 1),
+    accent: buildStyleSet(ramps.blue, 0.1, 0.5),
+    positive: buildStyleSet(ramps.green, 0.1, 0.5),
+    warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
+    negative: buildStyleSet(ramps.red, 0.1, 0.5),
+  };
+}
+
+function middleLayer(ramps: RampSet): Layer {
+  return {
+    base: buildStyleSet(ramps.neutral, 0.1, 1),
+    variant: buildStyleSet(ramps.neutral, 0.1, 0.7),
+    on: buildStyleSet(ramps.neutral, 0, 1),
+    accent: buildStyleSet(ramps.blue, 0.1, 0.5),
+    positive: buildStyleSet(ramps.green, 0.1, 0.5),
+    warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
+    negative: buildStyleSet(ramps.red, 0.1, 0.5),
+  };
+}
+
+function topLayer(ramps: RampSet): Layer {
+  return {
+    base: buildStyleSet(ramps.neutral, 0, 1),
+    variant: buildStyleSet(ramps.neutral, 0, 0.7),
+    on: buildStyleSet(ramps.neutral, 0.1, 1),
+    accent: buildStyleSet(ramps.blue, 0.1, 0.5),
+    positive: buildStyleSet(ramps.green, 0.1, 0.5),
+    warning: buildStyleSet(ramps.yellow, 0.1, 0.5),
+    negative: buildStyleSet(ramps.red, 0.1, 0.5),
+  };
 }
+
 function buildStyleSet(
   ramp: Scale,
-  styleDefinitions: {
-    background: StyleColors;
-    border: StyleColors;
-    foreground: StyleColors;
-  }
+  backgroundBase: number,
+  foregroundBase: number,
+  step: number = 0.08,
 ): StyleSet {
+  let styleDefinitions = buildStyleDefinition(backgroundBase, foregroundBase, step);
+
   function colorString(indexOrColor: number | Color): string {
     if (typeof indexOrColor === "number") {
       return ramp(indexOrColor).hex();
@@ -190,10 +217,11 @@ function buildStyleSet(
     pressed: buildStyle("pressed"),
     active: buildStyle("active"),
     disabled: buildStyle("disabled"),
+    inverted: buildStyle("inverted"),
   };
 }
 
-function buildLayer(bgBase: number, fgBase: number, step: number) {
+function buildStyleDefinition(bgBase: number, fgBase: number, step: number = 0.08) {
   return {
     background: {
       default: bgBase,
@@ -201,6 +229,7 @@ function buildLayer(bgBase: number, fgBase: number, step: number) {
       pressed: bgBase + step * 1.5,
       active: bgBase + step * 3,
       disabled: bgBase,
+      inverted: fgBase + step * 6,
     },
     border: {
       default: bgBase + step * 1,
@@ -208,49 +237,15 @@ function buildLayer(bgBase: number, fgBase: number, step: number) {
       pressed: bgBase + step,
       active: bgBase + step * 3,
       disabled: bgBase + step * 0.5,
+      inverted: bgBase - step * 3,
     },
     foreground: {
       default: fgBase,
       hovered: fgBase,
       pressed: fgBase,
-      active: fgBase,
+      active: fgBase + step * 6,
       disabled: bgBase + step * 4,
+      inverted: bgBase + step * 2,
     },
   };
-}
-
-function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
-  return {
-    base: buildStyleSet(ramps.neutral, buildLayer(0.2, 1, 0.08)),
-    variant: buildStyleSet(ramps.neutral, buildLayer(0.2, 0.7, 0.08)),
-    on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(0.1, 0.5, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(0.1, 0.5, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 0.5, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(0.1, 0.5, 0.08)),
-  };
-}
-
-function middleLayer(ramps: RampSet, isLight: boolean): Layer {
-  return {
-    base: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
-    variant: buildStyleSet(ramps.neutral, buildLayer(0.1, 0.7, 0.08)),
-    on: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(0.1, 0.5, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(0.1, 0.5, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 0.5, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(0.1, 0.5, 0.08)),
-  };
-}
-
-function topLayer(ramps: RampSet, isLight: boolean): Layer {
-  return {
-    base: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
-    variant: buildStyleSet(ramps.neutral, buildLayer(0, 0.7, 0.08)),
-    on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(0.1, 0.5, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(0.1, 0.5, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 0.5, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(0.1, 0.5, 0.08)),
-  };
-}
+}
\ No newline at end of file