diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 043ddd26136070..92339fe89b4ed2 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -116,7 +116,7 @@
 			content: "";
 			position: absolute;
 			outline: $border-width solid transparent;
-			transition: outline 0.1s linear;
+			transition: outline 0.1s linear, box-shadow 0.15s linear;
 			pointer-events: none;
 
 			// Go edge-to-edge on mobile.
@@ -130,16 +130,16 @@
 	// Selected style.
 	&.is-selected > .editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
-		outline: $border-width solid $dark-opacity-light-500;
+		outline: $border-width solid $dark-opacity-200;
 
 		.is-dark-theme & {
-			outline-color: $light-opacity-light-500;
+			outline-color: $light-opacity-300;
 		}
 	}
 
 	// Hover style.
 	&.is-hovered > .editor-block-list__block-edit::before {
-		outline: $border-width solid theme(outlines);
+		box-shadow: -$border-width 0 0 0 $dark-gray-300;
 	}
 
 	// Spotlight mode.
@@ -213,7 +213,7 @@
 		}
 	}
 
-	&.has-warning:not(.is-hovered) .editor-block-list__block-edit::before {
+	&.has-warning:not(.is-hovered):not(.is-selected) .editor-block-list__block-edit::before {
 		// Use opacity to work in various editor styles.
 		outline-color: $dark-opacity-light-500;
 
@@ -222,6 +222,10 @@
 		}
 	}
 
+	&.has-warning.is-hovered .editor-block-list__block-edit::before {
+		outline: $border-width solid $dark-opacity-light-500;
+	}
+
 	&.has-warning .editor-block-list__block-edit::after {
 		content: "";
 		position: absolute;
@@ -268,6 +272,14 @@
 		}
 	}
 
+	&.is-reusable.is-selected > .editor-block-list__block-edit::before {
+		outline-color: $dark-opacity-200;
+
+		.is-dark-theme & {
+			outline-color: $light-opacity-300;
+		}
+	}
+
 	// Alignments
 	&[data-align="left"],
 	&[data-align="right"] {
@@ -296,8 +308,14 @@
 		// Position toolbar better on mobile.
 		.editor-block-contextual-toolbar {
 			width: auto;
-			border-bottom: $border-width solid $light-gray-500;
+			border-bottom: $border-width solid $dark-opacity-200;
+			border-left: $border-width solid $dark-opacity-200;
 			bottom: auto;
+
+			> .editor-block-toolbar > *:last-child .components-toolbar {
+				box-shadow: none;
+				border-right: $border-width solid $dark-opacity-200;
+			}
 		}
 	}
 
@@ -389,9 +407,9 @@
 			float: left;
 		}
 
-		// Position hover label on the right
+		// Position hover label on the left
 		> .editor-block-list__breadcrumb {
-			right: -$border-width;
+			left: -$border-width;
 		}
 
 		// Hide mover until wide breakpoints, or it might be covered by toolbar
