diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_0_desktop.png
new file mode 100644
index 0000000000..3883e5fe98
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_0_desktop.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2d93e69a178a10826eb3c99457a09d80b1932374fc2ca8588c5b824174676223
+size 60632
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_1_tablet.png
new file mode 100644
index 0000000000..70cffd7b1e
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_1_tablet.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a8fc9e9996c6ac55473f71e00e3d4b93bd8c1ec62ae71fa014ec92980f95ee3a
+size 47648
diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_2_mobile.png
new file mode 100644
index 0000000000..4b1e1f5748
--- /dev/null
+++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-navy-blue_0_document_2_mobile.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d145151cf6efea869e30573593400b453619d9b8f2d3657fe4b2cd688a98160e
+size 44965
diff --git a/src/components/hero/_hero.scss b/src/components/hero/_hero.scss
index 1d2adfe2e2..cb5694d852 100644
--- a/src/components/hero/_hero.scss
+++ b/src/components/hero/_hero.scss
@@ -10,6 +10,24 @@
         background-color: var(--ons-color-hero-bg-dark);
     }
 
+    &--navy-blue {
+        background-color: var(--ons-color-navy-blue);
+        &::before {
+            content: '';
+            background-color: var(--ons-color-navy-blue-light);
+            border-radius: 0 0 50% 50%;
+            inset: 0;
+            left: -40%;
+            position: absolute;
+            width: 150%;
+            @include mq(l) {
+                border-radius: 0 0 300% 150%;
+                left: 0;
+                width: 100%;
+            }
+        }
+    }
+
     &__container {
         align-items: center;
         display: flex;
@@ -25,8 +43,8 @@
         height: 100%;
     }
 
-    &__text {
-        padding-bottom: 1rem;
+    &__text:has(+ .ons-btn) {
+        margin-bottom: 2rem;
     }
 
     &__pre-title {
@@ -62,4 +80,223 @@
             }
         }
     }
