From 5adea1a75d55d45158e5cce67f3885a2b9340c25 Mon Sep 17 00:00:00 2001
From: Fernando Lucchesi <fernando@lucalto.com>
Date: Thu, 4 Jan 2024 12:45:26 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20new=20colors=20#2008=20(#2028?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨  Add new colors #2008

* ♻️ Themed attrs #2008

* 💄 Style adjustments #2008

* 💄 Apply default normal style #2008

* 💄 Accordion colors #2008

* 💄 Some more adjustments #2008

* Fix issue with Magazine Index page #2008

* Wrong commit #2008

---------

Co-authored-by: Padmaja <52911293+padms@users.noreply.github.com>
---
 .../components/ColorSelector/defaultColors.ts |  8 +-
 sanityv3/schemas/objects/factbox.tsx          |  6 --
 .../schemas/objects/promotion/promotion.tsx   |  7 +-
 sanityv3/schemas/objects/table.tsx            |  2 +-
 web/components/src/Accordion/Header.tsx       |  7 +-
 web/components/src/Accordion/Panel.tsx        |  2 +-
 .../Backgrounds/BackgroundContainer.test.tsx  | 20 ++---
 .../src/Backgrounds/BackgroundContainer.tsx   | 86 ++++---------------
 .../src/Backgrounds/backgroundColours.tsx     | 23 -----
 web/components/src/Backgrounds/index.ts       |  1 +
 .../src/Breadcrumbs/BreadcrumbListItem.tsx    |  2 +-
 web/components/src/Card/LandscapeCard.tsx     |  2 +-
 web/components/src/Card/PortraitCard.tsx      |  2 +-
 web/components/src/Eyebrow/Eyebrow.tsx        |  6 +-
 web/components/src/Fact/Content.tsx           |  6 +-
 web/components/src/Fact/Fact.stories.tsx      | 10 +--
 web/components/src/Fact/FactBox.tsx           | 30 +++----
 web/components/src/Fact/index.ts              |  1 -
 .../src/FigureCaption/FigureCaption.tsx       |  6 +-
 .../src/Heading/Heading.stories.tsx           |  6 +-
 web/components/src/Heading/Heading.tsx        | 26 +-----
 web/components/src/Link/ButtonLink.tsx        | 19 ++--
 web/components/src/Link/Link.tsx              | 34 +++-----
 web/components/src/List/List.tsx              |  6 +-
 web/components/src/Menu/SubMenuPanel.tsx      |  2 +-
 web/components/src/Quote/Author.tsx           | 10 +--
 web/components/src/Quote/BlockQuote.tsx       |  1 +
 web/components/src/Quote/Quote.tsx            | 19 ++--
 web/components/src/Table/Caption.tsx          |  5 +-
 web/components/src/Tabs/Tab.tsx               | 18 ++--
 web/components/src/Tabs/Tabs.stories.tsx      |  6 +-
 web/components/src/Text/Text.stories.tsx      |  6 +-
 web/components/src/Text/Text.tsx              | 16 +---
 web/components/src/Topbar/Logo.tsx            | 12 ++-
 web/components/utils/backgroundColours.tsx    | 41 +++++++++
 web/components/utils/index.ts                 |  1 +
 web/lib/hooks/useSharedTitleStyles.ts         | 14 ++-
 web/pageComponents/cards/NewsCard.tsx         |  2 +-
 web/pageComponents/cards/SimpleCard.tsx       |  2 +-
 web/pageComponents/cards/TopicPageCard.tsx    |  2 +-
 .../pageTemplates/MagazineIndexPage.tsx       |  2 +-
 .../pageTemplates/MagazinePage.tsx            | 21 +++--
 web/pageComponents/pageTemplates/News.tsx     | 20 +++--
 .../pageTemplates/TopicPage.tsx               | 27 +++---
 .../pageTemplates/newsroom/FilterHeader.tsx   |  4 +-
 .../pageTemplates/shared/SharedTitle.tsx      | 44 ++--------
 web/pageComponents/search/EventHit.tsx        |  5 +-
 web/pageComponents/search/Hits.tsx            |  2 +-
 web/pageComponents/search/MagazineHit.tsx     |  4 +-
 web/pageComponents/search/NewsHit.tsx         |  5 +-
 web/pageComponents/search/Search.tsx          |  2 +-
 web/pageComponents/search/SearchResults.tsx   |  2 +-
 web/pageComponents/search/TopicHit.tsx        |  4 +-
 web/pageComponents/search/hit/HitHeading.tsx  |  2 +-
 web/pageComponents/search/hit/HitLink.tsx     |  1 -
 web/pageComponents/shared/Header.tsx          | 76 ++++++++--------
 .../shared/Hero/DefaultHero.tsx               |  5 +-
 web/pageComponents/shared/LogoLink.tsx        | 13 +--
 .../shared/iframe/RequestConsentContainer.tsx | 25 ++----
 .../shared/image/StyledCaption.tsx            | 22 ++---
 .../portableText/components/news/Fact.tsx     | 23 ++---
 .../shared/search/pagination/Pagination.tsx   |  8 +-
 .../search/pagination/PaginationItem.tsx      | 37 +++-----
 .../search/simplePagination/Pagination.tsx    |  8 +-
 .../simplePagination/PaginationItem.tsx       | 37 +++-----
 .../shared/siteMenu/SiteMenu.tsx              |  8 +-
 .../shared/siteMenu/TopbarDropdown.tsx        |  8 +-
 web/pageComponents/topicPages/Breadcrumbs.tsx | 49 +++--------
 .../topicPages/PromoTileArray.tsx             | 79 ++++++++---------
 .../promotions/MultipleEventCards.tsx         | 14 ++-
 .../promotions/MultiplePromotions.tsx         | 28 +++++-
 web/pages/search/index.global.tsx             | 11 +--
 web/styles/globalStyles.ts                    |  4 +
 web/styles/settings.ts                        | 22 ++++-
 web/styles/themes.ts                          | 62 +++++++++++++
 web/types/types.ts                            | 13 ++-
 76 files changed, 527 insertions(+), 645 deletions(-)
 delete mode 100644 web/components/src/Backgrounds/backgroundColours.tsx
 create mode 100644 web/components/utils/backgroundColours.tsx
 create mode 100644 web/styles/themes.ts

diff --git a/sanityv3/schemas/components/ColorSelector/defaultColors.ts b/sanityv3/schemas/components/ColorSelector/defaultColors.ts
index 36b92d5b7..d41f2cec2 100644
--- a/sanityv3/schemas/components/ColorSelector/defaultColors.ts
+++ b/sanityv3/schemas/components/ColorSelector/defaultColors.ts
@@ -1,8 +1,12 @@
 export const defaultColors = [
   { title: 'White', value: 'hsl(0, 0%, 100%)' },
-  { title: 'Moss Green', value: 'hsl(184, 31%, 74%)' },
+  //{ title: 'Moss Green', value: 'hsl(184, 31%, 74%)' },
   { title: 'Moss Green Light', value: 'hsl(184, 30%, 96%)' },
   { title: 'Spruce Wood', value: 'hsl(25, 100%, 94%)' },
   { title: 'Mist Blue', value: 'hsl(199, 58%, 90%)' },
-  { title: 'Slate Blue', value: 'hsl(206, 34%, 14%)' },
+  // { title: 'Slate Blue', value: 'hsl(206, 34%, 14%)' },
+  { title: 'Mid Yellow', value: '#FFF5B8' },
+  { title: 'Mid Orange', value: '#F8D1AF' },
+  { title: 'Mid Blue', value: '#49709C' },
+  { title: 'Mid Green', value: '#C3E4CE' },
 ]
diff --git a/sanityv3/schemas/objects/factbox.tsx b/sanityv3/schemas/objects/factbox.tsx
index f274baa5b..9b52ad0e1 100644
--- a/sanityv3/schemas/objects/factbox.tsx
+++ b/sanityv3/schemas/objects/factbox.tsx
@@ -1,6 +1,5 @@
 import { info_circle } from '@equinor/eds-icons'
 import { PortableTextBlock } from 'sanity'
-import { defaultColors } from '../components/ColorSelector'
 import { EdsIcon, LeftAlignedImage, RightAlignedImage } from '../../icons'
 import { RadioIconSelector } from '../components'
 import { configureBlockContent } from '../editors/blockContentType'
@@ -12,8 +11,6 @@ const imageAlignmentOptions = [
   { value: 'right', icon: RightAlignedImage },
 ]
 
-const chosenColors = ['White', 'Moss Green', 'Spruce Wood']
-const backgroundColors = defaultColors.filter((color) => chosenColors.includes(color.title))
 const blockContentType = configureBlockContent({
   h1: false,
   h2: false,
@@ -69,9 +66,6 @@ export default {
       name: 'background',
       type: 'colorlist',
       fieldset: 'design',
-      options: {
-        colors: backgroundColors,
-      },
     },
     {
       name: 'imagePosition',
diff --git a/sanityv3/schemas/objects/promotion/promotion.tsx b/sanityv3/schemas/objects/promotion/promotion.tsx
index 68db697d8..536144017 100644
--- a/sanityv3/schemas/objects/promotion/promotion.tsx
+++ b/sanityv3/schemas/objects/promotion/promotion.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import blocksToText from '../../../helpers/blocksToText'
-import { defaultColors } from '../../components/ColorSelector'
 import CompactBlockEditor from '../../components/CompactBlockEditor'
 import { configureBlockContent, configureTitleBlockContent } from '../../editors'
 import type { MagazinePromotion } from './promoteMagazine'
@@ -54,8 +53,7 @@ const ingressContentType = configureBlockContent({
   h4: false,
   attachment: false,
 })
-const chosenColors = ['White', 'Moss Green', 'Moss Green Light', 'Spruce Wood', 'Mist Blue']
-const backgroundColors = defaultColors.filter((color) => chosenColors.includes(color.title))
+
 export default {
   title: 'Promotion',
   name: 'promotion',
@@ -126,9 +124,6 @@ export default {
       description: 'Pick a colour for the background. Default is white.',
       name: 'background',
       type: 'colorlist',
-      options: {
-        colors: backgroundColors,
-      },
       fieldset: 'design',
     },
   ].filter((e) => e),
diff --git a/sanityv3/schemas/objects/table.tsx b/sanityv3/schemas/objects/table.tsx
index 5cacd0f10..071cda62f 100644
--- a/sanityv3/schemas/objects/table.tsx
+++ b/sanityv3/schemas/objects/table.tsx
@@ -45,7 +45,7 @@ const headerCellContentType = configureBlockContent({
   attachment: true,
 })
  */
-const chosenColors = ['White', 'Moss Green', 'Moss Green Light', 'Spruce Wood', 'Mist Blue']
+const chosenColors = ['White', 'Mid Green', 'Moss Green Light', 'Spruce Wood', 'Mist Blue']
 const backgroundColors = defaultColors.filter((color) => chosenColors.includes(color.title))
 export default {
   title: 'Table',
diff --git a/web/components/src/Accordion/Header.tsx b/web/components/src/Accordion/Header.tsx
index f7573d6f1..764072934 100644
--- a/web/components/src/Accordion/Header.tsx
+++ b/web/components/src/Accordion/Header.tsx
@@ -37,7 +37,7 @@ const StyledIcon = styled.span`
   flex: 0 0 var(--space-xLarge);
   line-height: 16px;
   & ${FilledIcon}, & ${OutlineIcon} {
-    fill: var(--energy-red-100);
+    fill: var(--accordion-icon-color);
   }
 `
 const StyledHeader = styled(Typography)`
@@ -62,9 +62,8 @@ const StyledTypography = styled(Typography)<{ isExpanded?: boolean }>`
   @media (prefers-reduced-motion: no-preference) {
     transition: font-weight 0.1s ease-in-out;
   }
-  .inverted-background & {
-    color: var(--inverted-text);
-  }
+
+  color: var(--color-on-background);
 
   ${({ isExpanded }) =>
     isExpanded && {
diff --git a/web/components/src/Accordion/Panel.tsx b/web/components/src/Accordion/Panel.tsx
index a7dbba4f9..99e9a1dfb 100644
--- a/web/components/src/Accordion/Panel.tsx
+++ b/web/components/src/Accordion/Panel.tsx
@@ -13,7 +13,7 @@ const StyledPanel = styled.div`
   }
 `
 const ContentWithBorder = styled.div`
-  border-left: 1px dashed var(--energy-red-100);
+  border-left: 1px dashed var(--accordion-icon-color);
   padding-left: calc(var(--space-xLarge) / 2);
 `
 
diff --git a/web/components/src/Backgrounds/BackgroundContainer.test.tsx b/web/components/src/Backgrounds/BackgroundContainer.test.tsx
index 69759a96f..6f12448d3 100644
--- a/web/components/src/Backgrounds/BackgroundContainer.test.tsx
+++ b/web/components/src/Backgrounds/BackgroundContainer.test.tsx
@@ -7,34 +7,30 @@ afterEach(cleanup)
 describe(`The background container supports different colours from Sanity's colour selector`, () => {
   it('it can be the default color', () => {
     const { container } = render(<BackgroundContainer />)
-    expect(container.firstChild).toHaveStyle(`--background-color: var(--ui-background-default)`)
+    expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-default)`)
   })
   it('it can be white (default)', () => {
     const { container } = render(<BackgroundContainer background="White" />)
-    expect(container.firstChild).toHaveStyle(`--background-color: var(--ui-background-default)`)
+    expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-default)`)
   })
   it('it can be Moss green ', () => {
     const { container } = render(<BackgroundContainer background="Moss Green" />)
-    expect(container.firstChild).toHaveStyle(`--background-color: var(--moss-green-70)`)
+    expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-moss-green)`)
   })
   it('it can be light mint blue (default)', () => {
     const { container } = render(<BackgroundContainer background="Moss Green Light" />)
-    expect(container.firstChild).toHaveStyle(`--background-color: var(--moss-green-50)`)
+    expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-moss-green-light)`)
   })
   it('it can be spruce wood (default)', () => {
     const { container } = render(<BackgroundContainer background="Spruce Wood" />)
-    expect(container.firstChild).toHaveStyle(`--background-color: var(--spruce-wood-90)`)
+    expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-spruce-wood)`)
   })
   it('it can be mist blue (default)', () => {
     const { container } = render(<BackgroundContainer background="Mist Blue" />)
-    expect(container.firstChild).toHaveStyle(`--background-color: var(--mist-blue-100)`)
+    expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-mist-blue)`)
   })
   it('it can be slate blue (default)', () => {
-    const { container } = render(<BackgroundContainer background="Slate Blue" />)
-    expect(container.firstChild).toHaveStyle(`--background-color: var(--slate-blue-100)`)
-  })
-  it('Add a class for inverted if the background is so dark that the text must be light for contrast', () => {
-    const { container } = render(<BackgroundContainer background="Slate Blue" />)
-    expect(container.firstChild).toHaveClass('inverted-background')
+    const { container } = render(<BackgroundContainer background="Mid Blue" />)
+    expect(container.firstChild).toHaveStyle(`--background-color: var(--bg-mid-blue)`)
   })
 })
diff --git a/web/components/src/Backgrounds/BackgroundContainer.tsx b/web/components/src/Backgrounds/BackgroundContainer.tsx
index 3d42bf8e7..7ed95fe60 100644
--- a/web/components/src/Backgrounds/BackgroundContainer.tsx
+++ b/web/components/src/Backgrounds/BackgroundContainer.tsx
@@ -1,93 +1,43 @@
 import { forwardRef, HTMLAttributes, CSSProperties } from 'react'
 import styled from 'styled-components'