@@ -424,9 +442,9 @@
 
 	// Full-wide
 	&[data-align="full"] {
-		// Position hover label on the right for the top level block.
+		// Position hover label on the left for the top level block.
 		> .editor-block-list__block-edit > .editor-block-list__breadcrumb {
-			right: 0;
+			left: 0;
 		}
 
 		// Compensate for main container padding and subtract border.
@@ -595,7 +613,7 @@
 		margin-top: $block-toolbar-height;
 		margin-right: -$block-padding;
 		margin-left: -$block-padding;
-		border-top: $border-width solid $light-gray-500;
+		border-top: $border-width solid $dark-opacity-200;
 		height: $block-toolbar-height;
 
 		@include break-small() {
@@ -707,7 +725,7 @@
 
 	// Hide both the button until hovered.
 	opacity: 0;
-	transition: opacity 0.1s linear 0.1s;
+	transition: opacity 0.15s linear;
 
 	&:hover,
 	&.is-visible {
@@ -796,7 +814,7 @@
 		right: -$block-padding;
 
 		// Paint the borders on the toolbar itself on mobile.
-		border-top: $border-width solid $light-gray-500;
+		border-top: $border-width solid $dark-opacity-200;
 		.components-toolbar {
 			border-top: none;
 			border-bottom: none;
@@ -805,8 +823,8 @@
 		@include break-small() {
 			border-top: none;
 			.components-toolbar {
-				border-top: $border-width solid $light-gray-500;
-				border-bottom: $border-width solid $light-gray-500;
+				border-top: $border-width solid $dark-opacity-200;
+				border-bottom: $border-width solid $dark-opacity-200;
 			}
 		}
 	}
@@ -917,9 +935,9 @@
 	line-height: 1;
 	z-index: z-index(".editor-block-list__breadcrumb");
 
-	// Position in the top right of the border.
-	right: -$block-padding;
-	top: -$block-padding - $border-width;
+	// Position to the top left of the border.
+	left: -$block-padding - $border-width;
+	top: ($block-padding * -2) - ($border-width * 5);
 
 	.components-toolbar {
 		padding: 0;
@@ -929,7 +947,7 @@
 		font-family: $default-font;
 		font-size: 11px;
 		padding: 4px 4px;
-		background: theme(outlines);
+		background: $dark-gray-300;
 		color: $white;
 
 		// Animate in
@@ -939,11 +957,15 @@
 		}
 	}
 
-	// Position the breadcrumb closer on mobile.
-	[data-align="left"] &,
+	// Remove negative left breadcrumb position for left aligned blocks.
+	[data-align="left"] & {
+		left: 0;
+	}
+
+	// Right-align the breadcrumb for right-aligned blocks.
 	[data-align="right"] & {
+		left: auto;
 		right: 0;
-		top: 0;
 	}
 }
 
diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss
index 77b15329ad1e27..1ec40c0b47fe5c 100644
--- a/packages/block-editor/src/components/block-toolbar/style.scss
+++ b/packages/block-editor/src/components/block-toolbar/style.scss
@@ -5,13 +5,30 @@
 	overflow: auto; // Allow horizontal scrolling on mobile.
 	position: relative;
 
-	// Allow overflow on desktop.
 	@include break-small() {
+
+		// Allow overflow on desktop.
 		overflow: inherit;
-	}
 
-	// Show a left border on the parent container.
-	border-left: $border-width solid $light-gray-500;
+		// Show a left border on the parent container.
+		border-left: $border-width solid $dark-opacity-200;
+
+		// Use a lighter left border when the fixed toolbar is active.
+		.has-fixed-toolbar & {
+			border-left: $border-width solid $light-gray-500;
+		}
+
+		// Use a darker border on the right edge of the toolbar.
+		> *:last-child .components-toolbar {
+			box-shadow: none;
+			border-right: $border-width solid $dark-opacity-200;
+
+			// If fixed toolbar is active, use a light border.
+			.has-fixed-toolbar & {
+				border-right: $border-width solid $light-gray-500;
+			}
+		}
+	}
 
 	// The component is born with a border, but we only need some of them.
 	.components-toolbar {
@@ -20,6 +37,11 @@
 		border-bottom: $border-width solid $light-gray-500;
 
 		// Add a right border to show as separator in the block toolbar.
-		border-right: $border-width solid $light-gray-500;
+		box-shadow: inset (-$border-width) 0 0 0 $light-gray-500;
+
+		// Add a tiny right margin to house the inset border above.
+		> *:last-child {
+			margin-right: $border-width;
+		}
 	}
 }
diff --git a/packages/block-editor/src/components/warning/style.scss b/packages/block-editor/src/components/warning/style.scss
index ecfb3f0c99770f..158c8c5e7edfba 100644
--- a/packages/block-editor/src/components/warning/style.scss
+++ b/packages/block-editor/src/components/warning/style.scss
@@ -13,6 +13,24 @@
 		background-color: transparent;
 	}
 
+	.has-warning.is-hovered & {
+		// Use opacity to work in various editor styles.
+		border-left-color: $dark-opacity-200;
+
+		.is-dark-theme & {
+			border-left-color: $light-opacity-300;
+		}
+	}
+
+	.has-warning.is-selected & {
+		// Use opacity to work in various editor styles.
+		border-color: $dark-opacity-200;
+
+		.is-dark-theme & {
+			border-color: $light-opacity-300;
+		}
+	}
+
 	.editor-warning__message {
 		line-height: $default-line-height;
 		font-family: $default-font;
diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss
index c35abcb009dfca..ea15169bbf1469 100644
--- a/packages/editor/src/components/post-permalink/style.scss
+++ b/packages/editor/src/components/post-permalink/style.scss
@@ -9,7 +9,7 @@
 	white-space: nowrap;
 
 	// Use opacity to work in various editor styles.
-	border: $border-width solid $dark-opacity-light-500;
+	border: $border-width solid $dark-opacity-200;
 	background-clip: padding-box;
 
 	// Put toolbar snugly to edge on mobile.
diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss
index 71fc698dea2024..cd79b83791810a 100644
--- a/packages/editor/src/components/post-title/style.scss
+++ b/packages/editor/src/components/post-title/style.scss
@@ -16,7 +16,7 @@
 		font-family: $editor-font;
 		line-height: $default-line-height;
 		color: $dark-gray-900;
-		transition: border 0.1s ease-out;
+		transition: border 0.1s ease-out, box-shadow, 0.15s ease-out;
 		padding: #{ $block-padding + 5px } $block-padding;
 		word-break: keep-all;
 
@@ -50,17 +50,17 @@
 	&:not(.is-focus-mode) {
 		&.is-selected .editor-post-title__input {
 			// use opacity to work in various editor styles
-			border-color: $dark-opacity-light-500;
+			border-color: $dark-opacity-200;
 
 			.is-dark-theme & {
-				border-color: $light-opacity-light-500;
+				border-color: $light-opacity-300;
 			}
 		}
 	}
 
-	&:not(.is-focus-mode):not(.has-fixed-toolbar) {
+	&:not(.is-focus-mode):not(.has-fixed-toolbar):not(.is-selected) {
 		.editor-post-title__input:hover {
-			border-color: theme(outlines);
+			box-shadow: -$border-width 0 0 0 $dark-gray-300;
 		}
 	}