bbc · alex-magana · Jul 14, 2026
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -116,10 +116,10 @@ const preview: Preview = {
     },
     backgrounds: {
       options: {
-        dark: { name: 'Dark', value: '#141414' },
+        dark: { name: 'Dark', value: '#181818' },
         light: { name: 'Light', value: '#F7F9F2' },
         White: { name: 'White', value: '#FFFFFF' },
-        Optimo: { name: 'Optimo', value: '#F6F6F6' },
+        Optimo: { name: 'Optimo', value: '#F8F8F8' },
       },
     },
     chromatic: {

diff --git a/docs/User-Experience/colours.tsx b/docs/User-Experience/colours.tsx
@@ -14,9 +14,9 @@ export const LEGACY = [
   { colorName: 'DIM_GREY ', colorCode: '#696969' },
   { colorName: 'EBON ', colorCode: '#222222' },
   { colorName: 'GHOST ', colorCode: '#FDFDFD' },
-  { colorName: 'GREY_10 ', colorCode: '#141414' },
+  { colorName: 'GREY_10 ', colorCode: '#181818' },
   { colorName: 'GREY_11 ', colorCode: '#BABABA' },
-  { colorName: 'GREY_2 ', colorCode: '#F6F6F6' },
+  { colorName: 'GREY_2 ', colorCode: '#F8F8F8' },
   { colorName: 'GREY_3 ', colorCode: '#E6E8EA' },
   { colorName: 'GREY_4 ', colorCode: '#B0B2B4' },
   { colorName: 'GREY_5 ', colorCode: '#8A8C8E' },
@@ -77,14 +77,14 @@ export const SERVICE = [
 export const FOUNDATION = [
   { colorName: 'WHITE', colorCode: '#FFFFFF' },
   { colorName: 'GREY1', colorCode: '#FEFEFE' },
-  { colorName: 'GREY2', colorCode: '#F6F6F6' },
+  { colorName: 'GREY2', colorCode: '#F8F8F8' },
   { colorName: 'GREY3', colorCode: '#E6E8EA' },
   { colorName: 'GREY4', colorCode: '#B0B2B4' },
   { colorName: 'GREY5', colorCode: '#8A8C8E' },
   { colorName: 'GREY6', colorCode: '#545658' },
   { colorName: 'GREY7', colorCode: '#3A3C3E' },
   { colorName: 'GREY8', colorCode: '#202224' },
   { colorName: 'GREY9', colorCode: '#141618' },
-  { colorName: 'GREY10', colorCode: '#141414' },
+  { colorName: 'GREY10', colorCode: '#181818' },
   { colorName: 'BLACK', colorCode: '#000000' },
 ];
diff --git a/src/app/components/CallToActionLink/README.md b/src/app/components/CallToActionLink/README.md
@@ -103,7 +103,7 @@ calltoActionLink: ({ palette }: Theme) =>
     color: palette.BLACK,
     '&:hover, &:focus':
       {
-        backgroundColor: '#F6F6F6',
+        backgroundColor: '#F8F8F8',
         color: palette.BLACK,
       }
     }

diff --git a/src/app/components/CallToActionLink/Text/README.md b/src/app/components/CallToActionLink/Text/README.md
@@ -72,7 +72,7 @@ In `index.styles.ts`:
       color: palette.BLACK,
       '&:hover, &:focus':
       {
-        backgroundColor: '#F6F6F6',
+        backgroundColor: '#F8F8F8',
         color: palette.BLACK,
       },
       '& span':

diff --git a/src/app/components/Embeds/Uploader/index.stories.tsx b/src/app/components/Embeds/Uploader/index.stories.tsx
@@ -12,7 +12,7 @@ interface ComponentProps {
 const Component = ({ blocks }: PropsWithChildren<ComponentProps>) => (
   <div
     style={{
-      backgroundColor: '#f6f6f6',
+      backgroundColor: '#f8f8f8',
       padding: '1rem',
     }}
   >

diff --git a/src/app/components/Heading/index.test.tsx b/src/app/components/Heading/index.test.tsx
@@ -20,7 +20,7 @@ describe('Heading', () => {
     });
 
     expect(screen.getByText('Hello World!')).toHaveStyle({
-      color: '#141414',
+      color: '#181818',
       fontSize: '1.75rem',
       lineHeight: '2.25rem',
       fontFamily: 'ReithSans,Helvetica,Arial,sans-serif',

diff --git a/src/app/components/MessageBanner/index.styles.tsx b/src/app/components/MessageBanner/index.styles.tsx
@@ -54,7 +54,7 @@ const styles = {
       width: '100%',
       color: palette.BLACK,
       '&:hover, &:focus': {
-        backgroundColor: '#F6F6F6',
+        backgroundColor: '#F8F8F8',
         color: palette.BLACK,
       },
       [mq.GROUP_3_MIN_WIDTH]: {

diff --git a/src/app/components/Paragraph/index.test.tsx b/src/app/components/Paragraph/index.test.tsx
@@ -14,7 +14,7 @@ describe('Paragraph', () => {
     });
 
     expect(screen.getByText('Hello World!')).toHaveStyle({
-      color: '#141414',
+      color: '#181818',
       fontSize: '0.9375rem',
       lineHeight: '1.25rem',
       fontFamily: 'ReithSans,Helvetica,Arial,sans-serif',
@@ -30,7 +30,7 @@ describe('Paragraph', () => {
     });
 
     expect(screen.getByText('Hello World!')).toHaveStyle({
-      color: '#141414',
+      color: '#181818',
       fontSize: '0.9375rem',
       lineHeight: '1.5rem',
       fontFamily:

diff --git a/src/app/components/RelatedContentSection/index.stories.tsx b/src/app/components/RelatedContentSection/index.stories.tsx
@@ -15,7 +15,7 @@ import readme from './README.md';
 const BackGround = styled.div`
   width: 100%;
   height: 100%;
-  background-color: #f6f6f6;
+  background-color: #f8f8f8;
   padding: 2rem;
 `;
 

diff --git a/src/app/components/Text/index.test.tsx b/src/app/components/Text/index.test.tsx
@@ -20,7 +20,7 @@ describe('Text', () => {
     });
 
     expect(screen.getByText('Hello World!')).toHaveStyle({
-      color: '#141414',
+      color: '#181818',
       fontSize: '0.9375rem',
       lineHeight: '1.25rem',
       fontFamily: 'ReithSans,Helvetica,Arial,sans-serif',
@@ -35,7 +35,7 @@ describe('Text', () => {
     });
 
     expect(screen.getByText('Hello World!')).toHaveStyle({
-      color: '#141414',
+      color: '#181818',
       fontSize: '0.9375rem',
       lineHeight: '1.25rem',
       fontFamily: 'ReithSerif,Helvetica,Arial,sans-serif',
@@ -50,7 +50,7 @@ describe('Text', () => {
     });
 
     expect(screen.getByText('Hello World!')).toHaveStyle({
-      color: '#141414',
+      color: '#181818',
       fontSize: '0.9375rem',
       lineHeight: '1.5rem',
       fontFamily:
@@ -64,7 +64,7 @@ describe('Text', () => {
     render(<Text size="atlas">Hello World!</Text>);
 
     expect(screen.getByText('Hello World!')).toHaveStyle({
-      color: '#141414',
+      color: '#181818',
       fontSize: '4.875rem',
       lineHeight: '5.25rem',
       fontFamily: 'ReithSans,Helvetica,Arial,sans-serif',
@@ -79,7 +79,7 @@ describe('Text', () => {
     });
 
     expect(screen.getByText('Hello World!')).toHaveStyle({
-      color: '#141414',
+      color: '#181818',
       fontSize: '0.9375rem',
       lineHeight: '1.25rem',
       fontFamily: 'ReithSans,Helvetica,Arial,sans-serif',
@@ -94,7 +94,7 @@ describe('Text', () => {
     });
 
     expect(screen.getByText('Hello World!')).toHaveStyle({
-      color: '#141414',
+      color: '#181818',
       fontSize: '0.9375rem',
       lineHeight: '1.25rem',
       fontFamily: 'ReithSerif,Helvetica,Arial,sans-serif',
@@ -109,7 +109,7 @@ describe('Text', () => {
     });
 
     expect(screen.getByText('Hello World!')).toHaveStyle({
-      color: '#141414',
+      color: '#181818',
       fontSize: '0.9375rem',
       lineHeight: '1.5rem',
       fontFamily:

diff --git a/src/app/components/ThemeProvider/README.md b/src/app/components/ThemeProvider/README.md
@@ -153,9 +153,9 @@ The available colours. Click on any colour to see the colour in https://color-he
 - [`DIM_GREY`](https://www.color-hex.com/color/696969)
 - [`EBON`](https://www.color-hex.com/color/222222)
 - [`GHOST`](https://www.color-hex.com/color/FDFDFD)
-- [`GREY_10`](https://www.color-hex.com/color/141414)
+- [`GREY_10`](https://www.color-hex.com/color/181818)
 - [`GREY_11`](https://www.color-hex.com/color/BABABA)
-- [`GREY_2`](https://www.color-hex.com/color/F6F6F6)
+- [`GREY_2`](https://www.color-hex.com/color/F8F8F8)
 - [`GREY_3`](https://www.color-hex.com/color/E6E8EA)
 - [`GREY_6`](https://www.color-hex.com/color/545658)
 - [`GREY_8`](https://www.color-hex.com/color/202224)

diff --git a/src/app/components/ThemeProvider/palette.ts b/src/app/components/ThemeProvider/palette.ts
@@ -15,14 +15,14 @@ export const EBON = '#222222';
 export const ERROR_CORE = '#E51854';
 export const GHOST = '#FDFDFD';
 export const GREY_1 = '#FEFEFE';
-export const GREY_2 = '#F6F6F6';
+export const GREY_2 = '#F8F8F8';
 export const GREY_3 = '#E6E8EA';
 export const GREY_4 = '#B0B2B4';
 export const GREY_5 = '#8A8C8E';
 export const GREY_6 = '#545658';
 export const GREY_7 = '#3A3C3E';
 export const GREY_8 = '#202224';
-export const GREY_10 = '#141414';
+export const GREY_10 = '#181818';
 export const GREY_11 = '#BABABA';
 export const GREY_15 = '#202020';
 export const GREY_16 = '#181818';

diff --git a/src/app/components/ThemeProviderSCSSModules/palette.scss b/src/app/components/ThemeProviderSCSSModules/palette.scss
@@ -16,10 +16,10 @@ $dim-grey: #696969;
 $ebon: #222222;
 $error-core: #e51854;
 $ghost: #fdfdfd;
-$grey-10: #141414;
+$grey-10: #181818;
 $grey-11: #bababa;
 $grey-1: #fefefe;
-$grey-2: #f6f6f6;
+$grey-2: #f8f8f8;
 $grey-3: #e6e8ea;
 $grey-4: #b0b2b4;
 $grey-5: #8a8c8e;

diff --git a/src/app/pages/ArticlePage/PagePromoSections/TopStoriesSection/index.stories.tsx b/src/app/pages/ArticlePage/PagePromoSections/TopStoriesSection/index.stories.tsx
@@ -19,7 +19,7 @@ import { TopStoryItem } from './types';
 const BackGround = styled.div`
   width: 100%;
   height: 100%;
-  background-color: #f6f6f6;
+  background-color: #f8f8f8;
   padding: 2rem;
 `;