-import type { StyleVariants } from './backgroundColours'
-import { getStyleVariant } from './backgroundColours'
+import { getColorOnContainer, getContainerColor, isInvertedStyle } from '../../utils/backgroundColours'
 import type { BackgroundColours } from '../../../types/types'
+import { normal, inverted } from '../../../styles/themes'
 
 export type BackgroundContainerProps = {
   background?: BackgroundColours
-  disableContainerWrapper?: boolean
 } & HTMLAttributes<HTMLDivElement>
 
 type ColourContainerProps = {
-  styleVariant?: StyleVariants
   isInverted: boolean
-  colourWrapper: string
-}
+} & HTMLAttributes<HTMLDivElement>
 
-const ColourContainer = styled.div.attrs<ColourContainerProps>(({ isInverted, colourWrapper }) =>
-  isInverted
-    ? {
-        className: `inverted-background ${colourWrapper}`,
-      }
-    : {
-        className: colourWrapper,
-      },
-)<ColourContainerProps>`
+const ColourContainer = styled.div<ColourContainerProps>`
   background-color: var(--background-color);
+  color: var(--color-on-background);
+  ${({ isInverted }) => (isInverted ? inverted : normal)}
 `
 
-// @TODO: Can we map colours in a better way? Duplicate code atm
-const backgrounds: { [name: string]: string } = {
-  none: 'var(--ui-background-default)',
-  one: 'var(--moss-green-70)',
-  two: 'var(--moss-green-50)',
-  three: 'var(--spruce-wood-90)',
-  four: 'var(--mist-blue-100)',
-  five: 'var(--slate-blue-100)',
-}
-
-export const getBackgroundByColorName = (name: BackgroundColours) => {
-  const styleVariant = getStyleVariant(name)
-  return backgrounds[styleVariant]
-}
-
-export const getHexFromColorName = (color?: BackgroundColours) => {
-  switch (color) {
-    case 'Moss Green':
-      return '#a8cfd1'
-    case 'Moss Green Light':
-      return '#f2f7f8'
-    case 'Spruce Wood':
-      return '#ffede0'
-    case 'Mist Blue':
-      return '#d7ebf4'
-    case 'Slate Blue':
-      return '#182530'
-    case 'White':
-    default:
-      return '#ffffff'
-  }
-}
-
-export function getFontColorForBg(bgColor?: BackgroundColours): string {
-  const hex = getHexFromColorName(bgColor)
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const [r, g, b] = hex
-    .replace(/^#/, '')
-    .match(/.{2}/g)!
-    .map((h) => parseInt(h, 16) / 255)
-  const luminance = [0.2126, 0.7152, 0.0722].reduce(
-    (acc, v, i) =>
-      acc + v * ([r, g, b][i] <= 0.03928 ? [r, g, b][i] / 12.92 : Math.pow(([r, g, b][i] + 0.055) / 1.055, 2.4)),
-    0,
-  )
-  return luminance > 0.5 ? 'var(--default-text)' : 'var(--inverted-text)'
-}
-
 export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContainerProps>(function BackgroundContainer(
-  { background = 'White', disableContainerWrapper = false, style, children, ...rest },
+  { background = 'White', style, children, className, ...rest },
   ref,
 ) {
   // @TODO: Find a better way with task #334
-  const styleVariant = getStyleVariant(background)
-  const isInverted = styleVariant === 'five'
+  const styleVariant = getContainerColor(background)
+  const textColor = getColorOnContainer(background)
+  const isInverted = isInvertedStyle(styleVariant)
 
   return (
     <ColourContainer
+      className={className + ` background${styleVariant}`}
       isInverted={isInverted}
-      colourWrapper={disableContainerWrapper ? '' : `background-${styleVariant}`}
-      style={{ ...style, '--background-color': backgrounds[styleVariant] } as CSSProperties}
+      style={
+        {
+          ...style,
+          '--background-color': `var(${styleVariant})`,
+          '--color-on-background': `var(${textColor})`,
+        } as CSSProperties
+      }
       ref={ref}
       {...rest}
     >
diff --git a/web/components/src/Backgrounds/backgroundColours.tsx b/web/components/src/Backgrounds/backgroundColours.tsx
deleted file mode 100644
index c7fae3210..000000000
--- a/web/components/src/Backgrounds/backgroundColours.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { BackgroundColours } from '../../../types/types'
-
-export type StyleVariants = 'none' | 'one' | 'two' | 'three' | 'four' | 'five'
-
-function getStyleVariant(backgroundTitle: BackgroundColours) {
-  let styleVariant: StyleVariants = 'none'
-  if (backgroundTitle === 'White') {
-    styleVariant = 'none'
-  } else if (backgroundTitle === 'Moss Green') {
-    styleVariant = 'one'
-  } else if (backgroundTitle === 'Moss Green Light') {
-    styleVariant = 'two'
-  } else if (backgroundTitle === 'Spruce Wood') {
-    styleVariant = 'three'
-  } else if (backgroundTitle === 'Mist Blue') {
-    styleVariant = 'four'
-  } else if (backgroundTitle === 'Slate Blue') {
-    styleVariant = 'five'
-  }
-  return styleVariant
-}
-
-export { getStyleVariant }
diff --git a/web/components/src/Backgrounds/index.ts b/web/components/src/Backgrounds/index.ts
index c380c3f1f..72627b816 100644
--- a/web/components/src/Backgrounds/index.ts
+++ b/web/components/src/Backgrounds/index.ts
@@ -1 +1,2 @@
 export * from './BackgroundContainer'
+export * from '../../utils/backgroundColours'
diff --git a/web/components/src/Breadcrumbs/BreadcrumbListItem.tsx b/web/components/src/Breadcrumbs/BreadcrumbListItem.tsx
index 5d354d079..77ad26dfd 100644
--- a/web/components/src/Breadcrumbs/BreadcrumbListItem.tsx
+++ b/web/components/src/Breadcrumbs/BreadcrumbListItem.tsx
@@ -10,6 +10,7 @@ const StyledListItem = styled(EdsItem)`
   display: inline-block;
   padding-right: var(--space-small);
   font-weight: var(--fontWeight-bold);
