diff --git a/storefront/components/Banner/Banner.module.css b/storefront/components/Banner/Banner.module.css
index e39aa02d58..69b76db5cc 100644
--- a/storefront/components/Banner/Banner.module.css
+++ b/storefront/components/Banner/Banner.module.css
@@ -1,45 +1,43 @@
 .banner {
-  min-height: 460px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
-  padding-top: var(--spacing-7);
-  padding-bottom: var(--spacing-7);
-  gap: var(--spacing-5);
+  gap: var(--fds-spacing-6);
+  min-height: 460px;
+  padding-top: var(--fds-spacing-12);
+  padding-bottom: var(--fds-spacing-12);
 }
 
 .left {
-  flex-basis: calc(53% - (var(--spacing-5) / 2));
+  flex-basis: calc(53% - (var(--fds-spacing-6) / 2));
   flex-grow: 1;
 }
 
 .right {
-  flex-basis: calc(47% - (var(--spacing-5) / 2));
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 275px;
+  flex-basis: calc(47% - (var(--fds-spacing-6) / 2));
   flex-grow: 1;
+  height: 275px;
 }
 
 .title {
-  font-weight: 500;
-  font-size: var(--font-900);
-  margin-bottom: var(--spacing-3);
   display: flex;
   align-items: center;
+  margin-bottom: var(--fds-spacing-3);
+  font: var(--fds-typography-heading-xlarge);
 }
 
 .title > span {
-  margin-left: 20px;
+  margin-left: var(--fds-spacing-4);
 }
 
 .desc {
-  font-size: var(--font-400);
-  line-height: 1.7em;
-  padding-right: 30px;
+  padding-right: var(--fds-spacing-7);
   margin-bottom: 0;
+  font: var(--fds-typography-ingress-medium);
 }
 
 .shapes {
@@ -58,30 +56,30 @@
 }
 
 .one {
-  left: 0;
   top: 0;
-  border-color: #f45f63;
+  left: 0;
+  border-color: var(--fds-brand-alt1-600);
   animation: one 1.5s forwards ease-out;
 }
 
 .two {
-  right: 0;
   top: 0;
-  border-color: #1e98f5;
+  right: 0;
+  border-color: var(--fds-brand-alt3-600);
   animation: two 1.5s forwards ease-out;
 }
 
 .three {
   right: 0;
   bottom: 0;
-  border-color: #68707c;
+  border-color: var(--fds-semantic-border-neutral-default);
   animation: three 1.5s forwards ease-out;
 }
 
 .four {
   left: 0;
   bottom: 0;
-  border-color: #e5aa20;
+  border-color: var(--fds-brand-alt2-600);
   animation: four 1.5s forwards ease-out;
 }
 