+    &--navy-blue & {
+        &__details {
+            color: var(--ons-color-text-inverse);
+            padding: 2rem 0 6rem;
+            @include mq(l) {
+                padding: 4rem 0;
+            }
+        }
+
+        &__circle-1 {
+            @include mq(l) {
+                background-color: var(--ons-color-spring-green);
+                border-radius: 50%;
+                height: 59px;
+                position: absolute;
+                right: 289px;
+                top: -11px;
+                width: 59px;
+            }
+        }
+
+        &__circle-2 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                position: absolute;
+                height: 30px;
+                right: 193px;
+                top: 11px;
+                width: 30px;
+            }
+        }
+
+        &__circle-3 {
+            @include mq(l) {
+                height: 60px;
+                right: 112px;
+                top: 25px;
+                width: 60px;
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                position: absolute;
+            }
+        }
+
+        &__circle-4 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                height: 60px;
+                position: absolute;
+                right: 208px;
+                top: 80px;
+                width: 60px;
+            }
+
+            &::before {
+                @include mq(l) {
+                    background-color: var(--ons-color-ocean-blue);
+                    border-radius: 50%;
+                    content: '';
+                    height: 100%;
+                    left: 0;
+                    opacity: 0.4;
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                }
+            }
+        }
+
+        &__circle-5 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                height: 14px;
+                position: absolute;
+                right: 222px;
+                top: 187px;
+                width: 14px;
+            }
+
+            &::before {
+                @include mq(l) {
+                    background-color: var(--ons-color-sky-blue);
+                    border-radius: 50%;
+                    content: '';
+                    height: 100%;
+                    left: 0;
+                    opacity: 0.7;
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                }
+            }
+        }
+
+        &__circle-6 {
+            @include mq(l) {
+                background-color: var(--ons-color-spring-green);
+                border-radius: 50%;
+                height: 15px;
+                position: absolute;
+                right: 135px;
+                top: 188px;
+                width: 15px;
+            }
+        }
+
+        &__circle-7 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                height: 60px;
+                position: absolute;
+                right: 24px;
+                bottom: 92px;
+                width: 60px;
+            }
+
+            &::before {
+                @include mq(l) {
+                    background-color: var(--ons-color-night-blue);
+                    border-radius: 50%;
+                    content: '';
+                    height: 100%;
+                    left: 0;
+                    opacity: 0.7;
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                }
+            }
+        }
+
+        &__circle-8 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                bottom: 70px;
+                height: 15px;
+                position: absolute;
+                right: 275px;
+                width: 15px;
+            }
+        }
+
+        &__circle-9 {
+            background-color: var(--ons-color-spring-green);
+            border-radius: 50%;
+            bottom: 28px;
+            position: absolute;
+            right: 15px;
+            width: 40px;
+            height: 40px;
+            @include mq(l) {
+                bottom: 40px;
+                height: 30px;
+                position: absolute;
+                right: 215px;
+                width: 30px;
+            }
+        }
+
+        &__circle-10 {
+            @include mq(l) {
+                background-color: var(--ons-color-white);
+                border-radius: 50%;
+                bottom: 63px;
+                height: 15px;
+                position: absolute;
+                right: 120px;
+                width: 15px;
+            }
+
+            &::before {
+                @include mq(l) {
+                    background-color: var(--ons-color-aqua-teal);
+                    border-radius: 50%;
+                    content: '';
+                    height: 100%;
+                    left: 0;
+                    opacity: 0.4;
+                    position: absolute;
+                    top: 0;
+                    width: 100%;
+                }
+            }
+        }
+
+        &__circle-11 {
+            background-color: var(--ons-color-sky-blue);
+            border-radius: 50%;
+            height: 14px;
+            width: 14px;
+            position: absolute;
+            bottom: -7px;
+            right: 50px;
+            @include mq(l) {
+                bottom: 33px;
+                height: 30px;
+                position: absolute;
+                right: 75px;
+                width: 30px;
+            }
+        }
+
+        &__circle-12 {
+            @include mq(l) {
+                background-color: var(--ons-color-night-blue);
+                border-radius: 50%;
+                bottom: -35px;
+                height: 59px;
+                position: absolute;
+                right: 125px;
+                width: 59px;
+            }
+        }
+    }
 }
