diff --git a/packages/ffe-cards-react/src/CardBase.mdx b/packages/ffe-cards-react/src/CardBase.mdx
index 4fa8ca32b2..73e007e039 100644
--- a/packages/ffe-cards-react/src/CardBase.mdx
+++ b/packages/ffe-cards-react/src/CardBase.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as CardBaseStories from './CardBase.stories.tsx';
 
 <Meta of={CardBaseStories} />
@@ -7,7 +7,7 @@ import * as CardBaseStories from './CardBase.stories.tsx';
 
 Dette er basisen for alle kort. Komponeten kan brukes direkte for å få en ramme du kan fylle dersom du trenger et spesialtilpassert kort.
 
-Du kan skru av/på box-shadow med `shadow`-prop, skru av margin med `noMargin`-prop, og sette bakgrunnsfargen i både light- og darkmode med `bgColorog` `bgDarkmodeColor`.
+Du kan skru av margin med `noMargin`-prop, og sette bakgrunnsfargen i både light- og darkmode med `bgColorog` `bgDarkmodeColor`.
 
 <Canvas of={CardBaseStories.Standard} />
 <Controls of={CardBaseStories.Standard} />
diff --git a/packages/ffe-cards-react/src/CardBase.spec.tsx b/packages/ffe-cards-react/src/CardBase.spec.tsx
index 439f31edf0..f144ce1185 100644
--- a/packages/ffe-cards-react/src/CardBase.spec.tsx
+++ b/packages/ffe-cards-react/src/CardBase.spec.tsx
@@ -1,6 +1,6 @@
+import { render, screen, within } from '@testing-library/react';
 import React from 'react';
 import { CardBase } from './CardBase';
-import { render, screen, within } from '@testing-library/react';
 
 const TEST_ID = 'test-id';
 
@@ -48,15 +48,6 @@ describe('<CardBase/>', () => {
             card.classList.contains('ffe-card-base--dm-bg-natt'),
         ).toBeTruthy();
     });