diff --git a/storefront/components/Card/Card.module.css b/storefront/components/Card/Card.module.css
deleted file mode 100644
index c80652f884..0000000000
--- a/storefront/components/Card/Card.module.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.card {
-  text-align: left;
-  color: inherit;
-  text-decoration: none;
-  background-color: white;
-  padding: 40px;
-  display: block;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 0.04);
-}
-
-.title {
-  font-size: 24px;
-  font-weight: 500;
-  line-height: 1.3em;
-}
-
-.desc {
-  font-size: 16px;
-  line-height: 1.5em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 6;
-  -webkit-box-orient: vertical;
-  margin-bottom: 0;
-}
-
-.date {
-  font-size: 14px;
-  margin-top: 12px;
-  margin-bottom: 16px;
-}
diff --git a/storefront/components/Card/Card.tsx b/storefront/components/Card/Card.tsx
deleted file mode 100644
index 7d904b0a4e..0000000000
--- a/storefront/components/Card/Card.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import Link from 'next/link';
-
-import classes from './Card.module.css';
-
-interface CardProps {
-  title: string;
-  description: string;
-  url: string;
-}
-
-const Card = ({ title, description, url }: CardProps) => {
-  return (
-    <Link
-      href={url}
-      className={classes.card}
-      prefetch={false}
-    >
-      <h3 className={classes.title}>{title}</h3>
-      <div className={classes.date}>25.mars 2023</div>
-      <p className={classes.desc}>{description}</p>
-    </Link>
-  );
-};
-
-export { Card };
diff --git a/storefront/components/Card/index.ts b/storefront/components/Card/index.ts
deleted file mode 100644
index 1e15afd140..0000000000
--- a/storefront/components/Card/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Card } from './Card';
diff --git a/storefront/components/CodeSnippet/CodeSnippet.module.css b/storefront/components/CodeSnippet/CodeSnippet.module.css
index e3b41a1690..33a5ba4d3d 100644
--- a/storefront/components/CodeSnippet/CodeSnippet.module.css
+++ b/storefront/components/CodeSnippet/CodeSnippet.module.css
@@ -1,28 +1,24 @@
-.code-snippet {
+.codeSnippet {
   position: relative;
 }
 
-.code-snippet pre {
-  /* border-radius: 4px; */
-}
-
-.code-snippet__icon {
+.icon {
   position: absolute;
   top: 6px;
   right: 6px;
-  color: white;
   height: 40px;
   width: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: #1a1a1a;
-  border-radius: 4px;
+  background-color: var(--fds-semantic-text-neutral-default);
+  color: white;
+  border-radius: var(--fds-border_radius-medium);
   border: none;
   transition: 0.15s all;
   cursor: pointer;
 }
 
-.code-snippet__icon:hover {
-  background-color: #464646;
+.icon:hover {
+  background-color: var(--fds-semantic-text-neutral-subtle);
 }
diff --git a/storefront/components/CodeSnippet/CodeSnippet.tsx b/storefront/components/CodeSnippet/CodeSnippet.tsx
index 421ce94786..b31298ceca 100644
--- a/storefront/components/CodeSnippet/CodeSnippet.tsx
+++ b/storefront/components/CodeSnippet/CodeSnippet.tsx
@@ -52,7 +52,7 @@ const CodeSnippet = ({ language = 'markup', children = '' }) => {
   };
 
   return (
-    <div className={classes['code-snippet']}>
+    <div className={classes.codeSnippet}>
       <Tippy
         content={toolTipText}
         hideOnClick={false}
@@ -60,10 +60,10 @@ const CodeSnippet = ({ language = 'markup', children = '' }) => {
         <button
           onMouseEnter={() => setToolTipText('Kopier')}
           onClick={() => onButtonClick()}
-          className={classes['code-snippet__icon']}
+          className={classes.icon}
           title='Kopier'
         >
-          <FilesIcon scale={16} />
+          <FilesIcon fontSize={20} />
         </button>
       </Tippy>
       <SyntaxHighlighter
diff --git a/storefront/components/Footer/Footer.module.css b/storefront/components/Footer/Footer.module.css
index efc74568a2..93fc43c94a 100644
--- a/storefront/components/Footer/Footer.module.css
+++ b/storefront/components/Footer/Footer.module.css
@@ -1,6 +1,6 @@
 .footer {
-  background-color: #1e2b3c;
-  color: #e6e6e6;
+  background-color: var(--fds-semantic-surface-neutral-inverted);
+  color: var(--color-text-on_inverted-subtle);
   font-weight: 300;
   letter-spacing: 0.3px;
 }
@@ -8,27 +8,26 @@
 .container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
-  gap: 40px;
+  gap: var(--fds-spacing-10);
 }
 
 .title {
-  font-size: 20px;
-  font-weight: 500;
-  margin-bottom: 16px;
+  font: var(--fds-typography-heading-xsmall);
+  margin-bottom: var(--fds-spacing-4);
 }
 
 .footer .logos img {
-  margin-right: 10px;
   height: 26px;
   width: auto;
+  margin-right: var(--fds-spacing-2);
 }
 
 .logos {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 32px;
-  margin-top: 30px;
+  gap: var(--fds-spacing-8);
+  margin-top: var(--fds-spacing-8);
 }
 
 .links {
@@ -38,7 +37,7 @@
 
 .links li {
   list-style: none;
-  margin-bottom: 22px;
+  margin-bottom: var(--fds-spacing-5);
 }
 
 .links li:last-child {
@@ -46,34 +45,33 @@
 }
 
 .top {
-  padding: var(--spacing-8) 0;
+  padding: var(--fds-spacing-18) 0;
 }
 
 .bottom {
-  background-color: #17202e;
-  padding: 30px 0;
-  color: #d4d4d4;
-  font-size: 15px;
+  background-color: var(--color-surface-neutral-inverted-darker);
+  padding: var(--fds-spacing-7) 0;
+  color: var(--color-text-on_inverted-subtle);
+  font: var(--fds-typography-paragraph-short-small);
 }
 
 .button {
-  border: 1px dashed #e6e6e6;
-  height: 48px;
-  padding: 0 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: #e6e6e6;
   text-decoration: none;
-  margin-top: 32px;
+  height: 48px;
+  padding: 0 var(--fds-spacing-5);
+  margin-top: var(--fds-spacing-7);
   border-radius: 2px;
-  font-weight: 400;
   transition: 0.1s all;
-  font-size: 15px;
+  font: var(--fds-typography-paragraph-short-small);
+  color: var(--color-text-on_inverted-subtle);
+  border: 1px dashed var(--color-text-on_inverted-subtle);
 }
 
 .button:hover {
-  background-color: #17202e;
+  background-color: var(--color-surface-neutral-inverted-darker);
   border-color: white;
   color: white;
 }
diff --git a/storefront/components/Grid/Grid.module.css b/storefront/components/Grid/Grid.module.css
index c3ad7fc02b..54fa7480ef 100644
--- a/storefront/components/Grid/Grid.module.css
+++ b/storefront/components/Grid/Grid.module.css
@@ -1,8 +1,8 @@
 .grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 32px;
-  margin: 30px 0;
+  gap: var(--grid-gap);
+  margin: var(--fds-spacing-7) 0;
 }
 
 @media (max-width: 1200px) {
diff --git a/storefront/components/Header/Header.module.css b/storefront/components/Header/Header.module.css
index e04cbb99a8..e764258233 100644
--- a/storefront/components/Header/Header.module.css
+++ b/storefront/components/Header/Header.module.css
@@ -2,7 +2,7 @@
   height: 96px;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid #dbdbdb;
+  border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
   background-color: white;
 }
 
@@ -11,7 +11,7 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: 0 var(--spacing-5);
+  padding: 0 var(--fds-spacing-7);
 }
 
 .logo {
@@ -19,7 +19,7 @@
   width: auto;
 }
 
-.logo-link {
+.logoLink {
   display: flex;
   align-items: center;
 }
@@ -38,28 +38,28 @@
 
 .item {
   list-style: none;
-  margin-left: 32px;
+  margin-left: var(--fds-spacing-7);
 }
 
-.item a {
+.link {
   color: inherit;
   text-decoration: none;
-  font-size: 18px;
+  font: var(--fds-typography-paragraph-medium);
   border-bottom: 3px solid transparent;
-  padding-bottom: 8px;
+  padding-bottom: var(--fds-spacing-2);
   transition: 0.1s all ease-out;
 }
 
-.item .active {
-  border-color: #6db6ea;
+.link:hover {
+  border-color: var(--fds-semantic-border-neutral-divider);
 }
 
-.item a:hover {
-  border-color: #c3c3c3;
+.item .active {
+  border-color: var(--fds-brand-alt3-600);
 }
 
 .item .active.link:hover {
-  border-color: #6db6ea;
+  border-color: var(--fds-brand-alt3-600);
 }
 
 @media (max-width: 991.98px) {
@@ -79,7 +79,7 @@
     right: 0;
     top: 71px;
     background-color: white;
-    box-shadow: 0 2px 6px rgb(0 0 0 / 0.15);
+    box-shadow: var(--fds-shadow-large);
     flex-direction: column;
     display: none;
     padding: 20px 0;
diff --git a/storefront/components/Header/Header.tsx b/storefront/components/Header/Header.tsx
index 5cb0cf3284..587b72c850 100644
--- a/storefront/components/Header/Header.tsx
+++ b/storefront/components/Header/Header.tsx
@@ -44,7 +44,7 @@ const Header = () => {
       <div className={classes.container}>
         <div className={classes.left}>
           <Link
-            className={classes['logo-link']}
+            className={classes.logoLink}
             href='/'
             aria-label='Designsystem forside'
             onClick={() => setOpen(false)}
diff --git a/storefront/components/ImageSection/ImageSection.module.css b/storefront/components/ImageSection/ImageSection.module.css
index 642c55ca4a..f11a4d2521 100644
--- a/storefront/components/ImageSection/ImageSection.module.css
+++ b/storefront/components/ImageSection/ImageSection.module.css
@@ -1,51 +1,48 @@
 .section {
-  padding-top: var(--spacing-7);
-  padding-bottom: var(--spacing-7);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-7);
+  gap: var(--fds-spacing-14);
+  padding-top: var(--fds-spacing-14);
+  padding-bottom: var(--fds-spacing-14);
 }
 
 .blue {
-  background-color: #c2e4fe;
+  background-color: var(--fds-brand-alt3-300);
 }
 
 .red {
-  background-color: #ffc0c2;
+  background-color: var(--fds-brand-alt1-300);
 }
 
 .yellow {
-  background-color: #f5dda6;
+  background-color: var(--fds-brand-alt2-300);
 }
 
 .grey {
-  background-color: #f4f5f6;
+  background-color: var(--fds-semantic-background-subtle);
 }
 
 .imgContainer {
-  flex-basis: calc(35% - (var(--spacing-8) / 2));
+  flex-basis: calc(35% - (var(--fds-spacing-18) / 2));
   flex-grow: 1;
 }
 
 .textContainer {
-  flex-basis: calc(65% - (var(--spacing-8) / 2));
+  flex-basis: calc(65% - (var(--fds-spacing-18) / 2));
   flex-grow: 1;
   display: flex;
   flex-direction: column;
 }
 
 .title {
-  line-height: 1.3em;
-  font-size: var(--font-700);
-  font-weight: 500;
-  margin-bottom: 18px;
+  font: var(--fds-typography-heading-large);
+  margin-bottom: var(--fds-spacing-4);
 }
 
 .desc {
-  line-height: 1.7rem;
-  font-size: var(--font-300);
+  font: var(--fds-typography-paragraph-medium);
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -58,13 +55,13 @@
 .buttons {
   display: flex;
   flex-wrap: wrap;
-  gap: 24px;
-  margin-top: 20px;
+  gap: var(--fds-spacing-5);
+  margin-top: var(--fds-spacing-5);
 }
 
 .button {
   height: 48px;
-  padding: 0 16px;
+  padding: 0 var(--fds-spacing-4);
   border: 1px solid #c0c0c0;
   display: flex;
   align-items: center;
@@ -72,7 +69,7 @@
   border-radius: 4px;
   cursor: pointer;
   transition: 0.1s all;
-  color: #1e2b3c !important;
+  color: var(--fds-semantic-text-neutral-default) !important;
   text-decoration: none;
 }
 
@@ -87,22 +84,22 @@
 }
 
 .button svg {
-  margin-right: 8px;
+  margin-right: var(--fds-spacing-2);
   color: #1e2b3c;
 }
 
 .button img {
   height: 20px;
-  margin-right: 8px;
+  margin-right: var(--fds-spacing-2);
   border-radius: 50%;
 }
 
 .link {
   text-underline-offset: 5px;
-  color: #1e2b3c;
+  color: var(--fds-semantic-text-neutral-default);
   display: flex;
   align-items: center;
-  margin-top: 20px;
+  margin-top: var(--fds-spacing-5);
 }
 
 .link:hover {
@@ -110,6 +107,6 @@
 }
 
 .link svg {
-  margin-right: 8px;
-  color: #1e2b3c;
+  margin-right: var(--fds-spacing-2);
+  color: var(--fds-semantic-text-neutral-default);
 }
diff --git a/storefront/components/JumpToMain/JumpToMain.module.css b/storefront/components/JumpToMain/JumpToMain.module.css
index a26c1306eb..f9310db530 100644
--- a/storefront/components/JumpToMain/JumpToMain.module.css
+++ b/storefront/components/JumpToMain/JumpToMain.module.css
@@ -15,10 +15,10 @@
   position: relative;
   height: auto;
   width: auto;
-  padding: 10px 0;
-  background-color: var(--color-link);
+  padding: var(--fds-spacing-2) 0;
+  background-color: var(--fds-semantic-text-action-default);
   color: white;
-  padding-left: 24px;
+  padding-left: var(--fds-spacing-5);
   border: none;
   text-decoration: none;
 }
diff --git a/storefront/components/MdxContent/MdxContent.module.css b/storefront/components/MdxContent/MdxContent.module.css
index 591f234dcb..5333f40005 100644
--- a/storefront/components/MdxContent/MdxContent.module.css
+++ b/storefront/components/MdxContent/MdxContent.module.css
@@ -1,5 +1,4 @@
 .content {
-  padding: 8px 24px;
   width: 100%;
 }
 
diff --git a/storefront/components/NavigationCard/NavigationCard.module.css b/storefront/components/NavigationCard/NavigationCard.module.css
index e1c8ad3739..95e6e96a1e 100644
--- a/storefront/components/NavigationCard/NavigationCard.module.css
+++ b/storefront/components/NavigationCard/NavigationCard.module.css
@@ -1,10 +1,10 @@
 .card {
   background-color: white;
-  padding: 40px;
+  padding: var(--fds-spacing-8);
   display: block;
   color: inherit;
   text-decoration: none;
-  box-shadow: 0 2px 8px rgb(0 0 0 / 0.04);
+  box-shadow: var(--fds-shadow-xsmall);
   border-radius: 4px;
   transition: 0.2s all;
   position: relative;
@@ -14,7 +14,7 @@
 
 .card:hover {
   color: inherit;
-  box-shadow: 0 2px 6px rgb(0 0 0 / 0.2);
+  box-shadow: var(--fds-shadow-medium);
   transform: translateY(-4px);
   cursor: pointer;
 }
@@ -30,32 +30,30 @@
 }
 
 .red {
-  background-color: #fbbfc1;
+  background-color: var(--fds-brand-alt1-300);
 }
 
 .blue {
-  background-color: #a5d6fb;
+  background-color: var(--fds-brand-alt3-300);
 }
 
 .yellow {
-  background-color: #f5dda6;
+  background-color: var(--fds-brand-alt2-300);
 }
 
 .grey {
-  background-color: #f4f5f6;
+  background-color: var(--fds-semantic-background-subtle);
   box-shadow: none;
-  border: 1px solid #eee;
 }
 
 .title {
-  font-size: 20px;
-  font-weight: 500;
-  margin-top: 16px;
-  margin-bottom: 12px;
+  font: var(--fds-typography-heading-xsmall);
+  margin-top: var(--fds-spacing-4);
+  margin-bottom: var(--fds-spacing-3);
   text-align: center;
 }
 
 .desc {
-  font-size: 16px;
+  font: var(--fds-typography-paragraph-small);
   text-align: center;
 }
diff --git a/storefront/components/ResponsiveIframe/ResponsiveIframe.module.css b/storefront/components/ResponsiveIframe/ResponsiveIframe.module.css
index 721c8847b9..b34188dd54 100644
--- a/storefront/components/ResponsiveIframe/ResponsiveIframe.module.css
+++ b/storefront/components/ResponsiveIframe/ResponsiveIframe.module.css
@@ -3,10 +3,10 @@
   overflow: hidden;
   width: 100%;
   padding-top: 56.25%;
-  box-shadow: 0 2px 4px rgba(0 0 0 / 0.1);
+  box-shadow: var(--fds-shadow-medium);
   border-radius: 4px;
-  margin-top: 32px;
-  margin-bottom: 32px;
+  margin-top: var(--fds-spacing-10);
+  margin-bottom: var(--fds-spacing-10);
 }
 
 .aspectFourThree {
diff --git a/storefront/components/Section/Section.module.css b/storefront/components/Section/Section.module.css
index 28e61eef25..d8da5fdec6 100644
--- a/storefront/components/Section/Section.module.css
+++ b/storefront/components/Section/Section.module.css
@@ -1,6 +1,6 @@
 .section {
-  background-color: #f4f5f6;
-  padding: var(--spacing-7) 0 var(--spacing-8) 0;
+  background-color: var(--fds-semantic-background-subtle);
+  padding: var(--fds-spacing-14) 0 var(--fds-spacing-18) 0;
   text-align: center;
 }
 
@@ -9,12 +9,11 @@
 }
 
 .title {
-  font-size: var(--font-700);
-  font-weight: 500;
+  font: var(--fds-typography-heading-large);
 }
 
 .header {
-  margin-bottom: var(--spacing-5);
+  margin-bottom: var(--fds-spacing-8);
 }
 
 .content {
@@ -25,6 +24,6 @@
 }
 
 .detail {
-  margin-top: 16px;
-  height: 32px;
+  margin-top: var(--fds-spacing-4);
+  height: var(--fds-spacing-7);
 }
diff --git a/storefront/components/SidebarMenu/SidebarMenu.module.css b/storefront/components/SidebarMenu/SidebarMenu.module.css
index bab2be0f28..d1fc42eff4 100644
--- a/storefront/components/SidebarMenu/SidebarMenu.module.css
+++ b/storefront/components/SidebarMenu/SidebarMenu.module.css
@@ -1,7 +1,7 @@
 .title {
-  font-size: 18px;
+  font: var(--fds-typography-paragraph-medium);
   font-weight: 600;
-  margin-bottom: 20px;
+  margin-bottom: var(--fds-spacing-5);
 }
 
 .list {
@@ -10,21 +10,22 @@
 }
 
 .listGroup {
-  margin-bottom: 32px;
+  margin-bottom: var(--fds-spacing-7);
   list-style: none;
 }
 
 .listGroupCompact {
-  margin-bottom: 16px;
+  margin-bottom: var(--fds-spacing-4);
 }
 
 .innerList {
   margin: 0 0 0 3px;
   padding: 0;
-  border-left: 1px solid rgb(222 222 222);
+  border-left: 1px solid var(--fds-semantic-border-neutral-subtle);
 }
 
 .innerTitle {
+  font: var(--fds-typography-paragraph-medium);
   font-weight: 500;
 }
 
@@ -36,32 +37,33 @@
 .link {
   color: inherit;
   text-decoration: none;
-  margin-top: 8px;
-  padding-left: 16px;
+  margin-top: var(--fds-spacing-2);
+  padding-left: var(--fds-spacing-4);
   display: block;
-  font-size: 16px;
+  font: var(--fds-typography-paragraph-small);
+  line-height: 1.3em;
   border-left: 3px solid transparent;
   margin-left: -2px;
 }
 
 .link:hover {
-  border-left-color: #c4c4c4;
+  border-left-color: var(--fds-semantic-border-neutral-subtle);
   font-weight: 500;
 }
 
 .linkCompact {
   margin-top: 0;
-  border-left: 1px solid rgb(222 222 222);
+  border-left: 1px solid var();
 }
 
 .linkActive {
-  border-left-color: var(--color-link);
-  color: var(--color-link);
+  border-left-color: var(--fds-semantic-text-action-default);
+  color: var(--fds-semantic-text-action-default);
   font-weight: 500;
 }
 
 .linkActive:hover {
-  border-left-color: var(--color-link);
+  border-left-color: var(--fds-semantic-text-action-default);
 }
 
 .toggleBtn {
@@ -71,12 +73,12 @@
 @media (max-width: 945.98px) {
   .menu {
     display: none;
-    margin-top: 32px;
+    margin-top: var(--fds-spacing-7);
   }
 
   .toggleBtn {
     display: block !important;
-    margin-bottom: 8px !important;
+    margin-bottom: var(--fds-spacing-2) !important;
   }
 
   .activeMenu {
diff --git a/storefront/components/Tag/Tag.module.css b/storefront/components/Tag/Tag.module.css
index e426960d40..01a29d1d1a 100644
--- a/storefront/components/Tag/Tag.module.css
+++ b/storefront/components/Tag/Tag.module.css
@@ -1,21 +1,18 @@
 .tag {
-  font-size: 14px;
   padding: 3px 6px;
   margin-left: 4px;
   border-radius: 3px;
+  font: var(--fds-typography-paragraph-small);
   font-weight: 500;
   text-transform: capitalize;
 }
 
 .purple {
-  background-color: var(--color-beta-strong);
-}
-
-.deprecated {
-  background-color: var(--color-decprecated);
+  background-color: var(--color-beta);
 }
 
 .large {
-  padding: 5px 11px;
-  font-size: 20px;
+  padding: 4px 11px;
+  font: var(--fds-typography-paragraph-large);
+  font-weight: 500;
 }
diff --git a/storefront/components/Tokens/TokenFontSize/TokenFontSize.module.css b/storefront/components/Tokens/TokenFontSize/TokenFontSize.module.css
index d517fd685b..cee9bb9251 100644
--- a/storefront/components/Tokens/TokenFontSize/TokenFontSize.module.css
+++ b/storefront/components/Tokens/TokenFontSize/TokenFontSize.module.css
@@ -1,5 +1,5 @@
 .font {
-  min-height: var(--preview-min-height);
+  min-height: 81px;
   min-height: 72px;
   width: 120px;
   border-radius: 4px;
diff --git a/storefront/components/Tokens/TokenList/TokenList.module.css b/storefront/components/Tokens/TokenList/TokenList.module.css
index 2538294182..3831707f6a 100644
--- a/storefront/components/Tokens/TokenList/TokenList.module.css
+++ b/storefront/components/Tokens/TokenList/TokenList.module.css
@@ -36,7 +36,7 @@
   grid-column-gap: 16px;
   grid-row-gap: 22px;
   grid-template-columns: repeat(3, 1fr);
-  margin-top: var(--spacing-3);
+  margin-top: var(--fds-spacing-3);
 }
 
 .cards2 {
@@ -64,7 +64,7 @@
   align-items: flex-start;
   align-items: center;
   display: flex;
-  gap: var(--spacing-3);
+  gap: var(--fds-spacing-3);
 }
 
 .preview {
diff --git a/storefront/components/Usage/ComponentUsage.module.css b/storefront/components/Usage/ComponentUsage.module.css
deleted file mode 100644
index c333b3510a..0000000000
--- a/storefront/components/Usage/ComponentUsage.module.css
+++ /dev/null
@@ -1,65 +0,0 @@
-.ComponentUsage {
-  display: flex;
-  flex-direction: column;
-  margin-top: 24px;
-}
-
-.box {
-  background-color: var(--colors-neutral-100);
-  border: 1px solid #eee;
-  min-height: 160px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border-bottom: 6px solid #2a8d00;
-  position: relative;
-  border-radius: 4px;
-}
-
-.ComponentUsage--danger .box {
-  border-bottom-color: #e00000;
-}
-
-.title {
-  font-size: 24px;
-  font-weight: 500;
-  margin-bottom: 0;
-  line-height: 1.3em;
-}
-
-.desc {
-  font-size: 16px;
-  line-height: 1.5em;
-  margin-top: 16px;
-}
-
-.textContainer {
-  width: 80%;
-  margin-right: 10px;
-}
-
-.content {
-  margin-top: 24px !important;
-}
-
-.content > * {
-  margin-bottom: 24px !important;
-}
-
-.iconContainer {
-  position: absolute;
-  left: 16px;
-  top: 16px;
-  background-color: #2a8d00;
-  border-radius: 50%;
-  height: 24px;
-  width: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.iconContainer--danger {
-  background-color: #e00000;
-}
diff --git a/storefront/components/Usage/ComponentUsage.tsx b/storefront/components/Usage/ComponentUsage.tsx
deleted file mode 100644
index 0375cb2f14..0000000000
--- a/storefront/components/Usage/ComponentUsage.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import { XMarkIcon, CheckmarkIcon } from '@navikt/aksel-icons';
-import cn from 'classnames';
-
-import classes from './ComponentUsage.module.css';
-
-export interface ComponentUsageProps {
-  type?: 'success' | 'danger';
-  component: never;
-  args: never;
-}
-
-const ComponentUsage = ({
-  type = 'success',
-  component,
-  args,
-}: ComponentUsageProps) => {
-  return (
-    <div
-      className={cn(classes.ComponentUsage, classes[`ComponentUsage--${type}`])}
-    >
-      <div className={classes.box}>
-        {type === 'success' ? (
-          <div className={classes.iconContainer}>
-            <CheckmarkIcon
-              fontSize={20}
-              color='white'
-            />
-          </div>
-        ) : (
-          <div
-            className={cn(
-              classes.iconContainer,
-              classes['iconContainer--danger'],
-            )}
-          >
-            <XMarkIcon
-              fontSize={20}
-              color='white'
-            />
-          </div>
-        )}
-        <div className={classes.content}>
-          {React.cloneElement(React.createElement(component), args)}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-ComponentUsage.displayName = 'Usage';
-
-export { ComponentUsage };
diff --git a/storefront/components/Usage/index.ts b/storefront/components/Usage/index.ts
deleted file mode 100644
index f0ee13a488..0000000000
--- a/storefront/components/Usage/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ComponentUsage } from './ComponentUsage';
diff --git a/storefront/components/index.ts b/storefront/components/index.ts
index 8ae28e5f8a..a8bcaa8374 100644
--- a/storefront/components/index.ts
+++ b/storefront/components/index.ts
@@ -1,5 +1,4 @@
 export { Banner } from './Banner';
-export { Card } from './Card';
 export { ClipboardBtn } from './ClipboardBtn';
 export { CodeSnippet } from './CodeSnippet';
 export { Container } from './Container';
@@ -21,4 +20,3 @@ export { SidebarMenu } from './SidebarMenu';
 export { Tag } from './Tag';
 export { TeaserCard } from './TeaserCard';
 export { TokenList } from './Tokens';
-export { ComponentUsage } from './Usage';
diff --git a/storefront/globals.css b/storefront/globals.css
index a4c7c93978..1f00cffb5b 100644
--- a/storefront/globals.css
+++ b/storefront/globals.css
@@ -1,39 +1,20 @@
 @import url('https://altinncdn.no/fonts/inter/inter.css');
 
 :root {
-  --bs-body-color: #1e2b3c;
-  --color-beta: #eceaff;
-  --color-beta-strong: #d6d4ff;
-  --color-decprecated: #ffd4d4;
-  --color-link: #0062ba;
+  --color-beta: #d6d4ff;
+  --color-text-on_inverted-subtle: #dbdbdb;
+  --color-surface-neutral-inverted-darker: #17202e;
 
-  /* Fluid spacing from 1200px to 320px */
-  --spacing-1: clamp(0.38rem, calc(0.33rem + 0.23vw), 0.5rem); /* 8px-6px */
-  --spacing-2: clamp(0.5rem, calc(0.41rem + 0.45vw), 0.75rem); /* 12px-8px */
-  --spacing-3: clamp(0.75rem, calc(0.66rem + 0.45vw), 1rem); /* 16px-12px */
-  --spacing-4: clamp(1rem, calc(0.82rem + 0.91vw), 1.5rem); /* 24px-16px */
-  --spacing-5: clamp(1.5rem, calc(1.32rem + 0.91vw), 2rem); /* 32px-24px */
-  --spacing-6: clamp(2rem, calc(1.64rem + 1.82vw), 3rem); /* 48px-32px */
-  --spacing-7: clamp(3rem, calc(2.64rem + 1.82vw), 4rem); /* 64px-48px */
-  --spacing-8: clamp(4rem, calc(3.64rem + 1.82vw), 5rem); /* 80px-64px */
-  --font-900: clamp(2.25rem, calc(2.07rem + 0.91vw), 2.75rem); /* 44px-36px */
-  --font-800: clamp(2rem, calc(1.91rem + 0.45vw), 2.25rem); /* 36px-32px */
-  --font-700: clamp(1.75rem, calc(1.66rem + 0.45vw), 2rem); /* 32px-28px */
-  --font-600: clamp(1.5rem, calc(1.41rem + 0.45vw), 1.75rem); /* 28px-24px */
-  --font-500: clamp(1.25rem, calc(1.16rem + 0.45vw), 1.5rem); /* 24px-20px */
-  --font-400: clamp(1.13rem, calc(1.08rem + 0.23vw), 1.25rem); /* 20px-18px */
-  --font-300: clamp(1rem, calc(0.95rem + 0.23vw), 1.13rem); /* 18px-16px */
+  /* Spacing for page and grid */
   --grid-max-width: 1380px;
   --grid-padding: clamp(1rem, calc(0.27rem + 3.64vw), 3rem); /* 48px-16px */
-  --grid-gap: var(--spacing-5);
-  --page-spacing-top: var(--spacing-7);
-  --page-spacing-bottom: var(--spacing-7);
-  --page-gap: var(--fds-spacing-7);
-  --preview-min-height: 81px;
+  --grid-gap: var(--fds-spacing-8);
+  --page-spacing-top: var(--fds-spacing-14);
+  --page-spacing-bottom: var(--fds-spacing-14);
 }
 
 body {
-  color: #1e2b3c;
+  color: var(--fds-semantic-text-neutral-default);
   line-height: 1.5;
   font-family: 'Inter', sans-serif;
   font-size: 16px;
@@ -67,11 +48,6 @@ h6 {
 }
 
 /* Utility classes */
-.grey-background {
-  background: #f4f5f6;
-}
-
-.mdx-embed {
-  box-shadow: 0 2px 4px rgba(0 0 0 / 0.1);
-  margin: 40px 0;
+.greyBackground {
+  background: var(--fds-semantic-background-subtle);
 }
diff --git a/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css b/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css
index 9209e888b8..3533f01811 100644
--- a/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css
+++ b/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css
@@ -2,7 +2,7 @@
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
-  gap: var(--page-gap);
+  gap: var(--grid-gap);
   margin-top: var(--page-spacing-top);
   margin-bottom: var(--page-spacing-bottom);
 }
diff --git a/storefront/layouts/NavPageLayout/NavPageLayout.tsx b/storefront/layouts/NavPageLayout/NavPageLayout.tsx
index ade7a0afae..2c333d2da8 100644
--- a/storefront/layouts/NavPageLayout/NavPageLayout.tsx
+++ b/storefront/layouts/NavPageLayout/NavPageLayout.tsx
@@ -1,45 +1,45 @@
-import React from 'react';
-
-import { Container, ImageSection, MdxContent } from '../../components';
-import type { ImageSectionProps } from '../../components';
-
-import classes from './NavPageLayout.module.css';
-
-interface NavPageLayoutProps {
-  content: React.ReactNode;
-  data: NavPageLayoutData;
-}
-
-interface NavPageLayoutData {
-  imageSection: ImageSectionProps;
-  headerColor?: 'red' | 'blue';
-}
-
-const NavPageLayout = ({ content, data }: NavPageLayoutProps) => {
-  return (
-    <main
-      id='main'
-      className='grey-background'
-    >
-      <ImageSection
-        imgSrc={data.imageSection.imgSrc}
-        imgAlt={data.imageSection.imgAlt}
-        backgroundColor={data.imageSection.backgroundColor}
-        imgHeight={220}
-        imgWidth={220}
-        title={data.imageSection.title}
-        description={data.imageSection.description}
-        link={data.imageSection.link}
-        imgPosition='right'
-      ></ImageSection>
-      <div className={classes.content}>
-        <Container>
-          <MdxContent>{content}</MdxContent>
-        </Container>
-      </div>
-    </main>
-  );
-};
-
-export { NavPageLayout };
-export type { NavPageLayoutData };
+import React from 'react';
+
+import { Container, ImageSection, MdxContent } from '../../components';
+import type { ImageSectionProps } from '../../components';
+
+import classes from './NavPageLayout.module.css';
+
+interface NavPageLayoutProps {
+  content: React.ReactNode;
+  data: NavPageLayoutData;
+}
+
+interface NavPageLayoutData {
+  imageSection: ImageSectionProps;
+  headerColor?: 'red' | 'blue';
+}
+
+const NavPageLayout = ({ content, data }: NavPageLayoutProps) => {
+  return (
+    <main
+      id='main'
+      className='greyBackground'
+    >
+      <ImageSection
+        imgSrc={data.imageSection.imgSrc}
+        imgAlt={data.imageSection.imgAlt}
+        backgroundColor={data.imageSection.backgroundColor}
+        imgHeight={220}
+        imgWidth={220}
+        title={data.imageSection.title}
+        description={data.imageSection.description}
+        link={data.imageSection.link}
+        imgPosition='right'
+      ></ImageSection>
+      <div className={classes.content}>
+        <Container>
+          <MdxContent>{content}</MdxContent>
+        </Container>
+      </div>
+    </main>
+  );
+};
+
+export { NavPageLayout };
+export type { NavPageLayoutData };
diff --git a/storefront/tokens/tokens.css b/storefront/tokens/tokens.css
deleted file mode 100644
index 37258b5626..0000000000
--- a/storefront/tokens/tokens.css
+++ /dev/null
@@ -1,284 +0,0 @@
-/**
- * Do not edit directly
- * These files are generated from design tokens defined in Figma using Token Studio
- */
-
-:root {
-  /** Referenced source tokens */
-  --fds-font-size-f0: clamp(1rem, calc(0.19vw + 0.96rem), 1.13rem);
-
-  /** Tokens */
-  --fds-brand-primary-100: #feefef;
-  --fds-brand-primary-200: #fddfe0;
-  --fds-brand-primary-300: #fbbfc1;
-  --fds-brand-primary-400: #f89fa1;
-  --fds-brand-primary-500: #f67f82;
-  --fds-brand-primary-600: #f45f63;
-  --fds-brand-primary-700: #dc5659;
-  --fds-brand-primary-800: #c34c4f;
-  --fds-brand-secondary-100: #fcf7e9;
-  --fds-brand-secondary-200: #faeec2;
-  --fds-brand-secondary-300: #f5dda6;
-  --fds-brand-secondary-400: #efcc79;
-  --fds-brand-secondary-500: #eabb4d;
-  --fds-brand-secondary-600: #e5aa20;
-  --fds-brand-secondary-700: #ce991d;
-  --fds-brand-secondary-800: #b7881a;
-  --fds-brand-tertiary-100: #e9f5ff;
-  --fds-brand-tertiary-200: #d2eafd;
-  --fds-brand-tertiary-300: #a5d6fb;
-  --fds-brand-tertiary-400: #78c1f9;
-  --fds-brand-tertiary-500: #4badf7;
-  --fds-brand-tertiary-600: #1e98f5;
-  --fds-brand-tertiary-700: #1b88dd;
-  --fds-brand-tertiary-800: #156aac;
-  --fds-semantic-background-default: #fff;
-  --fds-semantic-background-subtle: #f4f5f6;
-  --fds-semantic-surface-neutral-default: #fff;
-  --fds-semantic-surface-neutral-selected: #e6eff8;
-  --fds-semantic-surface-neutral-subtle: #f4f5f6;
-  --fds-semantic-surface-neutral-subtle-hover: #e9eaec;
-  --fds-semantic-surface-neutral-dark: #68707c;
-  --fds-semantic-surface-neutral-inverted: #1e2b3c;
-  --fds-semantic-surface-action-subtle: #e6eff8;
-  --fds-semantic-surface-action-subtle-hover: #b3d0ea;
-  --fds-semantic-surface-action-default: #0062ba;
-  --fds-semantic-surface-action-hover: #004e95;
-  --fds-semantic-surface-action-active: #00315d;
-  --fds-semantic-surface-action-no_fill: #fff;
-  --fds-semantic-surface-action-no_fill-hover: #e6eff8;
-  --fds-semantic-surface-action-no_fill-active: #b3d0ea;
-  --fds-semantic-surface-success-subtle: #d1f4e1;
-  --fds-semantic-surface-success-subtle-hover: #8be4b5;
-  --fds-semantic-surface-success-default: #118849;
-  --fds-semantic-surface-success-hover: #0c6536;
-  --fds-semantic-surface-success-active: #084826;
-  --fds-semantic-surface-success-no_fill: #fff;
-  --fds-semantic-surface-success-no_fill-hover: #d1f4e1;
-  --fds-semantic-surface-success-no_fill-active: #8be4b5;
-  --fds-semantic-surface-warning-subtle: #fffbe6;
-  --fds-semantic-surface-warning-subtle-hover: #fff4b4;
-  --fds-semantic-surface-warning-default: #ff8c06;
-  --fds-semantic-surface-danger-subtle: #f9d5db;
-  --fds-semantic-surface-danger-subtle-hover: #f3abb6;
-  --fds-semantic-surface-danger-default: #e02e49;
-  --fds-semantic-surface-danger-hover: #b3253a;
-  --fds-semantic-surface-danger-active: #861c2c;
-  --fds-semantic-surface-danger-no_fill: #fff;
-  --fds-semantic-surface-danger-no_fill-hover: #f9d5db;
-  --fds-semantic-surface-danger-no_fill-action: #f3abb6;
-  --fds-semantic-surface-info-subtle: #e6eff8;
-  --fds-semantic-surface-info-subtle-hover: #b3d0ea;
-  --fds-semantic-surface-primary-light: #fddfe0;
-  --fds-semantic-surface-primary-light-hover: #fbbfc1;
-  --fds-semantic-surface-primary-light-active: #f89fa1;
-  --fds-semantic-surface-primary-dark: #c34c4f;
-  --fds-semantic-surface-secondary-light: #faeec2;
-  --fds-semantic-surface-secondary-light-hover: #f5dda6;
-  --fds-semantic-surface-secondary-light-active: #efcc79;
-  --fds-semantic-surface-secondary-dark: #b7881a;
-  --fds-semantic-surface-tertiary-light: #d2eafd;
-  --fds-semantic-surface-tertiary-light-hover: #a5d6fb;
-  --fds-semantic-surface-tertiary-light-active: #78c1f9;
-  --fds-semantic-surface-tertiary-dark: #156aac;
-  --fds-semantic-border-info-default: #004e95;
-  --fds-semantic-border-action-subtle: #e6eff8;
-  --fds-semantic-border-action-default: #0062ba;
-  --fds-semantic-border-action-hover: #004e95;
-  --fds-semantic-border-action-active: #00315d;
-  --fds-semantic-border-neutral-default: #68707c;
-  --fds-semantic-border-neutral-subtle: #d2d5d8;
-  --fds-semantic-border-neutral-strong: #1e2b3c;
-  --fds-semantic-border-neutral-divider: #bcbfc5;
-  --fds-semantic-border-success-default: #118849;
-  --fds-semantic-border-success-hover: #0c6536;
-  --fds-semantic-border-success-active: #084826;
-  --fds-semantic-border-warning-default: #cc7005;
-  --fds-semantic-border-warning-hover: #995404;
-  --fds-semantic-border-warning-active: #663802;
-  --fds-semantic-border-danger-default: #e02e49;
-  --fds-semantic-border-danger-hover: #b3253a;
-  --fds-semantic-border-danger-active: #861c2c;
-  --fds-semantic-border-focus-outline: #ffda06;
-  --fds-semantic-border-focus-boxshadow: #1e2b3c;
-  --fds-semantic-border-primary-default: #f45f63;
-  --fds-semantic-border-primary-hover: #dc5659;
-  --fds-semantic-border-primary-active: #c34c4f;
-  --fds-semantic-border-secondary-default: #e5aa20;
-  --fds-semantic-border-secondary-hover: #ce991d;
-  --fds-semantic-border-secondary-active: #b7881a;
-  --fds-semantic-border-tertiary-default: #1e98f5;
-  --fds-semantic-border-tertiary-hover: #1b88dd;
-  --fds-semantic-border-tertiary-active: #156aac;
-  --fds-semantic-border-action_dark-default: #00315d;
-  --fds-semantic-border-on_inverted-default: #fff;
-  --fds-semantic-text-success-default: #0c6536;
-  --fds-semantic-text-success-hover: #084826;
-  --fds-semantic-text-success-active: #084826;
-  --fds-semantic-text-success-on_success: #fff;
-  --fds-semantic-text-success-on_success_subtle: #1e2b3c;
-  --fds-semantic-text-neutral-default: #1e2b3c;
-  --fds-semantic-text-neutral-subtle: #68707c;
-  --fds-semantic-text-neutral-on_inverted: #fff;
-  --fds-semantic-text-action-default: #0062ba;
-  --fds-semantic-text-action-hover: #004e95;
-  --fds-semantic-text-action-active: #00315d;
-  --fds-semantic-text-action-on_action: #fff;
-  --fds-semantic-text-warning-default: #995404;
-  --fds-semantic-text-warning-icon_warning: #cc7005;
-  --fds-semantic-text-warning-on_warning: #663802;
-  --fds-semantic-text-danger-default: #b3253a;
-  --fds-semantic-text-danger-hover: #861c2c;
-  --fds-semantic-text-danger-active: #5a121d;
-  --fds-semantic-text-danger-on_danger: #fff;
-  --fds-semantic-text-danger-on_danger_subtle: #1e2b3c;
-  --fds-semantic-text-visited-default: #7a1265;
-  --fds-semantic-text-action_dark-default: #00315d;
-  --fds-typography-heading-xlarge: 500
-    clamp(1.59rem, calc(1.15vw + 1.36rem), 2.34rem) / 1.3 'Inter';
-  --fds-typography-heading-large: 500
-    clamp(1.47rem, calc(0.86vw + 1.3rem), 2.03rem) / 1.3 'Inter';
-  --fds-typography-heading-medium: 500
-    clamp(1.34rem, calc(0.63vw + 1.22rem), 1.75rem) / 1.3 'Inter';
-  --fds-typography-heading-small: 500
-    clamp(1.22rem, calc(0.43vw + 1.13rem), 1.5rem) / 1.3 'Inter';
-  --fds-typography-heading-xsmall: 500
-    clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem) / 1.3 'Inter';
-  --fds-typography-heading-xxsmall: 500
-    clamp(1rem, calc(0.19vw + 0.96rem), 1.13rem) / 1.3 'Inter';
-  --fds-typography-ingress-medium: 400
-    clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem) / 1.6 'Inter';
-  --fds-typography-paragraph-large: 400
-    clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem) / 1.5 'Inter';
-  --fds-typography-paragraph-medium: 400
-    clamp(1rem, calc(0.19vw + 0.96rem), 1.13rem) / 1.5 'Inter';
-  --fds-typography-paragraph-small: 400
-    clamp(0.91rem, calc(0.1vw + 0.89rem), 0.97rem) / 1.5 'Inter';
-  --fds-typography-paragraph-xsmall: 400
-    clamp(0.81rem, calc(0.05vw + 0.8rem), 0.84rem) / 1.5 'Inter';
-  --fds-typography-paragraph-short-large: 400
-    clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem) / 1.3 'Inter';
-  --fds-typography-paragraph-short-medium: 400
-    clamp(1rem, calc(0.19vw + 0.96rem), 1.13rem) / 1.3 'Inter';
-  --fds-typography-paragraph-short-small: 400
-    clamp(0.91rem, calc(0.1vw + 0.89rem), 0.97rem) / 1.3 'Inter';
-  --fds-typography-paragraph-short-xsmall: 400
-    clamp(0.81rem, calc(0.05vw + 0.8rem), 0.84rem) / 1.3 'Inter';
-  --fds-typography-label-large: 500
-    clamp(1.09rem, calc(0.34vw + 1.03rem), 1.31rem) / 1.3 'Inter';
-  --fds-typography-label-medium: 500
-    clamp(1rem, calc(0.19vw + 0.96rem), 1.13rem) / 1.3 'Inter';
-  --fds-typography-label-small: 500
-    clamp(0.91rem, calc(0.1vw + 0.89rem), 0.97rem) / 1.3 'Inter';
-  --fds-typography-label-xsmall: 500
-    clamp(0.81rem, calc(0.05vw + 0.8rem), 0.84rem) / 1.3 'Inter';
-  --fds-typography-error_message-medium: 400
-    clamp(1rem, calc(0.19vw + 0.96rem), 1.13rem) / 1.3 'Inter';
-  --fds-typography-error_message-small: 400
-    clamp(0.91rem, calc(0.1vw + 0.89rem), 0.97rem) / 1.3 'Inter';
-  --fds-typography-interactive-large: 400 1.5rem/1.3 'Inter';
-  --fds-typography-interactive-medium: 400 1.125rem/1.3 'Inter';
-  --fds-typography-interactive-small: 400 1rem/1.3 'Inter';
-  --fds-opacity-disabled: 30%;
-  --fds-border_radius-interactive: 4px;
-  --fds-spacing-0: calc(0);
-  --fds-spacing-1: calc(var(--fds-base_spacing) / 16 * var(--fds-font-size-f0));
-  --fds-spacing-2: calc(
-    var(--fds-base_spacing) * 2 / 16 * var(--fds-font-size-f0)
-  );
-  --fds-spacing-3: calc(
-    var(--fds-base_spacing) * 3 / 16 * var(--fds-font-size-f0)
-  );
-  --fds-spacing-4: calc(
-    var(--fds-base_spacing) * 4 / 16 * var(--fds-font-size-f0)
-  );
-  --fds-spacing-5: calc(
-    var(--fds-base_spacing) * 5 / 16 * var(--fds-font-size-f0)
-  );
-  --fds-spacing-6: calc(
-    var(--fds-base_spacing) * 6 / 16 * var(--fds-font-size-f0)
-  );
-  --fds-spacing-7: calc(
-    var(--fds-base_spacing) * 7 / 16 * var(--fds-font-size-f0)
-  );
-  --fds-spacing-8: calc(
-    (var(--fds-base_spacing) * 8 / 16) * var(--fds-font-size-f0)
-  );
-  --fds-spacing-10: calc(
-    (var(--fds-base_spacing) * 10 / 16) * var(--fds-font-size-f0)
-  );
-  --fds-spacing-12: calc(
-    (var(--fds-base_spacing) * 12 / 16) * var(--fds-font-size-f0)
-  );
-  --fds-spacing-14: calc(
-    (var(--fds-base_spacing) * 14 / 16) * var(--fds-font-size-f0)
-  );
-  --fds-spacing-18: calc(
-    (var(--fds-base_spacing) * 18 / 16) * var(--fds-font-size-f0)
-  );
-  --fds-spacing-22: calc(
-    (var(--fds-base_spacing) * 22 / 16) * var(--fds-font-size-f0)
-  );
-  --fds-spacing-26: calc(
-    (var(--fds-base_spacing) * 26 / 16) * var(--fds-font-size-f0)
-  );
-  --fds-spacing-30: calc(
-    (var(--fds-base_spacing) * 30 / 16) * var(--fds-font-size-f0)
-  );
-  --fds-base_spacing: 4;
-  --fds-sizing-1: calc(var(--fds-base_sizing) / 16 * var(--fds-font-size-f0));
-  --fds-sizing-2: calc(
-    var(--fds-base_sizing) * 2 / 16 * var(--fds-font-size-f0)
-  );
-  --fds-sizing-3: calc(
-    var(--fds-base_sizing) * 3 / 16 * var(--fds-font-size-f0)
-  );
-  --fds-sizing-4: calc(
-    var(--fds-base_sizing) * 4 / 16 * var(--fds-font-size-f0)
-  );
-  --fds-sizing-5: calc(
-    var(--fds-base_sizing) * 5 / 16 * var(--fds-font-size-f0)
-  );
-  --fds-sizing-6: calc(
-    var(--fds-base_sizing) * 6 / 16 * var(--fds-font-size-f0)
-  );
-  --fds-sizing-7: calc(
-    var(--fds-base_sizing) * 7 / 16 * var(--fds-font-size-f0)
-  );
-  --fds-sizing-8: calc(
-    var(--fds-base_sizing) * 8 / 16 * var(--fds-font-size-f0)
-  );
-  --fds-sizing-10: calc(
-    var(--fds-base_sizing) * 10 / 16 * var(--fds-font-size-f0)
-  );
-  --fds-sizing-12: calc(
-    (var(--fds-base_sizing) * 12 / 16) * var(--fds-font-size-f0)
-  );
-  --fds-sizing-14: calc(
-    (var(--fds-base_sizing) * 14 / 16) * var(--fds-font-size-f0)
-  );
-  --fds-sizing-18: calc(
-    (var(--fds-base_sizing) * 18 / 16) * var(--fds-font-size-f0)
-  );
-  --fds-sizing-22: calc(
-    (var(--fds-base_sizing) * 22 / 16) * var(--fds-font-size-f0)
-  );
-  --fds-sizing-26: calc(
-    (var(--fds-base_sizing) * 26 / 16) * var(--fds-font-size-f0)
-  );
-  --fds-sizing-30: calc(
-    (var(--fds-base_sizing) * 30 / 16) * var(--fds-font-size-f0)
-  );
-  --fds-base_sizing: 4;
-  --fds-component-mode-height-small: var(--fds-sizing-10);
-  --fds-component-mode-height-medium: var(--fds-sizing-12);
-  --fds-component-mode-height-large: var(--fds-sizing-14);
-  --fds-border_width-default: 1px;
-  --fds-border_width-active: 2px;
-  --fds-border_width-tab_focus: 2px;
-  --fds-shadow-xsmall: 0 1px 2px 0 #0000001f;
-  --fds-shadow-small: 0 1px 2px -1px #0000001a, 0 1px 4px 0 #0000001a;
-  --fds-shadow-medium: 0 2px 4px -2px #0000001a, 0 4px 5px #0000001a;
-  --fds-shadow-large: 0 4px 6px -4px #0000001a, 0 10px 12px #0000001a;
-  --fds-shadow-xlarge: 0 8px 10px -6px #0000001a, 0 25px 45px #0000001a;
-}