diff --git a/src/components/hero/_macro-options.md b/src/components/hero/_macro-options.md
index e721a9c007..002ceb3008 100644
--- a/src/components/hero/_macro-options.md
+++ b/src/components/hero/_macro-options.md
@@ -1,13 +1,13 @@
-| Name           | Type             | Required | Description                                                                                             |
-| -------------- | ---------------- | -------- | ------------------------------------------------------------------------------------------------------- |
-| variants       | array or string  | false    | An array of values or single value (string) to adjust the component using available variant, “dark”     |
-| wide           | boolean          | false    | Set to “true” when using the `wide` page layout container                                               |
-| title          | string           | true     | Text for the hero title                                                                                 |
-| subtitle       | string           | false    | Text for the hero subtitle                                                                              |
-| text           | string           | false    | Text to follow the hero title and subtitle                                                              |
-| button         | `Object<Button>` | false    | Settings for the hero [call to action button](#button)                                                  |
-| html           | string           | false    | Allows arbitrary HTML for additional content to be added to the component                               |
-| detailsColumns | integer          | false    | Number of grid columns for the hero to span on screens larger than the medium breakpoint, defaults to 8 |
+| Name           | Type             | Required | Description                                                                                                          |
+| -------------- | ---------------- | -------- | -------------------------------------------------------------------------------------------------------------------- |
+| variants       | array or string  | false    | An array of values or single value (string) to adjust the component using available variants, “dark” and "navy-blue" |
+| wide           | boolean          | false    | Set to “true” when using the `wide` page layout container                                                            |
+| title          | string           | true     | Text for the hero title                                                                                              |
+| subtitle       | string           | false    | Text for the hero subtitle                                                                                           |
+| text           | string           | false    | Text to follow the hero title and subtitle                                                                           |
+| button         | `Object<Button>` | false    | Settings for the hero [call to action button](#button)                                                               |
+| html           | string           | false    | Allows arbitrary HTML for additional content to be added to the component                                            |
+| detailsColumns | integer          | false    | Number of grid columns for the hero to span on screens larger than the medium breakpoint, defaults to 8              |
 
 ## Button
 
diff --git a/src/components/hero/_macro.njk b/src/components/hero/_macro.njk
index 5412852da9..fd0f2668de 100644
--- a/src/components/hero/_macro.njk
+++ b/src/components/hero/_macro.njk
@@ -6,6 +6,13 @@
     <section
         class="ons-hero ons-grid--gutterless{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-hero--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-hero--{{ params.variants }}{% endif %}"
     >
+        {% if params.variants == 'navy-blue' %}
+            <div class="ons-hero__circles" aria-hidden="true">
+                {% for i in range(1, 13) %}
+                    <div class="ons-hero__circle-{{ i }}"></div>
+                {% endfor %}
+            </div>
+        {% endif %}
         <div class="ons-hero__container ons-container{{ ' ons-container--wide' if params.wide }}">
             <div class="ons-hero__details ons-grid__col ons-col-{{ detailsColumns }}@m ons-col-10@s@m">
                 <header>
diff --git a/src/components/hero/_macro.spec.js b/src/components/hero/_macro.spec.js
index 9c9ad42be3..513648ae0a 100644
--- a/src/components/hero/_macro.spec.js
+++ b/src/components/hero/_macro.spec.js
@@ -87,4 +87,9 @@ describe('macro: hero', () => {
         const content = $('.ons-hero__additional-content').text().trim();
         expect(content).toEqual(expect.stringContaining('Example content...'));
     });
+
+    it('renders circles when variant is `navy blue`', () => {
+        const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'navy-blue' }));
+        expect($('.ons-hero--navy-blue .ons-hero__circles').length).toBe(1);
+    });
 });
diff --git a/src/components/hero/example-hero-navy-blue.njk b/src/components/hero/example-hero-navy-blue.njk
new file mode 100644
index 0000000000..8f5e92ef97
--- /dev/null
+++ b/src/components/hero/example-hero-navy-blue.njk
@@ -0,0 +1,14 @@
+---
+'fullWidth': true
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{{
+    onsHero({
+        "title": 'Welcome to the ONS Beta',
+        "text": 'Thank you for participating in our beta test. This limited preview of the ONS website focuses on our
+                new design and navigation for the retail insutry section. Please be aware that greyed-out links indicate sections still under development.
+                The active links will take you through the journey to test the new design features.',
+        "variants": 'navy-blue'
+    })
+}}
diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
index 235c28c552..f06114dd2d 100644
--- a/src/components/tabs/_tabs.scss
+++ b/src/components/tabs/_tabs.scss
@@ -46,7 +46,7 @@
     height: 2.5rem;
     margin: 0 0.5rem 0 0;
     overflow: visible;
-    padding: 0.25rem 1rem 0.25rem;
+    padding: 0.25rem 1rem;
     position: relative;
     text-decoration: underline;
 
diff --git a/src/scss/vars/_colors.scss b/src/scss/vars/_colors.scss
index 88b0e954af..3f3e4f3f44 100644
--- a/src/scss/vars/_colors.scss
+++ b/src/scss/vars/_colors.scss
@@ -20,6 +20,7 @@
     --ons-color-ocean-blue: #206095;
     --ons-color-sky-blue: #27a0cc;
     --ons-color-aqua-teal: #00a3a6;
+    --ons-color-navy-blue: #194766;
 
     // Supporting palette
     --ons-color-leaf-green: #0f8243;
@@ -41,6 +42,7 @@
     --ons-color-jaffa-orange-tint: #fff0e6;
     --ons-color-jaffa-orange-vibrant: #ff7b24;
     --ons-color-sun-yellow-dark: #e2b500;
+    --ons-color-navy-blue-light: #153b55;
 
     // Theme branding
     --ons-color-branded: var(--ons-color-ocean-blue);