-    it('should set shadow-prop correctly', () => {
-        render(
-            <CardBase data-testid={TEST_ID} shadow={true}>
-                <div />
-            </CardBase>,
-        );
-        const card = screen.getByTestId(TEST_ID);
-        expect(card.classList.contains('ffe-card-base--shadow')).toBeTruthy();
-    });
     it('should set noMargin-prop correctly', () => {
         render(
             <CardBase data-testid={TEST_ID} noMargin={true}>
diff --git a/packages/ffe-cards-react/src/CardBase.stories.tsx b/packages/ffe-cards-react/src/CardBase.stories.tsx
index 3df58b1485..08de6cee69 100644
--- a/packages/ffe-cards-react/src/CardBase.stories.tsx
+++ b/packages/ffe-cards-react/src/CardBase.stories.tsx
@@ -1,6 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { CardBase } from './CardBase';
-import type { StoryObj, Meta } from '@storybook/react';
 
 const Custom: React.FC<React.ComponentProps<'div'>> = props => (
     <div {...props}>
@@ -30,7 +30,6 @@ type Story = StoryObj<typeof CardBase<any>>;
 export const Standard: Story = {
     args: {
         as: 'div',
-        shadow: true,
     },
     render: args => (
         <CardBase {...args}>Dette er basisen for alle kort</CardBase>
diff --git a/packages/ffe-cards-react/src/CardBase.tsx b/packages/ffe-cards-react/src/CardBase.tsx
index 35289aa2a4..bb7fe281c3 100644
--- a/packages/ffe-cards-react/src/CardBase.tsx
+++ b/packages/ffe-cards-react/src/CardBase.tsx
@@ -1,19 +1,18 @@
-import React, { ElementType, ForwardedRef } from 'react';
 import classNames from 'classnames';
-import { WithCardActionProps, WithCardAction } from './components';
+import React, { ElementType, ForwardedRef } from 'react';
+import { WithCardAction, WithCardActionProps } from './components';
+import { fixedForwardRef } from './fixedForwardRef';
 import {
     BgColor,
     BgColorDarkmode,
-    ComponentAsPropParams,
     CardActionRenderProps,
+    ComponentAsPropParams,
 } from './types';
-import { fixedForwardRef } from './fixedForwardRef';
 
 export type CardBaseProps<As extends ElementType = 'div'> = Omit<
     ComponentAsPropParams<As>,
     'children'
 > & {
-    shadow?: boolean;
     /** No margin on card */
     noMargin?: boolean;
     textCenter?: boolean;
@@ -29,7 +28,6 @@ function CardBaseWithForwardRef<As extends ElementType>(
 ) {
     const {
         className,
-        shadow,
         noMargin,
         textCenter,
         bgColor,
@@ -45,7 +43,6 @@ function CardBaseWithForwardRef<As extends ElementType>(
             className={classNames('ffe-card-base', className, {
                 [`ffe-card-base--bg-${bgColor}`]: bgColor,
                 [`ffe-card-base--dm-bg-${bgDarkmodeColor}`]: bgDarkmodeColor,
-                'ffe-card-base--shadow': shadow,
                 'ffe-card-base--no-margin': noMargin,
                 'ffe-card-base--text-center': textCenter,
                 'ffe-card-base--no-padding': noPadding,
diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCard.mdx b/packages/ffe-cards-react/src/GroupCard/GroupCard.mdx
index 87a4576623..9640d3179b 100644
--- a/packages/ffe-cards-react/src/GroupCard/GroupCard.mdx
+++ b/packages/ffe-cards-react/src/GroupCard/GroupCard.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as GroupCardStories from './GroupCard.stories.tsx';
 
 <Meta of={GroupCardStories} />
@@ -10,10 +10,6 @@ GroupCard er et kort med en liste av elementer inni. Det kan bestå av `GroupCar
 <Canvas of={GroupCardStories.Standard} />
 <Controls of={GroupCardStories.Standard} />
 
-Man kan modifisere GroupCard til å ikke ha skygge med `shadow={false}`.
-
-<Canvas of={GroupCardStories.ShadowFalse} />
-
 `GroupCardElement` har linjer mellom elementene som standard, men det kan fjernes med `noSeparator`.
 
 <Canvas of={GroupCardStories.NoSeparator} />
diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCard.stories.tsx b/packages/ffe-cards-react/src/GroupCard/GroupCard.stories.tsx
index 9ef761b32e..c79aa440c0 100644
--- a/packages/ffe-cards-react/src/GroupCard/GroupCard.stories.tsx
+++ b/packages/ffe-cards-react/src/GroupCard/GroupCard.stories.tsx
@@ -1,11 +1,11 @@
+import { Heading2, Paragraph } from '@sb1/ffe-core-react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+import { CardRenderProps } from '../types';
 import { GroupCard } from './GroupCard';
-import { GroupCardTitle } from './GroupCardTitle';
 import { GroupCardElement } from './GroupCardElement';
 import { GroupCardFooter } from './GroupCardFooter';
-import { Heading2, Paragraph } from '@sb1/ffe-core-react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { CardRenderProps } from '../types';
+import { GroupCardTitle } from './GroupCardTitle';
 
 const meta: Meta<typeof GroupCard> = {
     title: 'Komponenter/Cards/GroupCard',
@@ -16,9 +16,7 @@ export default meta;
 type Story = StoryObj<typeof GroupCard>;
 
 export const Standard: Story = {
-    args: {
-        shadow: true,
-    },
+    args: {},
     render: args => (
         <GroupCard {...args}>
             <GroupCardTitle>
@@ -38,19 +36,6 @@ export const Standard: Story = {
     ),
 };
 
-export const ShadowFalse: Story = {
-    args: {
-        ...Standard.args,
-        shadow: false,
-    },
-    render: args => (
-        <GroupCard {...args}>
-            <GroupCardElement>Innhold nr 1</GroupCardElement>
-            <GroupCardElement>Innhold nr 2</GroupCardElement>
-            <GroupCardElement>Innhold nr 3</GroupCardElement>
-        </GroupCard>
-    ),
-};
 export const NoSeparator: Story = {
     args: {
         ...Standard.args,
diff --git a/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx b/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx
index b06c5138b6..880b6df18e 100644
--- a/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx
+++ b/packages/ffe-cards-react/src/GroupCard/GroupCard.tsx
@@ -1,11 +1,10 @@
-import React, { ForwardedRef } from 'react';
 import classNames from 'classnames';
+import React, { ForwardedRef } from 'react';
 import { fixedForwardRef } from '../fixedForwardRef';
 import { BgColor, BgColorDarkmode } from '../types';
 
 export interface GroupCardProps
     extends Omit<React.ComponentPropsWithoutRef<'div'>, 'children'> {
-    shadow?: boolean;
     /** The children of the GroupCard component */
     children: React.ReactNode;
     /** The background color of the whole groupcard element */
@@ -18,7 +17,6 @@ export interface GroupCardProps
 
 function GroupCardWithForwardRef(
     {
-        shadow,
         className,
         children,
         bgColor,
@@ -33,7 +31,6 @@ function GroupCardWithForwardRef(
             className={classNames(
                 'ffe-group-card',
                 {
-                    'ffe-group-card--shadow': shadow,
                     'ffe-group-card--no-margin': noMargin,
                     [`ffe-group-card--bg-${bgColor}`]: bgColor,
                     [`ffe-group-card--dm-bg-${bgDarkmodeColor}`]:
diff --git a/packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx b/packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx
index 87dc04435d..0703df51f7 100644
--- a/packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx
+++ b/packages/ffe-cards-react/src/StippledCard/StippledCard.stories.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { StippledCard } from './StippledCard';
-import type { StoryObj, Meta } from '@storybook/react';
 import { Icon } from '@sb1/ffe-icons-react';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 import utvalgte from './illustrations/utvalgte.svg';
+import { StippledCard } from './StippledCard';
 
 const Custom: React.FC<React.ComponentProps<'div'>> = props => (
     <div {...props}>
@@ -195,3 +195,29 @@ export const Condensed: Story = {
         </StippledCard>
     ),
 };
+
+export const WithCardAction: Story = {
+    args: {
+        as: 'div',
+    },
+    render: args => (
+        <StippledCard {...args}>
+            {({ CardName, Title, Subtext, Text, CardAction }) => (
+                <>
+                    <CardName>CardName</CardName>
+                    <Title>
+                        <CardAction>Tittel</CardAction>
+                    </Title>
+                    <Subtext as="span">Subtext er grå</Subtext>
+                    <Text>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                        sed do eiusmod tempor incididunt ut labore et dolore
+                        magna aliqua. Ut enim ad minim veniam, quis nostrud
+                        exercitation ullamco laboris nisi ut aliquip ex ea
+                        commodo consequat.
+                    </Text>
+                </>
+            )}
+        </StippledCard>
+    ),
+};
diff --git a/packages/ffe-cards-react/src/components/CardAction.stories.tsx b/packages/ffe-cards-react/src/components/CardAction.stories.tsx
index 03823dc620..09e70a5858 100644
--- a/packages/ffe-cards-react/src/components/CardAction.stories.tsx
+++ b/packages/ffe-cards-react/src/components/CardAction.stories.tsx
@@ -1,11 +1,11 @@
+import { Heading4, Paragraph } from '@sb1/ffe-core-react';
+import { Icon } from '@sb1/ffe-icons-react';
+import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { CardAction as CardActionComponent } from './CardAction';
-import type { StoryObj, Meta } from '@storybook/react';
 import { CardBase } from '../CardBase';
-import { Heading2, Paragraph } from '@sb1/ffe-core-react';
-import { Icon } from '@sb1/ffe-icons-react';
 import { IconCard } from '../IconCard/IconCard';
 import { CardActionRenderProps, CardRenderProps } from '../types';
+import { CardAction as CardActionComponent } from './CardAction';
 
 const Custom: React.FC<React.ComponentProps<'a'>> = props => (
     <a {...props}>
@@ -39,12 +39,12 @@ export const Standard: Story = {
         href: 'https://design.sparebank1.no',
     },
     render: args => (
-        <CardBase shadow={true}>
+        <CardBase>
             {({ CardAction }: CardActionRenderProps) => (
                 <>
-                    <Heading2>
+                    <Heading4>
                         <CardAction {...args}>Lenke</CardAction>
-                    </Heading2>
+                    </Heading4>
                     <Paragraph>Hele kortet er klikkbart</Paragraph>
                 </>
             )}
@@ -58,12 +58,12 @@ export const AsButton: Story = {
         type: 'button',
     },
     render: args => (
-        <CardBase shadow={true}>
+        <CardBase>
             {({ CardAction }: CardActionRenderProps) => (
                 <>
-                    <Heading2>
+                    <Heading4>
                         <CardAction {...args}>Knapp</CardAction>
-                    </Heading2>
+                    </Heading4>
                     <Paragraph>Hele kortet er klikkbart</Paragraph>
                 </>
             )}
diff --git a/packages/ffe-cards/less/card-base.less b/packages/ffe-cards/less/card-base.less
index 3de92c5b55..14742fd5a1 100644
--- a/packages/ffe-cards/less/card-base.less
+++ b/packages/ffe-cards/less/card-base.less
@@ -1,14 +1,14 @@
 @import 'common-card-styling';
 
 .ffe-card-base {
+    color: var(--ffe-color-foreground-default);
     .common-card-styling();
 
     &--clickable {
         .clickable-card-styling();
     }
 
-    padding: var(--ffe-spacing-sm);
-    box-shadow: none; // Overwrite common-card-styling
+    padding: var(--ffe-spacing-md);
 
     &--no-padding {
         padding: 0;
@@ -16,10 +16,6 @@
 
     .card-background-styling();
 
-    &--shadow {
-        box-shadow: var(--ffe-v-cards-common-card-box-shadow);
-    }
-
     &--no-margin {
         margin: 0;
     }
diff --git a/packages/ffe-cards/less/cards.less b/packages/ffe-cards/less/cards.less
index 3ceb33fa26..76d2cedbab 100644
--- a/packages/ffe-cards/less/cards.less
+++ b/packages/ffe-cards/less/cards.less
@@ -1,4 +1,3 @@
-@import 'theme';
 @import 'card-base';
 @import 'text-card';
 @import 'icon-card';
@@ -6,3 +5,4 @@
 @import 'image-card';
 @import 'stippled-card';
 @import 'group-card';
+@import 'theme';
diff --git a/packages/ffe-cards/less/common-card-styling.less b/packages/ffe-cards/less/common-card-styling.less
index 7cdb64dad0..db16eb53c8 100644
--- a/packages/ffe-cards/less/common-card-styling.less
+++ b/packages/ffe-cards/less/common-card-styling.less
@@ -1,10 +1,16 @@
 @import (reference) '@sb1/ffe-core/less/breakpoints';
 
 .common-card-styling() {
+    --ffe-v-cards-common-card-background-color: var(
+        --ffe-color-surface-primary-default
+    );
+    --ffe-v-cards-common-card-border-color: var(
+        --ffe-color-border-primary-default
+    );
+
     background: var(--ffe-v-cards-common-card-background-color);
-    box-shadow: var(--ffe-v-cards-common-card-box-shadow);
     margin: 0 0 var(--ffe-spacing-xs);
-    border: 2px solid var(--ffe-v-cards-common-card-border-color);
+    border: 1px solid var(--ffe-v-cards-common-card-border-color);
     border-radius: var(--ffe-v-cards-common-card-border-radius);
     transition: all var(--ffe-transition-duration) var(--ffe-ease);
     outline: none;
@@ -56,8 +62,11 @@
     @media (hover: hover) and (pointer: fine) {
         &:hover {
             cursor: pointer;
-            border-color: var(--ffe-g-primary-color);
+            border-color: var(--ffe-color-border-primary-hover);
 
+            --ffe-v-cards-common-card-background-color: var(
+                --ffe-color-surface-primary-default-hover
+            );
             &
                 :where(
                     .ffe-card-body__card-name,
@@ -70,8 +79,7 @@
         }
     }
     &:focus-within {
-        border-color: var(--ffe-g-primary-color);
-        box-shadow: 0 0 0 2px var(--ffe-g-primary-color);
+        border-color: var(--ffe-color-border-primary-hover);
 
         &
             :where(
diff --git a/packages/ffe-cards/less/components.less b/packages/ffe-cards/less/components.less
index a4d813947b..efe91901ac 100644
--- a/packages/ffe-cards/less/components.less
+++ b/packages/ffe-cards/less/components.less
@@ -3,10 +3,12 @@
 .ffe-card-body {
     &__card-name {
         margin: 0 0 var(--ffe-spacing-2xs) 0;
+        color: var(--ffe-color-foreground-subtle);
     }
 
     &__text {
         margin: var(--ffe-spacing-2xs) 0 0 0;
+        color: var(--ffe-color-foreground-subtle);
     }
 
     &__subtext {
@@ -15,14 +17,14 @@
         font-variant-numeric: tabular-nums;
         line-height: 1.25rem;
         font-size: var(--ffe-fontsize-small-text);
-        color: var(--ffe-v-cards-subtext-color);
+        color: var(--ffe-color-foreground-subtle);
         margin: var(--ffe-spacing-2xs) 0 0 0;
     }
 
     &__title {
         font-family: var(--ffe-g-font-heading-small);
         font-variant-numeric: tabular-nums;
-        color: var(--ffe-g-heading-color);
+        color: var(--ffe-color-foreground-emphasis);
         font-weight: normal;
         text-wrap: balance;
         overflow-wrap: anywhere;
diff --git a/packages/ffe-cards/less/group-card.less b/packages/ffe-cards/less/group-card.less
index 9c09a9c197..5dd9966627 100644
--- a/packages/ffe-cards/less/group-card.less
+++ b/packages/ffe-cards/less/group-card.less
@@ -4,13 +4,14 @@
     .common-card-styling();
     .card-background-styling();
 
-    position: relative;
-    border: var(--ffe-v-cards-common-group-card-border);
-    box-shadow: none;
+    --ffe-v-cards-common-group-card-border: var(
+            --ffe-v-cards-common-card-border-radius
+        )
+        var(--ffe-color-border-primary-default);
 
-    &--shadow {
-        box-shadow: var(--ffe-v-cards-common-card-box-shadow);
-    }
+    color: var(--ffe-color-foreground-default);
+    position: relative;
+    border: 1px solid var(--ffe-v-cards-common-card-border-color);
 
     &--no-margin {
         margin: 0;
@@ -40,7 +41,6 @@
     }
 
     &__footer {
-        background-color: var(--ffe-v-group-card-footer-background-color);
         display: flex;
         justify-content: center;
         align-items: center;
@@ -83,10 +83,4 @@
             --ffe-v-cards-common-group-card-separation-border-color
         );
     }
-
-    .regard-color-scheme-preference & {
-        @media (prefers-color-scheme: dark) {
-            .card-background-dm-styling();
-        }
-    }
 }
diff --git a/packages/ffe-cards/less/icon-card.less b/packages/ffe-cards/less/icon-card.less
index c2555c4cf4..2f701e4962 100644
--- a/packages/ffe-cards/less/icon-card.less
+++ b/packages/ffe-cards/less/icon-card.less
@@ -29,11 +29,11 @@
         flex-grow: 1;
     }
     .ffe-icon-card__icon {
+        color: var(--ffe-color-foreground-emphasis);
         display: flex;
         align-items: center;
         flex-shrink: 0;
         flex-grow: 0;
-        color: var(--ffe-v-cards-icon-color);
     }
 
     &--condensed {
diff --git a/packages/ffe-cards/less/image-card.less b/packages/ffe-cards/less/image-card.less
index e3c4140118..b2fa43f212 100644
--- a/packages/ffe-cards/less/image-card.less
+++ b/packages/ffe-cards/less/image-card.less
@@ -3,6 +3,10 @@
 @import 'components';
 
 .ffe-image-card {
+    --ffe-v-cards-common-card-border-color: var(
+        --ffe-color-border-primary-default
+    );
+
     .common-card-styling();
 
     &--clickable {
@@ -13,27 +17,29 @@
         margin: 0;
     }
 
-    --border-color: transparent;
-
     display: flex;
     padding: 0;
     max-width: 290px;
-    border: var(--ffe-v-cards-image-card-border);
+    border: var(--ffe-v-cards-common-card-border-color);
     flex-flow: column nowrap;
 
     .ffe-image-card__image-overlay,
     .ffe-image-card__body {
-        border-color: var(--border-color);
+        border-color: var(--ffe-v-cards-common-card-border-color);
     }
 
     &:has(.ffe-card__action:active, .ffe-card__action:focus) {
-        --border-color: var(--ffe-v-cards-border-hover-color);
+        --ffe-v-cards-common-card-border-color: var(
+            --ffe-color-border-primary-hover
+        );
     }
 
     &:has(.ffe-card__action) {
         @media (hover: hover) and (pointer: fine) {
             &:hover {
-                --border-color: var(--ffe-v-cards-border-hover-color);
+                --ffe-v-cards-common-card-border-color: var(
+                    --ffe-color-border-primary-hover
+                );
             }
         }
     }
@@ -54,7 +60,7 @@
     &__body {
         width: 100%;
         overflow: hidden;
-        border: 2px solid transparent;
+        border: 1px solid transparent;
         transition: border-color var(--ffe-transition-duration);
     }
 
diff --git a/packages/ffe-cards/less/stippled-card.less b/packages/ffe-cards/less/stippled-card.less
index d919a27244..52238ee667 100644
--- a/packages/ffe-cards/less/stippled-card.less
+++ b/packages/ffe-cards/less/stippled-card.less
@@ -2,6 +2,8 @@
 @import 'components';
 
 .ffe-stippled-card {
+    --ffe-v-cards-stippled-border-color: var(--ffe-color-foreground-emphasis);
+
     .common-card-styling();
 
     &--clickable {
@@ -24,7 +26,6 @@
 
     background: transparent;
     border: 2px dashed var(--ffe-v-cards-stippled-border-color);
-    box-shadow: none;
     display: flex;
     align-items: center;
     padding: var(--ffe-spacing-md);
diff --git a/packages/ffe-cards/less/theme.less b/packages/ffe-cards/less/theme.less
index 3e3c7efa0e..361bb4a785 100644
--- a/packages/ffe-cards/less/theme.less
+++ b/packages/ffe-cards/less/theme.less
@@ -1,46 +1,19 @@
 :root,
 :host {
-    --ffe-v-cards-common-text-color: var(--ffe-g-text-color);
-    --ffe-v-cards-common-card-background-color: var(--ffe-farge-hvit);
-    --ffe-v-cards-common-card-border-color: transparent;
-    --ffe-v-cards-common-card-box-shadow-color: var(--ffe-farge-graa);
-    --ffe-v-cards-common-card-box-shadow: 0 1px 4px 0
-        var(--ffe-v-cards-common-card-box-shadow-color);
+    --ffe-v-cards-common-text-color: var(--ffe-color-foreground-default);
+    --ffe-v-cards-common-card-background-color: var(
+        --ffe-color-surface-primary-default
+    );
     --ffe-v-cards-common-card-border-radius: 16px;
     --ffe-v-cards-clickabe-card-link-visited-color: inherit;
-    --ffe-v-cards-subtext-color: var(--ffe-farge-moerkgraa);
-    --ffe-v-cards-border-hover-color: var(--ffe-farge-vann);
-    --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann);
-    --ffe-v-cards-icon-color: var(--ffe-farge-fjell);
+    --ffe-v-cards-subtext-color: var(--ffe-color-foreground-subtle);
     --ffe-v-cards-image-card-border: none;
-    --ffe-v-cards-common-group-card-border: none;
+    --ffe-v-cards-common-group-card-border: var(
+            --ffe-v-cards-common-card-border-radius
+        )
+        var(--ffe-color-border-primary-default);
     --ffe-v-cards-common-group-card-separation-border-color: var(
-        --ffe-farge-lysgraa
+        --ffe-color-border-primary-default
     );
-    --ffe-v-group-card-footer-background-color: var(--ffe-farge-syrin-30);
-
-    @media (prefers-color-scheme: dark) {
-        .regard-color-scheme-preference {
-            --ffe-v-cards-common-text-color: var(--ffe-farge-hvit);
-            --ffe-v-cards-common-card-background-color: var(--ffe-farge-svart);
-            --ffe-v-cards-common-card-border-color: var(--ffe-farge-koksgraa);
-            --ffe-v-cards-common-card-box-shadow: none;
-            --ffe-v-cards-clickabe-card-link-visited-color: var(
-                --ffe-farge-hvit
-            );
-            --ffe-v-cards-subtext-color: var(--ffe-farge-graa);
-            --ffe-v-cards-border-hover-color: var(--ffe-g-primary-color);
-            --ffe-v-cards-stippled-border-color: var(--ffe-farge-vann-70);
-            --ffe-v-cards-icon-color: var(--ffe-farge-vann-70);
-            --ffe-v-cards-image-card-border: 1px solid var(--ffe-farge-koksgraa);
-            --ffe-v-cards-common-group-card-border: 1px solid
-                var(--ffe-farge-moerkgraa);
-            --ffe-v-cards-common-group-card-separation-border-color: var(
-                --ffe-farge-moerkgraa
-            );
-            --ffe-v-group-card-footer-background-color: var(
-                --ffe-farge-koksgraa
-            );
-        }
-    }
+    --ffe-v-cards-icon-color:var(--ffe-color-foreground-emphasis) ;
 }
diff --git a/packages/ffe-core/less/body.less b/packages/ffe-core/less/body.less
index 77bf166d34..d706049d99 100644
--- a/packages/ffe-core/less/body.less
+++ b/packages/ffe-core/less/body.less
@@ -1,18 +1,7 @@
 // Sets default body color, font styles and background color for light and dark themes
 .ffe-body {
-    --color: var(--ffe-g-text-color);
-    --background-color: var(--ffe-farge-hvit);
-
-    background-color: var(--background-color);
-    color: var(--color);
-
-    &.regard-color-scheme-preference {
-        @media (prefers-color-scheme: dark) {
-            --color: var(--ffe-farge-lysgraa);
-            --background-color: var(--ffe-farge-svart);
-        }
-    }
-
+    background-color: var(--ffe-color-foreground-default);
+    color: var(--ffe-color-background-default);
     font-family: var(--ffe-g-font);
     font-variant-numeric: tabular-nums;
 
diff --git a/packages/ffe-core/less/colors-deprecated.less b/packages/ffe-core/less/colors-deprecated.less
deleted file mode 100644
index d9a75e5f48..0000000000
--- a/packages/ffe-core/less/colors-deprecated.less
+++ /dev/null
@@ -1,59 +0,0 @@
-// ************************************** Deprecated *******************************************************'
-
-// Blue (Deprecated)
-@ffe-blue-royal: #002776; // Titles, lead, overlays
-@ffe-blue-cobalt: #005aa4; // Primary buttons, emphasis on blue areas and product cards
-@ffe-blue-azure: #0071cd; // Secondary buttons
-@ffe-blue-sky: #7fc6e8;
-@ffe-blue-pale: #dff1f9; // Info-boxes, etc.
-@ffe-blue-ice: #eff8fc; // Expandable table rows
-@ffe-blue-focus: #a1dfff; // Focus on buttons and controls
-
-// Green (Deprecated)
-@ffe-green: #37b441; // E.g. slider tool
-@ffe-green-shamrock: #008a00; // Action buttons, slider tool, (should indicate affordance)
-@ffe-green-emerald: #007b00;
-@ffe-green-mint: #e1f4e3; // ~20% opacity of ffe-green-shamrock. (Info-boxes, etc.)
-
-// Orange (Deprecated)
-@ffe-orange: #ff9100; // Campaigns
-@ffe-orange-fire: #da3d00; // Form validation, Error messages
-@ffe-orange-salmon: #f3bbaa; // ~20% opacity of ffe-orange-fire. (Info-boxes, etc.)
-
-// Red (Deprecated)
-@ffe-red: #e60000;
-
-// Purple (Deprecated)
-@ffe-purple: #c94096;
-@ffe-purple-magenta: #a20076;
-@ffe-purple-violet: #551a8b; // Visited links
-
-// Beige (Deprecated)
-@ffe-sand: #f8f5eb; // @ffe-sand + @ffe-sand-25
-
-// White (Deprecated)
-@ffe-white: #fff;
-
-// Grey (Deprecated)
-@ffe-grey: #adadad;
-@ffe-grey-cloud: #f4f4f4; // Background panels
-@ffe-grey-silver: #ccc; // Lines, borders, inactive tool elements (slider, etc.)
-@ffe-grey-charcoal: #676767;
-@ffe-grey-warm: #f6f6f3;
-
-// Black (Deprecated)
-@ffe-black: #262626; // Body text, and some other texts
-
-// Deprecated
-@ffe-blue-deep-sky: #008ed2; // Deprecated 05.2018 - Use @ffe-blue-azure in stead
-@ffe-sand-ivory: #fbfaf5; // Deprecated 05.2018 - Use @ffe-sand or @ffe-grey-warm in stead
-
-// Dark mode. Only for use in a native app context. (Deprecated)
-@ffe-black-darkmode: #000000; // Default background color
-@ffe-white-darkmode: #ffffff; // Emphasized text
-@ffe-grey-charcoal-darkmode: #1c1c1c; // Emphasized surfaces
-@ffe-grey-darkmode: #292929; // Interactive surfaces
-@ffe-grey-silver-darkmode: #858585; // Borders and accents
-@ffe-grey-cloud-darkmode: #cccccc; // Default font color on default background and form labels
-@ffe-blue-azure-darkmode: #0a91ff; // Primary interaction and icon color
-@ffe-red-darkmode: #ff2424; // Tweaked ffe-red for better contrast
diff --git a/packages/ffe-core/less/colors.less b/packages/ffe-core/less/colors.less
index 51dba074ec..bf683b0e4a 100644
--- a/packages/ffe-core/less/colors.less
+++ b/packages/ffe-core/less/colors.less
@@ -2,6 +2,7 @@
 // ======== Ny visuell identitet ========
 //
 
+/* DEPRICATED. Skal ikke brukes lenger. Fargene fra colors-semantic skal brukes. */
 // Primærpalett
 @ffe-farge-fjell: #002776;
 @ffe-farge-fjell-70: tint(@ffe-farge-fjell, 30%);
diff --git a/packages/ffe-core/less/theme.less b/packages/ffe-core/less/theme.less
index 4d26b5ecbe..f881f10912 100644
--- a/packages/ffe-core/less/theme.less
+++ b/packages/ffe-core/less/theme.less
@@ -3,9 +3,10 @@
 /**
  * These variables are intended to support theming of components. Override any value to create your own look and feel.
  */
-
 :root,
 :host {
+    /* DEPRICATED, bruk colors-semantic i stedet for */
+
     /** Primærpalett */
     --ffe-farge-fjell: @ffe-farge-fjell;
     --ffe-farge-fjell-70: @ffe-farge-fjell-70;
@@ -61,6 +62,8 @@
     --ffe-farge-lysvarmgraa: @ffe-farge-lysvarmgraa;
     --ffe-farge-hvit: @ffe-farge-hvit;
 
+    /* END depricated */
+
     /** Font sizes */
     --ffe-fontsize-body-text: 1rem;
     --ffe-fontsize-small-text: 0.875rem;
@@ -125,18 +128,18 @@
     /** Theme base colors */
 
     /* Links, buttons and similar */
-    --ffe-g-primary-color: var(--ffe-farge-vann);
+    --ffe-g-primary-color: var(--ffe-color-fill-primary-default); //Depricated
 
     /* Headings, labels, hover, etc */
-    --ffe-g-secondary-color: var(--ffe-farge-fjell);
+    --ffe-g-secondary-color: var(--ffe-color-foreground-emphasis); //Depricated
 
     /* Error messages, invalid inputs, etc  */
-    --ffe-g-error-color: var(--ffe-farge-baer);
+    --ffe-g-error-color: var(--ffe-color-fill-feedback-critical); //Depricated
 
     /** Theme borders */
 
     /* Form element borders */
-    --ffe-g-border-color: var(--ffe-farge-varmgraa);
+    --ffe-g-border-color: var(--ffe-color-border-primary-default); //Depricated
     --ffe-g-border-radius: 8px;
     --ffe-g-border-radius-lg: 16px;
     --ffe-g-border-width: 1px;
@@ -162,34 +165,26 @@
     /** Typography */
 
     /* Default body text color */
-    --ffe-g-text-color: var(--ffe-farge-svart);
+    --ffe-g-text-color: var(--ffe-color-foreground-default);
 
     /* Lead paragraph */
-    --ffe-g-lead-color: var(--ffe-farge-fjell);
+    --ffe-g-lead-color: var(--ffe-color-border-primary-subtle);
 
     /* Headings */
-    --ffe-g-heading-color: var(--ffe-farge-fjell);
+    --ffe-g-heading-color: var(--ffe-color-border-primary-emphasis);
 
     /* Links */
-    --ffe-g-link-color: var(--ffe-farge-vann);
-    --ffe-g-link-color-hover: var(--ffe-farge-fjell);
-    --ffe-g-link-color-visited: var(--ffe-farge-lyng);
-    --ffe-g-link-icon-color-hover: var(--ffe-farge-natt);
-    --ffe-g-link-icon-color-focus: var(--ffe-farge-vann);
-
-    @media (prefers-color-scheme: dark) {
-        .regard-color-scheme-preference {
-            --ffe-g-primary-color: var(--ffe-farge-vann-70);
-            --ffe-g-secondary-color: var(--ffe-farge-vann-70);
-            --ffe-g-border-color: var(--ffe-farge-graa);
-            --ffe-g-text-color: var(--ffe-farge-lysgraa);
-            --ffe-g-lead-color: var(--ffe-farge-vann-70);
-            --ffe-g-heading-color: var(--ffe-farge-vann-70);
-            --ffe-g-link-color: var(--ffe-farge-vann-70);
-            --ffe-g-link-color-hover: var(--ffe-farge-vann-30);
-            --ffe-g-link-color-visited: var(--ffe-farge-lyng-70);
-            --ffe-g-link-icon-color-hover: var(--ffe-farge-vann-30);
-            --ffe-g-link-icon-color-focus: var(--ffe-farge-hvit);
-        }
-    }
+    --ffe-g-link-color: var(--ffe-color-foreground-interactive-link);
+    --ffe-g-link-color-hover: var(
+        --ffe-color-foreground-interactive-link-hover
+    );
+    --ffe-g-link-color-visited: var(
+        --ffe-color-foreground-interactive-link-pressed
+    );
+    --ffe-g-link-icon-color-hover: var(
+        --ffe-color-foreground-interactive-link-hover
+    );
+    --ffe-g-link-icon-color-focus: var(
+        --ffe-color-foreground-interactive-link-pressed
+    );
 }
diff --git a/packages/ffe-core/less/typography.less b/packages/ffe-core/less/typography.less
index 297a130e92..b516cb768a 100644
--- a/packages/ffe-core/less/typography.less
+++ b/packages/ffe-core/less/typography.less
@@ -1,5 +1,4 @@
 @import 'breakpoints';
-@import 'colors';
 
 .ffe-h1 {
     line-height: 2.25rem;
@@ -33,7 +32,7 @@
 
 .ffe-small-text,
 .ffe-micro-text {
-    color: var(--ffe-g-text-color);
+    color: var(--ffe-color-foreground-default);
     font-family: var(--ffe-g-font);
     font-weight: normal;
     font-variant-numeric: tabular-nums;
@@ -59,7 +58,7 @@
 .ffe-h4,
 .ffe-h5,
 .ffe-h6 {
-    color: var(--ffe-g-heading-color);
+    color: var(--ffe-color-foreground-emphasis);
     font-weight: normal;
     margin-bottom: var(--ffe-spacing-xs);
     margin-top: 0;
@@ -67,7 +66,7 @@
     overflow-wrap: anywhere;
 
     &--error {
-        color: var(--ffe-g-error-color);
+        color: var(--ffe-color-foreground-feedback-critical);
     }
 
     &--inline {
@@ -79,13 +78,8 @@
     }
 
     &--with-border {
-        border-bottom: 1px solid var(--ffe-farge-lysgraa);
+        border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-foreground-emphasis);
         padding-bottom: var(--ffe-spacing-xs);
-        .regard-color-scheme-preference & {
-            @media (prefers-color-scheme: dark) {
-                border-color: var(--ffe-farge-graa);
-            }
-        }
     }
 
     &--no-underline {
@@ -111,7 +105,7 @@
 }
 
 .ffe-body-text {
-    color: var(--ffe-g-text-color);
+    color: var(--ffe-color-foreground-default);
     font-family: var(--ffe-g-font);
     font-variant-numeric: tabular-nums;
     line-height: 1.5rem;
@@ -124,7 +118,7 @@
     margin-bottom: 1em;
     margin-top: 0;
     line-height: 1.5rem;
-    color: var(--ffe-g-text-color);
+    color: var(--ffe-color-foreground-default);
     text-wrap: pretty;
 
     &--text-center {
@@ -150,20 +144,20 @@
 }
 
 .ffe-lead-paragraph {
-    color: var(--ffe-g-lead-color);
+    color: var(--ffe-color-foreground-emphasis);
     line-height: 1.5rem;
     font-size: var(--ffe-fontsize-lead-paragraph);
 }
 
 .ffe-sub-lead-paragraph {
-    color: var(--ffe-g-text-color);
+    color: var(--ffe-color-foreground-default);
     line-height: 1.5rem;
     font-size: var(--ffe-fontsize-sub-lead-paragraph);
 }
 
 .ffe-link-text {
-    border-bottom: 1px solid var(--ffe-g-link-color);
-    color: var(--ffe-g-link-color);
+    border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-foreground-interactive-link);
+    color: var(--ffe-color-foreground-interactive-link);
     cursor: pointer;
     text-decoration: none;
     word-wrap: break-all;
@@ -172,15 +166,15 @@
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            border-bottom-color: var(--ffe-g-link-color-hover);
-            color: var(--ffe-g-link-color-hover);
+            border-bottom-color: var(--ffe-color-foreground-interactive-link-hover);
+            color: var(--ffe-color-foreground-interactive-link-hover);
             text-decoration: none;
         }
     }
 
     &:visited {
-        border-bottom-color: var(--ffe-g-link-color-visited);
-        color: var(--ffe-g-link-color-visited);
+        border-bottom-color: var(--ffe-color-foreground-interactive-link-pressed);
+        color: var(--ffe-color-foreground-interactive-link-pressed);
         text-decoration: none;
     }
 
@@ -189,24 +183,17 @@
     }
 
     &:focus {
-        border-color: var(--ffe-farge-hvit);
-        color: var(--ffe-farge-hvit);
+        border-color: var(--ffe-color-foreground-interactive-link-pressed);
+        color: var(--ffe-color-foreground-interactive-link-pressed);
         border-radius: 1px;
-        background-color: var(--ffe-g-link-color);
-        box-shadow: 0 0 0 2px var(--ffe-g-link-color);
+        background-color: var(--ffe-color-foreground-interactive-link);
+        box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link);
         outline: none;
-
-        .regard-color-scheme-preference & {
-            @media (prefers-color-scheme: dark) {
-                border-color: var(--ffe-farge-svart) !important;
-                color: var(--ffe-farge-svart) !important;
-            }
-        }
     }
 }
 
 .ffe-link-icon {
-    fill: var(--ffe-g-link-color);
+    fill: var(--ffe-color-foreground-interactive-link);
     display: inline-flex;
     border-radius: 1.5rem;
     border: 2px solid transparent;
@@ -215,30 +202,26 @@
 
     @media (hover: hover) and (pointer: fine) {
         &:hover {
-            fill: var(--ffe-g-link-icon-color-hover);
+            fill: var(--ffe-color-foreground-interactive-link-hover);
         }
     }
 
     &:focus {
-        box-shadow: 0 0 0 2px var(--ffe-g-link-icon-color-focus);
+        box-shadow: 0 0 0 2px var(--ffe-color-foreground-interactive-link-pressed);
     }
 }
 
 .ffe-divider-line {
     border: none;
-    border-bottom: solid 1px var(--ffe-farge-lysgraa);
+    border-bottom: var(--ffe-g-border-width) solid var(--ffe-color-border-primary-default);
     padding-top: 1px;
     padding-bottom: 1px;
     width: 100%;
-    .regard-color-scheme-preference & {
-        @media (prefers-color-scheme: dark) {
-            border-color: var(--ffe-farge-graa);
-        }
-    }
 }
 
 .ffe-strong-text {
     font-family: var(--ffe-g-font-strong);
+    color: var(--ffe-color-foreground-default);
     font-variant-numeric: tabular-nums;
     font-weight: normal;
 }
@@ -248,18 +231,15 @@
     font-variant-numeric: tabular-nums;
     font-weight: normal;
     font-style: normal;
+    color: var(--ffe-color-foreground-default);
 }
 
 .ffe-pre-text {
-    background-color: var(--ffe-farge-sand-70);
+    background-color: var(--ffe-color-background-subtle);
+    color: var(--ffe-color-foreground-default);
     font-family: consolas, menlo, monaco, monospace;
     margin: 0;
     text-align: left;
-    .regard-color-scheme-preference & {
-        @media (prefers-color-scheme: dark) {
-            background-color: var(--ffe-farge-koksgraa);
-        }
-    }
 }
 
 .ffe-inline-separator {
diff --git a/packages/ffe-core/tokens.config.js b/packages/ffe-core/tokens.config.js
index c5e7df0aba..532d18d86f 100644
--- a/packages/ffe-core/tokens.config.js
+++ b/packages/ffe-core/tokens.config.js
@@ -2,7 +2,6 @@ module.exports = {
     sources: [
         'less/breakpoints.less',
         'less/colors.less',
-        'less/colors-deprecated.less',
         'less/dimensions.less',
         'less/motion.less',
         'less/spacing.less',