+  color: var(--color-on-background);
 
   &:after {
     content: '>';
@@ -17,7 +18,6 @@ const StyledListItem = styled(EdsItem)`
   }
 
   &:last-child {
-    color: var(--slate-blue-90);
     font-weight: var(--fontWeight-medium);
 
     &:after {
diff --git a/web/components/src/Card/LandscapeCard.tsx b/web/components/src/Card/LandscapeCard.tsx
index 2d5b20c65..a86e2db00 100644
--- a/web/components/src/Card/LandscapeCard.tsx
+++ b/web/components/src/Card/LandscapeCard.tsx
@@ -27,7 +27,7 @@ export const LandscapeCard = forwardRef<HTMLDivElement, CardProps>(function Card
       style={
         {
           '--card-shadow': 'var(--card-box-shadow)',
-          '--card-background': 'var(--ui-background-default)',
+          '--card-background': 'var(--bg-default)',
           '--card-padding': '0 0 var(--space-small) 0',
           ...style,
         } as CSSProperties
diff --git a/web/components/src/Card/PortraitCard.tsx b/web/components/src/Card/PortraitCard.tsx
index 929cef139..7ad635af8 100644
--- a/web/components/src/Card/PortraitCard.tsx
+++ b/web/components/src/Card/PortraitCard.tsx
@@ -33,7 +33,7 @@ export const PortraitCard = forwardRef<HTMLDivElement, CardProps>(function Card(
           style={
             {
               '--card-shadow': 'var(--card-box-shadow)',
-              '--card-background': 'var(--ui-background-default)',
+              '--card-background': 'var(--bg-default)',
               '--card-padding': '0 0 var(--space-small) 0',
               ...style,
             } as CSSProperties
diff --git a/web/components/src/Eyebrow/Eyebrow.tsx b/web/components/src/Eyebrow/Eyebrow.tsx
index 10704d948..628849790 100644
--- a/web/components/src/Eyebrow/Eyebrow.tsx
+++ b/web/components/src/Eyebrow/Eyebrow.tsx
@@ -6,11 +6,7 @@ const StyledTypography = styled(Typography)`
   font-size: var(--typeScale-2);
   line-height: var(--lineHeight-3);
   margin-bottom: calc(var(--space-medium) * -1);
-
-  /* If the text is used inside a inverted component, the text colour must also be inverted */
-  .inverted-background & {
-    color: var(--inverted-text);
-  }
+  color: var(--color-on-background);
 `
 export type TeaserEyebrowProps = HTMLAttributes<HTMLDivElement>
 
diff --git a/web/components/src/Fact/Content.tsx b/web/components/src/Fact/Content.tsx
index 08627a454..387e37405 100644
--- a/web/components/src/Fact/Content.tsx
+++ b/web/components/src/Fact/Content.tsx
@@ -8,7 +8,6 @@ type ContainerProps = {
 
 export const Container = styled.div<ContainerProps>`
   background-color: var(--background);
-  padding: var(--space-large) var(--space-large);
   h2,
   h3 {
     margin: var(--space-small) 0;
@@ -20,10 +19,6 @@ export const Container = styled.div<ContainerProps>`
 
   li {
     margin-bottom: var(--space-small);
-
-    &::marker {
-      color: var(--moss-green-100);
-    }
   }
 
   margin: 0 calc(var(--spacer-vertical-xxxLarge) * -1);
@@ -33,6 +28,7 @@ export const Container = styled.div<ContainerProps>`
     hasImage && {
       overflowY: 'auto',
       maxHeight: '800px',
+      padding: 'var(--space-large) var(--space-large)',
     }}
 
   @media (min-width: 800px) {
diff --git a/web/components/src/Fact/Fact.stories.tsx b/web/components/src/Fact/Fact.stories.tsx
index 96f65b953..aed105548 100644
--- a/web/components/src/Fact/Fact.stories.tsx
+++ b/web/components/src/Fact/Fact.stories.tsx
@@ -69,7 +69,7 @@ export const WithBulletPoints: StoryFn<FactProps> = (args) => (
 
 export const WithDifferentBackgrounds: StoryFn<FactProps> = () => (
   <>
-    <FactBox background="none">
+    <FactBox background="White">
       <FactBox.Content>
         <Heading size="xl" level="h3">
           Dolor sit amet
@@ -83,7 +83,7 @@ export const WithDifferentBackgrounds: StoryFn<FactProps> = () => (
         </FactBox.Text>
       </FactBox.Content>
     </FactBox>
-    <FactBox background="warm" style={{ marginTop: 'var(--space-medium)' }}>
+    <FactBox background="Spruce Wood" style={{ marginTop: 'var(--space-medium)' }}>
       <FactBox.Content>
         <Heading size="xl" level="h3">
           Dolor sit amet
@@ -97,7 +97,7 @@ export const WithDifferentBackgrounds: StoryFn<FactProps> = () => (
         </FactBox.Text>
       </FactBox.Content>
     </FactBox>
-    <FactBox background="cold" style={{ marginTop: 'var(--space-medium)' }}>
+    <FactBox background="Mist Blue" style={{ marginTop: 'var(--space-medium)' }}>
       <FactBox.Content>
         <Heading size="xl" level="h3">
           Dolor sit amet
@@ -119,7 +119,7 @@ type WithImageProps = {
 } & FactProps
 
 export const WithImage: StoryFn<WithImageProps> = ({
-  background = 'warm',
+  background = 'Mid Yellow',
   imagePosition = 'left',
   dynamicHeight = false,
 }) => (
@@ -173,7 +173,7 @@ WithImage.argTypes = {
   },
 }
 
-export const WithLongText: StoryFn<WithImageProps> = ({ background = 'warm', dynamicHeight = false }) => (
+export const WithLongText: StoryFn<WithImageProps> = ({ background = 'Mid Orange', dynamicHeight = false }) => (
   <>
     <FactBox background={background}>
       <FactBox.Content dynamicHeight={dynamicHeight}>
diff --git a/web/components/src/Fact/FactBox.tsx b/web/components/src/Fact/FactBox.tsx
index db236a813..7106ffeb9 100644
--- a/web/components/src/Fact/FactBox.tsx
+++ b/web/components/src/Fact/FactBox.tsx
@@ -1,21 +1,22 @@
 import { forwardRef, Children, isValidElement, HTMLAttributes } from 'react'
 import styled from 'styled-components'
 import { Image } from './Image'
-import type { FactImagePosition, FactBackground } from './'
+import type { FactImagePosition } from './'
+import { getColorOnContainer, getContainerColor } from '@utils'
+import { BackgroundColours } from '../../../types/types'
 
-const backgroundVariants: { [name: string]: string } = {
-  none: 'var(--ui-background-default)',
-  cold: 'var(--ui-background-cold)',
-  warm: 'var(--ui-background-warm)',
+type FactBoxWrapperStyleProps = {
+  background?: BackgroundColours
 }
-
-const FactBoxWrapperStyle = styled.aside<{ background?: FactBackground }>`
+const FactBoxWrapperStyle = styled.aside<FactBoxWrapperStyleProps>`
   clear: both;
-
-  ${({ background }) =>
-    background && {
-      '--background': backgroundVariants[background],
-    }}
+  ${({ background }) => {
+    if (background)
+      return {
+        '--background': `var(${getContainerColor(background)})`,
+        color: `var(${getColorOnContainer(background)})`,
+      }
+  }}
 `
 
 const WrapperWithImg = styled(FactBoxWrapperStyle)<{ imagePosition: FactImagePosition }>`
@@ -42,16 +43,15 @@ const WrapperWithImg = styled(FactBoxWrapperStyle)<{ imagePosition: FactImagePos
 `
 
 export type FactProps = {
-  background?: FactBackground
+  background?: BackgroundColours
   imagePosition?: FactImagePosition
 } & HTMLAttributes<HTMLDivElement>
 
 export const FactBox = forwardRef<HTMLDivElement, FactProps>(function FactBox(
-  { background = 'none', imagePosition = 'left', children, ...rest },
+  { background = 'White', imagePosition = 'left', children, ...rest },
   ref,
 ) {
   const hasImage = Children.toArray(children).some((child) => isValidElement(child) && child.type === Image)
-
   if (hasImage) {
     return (
       <WrapperWithImg imagePosition={imagePosition} background={background} ref={ref} {...rest}>
diff --git a/web/components/src/Fact/index.ts b/web/components/src/Fact/index.ts
index ce9f7b1ed..d769e4187 100644
--- a/web/components/src/Fact/index.ts
+++ b/web/components/src/Fact/index.ts
@@ -7,7 +7,6 @@ export type FactImagePosition = 'left' | 'right'
 // @TODO: Color mapping must be more generic than this!!!
 // Find a better way to do this.
 // Create a proper type for colors
-export type FactBackground = 'none' | 'cold' | 'warm'
 
 type FactBoxCompoundProps = typeof FactBoxWrapper & {
   Image: typeof Image
diff --git a/web/components/src/FigureCaption/FigureCaption.tsx b/web/components/src/FigureCaption/FigureCaption.tsx
index 4fad409d0..d4d454c65 100644
--- a/web/components/src/FigureCaption/FigureCaption.tsx
+++ b/web/components/src/FigureCaption/FigureCaption.tsx
@@ -6,11 +6,7 @@ import { style } from '@equinor/eds-icons'
 export const StyledFigCaption = styled(Typography)`
   font-size: var(--size);
   margin-top: var(--space-small);
-
-  /* If the text is used inside a inverted component, the text colour must also be inverted */
-  .inverted-background & {
-    color: var(--inverted-text);
-  }
+  color: var(--color-on-background);
 
   @media (min-width: 800px) {
     max-width: 560px;
diff --git a/web/components/src/Heading/Heading.stories.tsx b/web/components/src/Heading/Heading.stories.tsx
index a6a09ac2e..73e01c606 100644
--- a/web/components/src/Heading/Heading.stories.tsx
+++ b/web/components/src/Heading/Heading.stories.tsx
@@ -138,9 +138,9 @@ export const Uppercase: StoryFn<HeadingProps> = () => (
 
 export const InvertedHeading: StoryFn<HeadingProps> = () => (
   <DarkBackground>
-    <Heading inverted>This Heading has its color inverted by manually setting the inverted prop to true.</Heading>
-    <Heading inverted>Perfect for use on darker backgrounds.</Heading>
-    <Heading inverted>Note that this is handled automatically when using a BackgroundContainer.</Heading>
+    <Heading>This Heading has its color inverted by manually setting the inverted prop to true.</Heading>
+    <Heading>Perfect for use on darker backgrounds.</Heading>
+    <Heading>Note that this is handled automatically when using a BackgroundContainer.</Heading>
   </DarkBackground>
 )
 
diff --git a/web/components/src/Heading/Heading.tsx b/web/components/src/Heading/Heading.tsx
index 2c0d462ee..6ee9c24e6 100644
--- a/web/components/src/Heading/Heading.tsx
+++ b/web/components/src/Heading/Heading.tsx
@@ -4,7 +4,6 @@ import styled from 'styled-components'
 
 type StyledHeadingProps = {
   center: boolean
-  inverted: boolean
 }
 
 const StyledHeading = styled(Typography)<StyledHeadingProps>`
@@ -17,16 +16,7 @@ const StyledHeading = styled(Typography)<StyledHeadingProps>`
     center && {
       textAlign: 'center',
     }}
-
-  ${({ inverted }) =>
-    inverted && {
-      color: 'var(--inverted-text)',
-    }}
-
-  /* If the heading is used inside a inverted component, the text colour must also be inverted */
-  .inverted-background & {
-    color: var(--inverted-text);
-  }
+  color: var(--color-on-background);
 `
 
 export type HeadingProps = {
@@ -34,7 +24,6 @@ export type HeadingProps = {
   level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   regular?: boolean
   center?: boolean
-  inverted?: boolean
   uppercase?: boolean
 } & HTMLAttributes<HTMLHeadingElement>
 
@@ -76,17 +65,7 @@ const fontWeights = {
 }
 
 export const Heading = forwardRef<HTMLDivElement, HeadingProps>(function Heading(
-  {
-    size = 'lg',
-    level = 'h3',
-    regular = false,
-    center = false,
-    inverted = false,
-    uppercase = false,
-    style,
-    children,
-    ...rest
-  },
+  { size = 'lg', level = 'h3', regular = false, center = false, uppercase = false, style, children, ...rest },
   ref,
 ) {
   return (
@@ -94,7 +73,6 @@ export const Heading = forwardRef<HTMLDivElement, HeadingProps>(function Heading
       variant={level}
       ref={ref}
       center={center}
-      inverted={inverted}
       style={
         {
           '--size': sizes[size],
diff --git a/web/components/src/Link/ButtonLink.tsx b/web/components/src/Link/ButtonLink.tsx
index e59fac164..c49975730 100644
--- a/web/components/src/Link/ButtonLink.tsx
+++ b/web/components/src/Link/ButtonLink.tsx
@@ -8,22 +8,17 @@ const StyledButtonLink = styled(Button)`
   --eds_button__font_size: var(--typeScale-05);
   --eds_button__radius: var(--space-4);
 
-  color: var(--slate-blue-95);
   text-decoration: none;
   display: inline-block;
 
-  /* If the button link is used inside a inverted component, the text colour must also be inverted */
+  color: var(--button-text);
+  border-color: var(--button-border-color);
+  background-color: var(--button-background);
+
   &:hover {
-    color: var(--inverted-text);
-    background-color: var(--slate-blue-100);
-  }
-  .inverted-background & {
-    color: var(--inverted-text);
-    border-color: var(--white-100);
-    &:hover {
-      background-color: var(--white-100);
-      color: var(--slate-blue-100);
-    }
+    color: var(--button-text-hover);
+    background-color: var(--button-background-hover);
+    border-color: var(--button-border-color-hover);
   }
 `
 
diff --git a/web/components/src/Link/Link.tsx b/web/components/src/Link/Link.tsx
index 6f3d14c59..f52a16ce1 100644
--- a/web/components/src/Link/Link.tsx
+++ b/web/components/src/Link/Link.tsx
@@ -10,10 +10,15 @@ import { default as NextLink } from 'next/link'
 
 const { outline } = Tokens
 
+/*link - color
+link - color - hover
+arrow - color
+arrow - background - color
+*/
 export const BaseLink = styled(NextLink)<{ $textDecoration?: string }>`
   display: inline-flex;
   align-items: center;
-  color: var(--slate-blue-95);
+  color: var(--link-color);
   text-decoration: ${({ $textDecoration }) => $textDecoration || 'none'};
   &[data-focus-visible-added]:focus {
     ${outlineTemplate(outline)}
@@ -23,10 +28,6 @@ export const BaseLink = styled(NextLink)<{ $textDecoration?: string }>`
     box-sizing: content-box;
     padding: 0 var(--space-1);
   }
-  /* If the link is used inside a inverted component, the text colour must also be inverted */
-  .inverted-background & {
-    color: var(--mist-blue-100);
-  }
 `
 
 // TODO: should part of this styling be moved to a list item instead?
@@ -34,10 +35,10 @@ const ContentLink = styled(BaseLink)`
   border-bottom: 0.5px solid var(--grey-40);
   text-decoration: none;
   padding: var(--space-small) 0;
-  color: var(--slate-blue-100) !important;
+  color: var(--content-link-color) !important;
   width: 100%;
   & > svg {
-    fill: var(--energy-red-100);
+    fill: var(--link-arrow-color);
     margin-left: auto;
     border: 1px solid transparent;
     border-radius: 50%;
@@ -45,16 +46,14 @@ const ContentLink = styled(BaseLink)`
   }
   &:hover svg {
     background: var(--energy-red-50);
-  }
-  .inverted-background & {
-    color: var(--inverted-text) !important;
+    fill: var(--content-link-arrow-color-hover);
   }
 `
 
 const ReadMoreLink = styled(BaseLink)`
   display: inline-flex;
   max-width: max-content;
-  color: var(--slate-blue-100);
+  color: var(--content-link-color);
   justify-content: center;
   text-decoration: none;
   position: relative;
@@ -63,11 +62,12 @@ const ReadMoreLink = styled(BaseLink)`
     margin-left: var(--space-small);
     padding-right: 0;
     transition: 0.3s;
-    fill: var(--energy-red-100);
+    fill: var(--link-arrow-color);
   }
 
   &:hover svg {
     padding-left: var(--space-medium);
+    fill: var(--link-arrow-color-hover);
   }
 
   &:after {
@@ -77,21 +77,13 @@ const ReadMoreLink = styled(BaseLink)`
     left: 0;
     display: block;
     width: 0%;
-    border-bottom: solid 0.5px var(--slate-blue-100);
+    border-bottom: solid 0.5px var(--content-link-color);
     transition: 0.3s;
   }
 
   &:hover:after {
     width: 100%;
   }
-
-  /* If the link is used inside a inverted component, the text colour must also be inverted */
-  .inverted-background & {
-    color: var(--inverted-text);
-    &:after {
-      border-bottom-color: var(--white-100);
-    }
-  }
 `
 
 const getIconData = (type: LinkType) => {
diff --git a/web/components/src/List/List.tsx b/web/components/src/List/List.tsx
index a1f17cf04..6c36040e2 100644
--- a/web/components/src/List/List.tsx
+++ b/web/components/src/List/List.tsx
@@ -35,11 +35,7 @@ const StyledList = styled(EdsList)<ListProps>`
         gridColumnGap: `var(--space-xLarge)`,
       }}
   }
-
-  /* If the text is used inside a inverted component, the text colour must also be inverted */
-  .inverted-background & {
-    color: var(--inverted-text);
-  }
+  color: var(--color-on-background);
 `
 
 export const List = forwardRef<HTMLUListElement | HTMLOListElement, ListProps>(function List(
diff --git a/web/components/src/Menu/SubMenuPanel.tsx b/web/components/src/Menu/SubMenuPanel.tsx
index 3675ce8e7..ffbd4d865 100644
--- a/web/components/src/Menu/SubMenuPanel.tsx
+++ b/web/components/src/Menu/SubMenuPanel.tsx
@@ -8,7 +8,7 @@ const StyledPanel = styled(AccordionPanel)`
     position: absolute;
     left: 0;
     right: 0;
-    background-color: var(--ui-background-default);
+    background-color: var(--bg-default);
     padding: var(--space-medium) 0;
     /* @TODO: Find a nice value */
     max-width: 1700px;
diff --git a/web/components/src/Quote/Author.tsx b/web/components/src/Quote/Author.tsx
index 08eb24c64..fd6cbff87 100644
--- a/web/components/src/Quote/Author.tsx
+++ b/web/components/src/Quote/Author.tsx
@@ -22,9 +22,8 @@ const AuthorWrapper = styled(Typography)`
   display: inline-flex;
   flex-direction: column;
   margin-right: auto;
-  .inverted-background & {
-    color: var(--inverted-text);
-  }
+
+  color: var(--color-on-background);
 
   @media (min-width: 800px) {
     margin-left: auto;
@@ -32,10 +31,7 @@ const AuthorWrapper = styled(Typography)`
 `
 
 const TextWrapper = styled.span`
-  .inverted-background & {
-    color: var(--inverted-text);
-    font-weight: var(--fontWeight-bold);
-  }
+  color: var(--color-on-background);
 `
 
 export const Author = forwardRef<HTMLDivElement, AuthorProps>(function Author(
diff --git a/web/components/src/Quote/BlockQuote.tsx b/web/components/src/Quote/BlockQuote.tsx
index 959d5b0a1..9f872f802 100644
--- a/web/components/src/Quote/BlockQuote.tsx
+++ b/web/components/src/Quote/BlockQuote.tsx
@@ -9,6 +9,7 @@ const Container = styled.div`
 const Quote = styled.blockquote`
   background: none;
   margin: 0;
+  color: var(--color-on-background);
 `
 
 const Author = styled.figcaption`
diff --git a/web/components/src/Quote/Quote.tsx b/web/components/src/Quote/Quote.tsx
index 997c05a9d..3e330007b 100644
--- a/web/components/src/Quote/Quote.tsx
+++ b/web/components/src/Quote/Quote.tsx
@@ -13,6 +13,7 @@ const Text = styled(BaseText)`
   align-self: end;
   margin: 0;
   font-style: italic;
+  color: var(--color-on-background);
   font-weight: var(${({ weight }: TextProps) => weight}, --fontWeight-regular);
   font-size: var(${({ fontSize }: TextProps) => fontSize}, --typeScale-1);
 `
@@ -21,13 +22,6 @@ const Container = styled.div`
   grid-area: quote;
 `
 
-const SVG = styled.svg`
-  fill: var(--grey-90);
-  .inverted-background & {
-    fill: var(--inverted-text);
-  }
-`
-
 const textBoldLimit = 160
 const textSizeLimit = 50
 
@@ -41,10 +35,17 @@ export const Quote = forwardRef<HTMLDivElement, QuoteProps>(function Quote({ chi
   const iconSize = quoteText.length < textSizeLimit ? '48px' : '36px'
   return (
     <Container>
-      <SVG width={iconSize} height={iconSize} viewBox="0 0 48 48" aria-hidden={true} xmlns="http://www.w3.org/2000/svg">
+      <svg
+        fill={'var(--quote-icon-color)'}
+        width={iconSize}
+        height={iconSize}
+        viewBox="0 0 48 48"
+        aria-hidden={true}
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <title>Quote symbol</title>
         <path d="M24.3178 27.4196C24.3178 20.9682 29.485 14.2193 37.5942 12.7059L40.9409 15.5294C38.0002 16.5773 33.3736 20.0696 33.0856 22.5845C36.3927 23.0764 38.9218 25.7807 38.9218 29.046C38.9218 33.0391 35.4912 35.2941 32.0195 35.2941C28.0166 35.2941 24.3178 32.4016 24.3178 27.4196ZM7.05859 27.4196C7.05859 20.9682 12.2257 14.2193 20.3349 12.7059L23.3221 15.5294C20.3814 16.5773 16.1144 20.0696 15.8263 22.5845C19.1334 23.0764 21.6626 25.7807 21.6626 29.046C21.6626 33.0391 18.232 35.2941 14.7602 35.2941C10.7574 35.2941 7.05859 32.4016 7.05859 27.4196Z" />
-      </SVG>
+      </svg>
       <Text fontSize={size} weight={weight} ref={ref} {...rest}>
         {quoteText}
       </Text>
diff --git a/web/components/src/Table/Caption.tsx b/web/components/src/Table/Caption.tsx
index 3847ad544..41c419098 100644
--- a/web/components/src/Table/Caption.tsx
+++ b/web/components/src/Table/Caption.tsx
@@ -14,10 +14,7 @@ const StyledCaption = styled(EdsCaption)<{ center: boolean }>`
       textAlign: 'center',
     }}
 
-  /* If the text is used inside a inverted component, the text colour must also be inverted */
-  .inverted-background & {
-    color: var(--inverted-text);
-  }
+  color: var(--color-on-background);
 `
 
 export type TableCaptionProps = {
diff --git a/web/components/src/Tabs/Tab.tsx b/web/components/src/Tabs/Tab.tsx
index 1d9c5ee93..8dcb3d6e8 100644
--- a/web/components/src/Tabs/Tab.tsx
+++ b/web/components/src/Tabs/Tab.tsx
@@ -19,10 +19,8 @@ const StyledTab = styled(CTab)`
   &:hover {
     cursor: pointer;
   }
-  /* If the text is used inside a inverted component, the text colour must also be inverted */
-  .inverted-background & {
-    color: var(--inverted-text);
-  }
+
+  color: var(--color-on-background);
 
   &:active {
     background: transparent;
@@ -40,27 +38,23 @@ const StyledTab = styled(CTab)`
 `
 
 export type TabProps = CTabProps & {
-  inverted?: boolean
   variant?: string
 }
 
-export const Tab = forwardRef<HTMLButtonElement, TabProps>(function CTab(
-  { inverted = false, children, variant = 'line', ...rest },
-  ref,
-) {
+export const Tab = forwardRef<HTMLButtonElement, TabProps>(function CTab({ children, variant = 'line', ...rest }, ref) {
   return (
     <StyledTab
       ref={ref}
       _selected={{
-        '--font-color': inverted ? 'var(--inverted-text)' : 'var(--default-text)',
-        borderColor: inverted ? 'var(--inverted-text)' : 'var(--default-text)',
+        '--font-color': 'var(--color-on-background)',
+        borderColor: 'var(--color-on-background)',
         borderBottom: '2px solid',
       }}
       variant={variant}
       {...rest}
       style={
         {
-          '--font-color': inverted ? 'var(--inverted-text)' : 'var(--default-text)',
+          '--font-color': 'var(--color-on-background)',
         } as CSSProperties
       }
     >
diff --git a/web/components/src/Tabs/Tabs.stories.tsx b/web/components/src/Tabs/Tabs.stories.tsx
index 8bec5a197..24a761bfb 100644
--- a/web/components/src/Tabs/Tabs.stories.tsx
+++ b/web/components/src/Tabs/Tabs.stories.tsx
@@ -38,9 +38,9 @@ export const WithDarkBackground: StoryFn<TabsProps> = () => (
   <BackgroundContainer background="Slate Blue">
     <Tabs>
       <Tabs.TabList>
-        <Tabs.Tab inverted>One</Tabs.Tab>
-        <Tabs.Tab inverted>Two</Tabs.Tab>
-        <Tabs.Tab inverted>Three</Tabs.Tab>
+        <Tabs.Tab>One</Tabs.Tab>
+        <Tabs.Tab>Two</Tabs.Tab>
+        <Tabs.Tab>Three</Tabs.Tab>
       </Tabs.TabList>
       <Tabs.TabPanels>
         <Tabs.TabPanel>
diff --git a/web/components/src/Text/Text.stories.tsx b/web/components/src/Text/Text.stories.tsx
index fed687bc0..b5d065984 100644
--- a/web/components/src/Text/Text.stories.tsx
+++ b/web/components/src/Text/Text.stories.tsx
@@ -29,7 +29,7 @@ export default {
   },
 } as Meta
 
-export const Default: StoryFn<TextProps> = (args) => (
+export const Default: StoryFn<TextProps> = (args: any) => (
   <Text {...args}>
     Dogger Bank Wind Farm and GE Renewable Energy have today, 22 September, announced contracts confirming the 13MW
     Haliade-X turbine for the Dogger Bank A and Dogger Bank B phases of the world’s largest offshore wind farm.
@@ -77,11 +77,11 @@ MultipleParagraphs.parameters = {
 
 export const InvertedText: StoryFn<TextProps> = () => (
   <DarkBackground>
-    <Text inverted>
+    <Text>
       This text has its color inverted by manually setting the inverted prop to true. Perfect for use on darker
       backgrounds.
     </Text>
-    <Text inverted>Note that this is handled automatically when using a BackgroundContainer.</Text>
+    <Text>Note that this is handled automatically when using a BackgroundContainer.</Text>
   </DarkBackground>
 )
 
diff --git a/web/components/src/Text/Text.tsx b/web/components/src/Text/Text.tsx
index ec17c2c3b..4c254d87d 100644
--- a/web/components/src/Text/Text.tsx
+++ b/web/components/src/Text/Text.tsx
@@ -5,7 +5,6 @@ import { StyledFigCaption } from '../FigureCaption'
 
 type StyledTextProps = {
   centered?: boolean
-  inverted?: boolean
 }
 
 const StyledText = styled(Typography)<StyledTextProps>`
@@ -28,16 +27,7 @@ const StyledText = styled(Typography)<StyledTextProps>`
     centered && {
       textAlign: 'center',
     }}
-
-  ${({ inverted }) =>
-    inverted && {
-      color: 'var(--inverted-text)',
-    }}
-
-  /* If the text is used inside a inverted component, the text colour must also be inverted */
-  .inverted-background & {
-    color: var(--inverted-text);
-  }
+  color: var(--color-on-background);
 `
 
 export type TextProps = {
@@ -46,7 +36,6 @@ export type TextProps = {
   bold?: boolean
   italic?: boolean
   centered?: boolean
-  inverted?: boolean
 } & HTMLAttributes<HTMLHeadingElement> &
   TypographyProps
 
@@ -66,13 +55,12 @@ const lineHeights = {
 }
 
 export const Text = forwardRef<HTMLDivElement, TextProps>(function Text(
-  { size = 'regular', lineHeight = '3', style, children, inverted = false, ...rest },
+  { size = 'regular', lineHeight = '3', style, children, ...rest },
   ref,
 ) {
   return (
     <StyledText
       ref={ref}
-      inverted={inverted}
       style={
         {
           ...style,
diff --git a/web/components/src/Topbar/Logo.tsx b/web/components/src/Topbar/Logo.tsx
index 5808e6430..708aa2e00 100644
--- a/web/components/src/Topbar/Logo.tsx
+++ b/web/components/src/Topbar/Logo.tsx
@@ -9,11 +9,9 @@ const StyledLogo = styled.svg`
   fill: var(--fill);
 `
 
-type LogoProps = {
-  inverted?: boolean
-} & SVGAttributes<SVGElement>
+type LogoProps = SVGAttributes<SVGElement>
 
-export const LogoSecondary = ({ inverted = false, style, ...rest }: LogoProps) => {
+export const LogoSecondary = ({ style, ...rest }: LogoProps) => {
   return (
     <StyledLogo
       viewBox="0 0 402 160"
@@ -22,7 +20,7 @@ export const LogoSecondary = ({ inverted = false, style, ...rest }: LogoProps) =
       aria-hidden
       style={
         {
-          '--fill': inverted ? 'var(--white-100)' : 'var(--energy-red-100)',
+          '--fill': 'var(--link-arrow-color)',
           ...style,
         } as CSSProperties
       }
@@ -41,13 +39,13 @@ export const LogoSecondary = ({ inverted = false, style, ...rest }: LogoProps) =
   )
 }
 
-export const LogoPrimary = ({ inverted = false, style, ...rest }: LogoProps) => (
+export const LogoPrimary = ({ style, ...rest }: LogoProps) => (
   <StyledLogo
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 283.46 233.13"
     style={
       {
-        '--fill': inverted ? 'var(--white)' : 'var(--energy-red-100)',
+        '--fill': 'var(--link-arrow-color)',
         ...style,
       } as CSSProperties
     }
diff --git a/web/components/utils/backgroundColours.tsx b/web/components/utils/backgroundColours.tsx
new file mode 100644
index 000000000..49db4c67f
--- /dev/null
+++ b/web/components/utils/backgroundColours.tsx
@@ -0,0 +1,41 @@
+import type { BackgroundColours } from '../../types/types'
+
+export type StyleVariants =
+  | '--bg-default'
+  | '--bg-moss-green'
+  | '--bg-moss-green-light'
+  | '--bg-spruce-wood'
+  | '--bg-mist-blue'
+  | '--bg-slate-blue'
+  | '--bg-mid-green'
+  | '--bg-mid-yellow'
+  | '--bg-mid-orange'
+  | '--bg-mid-blue'
+  | '--bg-slate-blue-95'
+
+function getContainerColor(backgroundTitle?: BackgroundColours) {
+  let styleVariant: StyleVariants = '--bg-default'
+  if (backgroundTitle === 'Slate Blue') {
+    styleVariant = '--bg-mid-blue'
+  } else if (backgroundTitle === 'White') {
+    styleVariant = '--bg-default'
+  } else {
+    styleVariant = `--bg-${backgroundTitle?.replace(/\s/g, '-').toLowerCase()}` as StyleVariants
+  }
+  return styleVariant
+}
+
+function getColorOnContainer(backgroundTitle?: BackgroundColours) {
+  return isInvertedColor(backgroundTitle) ? '--inverted-text' : '--default-text'
+}
+
+function isInvertedColor(background?: BackgroundColours): boolean {
+  const color = getContainerColor(background)
+  return isInvertedStyle(color)
+}
+
+function isInvertedStyle(styleVariant: StyleVariants): boolean {
+  return ['--bg-slate-blue', '--bg-mid-blue', '--bg-slate-blue-95'].includes(styleVariant)
+}
+
+export { getContainerColor, isInvertedStyle, getColorOnContainer, isInvertedColor }
diff --git a/web/components/utils/index.ts b/web/components/utils/index.ts
index 8edda2d5d..52faac60c 100644
--- a/web/components/utils/index.ts
+++ b/web/components/utils/index.ts
@@ -1,2 +1,3 @@
 export * from './templates'
 export * as Tokens from './tokens'
+export * from './backgroundColours'
diff --git a/web/lib/hooks/useSharedTitleStyles.ts b/web/lib/hooks/useSharedTitleStyles.ts
index 5925ef1c0..e1b0da23a 100644
--- a/web/lib/hooks/useSharedTitleStyles.ts
+++ b/web/lib/hooks/useSharedTitleStyles.ts
@@ -2,19 +2,16 @@
  * This hook returns a style object for the shared title
  * accordingly to its next component
  */
-import { HeroTypes, TextBlockData, BackgroundColours, ContentType } from '../../types'
+import { BackgroundContainerProps } from '@components/Backgrounds'
+import { HeroTypes, TextBlockData, ContentType } from '../../types'
 
-export type TitleStyles = {
-  negativeBottomSpace: boolean
-  backgroundColor: BackgroundColours
-}
+export type TitleStyles = BackgroundContainerProps
 
 const BG_DEFAULT = 'White'
 
 function useSharedTitleStyles(heroType?: HeroTypes, nextContent?: ContentType): TitleStyles {
   const defaultValue: TitleStyles = {
-    negativeBottomSpace: false,
-    backgroundColor: BG_DEFAULT,
+    background: BG_DEFAULT,
   }
 
   if (heroType === HeroTypes.DEFAULT) {
@@ -24,8 +21,7 @@ function useSharedTitleStyles(heroType?: HeroTypes, nextContent?: ContentType):
   switch (nextContent?.type) {
     case 'textBlock':
       return {
-        negativeBottomSpace: true,
-        backgroundColor: (nextContent as TextBlockData)?.designOptions?.background || BG_DEFAULT,
+        background: (nextContent as TextBlockData)?.designOptions?.background || BG_DEFAULT,
       }
     default:
       return defaultValue
diff --git a/web/pageComponents/cards/NewsCard.tsx b/web/pageComponents/cards/NewsCard.tsx
index 4231df975..1a7b64dbb 100644
--- a/web/pageComponents/cards/NewsCard.tsx
+++ b/web/pageComponents/cards/NewsCard.tsx
@@ -9,7 +9,7 @@ const { Title, Header, Action, Arrow, Media, CardLink, Text, Eyebrow } = Card
 
 const StyledCard = styled(Card)`
   --card-gap: var(--space-large);
-  height: 100%;
+  height: var(--height);
   @media (max-width: 800px) {
     --card-maxWidth: 300px;
   }
diff --git a/web/pageComponents/cards/SimpleCard.tsx b/web/pageComponents/cards/SimpleCard.tsx
index 45bbb53ce..e2c5e3e1a 100644
--- a/web/pageComponents/cards/SimpleCard.tsx
+++ b/web/pageComponents/cards/SimpleCard.tsx
@@ -20,7 +20,7 @@ const RatioBox = styled.div`
 `
 
 const AspectImagePlaceholder = styled.div`
-  background-color: var(--ui-background-default);
+  background-color: var(--bg-default);
   position: absolute;
   top: 0;
   left: 0;
diff --git a/web/pageComponents/cards/TopicPageCard.tsx b/web/pageComponents/cards/TopicPageCard.tsx
index 62009f315..d0fa4380f 100644
--- a/web/pageComponents/cards/TopicPageCard.tsx
+++ b/web/pageComponents/cards/TopicPageCard.tsx
@@ -11,7 +11,7 @@ import type { CardData } from '../../types/types'
 const { Title, Header, Text, Action, Arrow, Media, CardLink } = Card
 
 const StyledCard = styled(Card)`
-  height: var(--height);
+  --card-height: var(--height);
   --card-gap: var(--space-large);
 `
 
diff --git a/web/pageComponents/pageTemplates/MagazineIndexPage.tsx b/web/pageComponents/pageTemplates/MagazineIndexPage.tsx
index b0f7d553e..4ac74784e 100644
--- a/web/pageComponents/pageTemplates/MagazineIndexPage.tsx
+++ b/web/pageComponents/pageTemplates/MagazineIndexPage.tsx
@@ -79,7 +79,7 @@ const MagazineIndexPage = ({ isServerRendered = false, locale, pageData, slug, u
       <main>
         <SharedBanner title={title} hero={hero} hideImageCaption={true} />
         {pageData?.hero.type !== HeroTypes.DEFAULT && title && (
-          <SharedTitle title={title} styles={{ backgroundColor: ingress.background, negativeBottomSpace: true }} />
+          <SharedTitle sharedTitle={title} background={ingress.background} />
         )}
         <BackgroundContainer background={ingress.background}>
           <Intro>
diff --git a/web/pageComponents/pageTemplates/MagazinePage.tsx b/web/pageComponents/pageTemplates/MagazinePage.tsx
index 235c8d01e..e04cdb569 100644
--- a/web/pageComponents/pageTemplates/MagazinePage.tsx
+++ b/web/pageComponents/pageTemplates/MagazinePage.tsx
@@ -12,13 +12,16 @@ import useSharedTitleStyles from '../../lib/hooks/useSharedTitleStyles'
 const MagazinePageLayout = styled.main`
   /* The neverending spacing story... If two sections with the same background colour
   follows each other we want less spacing */
-  .background-one + .background-one,
-  .background-two + .background-two,
-  .background-three + .background-three,
-  .background-four + .background-four,
-  .background-five + .background-five,
-  .background-none + .background-none,
-  .background-image + .background-none {
+  .background--bg-mid-blue + .background--bg-mid-blue,
+  .background--bg-default + .background--bg-default,
+  .background--bg-moss-green + .background--bg-moss-green,
+  .background--bg-moss-green-light + .background--bg-moss-green-light,
+  .background--bg-spruce-wood + .background--bg-spruce-wood,
+  .background--bg-mist-blue + .background--bg-mist-blue,
+  .background--bg-slate-blue + .background--bg-slate-blue,
+  .background--bg-mid-yellow + .background--bg-mid-yellow,
+  .background--bg-mid-orange + .background--bg-mid-orange,
+  .background--bg-mid-green + .background--bg-mid-green {
     /* The teaser component uses an article element, so lets avoid that.
     Would be more robust if we add a container for the padding :/ */
     > section,
@@ -68,7 +71,9 @@ const MagazinePage = ({ data }: MagazinePageProps) => {
       <MagazinePageLayout>
         <SharedBanner title={data?.title} hero={data?.hero} hideImageCaption={true} />
         {tags && <MagazineTagBar tags={tags} defaultActive={false} href={parentSlug} onClick={handleClickTag} />}
-        {data.hero.type !== HeroTypes.DEFAULT && <SharedTitle title={data.title} styles={titleStyles} />}
+        {data.hero.type !== HeroTypes.DEFAULT && (
+          <SharedTitle sharedTitle={data.title} background={titleStyles.background} />
+        )}
         <PageContent data={data} />
         {!hideFooterComponent && footerComponent?.data && <Teaser data={footerComponent.data} />}
       </MagazinePageLayout>
diff --git a/web/pageComponents/pageTemplates/News.tsx b/web/pageComponents/pageTemplates/News.tsx
index b82dfe575..a38d3a96e 100644
--- a/web/pageComponents/pageTemplates/News.tsx
+++ b/web/pageComponents/pageTemplates/News.tsx
@@ -1,6 +1,6 @@
 import { useRouter } from 'next/router'
 import { NewsArticleJsonLd, NextSeo } from 'next-seo'
-import { Heading, FormattedDateTime } from '@components'
+import { Heading, FormattedDateTime, BackgroundContainer } from '@components'
 import styled from 'styled-components'
 import { Icon } from '@equinor/eds-core-react'
 import { calendar } from '@equinor/eds-icons'
@@ -23,8 +23,7 @@ const NewsLayout = styled.div`
   margin-bottom: var(--space-4xLarge);
 `
 
-const Header = styled.div`
-  background: var(--slate-blue-95);
+const Header = styled(BackgroundContainer)`
   padding: var(--banner-paddingVertical) var(--layout-paddingHorizontal-medium);
 `
 
@@ -120,8 +119,15 @@ const Content = styled.div`
     margin-top: calc(-1 * var(--space-3xLarge));
   }
 
-  .fact-box:not(.fact-box--image).fact-box--cold + .fact-box.fact-box--cold,
-  .fact-box:not(.fact-box--image).fact-box--warm + .fact-box.fact-box--warm {
+  .fact-box:not(.fact-box--image).fact-box--bg-moss-green + .fact-box.fact-box--bg-moss-green,
+  .fact-box:not(.fact-box--image).fact-box--bg-slate-blue + .fact-box.fact-box--bg-slate-blue,
+  .fact-box:not(.fact-box--image).fact-box--bg-mist-blue + .fact-box.fact-box--bg-mist-blue,
+  .fact-box:not(.fact-box--image).fact-box--bg-moss-green-light + .fact-box.fact-box--bg-moss-green-light,
+  .fact-box:not(.fact-box--image).fact-box--bg-spruce-wood + .fact-box.fact-box--bg-spruce-wood,
+  .fact-box:not(.fact-box--image).fact-box--bg-mid-blue + .fact-box.fact-box--bg-mid-blue,
+  .fact-box:not(.fact-box--image).fact-box--bg-mid-green + .fact-box.fact-box--bg-mid-green,
+  .fact-box:not(.fact-box--image).fact-box--bg-mid-orange + .fact-box.fact-box--bg-mid-orange,
+  .fact-box:not(.fact-box--image).fact-box--bg-mid-yellow + .fact-box.fact-box--bg-mid-yellow {
     margin-top: calc(-2 * var(--space-3xLarge));
   }
 `
@@ -217,9 +223,9 @@ const NewsPage = ({ data: news }: ArticleProps) => {
       <main>
         <article>
           <NewsLayout>
-            <Header>
+            <Header background={'Slate Blue 95'}>
               <HeaderInner>
-                <StyledHeading level="h1" size="3xl" inverted>
+                <StyledHeading level="h1" size="3xl">
                   {title}
                 </StyledHeading>
                 {publishDateTime && (
diff --git a/web/pageComponents/pageTemplates/TopicPage.tsx b/web/pageComponents/pageTemplates/TopicPage.tsx
index fedec0d57..d0feff019 100644
--- a/web/pageComponents/pageTemplates/TopicPage.tsx
+++ b/web/pageComponents/pageTemplates/TopicPage.tsx
@@ -10,17 +10,22 @@ import { Breadcrumbs } from '../topicPages/Breadcrumbs'
 const TopicPageLayout = styled.main`
   /* The neverending spacing story... If two sections with the same background colour
   follows each other we want less spacing */
-  .background-one + .background-one,
-  .background-two + .background-two,
-  .background-three + .background-three,
-  .background-four + .background-four,
-  .background-five + .background-five,
-  .background-none + .background-none,
-  .background-image + .background-none {
+  .background--bg-mid-blue + .background--bg-mid-blue,
+  .background--bg-default + .background--bg-default,
+  .background--bg-moss-green + .background--bg-moss-green,
+  .background--bg-moss-green-light + .background--bg-moss-green-light,
+  .background--bg-spruce-wood + .background--bg-spruce-wood,
+  .background--bg-mist-blue + .background--bg-mist-blue,
+  .background--bg-slate-blue + .background--bg-slate-blue,
+  .background--bg-mid-yellow + .background--bg-mid-yellow,
+  .background--bg-mid-orange + .background--bg-mid-orange,
+  .background--bg-mid-green + .background--bg-mid-green {
     /* The teaser component uses an article element, so lets avoid that.
     Would be more robust if we add a container for the padding :/ */
     > section,
     > figure,
+    > ol,
+    > h1,
     > div:first-child {
       /*  padding-top: calc(var(--space-3xLarge) / 2); */
       padding-top: 0;
@@ -43,21 +48,23 @@ const TopicPage = ({ data }: TopicPageProps) => {
         pageTitle={data?.title}
       />
       <TopicPageLayout>
-        <SharedBanner title={data.title} hero={data.hero} captionBg={titleStyles.backgroundColor} />
+        <SharedBanner title={data.title} hero={data.hero} captionBg={titleStyles.background} />
         {breadcrumbs && breadcrumbs?.enableBreadcrumbs && (
           <Breadcrumbs
+            background={titleStyles.background}
             slug={data?.slug}
             useCustomBreadcrumbs={breadcrumbs?.useCustomBreadcrumbs}
             defaultBreadcrumbs={breadcrumbs?.defaultBreadcrumbs}
             customBreadcrumbs={breadcrumbs?.customBreadcrumbs}
             containerStyles={{
               hasTopMargin: data.hero.type !== 'default',
-              backgroundColor: titleStyles.backgroundColor,
             }}
           />
         )}
 
-        {data.hero.type !== HeroTypes.DEFAULT && <SharedTitle title={data.title} styles={titleStyles} />}
+        {data.hero.type !== HeroTypes.DEFAULT && (
+          <SharedTitle sharedTitle={data.title} background={titleStyles.background} />
+        )}
         <PageContent data={data} />
       </TopicPageLayout>
     </>
diff --git a/web/pageComponents/pageTemplates/newsroom/FilterHeader.tsx b/web/pageComponents/pageTemplates/newsroom/FilterHeader.tsx
index b5c523890..67b7d7b0a 100644
--- a/web/pageComponents/pageTemplates/newsroom/FilterHeader.tsx
+++ b/web/pageComponents/pageTemplates/newsroom/FilterHeader.tsx
@@ -29,9 +29,7 @@ const StyledTypography = styled(Typography)`
   padding-top: var(--space-2);
   text-align: left;
 
-  .inverted-background & {
-    color: var(--inverted-text);
-  }
+  color: var(--color-on-background);
 `
 
 const FilterHeader = ({ label }: { label: string }) => {
diff --git a/web/pageComponents/pageTemplates/shared/SharedTitle.tsx b/web/pageComponents/pageTemplates/shared/SharedTitle.tsx
index 9216bf4e8..34e01d6b8 100644
--- a/web/pageComponents/pageTemplates/shared/SharedTitle.tsx
+++ b/web/pageComponents/pageTemplates/shared/SharedTitle.tsx
@@ -1,47 +1,21 @@
 import styled from 'styled-components'
 import TitleText from '../../shared/portableText/TitleText'
 import type { PortableTextBlock } from '@portabletext/types'
-import type { TitleStyles } from '../../../lib/hooks/useSharedTitleStyles'
-import type { BackgroundColours } from 'types'
-import { getBackgroundByColorName, getFontColorForBg } from '@components'
+import { BackgroundContainer, BackgroundContainerProps } from '@components/Backgrounds'
 
 type SharedTitleProps = {
-  title: PortableTextBlock[]
-  styles?: TitleStyles
-}
-
-const TitleWrapper = styled.div<{ styles?: TitleStyles }>`
-  padding: var(--space-xLarge) var(--layout-paddingHorizontal-large) 0 var(--layout-paddingHorizontal-large);
-
-  ${({ styles }) => {
-    const bottomSpace = styles?.negativeBottomSpace
-      ? {
-          'margin-bottom': 'calc(-1 * var(--space-large))',
-        }
-      : {
-          'padding-bottom': 'var(--space-xLarge)',
-        }
-
-    // Title's background color is defined by its following component
-    const bgColor = styles?.backgroundColor && {
-      background: getBackgroundByColorName(styles.backgroundColor),
-    }
-    return { ...bottomSpace, ...bgColor }
-  }}
-`
+  sharedTitle: PortableTextBlock[]
+} & BackgroundContainerProps
 
-const StyledHeading = styled(TitleText)<{ $bgColor?: BackgroundColours }>`
-  max-width: 1186px; /* 1920 - (2 * 367) */
-  margin-left: auto;
-  margin-right: auto;
-  color: ${({ $bgColor }) => getFontColorForBg($bgColor)};
+const StyledHeading = styled(TitleText)`
+  padding: var(--space-xLarge) var(--layout-paddingHorizontal-large);
 `
 
-const SharedTitle = ({ title, styles }: SharedTitleProps) => {
+const SharedTitle = ({ sharedTitle, background }: SharedTitleProps) => {
   return (
-    <TitleWrapper styles={styles}>
-      <StyledHeading $bgColor={styles?.backgroundColor} value={title} level="h1" size="3xl" />
-    </TitleWrapper>
+    <BackgroundContainer background={background}>
+      <StyledHeading value={sharedTitle} level="h1" size="3xl" />
+    </BackgroundContainer>
   )
 }
 
diff --git a/web/pageComponents/search/EventHit.tsx b/web/pageComponents/search/EventHit.tsx
index 3b3f56ba1..c24e88444 100644
--- a/web/pageComponents/search/EventHit.tsx
+++ b/web/pageComponents/search/EventHit.tsx
@@ -12,13 +12,14 @@ const TextSnippet = styled.p`
   margin: 0;
   font-size: var(--typeScale-00);
   line-height: var(--lineHeight-3);
-  color: var(--inverted-text);
+  color: var(--color-on-background);
 `
 
 const StyledFormattedDate = styled(FormattedDate)`
   font-size: var(--typeScale-0);
   letter-spacing: 1px;
   display: block;
+  color: var(--color-on-background);
 `
 
 type EventResultHit = {
@@ -48,7 +49,7 @@ const EventHit = ({ hit }: HitProps) => {
     <article>
       <StyledHitLink href={slug}>
         {eventDate && <StyledFormattedDate datetime={eventDate} uppercase></StyledFormattedDate>}
-        <HitHeading level="h2" size="sm" inverted>
+        <HitHeading level="h2" size="sm">
           <Highlight hit={hit} attribute="title" />
         </HitHeading>
         <TextSnippet>
diff --git a/web/pageComponents/search/Hits.tsx b/web/pageComponents/search/Hits.tsx
index 229b7b68d..65c9dfb23 100644
--- a/web/pageComponents/search/Hits.tsx
+++ b/web/pageComponents/search/Hits.tsx
@@ -43,7 +43,7 @@ const Hits = ({ hitComponent: Hit }: HitsProps) => {
   if (!hits || hits.length === 0) {
     return (
       <WarningContainer>
-        <UppercaseHeading level="h2" size="sm" inverted>
+        <UppercaseHeading level="h2" size="sm">
           <FormattedMessage id="search_no_results_heading" defaultMessage="Nothing found" />
         </UppercaseHeading>
         <WarningText>
diff --git a/web/pageComponents/search/MagazineHit.tsx b/web/pageComponents/search/MagazineHit.tsx
index e146e265e..103075adb 100644
--- a/web/pageComponents/search/MagazineHit.tsx
+++ b/web/pageComponents/search/MagazineHit.tsx
@@ -13,7 +13,7 @@ const TextSnippet = styled.p`
   margin: 0;
   font-size: var(--typeScale-0);
   line-height: var(--lineHeight-3);
-  color: var(--inverted-text);
+  color: var(--color-on-background);
 `
 
 const buildDisplayURL = (slug: string, locale: string | undefined): string => {
@@ -53,7 +53,7 @@ const MagazineHit = ({ hit }: HitProps) => {
   return (
     <article>
       <StyledHitLink href={slug}>
-        <HitHeading level="h2" size="sm" inverted>
+        <HitHeading level="h2" size="sm">
           <Highlight hit={hit} attribute="pageTitle" />
         </HitHeading>
         {hit.title && (
diff --git a/web/pageComponents/search/NewsHit.tsx b/web/pageComponents/search/NewsHit.tsx
index 707ebbafb..68fede26b 100644
--- a/web/pageComponents/search/NewsHit.tsx
+++ b/web/pageComponents/search/NewsHit.tsx
@@ -13,6 +13,7 @@ const StyledFormattedDate = styled(FormattedDate)`
   font-size: var(--typeScale-00);
   letter-spacing: 1px;
   display: block;
+  color: var(--color-on-background);
 `
 
 /* @TODO: Let's use the Text component if the margin is removed */
@@ -20,7 +21,7 @@ const TextSnippet = styled.p`
   margin: 0;
   font-size: var(--typeScale-0);
   line-height: var(--lineHeight-3);
-  color: var(--inverted-text);
+  color: var(--color-on-background);
 `
 
 const buildDisplayURL = (slug: string, locale: string | undefined): string => {
@@ -61,7 +62,7 @@ const NewsHit = ({ hit }: HitProps) => {
     <article>
       <StyledHitLink href={slug}>
         {hit.publishDateTime && <StyledFormattedDate datetime={hit.publishDateTime} uppercase />}
-        <HitHeading level="h2" size="sm" inverted>
+        <HitHeading level="h2" size="sm">
           <Highlight hit={hit} attribute="pageTitle" />
         </HitHeading>
         {hit.ingress && (
diff --git a/web/pageComponents/search/Search.tsx b/web/pageComponents/search/Search.tsx
index af0244c4a..5e7974d51 100644
--- a/web/pageComponents/search/Search.tsx
+++ b/web/pageComponents/search/Search.tsx
@@ -172,7 +172,7 @@ const Search = () => {
         <SearchBox />
         <SearchResults resultsRef={resultsRef} items={indices} />
         <PaginationContextProvider defaultRef={resultsRef}>
-          <StyledPagination padding={padding} hitsPerPage={5} inverted />
+          <StyledPagination padding={padding} hitsPerPage={5} />
         </PaginationContextProvider>
       </SearchContextProvider>
     </InstantSearch>
diff --git a/web/pageComponents/search/SearchResults.tsx b/web/pageComponents/search/SearchResults.tsx
index b81a8d617..315241913 100644
--- a/web/pageComponents/search/SearchResults.tsx
+++ b/web/pageComponents/search/SearchResults.tsx
@@ -85,7 +85,7 @@ const SearchResults = (props: SearchResultsProps) => {
           <Tabs index={activeTab || 0} onChange={handleTabChange}>
             <TabList>
               {options.map((item) => (
-                <Tab inverted key={item.label}>
+                <Tab key={item.label}>
                   <TabText>
                     {item.label}
                     <HitsContainer>
diff --git a/web/pageComponents/search/TopicHit.tsx b/web/pageComponents/search/TopicHit.tsx
index c1a574ea8..c85685864 100644
--- a/web/pageComponents/search/TopicHit.tsx
+++ b/web/pageComponents/search/TopicHit.tsx
@@ -11,7 +11,7 @@ const TextSnippet = styled.p`
   margin: 0;
   font-size: var(--typeScale-0);
   line-height: var(--lineHeight-3);
-  color: var(--inverted-text);
+  color: var(--color-on-background);
 `
 
 type TopicResultHit = {
@@ -38,7 +38,7 @@ const TopicHit = ({ hit }: HitProps) => {
   return (
     <article>
       <StyledHitLink href={slug}>
-        <HitHeading level="h2" size="sm" inverted>
+        <HitHeading level="h2" size="sm">
           <Highlight hit={hit} attribute="pageTitle" />
         </HitHeading>
         {hit.title && (
diff --git a/web/pageComponents/search/hit/HitHeading.tsx b/web/pageComponents/search/hit/HitHeading.tsx
index fbb54c361..ea5d4f5c3 100644
--- a/web/pageComponents/search/hit/HitHeading.tsx
+++ b/web/pageComponents/search/hit/HitHeading.tsx
@@ -22,7 +22,7 @@ const StyledHitHeading = styled(Heading)`
 `
 const HitHeading = ({ children, ...rest }: HeadingProps) => {
   return (
-    <StyledHitHeading level="h2" size="sm" inverted {...rest}>
+    <StyledHitHeading level="h2" size="sm" {...rest}>
       {children}
     </StyledHitHeading>
   )
diff --git a/web/pageComponents/search/hit/HitLink.tsx b/web/pageComponents/search/hit/HitLink.tsx
index 15fadaeb8..949553727 100644
--- a/web/pageComponents/search/hit/HitLink.tsx
+++ b/web/pageComponents/search/hit/HitLink.tsx
@@ -9,7 +9,6 @@ import { default as NextLink } from 'next/link'
 export const StyledHitLink = styled(NextLink)`
   padding: var(--space-medium) 0;
   display: block;
-  color: var(--inverted-text);
   cursor: pointer;
   outline: none;
   text-decoration: none;
diff --git a/web/pageComponents/shared/Header.tsx b/web/pageComponents/shared/Header.tsx
index dbe433de8..235577f24 100644
--- a/web/pageComponents/shared/Header.tsx
+++ b/web/pageComponents/shared/Header.tsx
@@ -3,7 +3,7 @@ import styled, { createGlobalStyle } from 'styled-components'
 import { CSSProperties } from 'react'
 import { useRouter } from 'next/router'
 import { default as NextLink } from 'next/link'
-import { Topbar, Button } from '@components'
+import { Topbar, Button, BackgroundContainer } from '@components'
 import { AllSlugsType, LocalizationSwitch } from './LocalizationSwitch'
 import type { MenuData, SimpleMenuData } from '../../types/types'
 import SiteMenu from './siteMenu/SiteMenu'
@@ -159,42 +159,44 @@ const Header = ({ slugs, menuData }: HeaderProps) => {
     <HeaderRelative>
       <HeadTags slugs={slugs} />
       <TopbarOffset />
-      <Topbar>
-        <TopbarContainer>
-          <LogoLinkInGrid />
-          <ControlsContainer
-            style={
-              {
-                '--columns': columns,
-              } as CSSProperties
-            }
-          >
-            {hasSearch && (
-              <ControlChild>
-                <NextLink href="/search">
-                  <StyledSearchButton variant="ghost_icon" aria-expanded="true" aria-label="Search">
-                    <Icon size={24} data={search} />
-                  </StyledSearchButton>
-                </NextLink>
-              </ControlChild>
-            )}
-            {hasMoreThanOneLanguage && (
-              <LocalizationSwitch activeLocale={localization.activeLocale} allSlugs={validSlugs} />
-            )}
-            {shouldDisplayAllSites ? (
-              <AllSites />
-            ) : menuData && Flags.HAS_FANCY_MENU ? (
-              <ControlChild>
-                <SiteMenu data={menuData as MenuData} />
-              </ControlChild>
-            ) : (
-              <ControlChild>
-                <SimpleSiteMenu data={menuData as SimpleMenuData} />
-              </ControlChild>
-            )}
-          </ControlsContainer>
-        </TopbarContainer>
-      </Topbar>
+      <BackgroundContainer>
+        <Topbar>
+          <TopbarContainer>
+            <LogoLinkInGrid />
+            <ControlsContainer
+              style={
+                {
+                  '--columns': columns,
+                } as CSSProperties
+              }
+            >
+              {hasSearch && (
+                <ControlChild>
+                  <NextLink href="/search">
+                    <StyledSearchButton variant="ghost_icon" aria-expanded="true" aria-label="Search">
+                      <Icon size={24} data={search} />
+                    </StyledSearchButton>
+                  </NextLink>
+                </ControlChild>
+              )}
+              {hasMoreThanOneLanguage && (
+                <LocalizationSwitch activeLocale={localization.activeLocale} allSlugs={validSlugs} />
+              )}
+              {shouldDisplayAllSites ? (
+                <AllSites />
+              ) : menuData && Flags.HAS_FANCY_MENU ? (
+                <ControlChild>
+                  <SiteMenu data={menuData as MenuData} />
+                </ControlChild>
+              ) : (
+                <ControlChild>
+                  <SimpleSiteMenu data={menuData as SimpleMenuData} />
+                </ControlChild>
+              )}
+            </ControlsContainer>
+          </TopbarContainer>
+        </Topbar>
+      </BackgroundContainer>
     </HeaderRelative>
   )
 }
diff --git a/web/pageComponents/shared/Hero/DefaultHero.tsx b/web/pageComponents/shared/Hero/DefaultHero.tsx
index 0af0c2c01..1e432a9ca 100644
--- a/web/pageComponents/shared/Hero/DefaultHero.tsx
+++ b/web/pageComponents/shared/Hero/DefaultHero.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import DefaulHeroImage from './DefaultHeroImage'
 import { PortableTextBlock } from '@portabletext/types'
 import TitleText from '../portableText/TitleText'
+import { BackgroundContainer } from '@components/Backgrounds'
 
 const StyledHeading = styled(TitleText)`
   max-width: 1186px; /* 1920 - (2 * 367) */
@@ -26,9 +27,7 @@ const HeroBanner = styled.div`
   padding: var(--space-xLarge) var(--layout-paddingHorizontal-medium);
 `
 
-const ImageWrapper = styled.div.attrs(() => ({
-  className: 'background-image',
-}))`
+const ImageWrapper = styled(BackgroundContainer)`
   padding: 0 var(--layout-paddingHorizontal-small) var(--space-3xLarge) var(--layout-paddingHorizontal-small);
   max-width: 1920px;
   margin-left: auto;
diff --git a/web/pageComponents/shared/LogoLink.tsx b/web/pageComponents/shared/LogoLink.tsx
index e48c11af0..5c2822679 100644
--- a/web/pageComponents/shared/LogoLink.tsx
+++ b/web/pageComponents/shared/LogoLink.tsx
@@ -15,11 +15,6 @@ const StyledLogoLink = styled(NextLink)<LogoLinkProps>`
   outline: none;
   &[data-focus-visible-added]:focus {
     ${outlineTemplate(outline)}
-
-    ${({ inverted }) =>
-      inverted && {
-        outlineColor: 'var(--mist-blue-100)',
-      }}
   }
 `
 
@@ -30,14 +25,12 @@ const AlignedLogoSecondary = styled(LogoSecondary)`
   margin-top: -12%;
 `
 
-type LogoLinkProps = {
-  inverted?: boolean
-} & AnchorHTMLAttributes<HTMLAnchorElement>
+type LogoLinkProps = AnchorHTMLAttributes<HTMLAnchorElement>
 
-export const LogoLink = ({ inverted = false, ...rest }: LogoLinkProps) => {
+export const LogoLink = ({ ...rest }: LogoLinkProps) => {
   return (
     <StyledLogoLink href="/" aria-label="Equinor home page" {...rest} className="logo">
-      <AlignedLogoSecondary inverted={inverted} />
+      <AlignedLogoSecondary />
     </StyledLogoLink>
   )
 }
diff --git a/web/pageComponents/shared/iframe/RequestConsentContainer.tsx b/web/pageComponents/shared/iframe/RequestConsentContainer.tsx
index 3371b1615..ec1aea333 100644
--- a/web/pageComponents/shared/iframe/RequestConsentContainer.tsx
+++ b/web/pageComponents/shared/iframe/RequestConsentContainer.tsx
@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { Text, Button, Heading } from '@components'
+import { Text, Button, Heading, BackgroundContainer } from '@components'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { useRouter } from 'next/router'
 import { defaultLanguage } from '../../../languages'
@@ -35,7 +35,7 @@ const StyledDiv = styled.section`
   }
 `
 
-const CookieHeader = styled.div`
+const CookieHeader = styled(BackgroundContainer)`
   grid-area: heading;
   padding: var(--space-medium) var(--space-large);
   padding-left: var(--icon-column-width);
@@ -58,7 +58,7 @@ const SVG = styled.svg`
   }
 `
 
-const Content = styled.div`
+const Content = styled(BackgroundContainer)`
   grid-area: text;
   padding-right: var(--space-medium);
   word-break: break-word;
@@ -69,15 +69,6 @@ const LeftAlignedButton = styled(Button)`
   text-align: left;
 `
 
-const StyledText = styled(Text)`
-  /*  We don't want this text to be white even when the background container is
-  dark because the text is still on white background. It's an override, so a good use
-  case for important */
-  .inverted-background & {
-    color: var(--default-text) !important;
-  }
-`
-
 type RequestConsentContainerProps = {
   hasSectionTitle?: boolean
   cookiePolicy: string
@@ -105,8 +96,8 @@ const RequestConsentContainer = ({ hasSectionTitle = true, cookiePolicy }: Reque
       : intl.formatMessage({ id: 'cookie_type_marketing', defaultMessage: 'marketing' })
   return (
     <StyledDiv>
-      <CookieHeader>
-        <Heading inverted size="lg" level={hasSectionTitle ? 'h3' : 'h2'}>
+      <CookieHeader background={'Slate Blue 95'}>
+        <Heading size="lg" level={hasSectionTitle ? 'h3' : 'h2'}>
           <FormattedMessage id="cookie_consent_header" defaultMessage="Accept Cookies" />
         </Heading>
       </CookieHeader>
@@ -152,8 +143,8 @@ const RequestConsentContainer = ({ hasSectionTitle = true, cookiePolicy }: Reque
           />
         </SVG>
       </Icon>
-      <Content>
-        <StyledText>
+      <Content background={'White'}>
+        <Text>
           <FormattedMessage
             id="cookie_consent"
             defaultMessage="Cookie settings"
@@ -161,7 +152,7 @@ const RequestConsentContainer = ({ hasSectionTitle = true, cookiePolicy }: Reque
               typeOfCookies: typeOfCookie,
             }}
           />
-        </StyledText>
+        </Text>
         <LeftAlignedButton onClick={() => handleCookiebotRenew(router?.locale)} color="secondary" variant="outlined">
           <FormattedMessage id="cookie_settings" defaultMessage="Cookie settings" />
         </LeftAlignedButton>
diff --git a/web/pageComponents/shared/image/StyledCaption.tsx b/web/pageComponents/shared/image/StyledCaption.tsx
index 842671610..be254d136 100644
--- a/web/pageComponents/shared/image/StyledCaption.tsx
+++ b/web/pageComponents/shared/image/StyledCaption.tsx
@@ -1,33 +1,25 @@
-import { BackgroundColours, CaptionData } from '../../../types'
+import { CaptionData } from '../../../types'
 import styled from 'styled-components'
 import { Caption } from './Caption'
-import { getBackgroundByColorName, getFontColorForBg } from '@components'
+import { BackgroundContainer, BackgroundContainerProps } from '@components'
 
-type CaptionProps = CaptionData & { background?: BackgroundColours }
+type CaptionProps = CaptionData & BackgroundContainerProps
 
-const CaptionWithPadding = styled(Caption)<{ $bgColor?: BackgroundColours }>`
+const CaptionWithPadding = styled(Caption)`
   max-width: var(--maxViewportWidth);
-  padding: 0 var(--layout-paddingHorizontal-small);
+  padding: 0 var(--layout-paddingHorizontal-small) var(--space-xLarge) var(--layout-paddingHorizontal-small);
   margin-left: auto;
   margin-right: auto;
-  color: ${({ $bgColor }) => getFontColorForBg($bgColor)};
 `
-const CaptionWrapper = styled.div<{ background?: BackgroundColours }>`
+const CaptionWrapper = styled(BackgroundContainer)`
   display: inline-block;
   width: 100%;
-  ${({ background }) => {
-    // Captions's background color is defined by its following component
-    const bgColor = background && {
-      background: getBackgroundByColorName(background),
-    }
-    return { ...bgColor }
-  }}
 `
 
 export const StyledCaption = ({ attribution, caption, background }: CaptionProps) => {
   return caption || attribution ? (
     <CaptionWrapper background={background}>
-      <CaptionWithPadding $bgColor={background} attribution={attribution} caption={caption} />
+      <CaptionWithPadding attribution={attribution} caption={caption} />
     </CaptionWrapper>
   ) : (
     <></>
diff --git a/web/pageComponents/shared/portableText/components/news/Fact.tsx b/web/pageComponents/shared/portableText/components/news/Fact.tsx
index c9ce90e23..79757a5b2 100644
--- a/web/pageComponents/shared/portableText/components/news/Fact.tsx
+++ b/web/pageComponents/shared/portableText/components/news/Fact.tsx
@@ -2,10 +2,10 @@ import { toPlainText } from '@portabletext/react'
 import Img from 'next/image'
 import styled from 'styled-components'
 import RichText from '../../RichText'
-import { FactBox, Heading } from '@components'
-import type { FactBackground, FactImagePosition } from '@components'
+import { FactBox, getContainerColor, Heading, StyleVariants } from '@components'
+import type { FactImagePosition } from '@components'
 import type { PortableTextBlock } from '@portabletext/types'
-import type { ImageWithAlt } from '../../../../../types/types'
+import type { BackgroundColours, ImageWithAlt } from '../../../../../types/types'
 
 import { urlFor } from '../../../../../common/helpers'
 
@@ -42,19 +42,12 @@ type BlockProps = {
 export const Fact = (block: BlockProps) => {
   const { value } = block
   const { title, content, background, image, imagePosition, dynamicHeight } = value
-  const bgTitle = background ? background?.title : 'none'
+  const bgTitle = (background ? background?.title : 'White') as BackgroundColours
   if (!content || content.length === 0) {
     return null
   }
 
-  let backgroundColor: FactBackground = 'none'
-  if (bgTitle === 'White') {
-    backgroundColor = 'none'
-  } else if (bgTitle === 'Moss Green') {
-    backgroundColor = 'cold'
-  } else if (bgTitle === 'Spruce Wood') {
-    backgroundColor = 'warm'
-  }
+  const backgroundColor: StyleVariants = getContainerColor(bgTitle)
 
   const imageSrc = image && image.asset ? urlFor(image).size(1200, 800).auto('format').toString() : false
 
@@ -62,15 +55,15 @@ export const Fact = (block: BlockProps) => {
 
   const hasColumns = !imageSrc && plainText.length > 800
   const hasImage = imageSrc ? true : false
-  const hasBgColor = backgroundColor !== 'none'
+  const hasBgColor = bgTitle !== 'White'
 
   return (
     <FactBoxWithPadding
-      className={`fact-box fact-box--${backgroundColor} ${hasBgColor ? 'fact-box--colored' : ''} ${
+      className={`fact-box fact-box${backgroundColor} ${hasBgColor ? 'fact-box--colored' : ''} ${
         hasImage ? 'fact-box--image' : ''
       }`}
       imagePosition={imagePosition}
-      background={backgroundColor}
+      background={bgTitle}
     >
       {imageSrc && (
         <FactBox.Image>
diff --git a/web/pageComponents/shared/search/pagination/Pagination.tsx b/web/pageComponents/shared/search/pagination/Pagination.tsx
index d06a93c71..3fe72f520 100644
--- a/web/pageComponents/shared/search/pagination/Pagination.tsx
+++ b/web/pageComponents/shared/search/pagination/Pagination.tsx
@@ -21,11 +21,10 @@ const PaginationList = styled.ul`
 
 export type PaginationProps = {
   hitsPerPage?: number
-  inverted?: boolean
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 } & UsePaginationProps
 
-export const Pagination = ({ totalPages, padding, hitsPerPage = 5, inverted = false, ...rest }: PaginationProps) => {
+export const Pagination = ({ totalPages, padding, hitsPerPage = 5, ...rest }: PaginationProps) => {
   const { refine, createURL, pages, currentRefinement, isFirstPage, isLastPage, nbPages, nbHits } = usePagination({
     totalPages,
     padding,
@@ -58,7 +57,6 @@ export const Pagination = ({ totalPages, padding, hitsPerPage = 5, inverted = fa
         isDisabled={isFirstPage}
         createURL={createURL}
         refine={refine}
-        inverted={inverted}
       >
         <Icon data={first_page} />
       </PaginationItem>
@@ -69,7 +67,6 @@ export const Pagination = ({ totalPages, padding, hitsPerPage = 5, inverted = fa
         isDisabled={isFirstPage}
         createURL={createURL}
         refine={refine}
-        inverted={inverted}
       >
         <Icon data={chevron_left} />
       </PaginationItem>
@@ -83,7 +80,6 @@ export const Pagination = ({ totalPages, padding, hitsPerPage = 5, inverted = fa
           isDisabled={false}
           createURL={createURL}
           refine={refine}
-          inverted={inverted}
         >
           {page + 1}
         </PaginationItem>
@@ -96,7 +92,6 @@ export const Pagination = ({ totalPages, padding, hitsPerPage = 5, inverted = fa
         isDisabled={isLastPage}
         createURL={createURL}
         refine={refine}
-        inverted={inverted}
       >
         <Icon data={chevron_right} />
       </PaginationItem>
@@ -108,7 +103,6 @@ export const Pagination = ({ totalPages, padding, hitsPerPage = 5, inverted = fa
         isDisabled={isLastPage}
         createURL={createURL}
         refine={refine}
-        inverted={inverted}
       >
         <Icon data={last_page} />
       </PaginationItem>
diff --git a/web/pageComponents/shared/search/pagination/PaginationItem.tsx b/web/pageComponents/shared/search/pagination/PaginationItem.tsx
index 9001c0285..e4949bb78 100644
--- a/web/pageComponents/shared/search/pagination/PaginationItem.tsx
+++ b/web/pageComponents/shared/search/pagination/PaginationItem.tsx
@@ -8,27 +8,26 @@ const StyledListItem = styled.li`
   display: inline-block;
 `
 
-const PaginationLink = styled(Button)<{ isCurrent?: boolean; inverted?: boolean }>`
+const PaginationLink = styled(Button)<{ isCurrent?: boolean }>`
   width: 44px;
   height: 44px;
-  color: ${(props) => (props.inverted ? 'var(--moss-green-80)' : 'var(--slate-blue-95)')};
-  ${({ isCurrent, inverted }) =>
+  color: var(--pagination-btn-text-color);
+  ${({ isCurrent }) =>
     isCurrent && {
-      background: inverted ? 'var(--moss-green-80)' : 'var(--moss-green-70)',
-      color: inverted ? 'var(--black-100)' : 'var(--default-text)',
+      background: 'var(--pagination-btn-background-active)',
+      color: 'var(--pagination-btn-text-color-active)',
     }}
 
   :hover {
-    color: ${(props) => (props.inverted ? 'var(--black-100)' : '')};
-
+    color: var(--pagination-btn-text-color-active);
     :disabled {
-      color: ${(props) => (props.inverted ? 'var(--slate-blue-90)' : 'var(--grey-30)')};
+      color: var(--pagination-btn-disabled);
     }
   }
 
   :disabled {
     cursor: auto;
-    color: ${(props) => (props.inverted ? 'var(--slate-blue-90)' : 'var(--grey-30)')};
+    color: var(--pagination-btn-disabled);
   }
 `
 
@@ -43,28 +42,13 @@ type PaginationItemProps = React.ComponentProps<'a'> &
     value: number
     isCurrent: boolean
     ariaLabel?: string
-    inverted?: boolean
   }
 
-export const PaginationItem = ({
-  isDisabled,
-  value,
-  isCurrent,
-  ariaLabel,
-  refine,
-  inverted,
-  children,
-}: PaginationItemProps) => {
+export const PaginationItem = ({ isDisabled, value, isCurrent, ariaLabel, refine, children }: PaginationItemProps) => {
   if (isDisabled || isCurrent) {
     return (
       <StyledListItem>
-        <PaginationLink
-          disabled={isDisabled}
-          isCurrent={isCurrent}
-          inverted={inverted}
-          variant="ghost_icon"
-          aria-label={ariaLabel}
-        >
+        <PaginationLink disabled={isDisabled} isCurrent={isCurrent} variant="ghost_icon" aria-label={ariaLabel}>
           {children}
         </PaginationLink>
       </StyledListItem>
@@ -77,7 +61,6 @@ export const PaginationItem = ({
         disabled={isDisabled}
         variant="ghost_icon"
         aria-label={ariaLabel}
-        inverted={inverted}
         onClick={(event) => {
           if (isModifierClick(event)) {
             return
diff --git a/web/pageComponents/shared/search/simplePagination/Pagination.tsx b/web/pageComponents/shared/search/simplePagination/Pagination.tsx
index 33fb9c318..e37b0a063 100644
--- a/web/pageComponents/shared/search/simplePagination/Pagination.tsx
+++ b/web/pageComponents/shared/search/simplePagination/Pagination.tsx
@@ -18,11 +18,10 @@ const PaginationList = styled.ul`
 
 type PaginationProps = {
   totalPages: number
-  inverted?: boolean
   onPageChange: (val: number) => void
 }
 
-export const Pagination = ({ totalPages, onPageChange, inverted = false }: PaginationProps) => {
+export const Pagination = ({ totalPages, onPageChange }: PaginationProps) => {
   const [currentPage, setCurrentPage] = useState(0)
   const { resultsRef } = useContext(PaginationContext)
   const prevPage = useRef(currentPage)
@@ -73,7 +72,6 @@ export const Pagination = ({ totalPages, onPageChange, inverted = false }: Pagin
         isCurrent={false}
         isDisabled={currentPage === 0}
         onClick={() => goToPage(0)}
-        inverted={inverted}
       >
         <Icon data={first_page} />
       </PaginationItem>
@@ -84,7 +82,6 @@ export const Pagination = ({ totalPages, onPageChange, inverted = false }: Pagin
         isCurrent={false}
         isDisabled={currentPage === 0}
         onClick={goToPreviousPage}
-        inverted={inverted}
       >
         <Icon data={chevron_left} />
       </PaginationItem>
@@ -105,7 +102,6 @@ export const Pagination = ({ totalPages, onPageChange, inverted = false }: Pagin
             isCurrent={isCurrentPage(page)}
             isDisabled={false}
             onClick={() => goToPage(page)}
-            inverted={inverted}
           >
             {page + 1}
           </PaginationItem>
@@ -117,7 +113,6 @@ export const Pagination = ({ totalPages, onPageChange, inverted = false }: Pagin
         isCurrent={false}
         isDisabled={currentPage === totalPages - 1}
         onClick={goToNextPage}
-        inverted={inverted}
       >
         <Icon data={chevron_right} />
       </PaginationItem>
@@ -128,7 +123,6 @@ export const Pagination = ({ totalPages, onPageChange, inverted = false }: Pagin
         isCurrent={false}
         isDisabled={currentPage === totalPages - 1}
         onClick={() => goToPage(totalPages - 1)}
-        inverted={inverted}
       >
         <Icon data={last_page} />
       </PaginationItem>
diff --git a/web/pageComponents/shared/search/simplePagination/PaginationItem.tsx b/web/pageComponents/shared/search/simplePagination/PaginationItem.tsx
index eedceaf48..311258ab3 100644
--- a/web/pageComponents/shared/search/simplePagination/PaginationItem.tsx
+++ b/web/pageComponents/shared/search/simplePagination/PaginationItem.tsx
@@ -5,27 +5,26 @@ const StyledListItem = styled.li`
   display: inline-block;
 `
 
-const PaginationLink = styled(Button)<{ isCurrent?: boolean; inverted?: boolean }>`
+const PaginationLink = styled(Button)<{ isCurrent?: boolean }>`
   width: 44px;
   height: 44px;
-  color: ${(props) => (props.inverted ? 'var(--moss-green-80)' : 'var(--slate-blue-95)')};
-  ${({ isCurrent, inverted }) =>
+  color: var(--pagination-btn-text-color);
+  ${({ isCurrent }) =>
     isCurrent && {
-      background: inverted ? 'var(--moss-green-80)' : 'var(--moss-green-70)',
-      color: inverted ? 'var(--black-100)' : 'var(--default-text)',
+      background: 'var(--pagination-btn-background-active)',
+      color: 'var(--pagination-btn-text-color-active)',
     }}
 
   :hover {
-    color: ${(props) => (props.inverted ? 'var(--black-100)' : '')};
-
+    color: var(--pagination-btn-text-color-active);
     :disabled {
-      color: ${(props) => (props.inverted ? 'var(--slate-blue-90)' : 'var(--grey-30)')};
+      color: var(--pagination-btn-disabled);
     }
   }
 
   :disabled {
     cursor: auto;
-    color: ${(props) => (props.inverted ? 'var(--slate-blue-90)' : 'var(--grey-30)')};
+    color: var(--pagination-btn-disabled);
   }
 `
 
@@ -39,29 +38,14 @@ type PaginationItemProps = React.ComponentProps<'a'> & {
   value: number
   isCurrent: boolean
   ariaLabel?: string
-  inverted?: boolean
   onClick: (value: number) => void
 }
 
-export const PaginationItem = ({
-  isDisabled,
-  value,
-  isCurrent,
-  ariaLabel,
-  inverted,
-  onClick,
-  children,
-}: PaginationItemProps) => {
+export const PaginationItem = ({ isDisabled, value, isCurrent, ariaLabel, onClick, children }: PaginationItemProps) => {
   if (isDisabled || isCurrent) {
     return (
       <StyledListItem>
-        <PaginationLink
-          disabled={isDisabled}
-          isCurrent={isCurrent}
-          inverted={inverted}
-          variant="ghost_icon"
-          aria-label={ariaLabel}
-        >
+        <PaginationLink disabled={isDisabled} isCurrent={isCurrent} variant="ghost_icon" aria-label={ariaLabel}>
           {children}
         </PaginationLink>
       </StyledListItem>
@@ -74,7 +58,6 @@ export const PaginationItem = ({
         disabled={isDisabled}
         variant="ghost_icon"
         aria-label={ariaLabel}
-        inverted={inverted}
         onClick={(event) => {
           if (isModifierClick(event)) {
             return
diff --git a/web/pageComponents/shared/siteMenu/SiteMenu.tsx b/web/pageComponents/shared/siteMenu/SiteMenu.tsx
index 1322419a0..3f2b8ce25 100644
--- a/web/pageComponents/shared/siteMenu/SiteMenu.tsx
+++ b/web/pageComponents/shared/siteMenu/SiteMenu.tsx
@@ -69,7 +69,7 @@ const SiteMenu = ({ data, ...rest }: MenuProps) => {
       <MenuButton title={title} aria-expanded={isOpen} onClick={onMenuButtonClick} {...rest} />
       <FocusLock disabled={!isOpen} returnFocus>
         <RemoveScroll enabled={isOpen}>
-          <TopbarDropdown isOpen={isOpen} className={RemoveScroll.classNames.zeroRight}>
+          <TopbarDropdown isOpen={isOpen} className={RemoveScroll.classNames.zeroRight} background={'White'}>
             {isOpen && (
               <nav>
                 <NavTopbar>
@@ -82,9 +82,9 @@ const SiteMenu = ({ data, ...rest }: MenuProps) => {
                       return <MenuGroup key={topLevelItem.id} index={idx} topLevelItem={topLevelItem} />
                     })}
                   </Menu>
-                    <AllSitesLink href={allSitesURL}>
-                      <FormattedMessage id="all_sites" defaultMessage="All sites" />
-                    </AllSitesLink>
+                  <AllSitesLink href={allSitesURL}>
+                    <FormattedMessage id="all_sites" defaultMessage="All sites" />
+                  </AllSitesLink>
                 </MenuContainer>
               </nav>
             )}
diff --git a/web/pageComponents/shared/siteMenu/TopbarDropdown.tsx b/web/pageComponents/shared/siteMenu/TopbarDropdown.tsx
index fbbf26523..6f01a3681 100644
--- a/web/pageComponents/shared/siteMenu/TopbarDropdown.tsx
+++ b/web/pageComponents/shared/siteMenu/TopbarDropdown.tsx
@@ -1,10 +1,10 @@
-import { ReactNode, CSSProperties, HTMLAttributes } from 'react'
+import { BackgroundContainer, BackgroundContainerProps } from '@components/Backgrounds'
+import { ReactNode, CSSProperties } from 'react'
 import styled from 'styled-components'
 
 /* If we need this for e.g. the search, let's move it to components folder */
-const StyledTopbarDropdown = styled.div`
+const StyledTopbarDropdown = styled(BackgroundContainer)`
   position: fixed;
-  background: var(--ui-background-default);
   overflow: auto;
   display: var(--display);
   z-index: 50;
@@ -16,7 +16,7 @@ const StyledTopbarDropdown = styled.div`
 type Props = {
   isOpen: boolean
   children: ReactNode
-} & HTMLAttributes<HTMLDivElement>
+} & BackgroundContainerProps
 
 export const TopbarDropdown = ({ isOpen, children, ...rest }: Props) => {
   return (
diff --git a/web/pageComponents/topicPages/Breadcrumbs.tsx b/web/pageComponents/topicPages/Breadcrumbs.tsx
index a7c9fd9c0..db037ac09 100644
--- a/web/pageComponents/topicPages/Breadcrumbs.tsx
+++ b/web/pageComponents/topicPages/Breadcrumbs.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 import { default as NextLink } from 'next/link'
-import { BreadcrumbsList, getBackgroundByColorName, getFontColorForBg } from '@components'
+import { BackgroundContainer, BackgroundContainerProps, BreadcrumbsList } from '@components'
 import { BreadcrumbJsonLd } from 'next-seo'
 import { useRouter } from 'next/router'
 import type { NextRouter } from 'next/router'
@@ -11,41 +11,27 @@ const { BreadcrumbsListItem } = BreadcrumbsList
 
 type ContainerStyles = {
   hasTopMargin?: boolean
-  backgroundColor: BackgroundColours
 }
 
-const Container = styled.div<{ $containerStyles?: ContainerStyles }>`
-  padding: 0 var(--layout-paddingHorizontal-large);
+const Container = styled(BackgroundContainer)<{ $containerStyles?: ContainerStyles }>`
   max-width: var(--maxViewportWidth);
   margin-left: auto;
   margin-right: auto;
-
-  ${({ $containerStyles }) => {
-    const hasTopMargin = $containerStyles?.hasTopMargin && {
-      paddingTop: 'var(--space-xLarge)',
-    }
-    // BreadCrumbs's background color is defined by its following component
-    const bgColor = $containerStyles?.backgroundColor && {
-      background: getBackgroundByColorName($containerStyles.backgroundColor),
-    }
-    return { ...hasTopMargin, ...bgColor }
-  }}
+  color: var(--color-on-background);
 `
-
-const StyledBreadcrumbsList = styled(BreadcrumbsList)<{ $bgColor?: BackgroundColours }>`
-  color: ${({ $bgColor }) => getFontColorForBg($bgColor)};
+const StyledBreadcrumbList = styled(BreadcrumbsList)`
+  padding: var(--space-xLarge) var(--layout-paddingHorizontal-large);
 `
 
 const StyledBreadcrumbsListItem = styled(BreadcrumbsListItem)<{ $bgColor?: BackgroundColours }>`
   &:last-child {
-    color: ${({ $bgColor }) =>
-      getFontColorForBg($bgColor) === 'var(--inverted-text)' ? 'var(--grey-30)' : 'var(--slate-blue-90)'};
+    color: var(--breadcrumbs-inactive-color);
   }
 `
 
 const StyledNextLink = styled(NextLink)<{ $bgColor?: BackgroundColours }>`
   text-decoration: none;
-  color: ${({ $bgColor }) => getFontColorForBg($bgColor)};
+  color: var(--color-on-background);
 `
 
 type BreadcrumbsProps = {
@@ -54,7 +40,7 @@ type BreadcrumbsProps = {
   defaultBreadcrumbs: Breadcrumb[]
   customBreadcrumbs: Breadcrumb[]
   containerStyles: ContainerStyles
-}
+} & BackgroundContainerProps
 
 const buildJsonLdElements = (crumbs: Breadcrumb[], router: NextRouter) => {
   const { pathname, locale } = router
@@ -88,6 +74,7 @@ export const Breadcrumbs = ({
   defaultBreadcrumbs,
   customBreadcrumbs,
   containerStyles,
+  background,
 }: BreadcrumbsProps) => {
   const router = useRouter()
 
@@ -99,27 +86,19 @@ export const Breadcrumbs = ({
   if (crumbs.length < 2) return null
 
   return (
-    <Container $containerStyles={containerStyles}>
-      <StyledBreadcrumbsList $bgColor={containerStyles.backgroundColor}>
+    <Container $containerStyles={containerStyles} background={background}>
+      <StyledBreadcrumbList>
         {crumbs.map((item: Breadcrumb) => {
           if (item.slug === slug) {
-            return (
-              <StyledBreadcrumbsListItem $bgColor={containerStyles.backgroundColor} key={item.slug}>
-                {item.label}
-              </StyledBreadcrumbsListItem>
-            )
+            return <StyledBreadcrumbsListItem key={item.slug}>{item.label}</StyledBreadcrumbsListItem>
           }
-
           return (
             <BreadcrumbsListItem key={item.slug}>
-              <StyledNextLink href={item.slug} $bgColor={containerStyles.backgroundColor}>
-                {item.label}
-              </StyledNextLink>
-
+              <StyledNextLink href={item.slug}>{item.label}</StyledNextLink>
             </BreadcrumbsListItem>
           )
         })}
-      </StyledBreadcrumbsList>
+      </StyledBreadcrumbList>
       <BreadcrumbJsonLd itemListElements={buildJsonLdElements(crumbs, router)} />
     </Container>
   )
diff --git a/web/pageComponents/topicPages/PromoTileArray.tsx b/web/pageComponents/topicPages/PromoTileArray.tsx
index 0df5dff34..429f7160a 100644
--- a/web/pageComponents/topicPages/PromoTileArray.tsx
+++ b/web/pageComponents/topicPages/PromoTileArray.tsx
@@ -88,48 +88,45 @@ const PromoTileArray = ({ data, anchor }: { data: PromoTileArrayData; anchor?: s
     : Container
 
   return (
-    <div className="background-none" id={anchor}>
-      <Wrapper>
-        {data.group.map((tile: PromoTileData) => {
-          const { id, designOptions, image, title, action, linkLabelAsTitle } = tile
-          const { background } = designOptions
-          const hasImage = !!image?.asset
-
-          const Content = () =>
-            linkLabelAsTitle ? (
-              <PromoTileButton action={action} template="icon" hasImage={hasImage} />
-            ) : (
-              <>
-                {<>{richTitle(title, hasImage)}</>}
-                {action.label && (
-                  <StyledAction>
-                    <PromoTileButton action={action} hasImage={hasImage} />
-                  </StyledAction>
-                )}
-              </>
-            )
-
-          return (
-            /* Sneaky little hack to make it work with the bg colour See #667 */
-            <StyledBackgroundContainer disableContainerWrapper={true} background={background} key={id}>
-              <StyledCard type="promo" textOnly={!image} style={{ '--card-height': '100%' } as CSSProperties}>
-                {image && (
-                  <Media>
-                    <ImageWithRoundedUpperCorners
-                      image={image}
-                      alt={image.alt}
-                      maxWidth={400}
-                      aspectRatio={Ratios.FOUR_TO_FIVE}
-                    />
-                  </Media>
-                )}
-                <Content />
-              </StyledCard>
-            </StyledBackgroundContainer>
+    <Wrapper id={anchor}>
+      {data.group.map((tile: PromoTileData) => {
+        const { id, designOptions, image, title, action, linkLabelAsTitle } = tile
+        const { background } = designOptions
+        const hasImage = !!image?.asset
+
+        const Content = () =>
+          linkLabelAsTitle ? (
+            <PromoTileButton action={action} template="icon" hasImage={hasImage} />
+          ) : (
+            <>
+              {<>{richTitle(title, hasImage)}</>}
+              {action.label && (
+                <StyledAction>
+                  <PromoTileButton action={action} hasImage={hasImage} />
+                </StyledAction>
+              )}
+            </>
           )
-        })}
-      </Wrapper>
-    </div>
+
+        return (
+          <StyledBackgroundContainer background={background} key={id}>
+            <StyledCard type="promo" textOnly={!image} style={{ '--card-height': '100%' } as CSSProperties}>
+              {image && (
+                <Media>
+                  <ImageWithRoundedUpperCorners
+                    image={image}
+                    alt={image.alt}
+                    maxWidth={400}
+                    aspectRatio={Ratios.FOUR_TO_FIVE}
+                  />
+                </Media>
+              )}
+              <Content />
+            </StyledCard>
+          </StyledBackgroundContainer>
+        )
+      })}
+    </Wrapper>
   )
 }
 
diff --git a/web/pageComponents/topicPages/promotions/MultipleEventCards.tsx b/web/pageComponents/topicPages/promotions/MultipleEventCards.tsx
index c1c57ac8b..8e400c65b 100644
--- a/web/pageComponents/topicPages/promotions/MultipleEventCards.tsx
+++ b/web/pageComponents/topicPages/promotions/MultipleEventCards.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import type { EventCardData, EventPromotionSettings } from '../../../types/types'
 import EventsCard from '../../cards/EventsCard'
 import { Carousel } from '../../shared/Carousel'
+import { BackgroundContainer } from '@components/Backgrounds'
 
 const PairWrapper = styled.div`
   --card-minWidth: 250px;
@@ -61,7 +62,7 @@ type MultipleEventCardsProp = {
   renderScroll?: boolean
 }
 
-const StyledEventsCard = styled(EventsCard)`
+const StyledBackground = styled(BackgroundContainer)`
   --card-maxWidth: 280px;
 
   @media (min-width: 1000px) {
@@ -70,7 +71,10 @@ const StyledEventsCard = styled(EventsCard)`
 
   min-width: var(--card-maxWidth, 100%);
 `
-
+const StyledEventsCard = styled(EventsCard)`
+  width: 100%;
+  height: 100%;
+`
 const MultipleEventCards = ({
   data,
   hasSectionTitle,
@@ -95,7 +99,11 @@ const MultipleEventCards = ({
       <>
         <Carousel horizontalPadding={true}>
           {data.map((item) => {
-            return <StyledEventsCard data={item} hasSectionTitle={hasSectionTitle} key={item.id} />
+            return (
+              <StyledBackground key={item.id}>
+                <StyledEventsCard data={item} hasSectionTitle={hasSectionTitle} key={item.id} />
+              </StyledBackground>
+            )
           })}
         </Carousel>
       </>
diff --git a/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx b/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx
index 335434502..f0f45dd70 100644
--- a/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx
+++ b/web/pageComponents/topicPages/promotions/MultiplePromotions.tsx
@@ -12,6 +12,7 @@ import PeopleCard from '../../cards/PeopleCard/PeopleCard'
 import MultipleEventCards from './MultipleEventCards'
 import useWindowSize from '../../../lib/hooks/useWindowSize'
 import { Carousel } from '../../shared/Carousel'
+import { BackgroundContainer } from '@components/Backgrounds'
 
 const CardsWrapper = styled.div`
   width: 100%;
@@ -55,18 +56,25 @@ const PeopleCardsWrapper = styled.div`
 `
 
 const CardStyle = css`
+  width: 100%;
+  height: 100%;
+`
+
+const StyledBackground = styled(BackgroundContainer)`
   min-width: var(--card-minWidth);
   max-width: var(--card-maxWidth);
   flex-basis: 0;
   flex-grow: 1;
 `
-
 const StyledNewsCard = styled(NewsCard)`
   ${CardStyle}
 `
 const StyledTopicPageCard = styled(TopicPageCard)`
   ${CardStyle}
 `
+const StyledPeopleCard = styled(PeopleCard)`
+  ${CardStyle}
+`
 
 const CardWrapper = styled.div`
   display: flex;
@@ -93,12 +101,24 @@ const MultiplePromotions = ({
     switch (data.type) {
       case 'news':
       case 'localNews':
-        return <StyledNewsCard data={data as CardData} key={data.id} />
+        return (
+          <StyledBackground>
+            <StyledNewsCard data={data as CardData} key={data.id} />
+          </StyledBackground>
+        )
       case 'topics':
       case 'magazine':
-        return <StyledTopicPageCard data={data as CardData} key={data.id} />
+        return (
+          <StyledBackground>
+            <StyledTopicPageCard data={data as CardData} key={data.id} />
+          </StyledBackground>
+        )
       case 'people':
-        return <PeopleCard data={data as PeopleCardData} hasSectionTitle={hasSectionTitle} key={data.id} />
+        return (
+          <StyledBackground>
+            <StyledPeopleCard data={data as PeopleCardData} hasSectionTitle={hasSectionTitle} key={data.id} />
+          </StyledBackground>
+        )
       default:
         return console.warn('Missing card type for ', data)
     }
diff --git a/web/pages/search/index.global.tsx b/web/pages/search/index.global.tsx
index d61f4b696..3907cd03e 100644
--- a/web/pages/search/index.global.tsx
+++ b/web/pages/search/index.global.tsx
@@ -29,11 +29,6 @@ const InvertedButton = styled(Button)`
   }
 `
 
-const DarkTopbarDropdown = styled(TopbarDropdown)`
-  background-color: var(--slate-blue-95);
-  color: var(--inverted-text);
-`
-
 const SearchContainer = styled.div`
   padding: var(--space-large);
   max-width: 700px;
@@ -50,9 +45,9 @@ export default function SearchPage() {
     <>
       <NextSeo title={searchTitle}></NextSeo>
       <RemoveScroll enabled={true}>
-        <DarkTopbarDropdown isOpen={true}>
+        <TopbarDropdown isOpen={true} background={'Slate Blue 95'}>
           <NavTopbar>
-            <LogoLink inverted />
+            <LogoLink />
             <InvertedButton
               variant="ghost_icon"
               aria-expanded={true}
@@ -67,7 +62,7 @@ export default function SearchPage() {
           <SearchContainer>
             <Search />
           </SearchContainer>
-        </DarkTopbarDropdown>
+        </TopbarDropdown>
       </RemoveScroll>
     </>
   )
diff --git a/web/styles/globalStyles.ts b/web/styles/globalStyles.ts
index 0075c3c5a..f20ccaac5 100644
--- a/web/styles/globalStyles.ts
+++ b/web/styles/globalStyles.ts
@@ -4,10 +4,14 @@ import { colors, typography, spacings, componentSettings, strictLineBreak } from
 import { generic } from './generic'
 import { elements } from './elements'
 import { cookieBot, algolia } from './components'
+import { normal } from './themes'
 
 /* We use ITCSS to structure the (few) global styles we need */
 export const GlobalStyle = createGlobalStyle`
   /* Settings */
+  :root{
+  ${normal}
+  }
   ${colors}
   ${typography}
   ${strictLineBreak}
diff --git a/web/styles/settings.ts b/web/styles/settings.ts
index 815b85217..6ce3c2b2a 100644
--- a/web/styles/settings.ts
+++ b/web/styles/settings.ts
@@ -73,10 +73,10 @@ export const colors = css`
     --transparent-black: hsla(0, 0%, 0%, 20);
     --transparent-white: hsla(0, 0%, 100%, 20);
 
-    /* UI colors This is just for testing!!!! */
-    --ui-background-default: var(--white-100);
-    --ui-background-warm: var(--spruce-wood-100);
-    --ui-background-cold: var(--moss-green-50);
+    --mid-yellow: #fff5b8;
+    --mid-green: #c3e4ce;
+    --mid-orange: #f8d1af;
+    --mid-blue: #49709c;
 
     --inverted-text: var(--white-100);
     --default-text: rgba(61, 61, 61, 1);
@@ -84,6 +84,20 @@ export const colors = css`
     --theme-background-primary: var(--white-100);
 
     --topbar-height: 100px;
+
+    /* new colors */
+    --bg-default: var(--white-100);
+    --bg-moss-green: var(--mid-green); // replace old color
+    --bg-moss-green-light: var(--moss-green-50);
+    --bg-spruce-wood: var(--spruce-wood-90);
+    --bg-mist-blue: var(--mist-blue-100);
+    --bg-slate-blue: var(--slate-blue-100); // replace old color
+    --bg-mid-yellow: var(--mid-yellow);
+    --bg-mid-orange: var(--mid-orange);
+    --bg-mid-green: var(--mid-green);
+    --bg-mid-blue: var(--mid-blue);
+
+    --bg-slate-blue-95: var(--slate-blue-95); // required for search
   }
 `
 export const typography = css`
diff --git a/web/styles/themes.ts b/web/styles/themes.ts
new file mode 100644
index 000000000..5c4cbf42e
--- /dev/null
+++ b/web/styles/themes.ts
@@ -0,0 +1,62 @@
+import { css } from 'styled-components'
+
+/** When a component is wrapped with Background container, these variables get
+ * applied to that component, based on the background color. We currently have
+ * normal theme which is the default. Inverted theme is applied on dark background
+ * colors.
+ *
+ * If you are creating a new variable here, prefix the variable with the component
+ * name. Also make sure the variable is created in both normal and inverted themes.
+ */
+export const normal = css`
+  /**@ Button component */
+  --button-border-color: var(--slate-blue-95);
+  --button-border-color-hover: var(--slate-blue-95);
+  --button-text: var(--default-text);
+  --button-background-hover: var(--slate-blue-100);
+  --button-background: transparent;
+  --button-text-hover: var(--inverted-text);
+
+  /**@ Link component */
+  --link-color: var(--slate-blue-95);
+  --content-link-color: var(--slate-blue-95);
+  --link-arrow-color: var(--energy-red-100);
+  --link-arrow-color-hover: var(--energy-red-100);
+  --content-link-arrow-color-hover: var(--energy-red-100);
+
+  /**@ Quote component*/
+  --quote-icon-color: var(--grey-90);
+
+  /**@ Pagination Component */
+  --pagination-btn-text-color: var(--slate-blue-95);
+  --pagination-btn-background-active: var(--moss-green-80);
+  --pagination-btn-text-color-active: var(--black-100);
+  --pagination-btn-disabled: var(--grey-30);
+
+  /**@ Accordion component*/
+  --accordion-icon-color: var(--energy-red-100);
+
+  /**@ Breadcrumbs component*/
+  --breadcrumbs-inactive-color: var(--slate-blue-90);
+`
+
+export const inverted = css`
+  --button-border-color: var(--white-100);
+  --button-border-color-hover: var(--white-100);
+  --button-text: var(--inverted-text);
+  --button-background-hover: var(--white-100);
+  --button-background: transparent;
+  --button-text-hover: var(--slate-blue-100);
+  --link-color: var(--mist-blue-100);
+  --content-link-color: var(--inverted-text);
+  --link-arrow-color: var(--white-100);
+  --link-arrow-color-hover: var(--white-100);
+  --content-link-arrow-color-hover: var(--energy-red-100);
+  --quote-icon-color: var(--inverted-text);
+  --pagination-btn-text-color: var(--moss-green-80);
+  --pagination-btn-background-active: var(--moss-green-70);
+  --pagination-btn-text-color-active: var(--default-text);
+  --pagination-btn-disabled: var(--slate-blue-90);
+  --accordion-icon-color: var(--white-100);
+  --breadcrumbs-inactive-color: var(--grey-30);
+`
diff --git a/web/types/types.ts b/web/types/types.ts
index 69a1a332b..e320c21f6 100644
--- a/web/types/types.ts
+++ b/web/types/types.ts
@@ -252,7 +252,18 @@ export type LandingPageSchema = {
   seoAndSome: SeoData
 }
 
-export type BackgroundColours = 'White' | 'Moss Green' | 'Moss Green Light' | 'Spruce Wood' | 'Mist Blue' | 'Slate Blue'
+export type BackgroundColours =
+  | 'White'
+  | 'Moss Green'
+  | 'Moss Green Light'
+  | 'Spruce Wood'
+  | 'Mist Blue'
+  | 'Slate Blue'
+  | 'Mid Green'
+  | 'Mid Yellow'
+  | 'Mid Blue'
+  | 'Mid Orange'
+  | 'Slate Blue 95'
 
 export type DesignOptions = {
   background?: BackgroundColours