--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -32,82 +32,71 @@
   background: url(images/geometry-editor.svg) no-repeat center center / 16px 16px;
 }
 
 /* Main: contains the box-model regions */
 
 #layout-main {
   position: relative;
   box-sizing: border-box;
-  /* The regions are semi-transparent, so the white background is partly
-     visible */
-  background-color: white;
-  color: var(--theme-selection-color);
+  color: #1A1C22;
   /* Make sure there is some space between the window's edges and the regions */
   margin: 0 14px 4px 14px;
   width: calc(100% - 2 * 14px);
 }
 
-.layout-margin,
-.layout-size {
-  color: var(--theme-highlight-blue);
-}
-
 /* Regions are 3 nested elements with wide borders and outlines */
 
-#layout-content {
-  height: 18px;
-}
-
 #layout-margins,
 #layout-borders,
 #layout-padding {
-  border-color: hsla(210,100%,85%,0.2);
-  border-width: 18px;
   border-style: solid;
-  outline: dotted 1px hsl(210,100%,85%);
-}
-
-#layout-margins {
-  /* This opacity applies to all of the regions, since they are nested */
-  opacity: .8;
+  border-width: 2px;
+  border-radius: 2px;
+  padding: 16px;
 }
 
 /* Regions colors */
 
 #layout-margins {
-  border-color: #edff64;
+  background-color: #9ebce1;
+  border-color: #2f5b8e;
 }
 
 #layout-borders {
-  border-color: #444444;
+  background-color: #b3c8e2;
+  border-color: #3b72b3;
 }
 
 #layout-padding {
-  border-color: #6a5acd;
+  background-color: #7fe3cc;
+  border-color: #00c79a;
 }
 
 #layout-content {
-  background-color: #87ceeb;
+  background-color: #f0f7ff;
+  border: 2px solid #eaf4ff;
+  height: 18px;
 }
 
 .theme-firebug #layout-main,
 .theme-firebug #layout-borders,
 .theme-firebug #layout-content {
   border-style: solid;
 }
 
 .theme-firebug #layout-main,
 .theme-firebug #layout-header {
   font-family: var(--proportional-font-family);
 }
 
 .theme-firebug #layout-main {
   color: var(--theme-body-color);
   font-size: var(--theme-toolbar-font-size);
+  background-color: var(--theme-body-color);
 }
 
 .theme-firebug #layout-header {
   font-size: var(--theme-toolbar-font-size);
 }
 
 /* Editable region sizes are contained in absolutely positioned <p> */
 
@@ -123,112 +112,111 @@
   vertical-align: middle;
   pointer-events: auto;
 }
 
 /* Coordinates for the region sizes */
 
 .layout-top,
 .layout-bottom {
-  width: calc(100% - 2px);
+  width: 100%;
   text-align: center;
 }
 
 .layout-padding.layout-top {
-  top: 37px;
+  top: 38px;
 }
 
 .layout-padding.layout-bottom {
-  bottom: 38px;
+  bottom: 39px;
 }
 
 .layout-border.layout-top {
-  top: 19px;
+  top: 20px;
 }
 
 .layout-border.layout-bottom {
-  bottom: 20px;
+  bottom: 21px;
 }
 
 .layout-margin.layout-top {
-  top: 1px;
+  top: 2px;
 }
 
 .layout-margin.layout-bottom {
-  bottom: 2px;
+  bottom: 3px;
 }
 
 .layout-size,
 .layout-margin.layout-left,
 .layout-margin.layout-right,
 .layout-border.layout-left,
 .layout-border.layout-right,
 .layout-padding.layout-left,
 .layout-padding.layout-right {
-  top: 22px;
+  top: 23px;
   line-height: 80px;
 }
 
 .layout-size {
-  width: calc(100% - 2px);
+  width: 100%;
 }
 
 .layout-margin.layout-right,
 .layout-margin.layout-left,
 .layout-border.layout-left,
 .layout-border.layout-right,
 .layout-padding.layout-right,
 .layout-padding.layout-left {
-  width: 21px;
+  width: 20px;
 }
 
 .layout-padding.layout-left {
-  left: 35px;
+  left: 36px;
 }
 
 .layout-padding.layout-right {
-  right: 35px;
+  right: 36px;
 }
 
 .layout-border.layout-left {
-  left: 16px;
+  left: 18px;
 }
 
 .layout-border.layout-right {
-  right: 17px;
+  right: 18px;
 }
 
 .layout-margin.layout-right {
   right: 0;
 }
 
 .layout-margin.layout-left {
   left: 0;
 }
 
 .layout-rotate.layout-left:not(.layout-editing) {
   transform: rotate(-90deg);
+  left: -2px;
 }
 
 .layout-rotate.layout-right:not(.layout-editing) {
   transform: rotate(90deg);
+  right: -2px;
 }
 
 /* Legend: displayed inside regions */
 
 .layout-legend {
+  color: #1A1C22;
   position: absolute;
-  margin: 2px 6px;
+  margin: 3px 6px;
   z-index: 1;
 }
 
-.layout-legend[data-box="margin"] {
-  color: var(--theme-highlight-blue);
-}
-
 /* Editable fields */
 
 .layout-editable {
   border: 1px dashed transparent;
   -moz-user-select: text;
 }
 
 .layout-editable:hover {

--- a/devtools/server/actors/highlighters.css
+++ b/devtools/server/actors/highlighters.css
@@ -24,17 +24,17 @@
   text-indent: initial;
   letter-spacing: initial;
   word-spacing: initial;
   color: initial;
 }
 
 :-moz-native-anonymous .highlighter-container {
   --highlighter-guide-color: #08c;
-  --highlighter-content-color: #87ceeb;
+  --highlighter-content-color: #f0f7ff;
   --highlighter-bubble-text-color: hsl(216, 33%, 97%);
   --highlighter-bubble-background-color: hsl(214, 13%, 24%);
   --highlighter-bubble-border-color: rgba(255, 255, 255, 0.2);
 }
 
 :-moz-native-anonymous .highlighter-container {
   position: fixed;
   width: 100%;
@@ -67,25 +67,25 @@
   display: none;
 }
 
 :-moz-native-anonymous .box-model-content {
   fill: var(--highlighter-content-color);
 }
 
 :-moz-native-anonymous .box-model-padding {
-  fill: #6a5acd;
+  fill: #7fe3cc;
 }
 
 :-moz-native-anonymous .box-model-border {
-  fill: #444444;
+  fill: #b3c8e2;
 }
 
 :-moz-native-anonymous .box-model-margin {
-  fill: #edff64;
+  fill: #9ebce1;
 }
 
 :-moz-native-anonymous .box-model-content,
 :-moz-native-anonymous .box-model-padding,
 :-moz-native-anonymous .box-model-border,
 :-moz-native-anonymous .box-model-margin {
   stroke: none;
 }