diff --git a/app/src/main/java/com/duckduckgo/app/browser/omnibar/experiments/SingleOmnibarLayout.kt b/app/src/main/java/com/duckduckgo/app/browser/omnibar/experiments/SingleOmnibarLayout.kt
index 8ad3e8a2998f..3a7316fe0565 100644
--- a/app/src/main/java/com/duckduckgo/app/browser/omnibar/experiments/SingleOmnibarLayout.kt
+++ b/app/src/main/java/com/duckduckgo/app/browser/omnibar/experiments/SingleOmnibarLayout.kt
@@ -18,6 +18,7 @@ package com.duckduckgo.app.browser.omnibar.experiments
 
 import android.animation.ValueAnimator
 import android.content.Context
+import android.graphics.Color
 import android.os.Build
 import android.util.AttributeSet
 import android.view.View
@@ -47,6 +48,7 @@ import com.duckduckgo.di.scopes.FragmentScope
 import com.duckduckgo.mobile.android.R as CommonR
 import com.duckduckgo.navigation.api.GlobalActivityStarter
 import com.google.android.material.card.MaterialCardView
+import com.google.android.material.color.MaterialColors.*
 import dagger.android.support.AndroidSupportInjection
 import javax.inject.Inject
 
@@ -60,7 +62,6 @@ class SingleOmnibarLayout @JvmOverloads constructor(
     lateinit var globalActivityStarter: GlobalActivityStarter
 
     private val aiChatDivider: View by lazy { findViewById(R.id.verticalDivider) }
-    private val omnibarCard: MaterialCardView by lazy { findViewById(R.id.omniBarContainer) }
     private val omnibarCardShadow: MaterialCardView by lazy { findViewById(R.id.omniBarContainerShadow) }
     private val iconsContainer: View by lazy { findViewById(R.id.iconsContainer) }
     private val shieldIconPulseAnimationContainer: View by lazy { findViewById(R.id.shieldIconPulseAnimationContainer) }
@@ -200,28 +201,27 @@ class SingleOmnibarLayout @JvmOverloads constructor(
     }
 
     private fun animateOmnibarFocusedState(focused: Boolean) {
-        focusAnimator?.cancel()
-
-        val startCardStrokeWidth = omnibarCard.strokeWidth
-        val endCardStrokeWidth: Int = if (focused) {
-            omnibarOutlineFocusedWidth
-        } else {
-            omnibarOutlineWidth
-        }
+        if (Build.VERSION.SDK_INT >= 28) {
+            focusAnimator?.cancel()
 
-        val animator = ValueAnimator.ofFloat(0f, 1f)
-        animator.duration = DEFAULT_ANIMATION_DURATION
-        animator.interpolator = DecelerateInterpolator()
-        animator.addUpdateListener { valueAnimator ->
-            val fraction = valueAnimator.animatedValue as Float
+            val startColor = omnibarCardShadow.outlineSpotShadowColor
+            val endColor: Int = if (focused) {
+                getColor(context, com.duckduckgo.mobile.android.R.attr.daxColorShade, Color.BLACK)
+            } else {
+                ContextCompat.getColor(context, android.R.color.transparent)
+            }
 
-            val animatedCardStrokeWidth = (startCardStrokeWidth + (endCardStrokeWidth - startCardStrokeWidth) * fraction).toInt()
+            val animator = ValueAnimator.ofArgb(startColor, endColor)
+            animator.duration = DEFAULT_ANIMATION_DURATION
+            animator.interpolator = DecelerateInterpolator()
+            animator.addUpdateListener { colorAnimator ->
+                val shadowColor = colorAnimator.animatedValue as Int
+                omnibarCardShadow.outlineSpotShadowColor = shadowColor
+            }
 
-            omnibarCard.strokeWidth = animatedCardStrokeWidth
+            animator.start()
+            focusAnimator = animator
         }
-
-        animator.start()
-        focusAnimator = animator
     }
 
     private fun onFindInPageShown() {
diff --git a/app/src/main/res/layout/view_single_omnibar.xml b/app/src/main/res/layout/view_single_omnibar.xml
index 1343805ed583..97d251724b3c 100644
--- a/app/src/main/res/layout/view_single_omnibar.xml
+++ b/app/src/main/res/layout/view_single_omnibar.xml
@@ -66,7 +66,6 @@
                         android:layout_width="match_parent"
                         android:layout_height="match_parent"
                         app:cardElevation="0dp"
-                        app:strokeColor="?daxColorAccentBlue"
                         app:strokeWidth="@dimen/experimentalOmnibarOutlineWidth">
 
                         <androidx.constraintlayout.widget.ConstraintLayout
diff --git a/common/common-ui/src/main/java/com/duckduckgo/common/ui/view/ViewExtension.kt b/common/common-ui/src/main/java/com/duckduckgo/common/ui/view/ViewExtension.kt
index 576a6a547968..9a5a8dab5eed 100644
--- a/common/common-ui/src/main/java/com/duckduckgo/common/ui/view/ViewExtension.kt
+++ b/common/common-ui/src/main/java/com/duckduckgo/common/ui/view/ViewExtension.kt
@@ -300,4 +300,5 @@ fun View.addBottomShadow(
 
     clipToOutline = false
     elevation = shadowSize
+    setAllParentsClip(false)
 }
diff --git a/common/common-ui/src/main/res/values/design-experiments-colors.xml b/common/common-ui/src/main/res/values/design-experiments-colors.xml
index 9a1da601e848..d893ff970f8c 100644
--- a/common/common-ui/src/main/res/values/design-experiments-colors.xml
+++ b/common/common-ui/src/main/res/values/design-experiments-colors.xml
@@ -22,9 +22,10 @@
 
     <!-- Dark Palette -->
     <!-- Backgrounds -->
-    <color name="background_background_dark">#27282A</color>
-    <color name="background_surface_dark">#333538</color>
-    <color name="background_window_dark">#404145</color>
+    <color name="background_background_dark">#282828</color>
+    <color name="background_surface_dark">#373737</color>
+    <color name="background_window_dark">#474747</color>
+    <color name="background_canvas_dark">#1F1F1F</color>
     <color name="background_container_dark">#404145</color>
 
     <!-- Text -->
@@ -37,9 +38,12 @@
     <color name="icon_secondary_dark">#7AFFFFFF</color>
     <color name="icon_tertiary_dark">#3DFFFFFF</color>
 
-    <!-- Lines-->
+    <!-- Lines -->
     <color name="lines_dark">#1FF9F9F9</color>
 
+    <!-- Tone -->
+    <color name="shade_dark">#52171718</color>
+
     <!-- Controls -->
     <color name="controls_fill_primary_dark">#1FF9F9F9</color>
     <color name="controls_fill_secondary_dark">#2EF9F9F9</color>
@@ -51,6 +55,7 @@
     <color name="background_background_light">#F2F2F2</color>
     <color name="background_surface_light">#F9F9F9</color>
     <color name="background_window_light">#FFFFFF</color>
+    <color name="background_canvas_light">#FFFFFF</color>
     <color name="background_container_light">#FFFFFF</color>
 
     <!-- Text -->
@@ -63,9 +68,12 @@
     <color name="icon_secondary_light">#991F1F1F</color>
     <color name="icon_tertiary_light">#661F1F1F</color>
 
-    <!-- Lines-->
+    <!-- Lines -->
     <color name="lines_light">#171F1F1F</color>
 
+    <!-- Tone -->
+    <color name="shade_light">#8E1F1F1F</color>
+
     <!-- Controls -->
     <color name="controls_fill_primary_light">#171F1F1F</color>
     <color name="controls_fill_secondary_light">#1F1F1F1F</color>
diff --git a/common/common-ui/src/main/res/values/design-experiments-theming.xml b/common/common-ui/src/main/res/values/design-experiments-theming.xml
index 694d1e0a58e0..543878bbbc56 100644
--- a/common/common-ui/src/main/res/values/design-experiments-theming.xml
+++ b/common/common-ui/src/main/res/values/design-experiments-theming.xml
@@ -23,6 +23,7 @@
         <item name="daxColorBackground">@color/background_background_dark</item>
         <item name="daxColorSurface">@color/background_surface_dark</item>
         <item name="daxColorWindow">@color/background_window_dark</item>
+        <item name="daxColorCanvas">@color/background_canvas_dark</item>
 
         <!-- Text -->
         <item name="daxColorPrimaryText">@color/text_primary_dark</item>
@@ -33,9 +34,12 @@
         <item name="daxColorSecondaryIcon">@color/icon_secondary_dark</item>
         <item name="daxColorIconDisabled">@color/icon_tertiary_dark</item>
 
-        <!-- Lines-->
+        <!-- Lines -->
         <item name="daxColorLines">@color/lines_dark</item>
 
+        <!-- Tone -->
+        <item name="daxColorShade">@color/shade_dark</item>
+
         <!-- Controls -->
         <item name="daxColorControlFillPrimary">@color/controls_fill_primary_dark</item>
         <item name="daxColorControlFillSecondary">@color/controls_fill_secondary_dark</item>
@@ -66,6 +70,7 @@
         <item name="daxColorBackground">@color/background_background_light</item>
         <item name="daxColorSurface">@color/background_surface_light</item>
         <item name="daxColorWindow">@color/background_window_light</item>
+        <item name="daxColorCanvas">@color/background_canvas_light</item>
 
         <!-- Text -->
         <item name="daxColorPrimaryText">@color/text_primary_light</item>
@@ -79,6 +84,9 @@
         <!-- Lines-->
         <item name="daxColorLines">@color/lines_light</item>
 
+        <!-- Tone -->
+        <item name="daxColorShade">@color/shade_light</item>
+
         <!-- Controls -->
         <item name="daxColorControlFillPrimary">@color/controls_fill_primary_light</item>
         <item name="daxColorControlFillSecondary">@color/controls_fill_secondary_light</item>
diff --git a/common/common-ui/src/main/res/values/design-system-colors.xml b/common/common-ui/src/main/res/values/design-system-colors.xml
index 3c6e025e93a6..8849deaadf15 100644
--- a/common/common-ui/src/main/res/values/design-system-colors.xml
+++ b/common/common-ui/src/main/res/values/design-system-colors.xml
@@ -48,6 +48,7 @@
     <attr name="daxColorSurface" format="color"/>
     <attr name="daxColorContainer" format="color"/>
     <attr name="daxColorWindow" format="color"/>
+    <attr name="daxColorCanvas" format="color"/>
     <attr name="daxColorPrimaryText" format="color"/>
     <attr name="daxColorPrimaryInvertedText" format="color"/>
     <attr name="daxColorSecondaryText" format="color"/>
@@ -58,6 +59,7 @@
     <attr name="daxColorIconDisabled" format="color"/>
     <attr name="daxColorDestructive" format="color"/>
     <attr name="daxColorLines" format="color"/>
+    <attr name="daxColorShade" format="color"/>
     <attr name="daxColorAccentBlue" format="color"/>
     <attr name="daxColorAccentYellow" format="color"/>
     <attr name="daxColorContainerDisabled" format="color"/>