diff --git a/.changeset/happy-pianos-cheat.md b/.changeset/happy-pianos-cheat.md
new file mode 100644
index 0000000000..273ae08a34
--- /dev/null
+++ b/.changeset/happy-pianos-cheat.md
@@ -0,0 +1,7 @@
+---
+"@navikt/ds-tokens": minor
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+Box: Ny primitive, erstatter dagens `Panel`
diff --git a/@navikt/core/css/baseline/_utilities.css b/@navikt/core/css/baseline/_utilities.css
index 62b991e86c..ef7572848b 100644
--- a/@navikt/core/css/baseline/_utilities.css
+++ b/@navikt/core/css/baseline/_utilities.css
@@ -28,6 +28,7 @@
 .navds-sr-only {
   border: 0;
   clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
   height: 1px;
   margin: -1px;
   overflow: hidden;
@@ -50,6 +51,7 @@
 .navds-sr-only.focusable:active,
 .navds-sr-only.focusable:focus {
   clip: auto;
+  clip-path: none;
   height: auto;
   margin: 0;
   overflow: visible;
diff --git a/@navikt/core/css/config/_mappings.js b/@navikt/core/css/config/_mappings.js
index 8289d4cb56..09b16b169e 100644
--- a/@navikt/core/css/config/_mappings.js
+++ b/@navikt/core/css/config/_mappings.js
@@ -31,6 +31,34 @@ const StyleMappings = {
     },
   ],
   components: [
+    {
+      component: "Box",
+      main: primitivesCss,
+    },
+    {
+      component: "HGrid",
+      main: primitivesCss,
+    },
+    {
+      component: "HStack",
+      main: primitivesCss,
+    },
+    {
+      component: "VStack",
+      main: primitivesCss,
+    },
+    {
+      component: "Spacer",
+      main: primitivesCss,
+    },
+    {
+      component: "Show",
+      main: primitivesCss,
+    },
+    {
+      component: "Hide",
+      main: primitivesCss,
+    },
     {
       component: "Accordion",
       main: "accordion.css",
@@ -100,10 +128,6 @@ const StyleMappings = {
       main: "help-text.css",
       dependencies: ["popover.css"],
     },
-    {
-      component: "HGrid",
-      main: primitivesCss,
-    },
     { component: "Ingress", main: typoCss },
     {
       component: "InternalHeader",
@@ -139,26 +163,6 @@ const StyleMappings = {
     { component: "Select", main: formCss, dependencies: [typoCss] },
     { component: "Skeleton", main: "skeleton.css", dependencies: [] },
     { component: "Stepper", main: "stepper.css", dependencies: [typoCss] },
-    {
-      component: "HStack",
-      main: primitivesCss,
-    },
-    {
-      component: "VStack",
-      main: primitivesCss,
-    },
-    {
-      component: "Spacer",
-      main: primitivesCss,
-    },
-    {
-      component: "Show",
-      main: primitivesCss,
-    },
-    {
-      component: "Hide",
-      main: primitivesCss,
-    },
     { component: "Switch", main: formCss, dependencies: [typoCss] },
     { component: "Table", main: "table.css", dependencies: [typoCss] },
     { component: "Tabs", main: "tabs.css", dependencies: [typoCss] },
diff --git a/@navikt/core/css/primitives/box.css b/@navikt/core/css/primitives/box.css
new file mode 100644
index 0000000000..b29a21649f
--- /dev/null
+++ b/@navikt/core/css/primitives/box.css
@@ -0,0 +1,117 @@
+.navds-box {
+  --__ac-box-padding-xs: initial;
+  --__ac-box-padding-sm: initial;
+  --__ac-box-padding-md: initial;
+  --__ac-box-padding-lg: initial;
+  --__ac-box-padding-xl: initial;
+  --__ac-box-padding-block-xs: initial;
+  --__ac-box-padding-inline-xs: initial;
+  --__ac-box-padding-block-sm: initial;
+  --__ac-box-padding-inline-sm: initial;
+  --__ac-box-padding-block-md: initial;
+  --__ac-box-padding-inline-md: initial;
+  --__ac-box-padding-block-lg: initial;
+  --__ac-box-padding-inline-lg: initial;
+  --__ac-box-padding-block-xl: initial;
+  --__ac-box-padding-inline-xl: initial;
+  --__ac-box-padding: var(--__ac-box-padding-xs);
+  --__ac-box-padding-inline: var(--__ac-box-padding-inline-xs);
+  --__ac-box-padding-block: var(--__ac-box-padding-block-xs);
+  --__ac-box-background: initial;
+  --__ac-box-border-color: initial;
+  --__ac-box-shadow: initial;
+  --__ac-box-border-width: initial;
+  --__ac-box-border-radius-xs: initial;
+  --__ac-box-border-radius-sm: initial;
+  --__ac-box-border-radius-md: initial;
+  --__ac-box-border-radius-lg: initial;
+  --__ac-box-border-radius-xl: initial;
+  --__ac-box-border-radius: var(--__ac-box-border-radius-xs);
+
+  padding-inline: var(--__ac-box-padding-inline, var(--__ac-box-padding));
+  padding-block: var(--__ac-box-padding-block, var(--__ac-box-padding));
+  background-color: var(--__ac-box-background);
+  border-style: solid;
+  border-color: var(--__ac-box-border-color);
+  border-radius: var(--__ac-box-border-radius);
+  box-shadow: var(--__ac-box-shadow);
+  border-width: var(--__ac-box-border-width, 0);
+}
+
+@media (min-width: 480px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-sm, var(--__ac-box-padding-xs));
+    --__ac-box-padding-inline: var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs));
+    --__ac-box-padding-block: var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs));
+    --__ac-box-border-radius: var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs));
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-box {
+    --__ac-box-padding: var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)));
+    --__ac-box-padding-inline: var(
+      --__ac-box-padding-inline-md,
+      var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs))
+    );
+    --__ac-box-padding-block: var(
+      --__ac-box-padding-block-md,
+      var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs))
+    );
+    --__ac-box-border-radius: var(
+      --__ac-box-border-radius-md,
+      var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs))
+    );
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-box {
+    --__ac-box-padding: var(
+      --__ac-box-padding-lg,
+      var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs)))
+    );
+    --__ac-box-padding-inline: var(
+      --__ac-box-padding-inline-lg,
+      var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
+    );
+    --__ac-box-padding-block: var(
+      --__ac-box-padding-block-lg,
+      var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
+    );
+    --__ac-box-border-radius: var(
+      --__ac-box-border-radius-lg,
+      var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
+    );
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-box {
+    --__ac-box-padding: var(
+      --__ac-box-padding-xl,
+      var(--__ac-box-padding-lg, var(--__ac-box-padding-md, var(--__ac-box-padding-sm, var(--__ac-box-padding-xs))))
+    );
+    --__ac-box-padding-inline: var(
+      --__ac-box-padding-inline-xl,
+      var(
+        --__ac-box-padding-inline-lg,
+        var(--__ac-box-padding-inline-md, var(--__ac-box-padding-inline-sm, var(--__ac-box-padding-inline-xs)))
+      )
+    );
+    --__ac-box-padding-block: var(
+      --__ac-box-padding-block-xl,
+      var(
+        --__ac-box-padding-block-lg,
+        var(--__ac-box-padding-block-md, var(--__ac-box-padding-block-sm, var(--__ac-box-padding-block-xs)))
+      )
+    );
+    --__ac-box-border-radius: var(
+      --__ac-box-border-radius-xl,
+      var(
+        --__ac-box-border-radius-lg,
+        var(--__ac-box-border-radius-md, var(--__ac-box-border-radius-sm, var(--__ac-box-border-radius-xs)))
+      )
+    );
+  }
+}
diff --git a/@navikt/core/css/primitives/index.css b/@navikt/core/css/primitives/index.css
index 3e0156434a..ce09333bc2 100644
--- a/@navikt/core/css/primitives/index.css
+++ b/@navikt/core/css/primitives/index.css
@@ -1,3 +1,4 @@
+@import "box.css";
 @import "hgrid.css";
 @import "stack.css";
 @import "responsive.css";
diff --git a/@navikt/core/react/package.json b/@navikt/core/react/package.json
index 759172d64a..fe4df9cabf 100644
--- a/@navikt/core/react/package.json
+++ b/@navikt/core/react/package.json
@@ -39,6 +39,7 @@
   "dependencies": {
     "@floating-ui/react": "0.24.1",
     "@navikt/aksel-icons": "^5.4.1",
+    "@navikt/ds-tokens": "^5.4.1",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",
diff --git a/@navikt/core/react/src/grid/grid.stories.tsx b/@navikt/core/react/src/grid/grid.stories.tsx
index b14390531d..98355f7df9 100644
--- a/@navikt/core/react/src/grid/grid.stories.tsx
+++ b/@navikt/core/react/src/grid/grid.stories.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { BodyLong, Grid, Cell, ContentContainer } from "../index";
 
 export default {
-  title: "ds-react/Grid",
+  title: "ds-react/Primitives/Grid",
   component: { Grid, Cell },
   parameters: {
     layout: "fullscreen",
diff --git a/@navikt/core/react/src/index.ts b/@navikt/core/react/src/index.ts
index c3b28f4a83..8713a12bfa 100644
--- a/@navikt/core/react/src/index.ts
+++ b/@navikt/core/react/src/index.ts
@@ -32,6 +32,7 @@ export * from "./toggle-group";
 export * from "./tooltip";
 export * from "./typography";
 export * from "./util";
+export * from "./layout/box";
 export * from "./layout/stack";
 export * from "./layout/grid";
 export * from "./layout/content-container";
diff --git a/@navikt/core/react/src/layout/box/Box.stories.tsx b/@navikt/core/react/src/layout/box/Box.stories.tsx
new file mode 100644
index 0000000000..777468d5ed
--- /dev/null
+++ b/@navikt/core/react/src/layout/box/Box.stories.tsx
@@ -0,0 +1,384 @@
+import React, { ReactNode } from "react";
+import type { Meta } from "@storybook/react";
+import { BodyLong, Detail, Heading } from "../../typography";
+import { Box } from "./Box";
+import { HGrid, HStack, VStack } from "../..";
+import { BackgroundToken, BorderRadiiToken } from "../utilities/types";
+import { ChevronRightIcon } from "@navikt/aksel-icons";
+
+export default {
+  title: "ds-react/Primitives/Box",
+  component: Box,
+} satisfies Meta<typeof Box>;
+
+export const Default = {
+  render: () => (
+    <Box>
+      <BodyLong>
+        This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+        nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
+        Proident pariatur proident pariatur magna consequat velit id commodo
+        quis sunt tempor ullamco aliquip pariatur.
+      </BodyLong>
+    </Box>
+  ),
+};
+
+const Card = ({
+  background,
+  borderRadius = "xlarge",
+  children,
+}: {
+  background?: BackgroundToken;
+  borderRadius?: BorderRadiiToken;
+  children: ReactNode;
+}) => (
+  <Box
+    padding="4"
+    background={background}
+    borderColor="border-subtle"
+    borderRadius={borderRadius}
+    shadow="xsmall"
+  >
+    <div style={{ width: "20rem" }}>{children}</div>
+  </Box>
+);
+
+export const AsCard = {
+  render: () => {
+    return (
+      <HStack gap="4" justify="center">
+        <Card>
+          <h1>Card one</h1>
+          <BodyLong>
+            This is inside a box. Deserunt veniam eu fugiat ad est occaecat
+            aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
+          </BodyLong>
+        </Card>
+        <Card>
+          <h1>Card two</h1>
+          <BodyLong>
+            This is inside a box. Deserunt veniam eu fugiat ad est occaecat
+            aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
+          </BodyLong>
+        </Card>
+        <Card>
+          <h1>Card three</h1>
+          <BodyLong>
+            This is inside a box. Deserunt veniam eu fugiat ad est occaecat
+            aliqua nisi aliquip. Aute amet occaecat ex aliqua irure elit labore
+          </BodyLong>
+        </Card>
+      </HStack>
+    );
+  },
+};
+
+export const ThemingDemo = {
+  render: () => {
+    const LinkCard = () => {
+      return (
+        <>
+          <style>
+            {`
+            .link-card {
+              color: var(--navds-color-text-primary);
+              text-decoration: none;
+            }
+            .link-card:hover {
+              border-color: var(--a-border-action);
+              box-shadow: var(--a-shadow-small);
+            }
+            .link-card:hover .navds-heading {
+              color: var(--a-text-action);
+              text-decoration: underline;
+            }
+            .link-card:hover .link-card__chevron,
+            .link-card:focus-within .link-card__chevron {
+              transform: translateX(4px);
+            }
+            .link-card__chevron {
+              flex-shrink: 0;
+              font-size: 1.5rem;
+              transition: transform 200ms;
+            }
+          `}
+          </style>
+          <Box
+            as="a"
+            href="#"
+            className="link-card"
+            borderRadius="small"
+            borderColor="border-default"
+            padding="4"
+            onClick={() => alert("Clicked!")}
+          >
+            <HStack gap="4" align="center">
+              <VStack gap="2">
+                <Heading size="medium">
+                  LinkCard som bruker Box, HStack og VStack
+                </Heading>
+                <BodyLong>This truly is inside a box!</BodyLong>
+              </VStack>
+              <ChevronRightIcon fontSize={24} className="link-card__chevron" />
+            </HStack>
+          </Box>
+        </>
+      );
+    };
+
+    const ChatBubble = () => {
+      return (
+        <>
+          <Box
+            background="surface-neutral-subtle"
+            shadow="xsmall"
+            padding="4"
+            borderRadius="xlarge xlarge xlarge 0"
+          >
+            <VStack gap="2">
+              <Detail>BOX • 01.01.21 14:00</Detail>
+              <BodyLong>
+                Hei! Dette er en chatbobble som bruker Box som base!
+              </BodyLong>
+            </VStack>
+          </Box>
+        </>
+      );
+    };
+
+    const PricePill = () => {
+      return (
+        <>
+          <style>
+            {`
+              .old-price {
+                text-decoration: line-through;
+              }
+            `}
+          </style>
+          <HStack>
+            <Box
+              background="surface-success-subtle"
+              shadow="xsmall"
+              padding="4"
+              borderRadius="full 0 0 full"
+            >
+              <VStack align="center">
+                <Detail>Episk ny pris</Detail>
+                <Heading size="medium">889.99 kr</Heading>
+              </VStack>
+            </Box>
+            <Box
+              background="surface-danger-subtle"
+              shadow="xsmall"
+              padding="4"
+              borderRadius="0 full full 0"
+            >
+              <VStack align="center">
+                <Detail>Førpris</Detail>
+                <Heading className="old-price" size="medium">
+                  399.99 kr
+                </Heading>
+              </VStack>
+            </Box>
+          </HStack>
+        </>
+      );
+    };
+
+    return (
+      <VStack gap="8">
+        <Card>Dette er et Card som bruker Box som base</Card>
+        <LinkCard />
+        <ChatBubble />
+        <PricePill />
+      </VStack>
+    );
+  },
+};
+
+export const PaddingBreakpoints = {
+  render: () => (
+    <div>
+      <Box
+        padding={{ xs: "2", sm: "3", md: "4", lg: "5", xl: "6" }}
+        borderColor="border-default"
+      >
+        <BodyLong>
+          This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+          nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
+          Proident pariatur proident pariatur magna consequat velit id commodo
+          quis sunt tempor ullamco aliquip pariatur.
+        </BodyLong>
+      </Box>
+    </div>
+  ),
+};
+
+export const PaddingBreakpointsInherit1 = {
+  render: () => (
+    <div>
+      <Box
+        padding={{ xs: "2" }}
+        paddingInline={{ md: "24 0" }}
+        borderColor="border-default"
+      >
+        <BodyLong>
+          This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+          nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
+          Proident pariatur proident pariatur magna consequat velit id commodo
+          quis sunt tempor ullamco aliquip pariatur.
+        </BodyLong>
+      </Box>
+    </div>
+  ),
+};
+export const PaddingBreakpointsInherit2 = {
+  render: () => (
+    <div>
+      <Box
+        padding={{ xs: "2", sm: "3" }}
+        paddingInline={{ sm: "4 0", md: "24 0" }}
+        borderColor="border-default"
+      >
+        <BodyLong>
+          This is inside a box. Deserunt veniam eu fugiat ad est occaecat aliqua
+          nisi aliquip. Aute amet occaecat ex aliqua irure elit labore pariatur.
+          Proident pariatur proident pariatur magna consequat velit id commodo
+          quis sunt tempor ullamco aliquip pariatur.
+        </BodyLong>
+      </Box>
+    </div>
+  ),
+};
+
+export const Padding = {
+  render: () => (
+    <>
+      <style>
+        {`
+          .navds-box {
+            width: fit-content;
+          }
+        `}
+      </style>
+      <VStack align="center">
+        <Box padding="20" borderColor="border-default">
+          <BodyLong>Padding all around</BodyLong>
+        </Box>
+        <Box padding="1" paddingBlock="20 0" borderColor="border-default">
+          <BodyLong>Padding to the North</BodyLong>
+        </Box>
+        <Box padding="1" paddingInline="0 20" borderColor="border-default">
+          <BodyLong>Padding to the East</BodyLong>
+        </Box>
+        <Box padding="1" paddingBlock="0 20" borderColor="border-default">
+          <BodyLong>Padding to the South</BodyLong>
+        </Box>
+        <Box padding="1" paddingInline="20 0" borderColor="border-default">
+          <BodyLong>Padding to the West</BodyLong>
+        </Box>
+      </VStack>
+    </>
+  ),
+};
+
+export const WithHGrid = () => {
+  return (
+    <Box background="bg-subtle" padding="10">
+      <HGrid
+        gap="6"
+        columns={{ xs: "repeat(auto-fit, minmax(10rem, 1fr))", md: 4 }}
+      >
+        <Box padding="4" background="bg-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        </Box>
+        <Box padding="4" background="bg-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        </Box>
+        <Box padding="4" background="bg-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        </Box>
+        <Box padding="4" background="bg-default">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
+        </Box>
+      </HGrid>
+    </Box>
+  );
+};
+
+export const BorderWidth = () => {
+  return (
+    <VStack gap="4">
+      <Box
+        background="bg-subtle"
+        padding="10"
+        borderWidth="2"
+        borderColor="border-strong"
+      >
+        Box
+      </Box>
+      <Box
+        background="bg-subtle"
+        padding="10"
+        borderWidth="1 2 3 4"
+        borderColor="border-strong"
+      >
+        Box
+      </Box>
+      <Box
+        background="bg-subtle"
+        padding="10"
+        borderWidth="5 2 4 1"
+        borderColor="border-strong"
+        borderRadius="large"
+      >
+        Box
+      </Box>
+    </VStack>
+  );
+};
+
+export const BorderRadius = () => {
+  return (
+    <VStack gap="4">
+      <Box
+        background="bg-subtle"
+        padding="10"
+        borderWidth="2"
+        borderColor="border-strong"
+        borderRadius="small medium large xlarge"
+      >
+        Box
+      </Box>
+      <Box
+        background="bg-subtle"
+        padding="10"
+        borderWidth="2"
+        borderColor="border-strong"
+        borderRadius={{
+          xs: "small medium large xlarge",
+          md: "medium small large full",
+          lg: "xlarge large",
+        }}
+      >
+        Box
+      </Box>
+    </VStack>
+  );
+};
+
+export const PaddingDemo = () => {
+  return (
+    <VStack gap="4">
+      <Box
+        background="bg-subtle"
+        padding="0"
+        paddingInline={{ xs: "20", lg: "10" }}
+      >
+        Box
+      </Box>
+    </VStack>
+  );
+};
diff --git a/@navikt/core/react/src/layout/box/Box.tsx b/@navikt/core/react/src/layout/box/Box.tsx
new file mode 100644
index 0000000000..6e4cea1ea1
--- /dev/null
+++ b/@navikt/core/react/src/layout/box/Box.tsx
@@ -0,0 +1,148 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { OverridableComponent } from "../../util/OverridableComponent";
+import { BorderRadiiToken } from "../utilities/types";
+import {
+  SpaceDelimitedAttribute,
+  ResponsiveProp,
+  SpacingScale,
+  getResponsiveProps,
+} from "../utilities/css";
+import {
+  BackgroundToken,
+  BorderColorToken,
+  ShadowToken,
+} from "../utilities/types";
+
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Background color. Accepts a color token. */
+  background?: BackgroundToken;
+  /** Border color. Accepts a color token. */
+  borderColor?: BorderColorToken;
+  /** Border radius. Accepts a radius token, or an object of radius tokens for different breakpoints.
+   * @example
+   * borderRadius='full'
+   * borderRadius='0 full large small'
+   * borderRadius={{xs: 'small large', sm: '0', md: 'large', lg: 'full'}}
+   */
+  borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
+  /**
+   * Border-width. If this is not set there will be no border.
+   * @example
+   * borderWidth='2'
+   * borderWidth='1 2 3 4'
+   */
+  borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
+  /** Spacing around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
+   * @example
+   * padding='4'
+   * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  padding?: ResponsiveProp<SpacingScale>;
+  /** Horizontal padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
+   * @example
+   * paddingInline='4'
+   * paddingInline='4 5'
+   * paddingInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   */
+  paddingInline?: ResponsiveProp<
+    SpacingScale | `${SpacingScale} ${SpacingScale}`
+  >;
+  /** Vertical padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
+   * @example
+   * paddingBlock='4'
+   * paddingBlock='4 5'
+   * paddingBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   */
+  paddingBlock?: ResponsiveProp<
+    SpacingScale | `${SpacingScale} ${SpacingScale}`
+  >;
+  /** Shadow on box. Accepts a shadow token.
+   * @example
+   * shadow='small'
+   */
+  shadow?: ShadowToken;
+}
+
+/**
+ * Foundational Layout-primitive for generic encapsulation & styling.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/primitives/box)
+ * @see 🏷️ {@link BoxProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * <Box padding="4">
+ *   <BodyShort>Hei</BodyShort>
+ * </Box>
+ *
+ * @example
+ * <Box padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}>
+ *   <BodyShort>Hei</BodyShort>
+ * </Box>
+ *
+ * @example
+ * <VStack gap="8">
+ *  <Box padding="4">
+ *   <BodyShort>Hei</BodyShort>
+ *  </Box>
+ *  <Box padding="4">
+ *    <BodyShort>Hei</BodyShort>
+ *  </Box>
+ * </VStack>
+ */
+export const Box: OverridableComponent<BoxProps, HTMLDivElement> = forwardRef(
+  (
+    {
+      as: Component = "div",
+      background,
+      borderColor,
+      borderWidth,
+      borderRadius,
+      className,
+      padding,
+      paddingInline,
+      paddingBlock,
+      shadow,
+      style: _style,
+      ...rest
+    },
+    ref
+  ) => {
+    const style: React.CSSProperties = {
+      ..._style,
+      "--__ac-box-background": background
+        ? `var(--a-${background})`
+        : undefined,
+      "--__ac-box-shadow": shadow ? `var(--a-shadow-${shadow})` : undefined,
+      "--__ac-box-border-color": borderColor
+        ? `var(--a-${borderColor})`
+        : undefined,
+      "--__ac-box-border-width": borderWidth
+        ? borderWidth
+            .split(" ")
+            .map((x) => `${x}px`)
+            .join(" ")
+        : undefined,
+      ...getResponsiveProps(
+        "box",
+        "border-radius",
+        "border-radius",
+        borderRadius,
+        ["0"]
+      ),
+      ...getResponsiveProps("box", "padding", "spacing", padding),
+      ...getResponsiveProps("box", "padding-inline", "spacing", paddingInline),
+      ...getResponsiveProps("box", "padding-block", "spacing", paddingBlock),
+    };
+
+    return (
+      <Component
+        {...rest}
+        className={cl("navds-box", className)}
+        ref={ref}
+        style={style}
+      />
+    );
+  }
+);
diff --git a/@navikt/core/react/src/layout/box/index.ts b/@navikt/core/react/src/layout/box/index.ts
new file mode 100644
index 0000000000..14b07a0b73
--- /dev/null
+++ b/@navikt/core/react/src/layout/box/index.ts
@@ -0,0 +1 @@
+export { Box, type BoxProps } from "./Box";
diff --git a/@navikt/core/react/src/layout/grid/h-grid.stories.tsx b/@navikt/core/react/src/layout/grid/h-grid.stories.tsx
index 73f923f2b1..db0b766db1 100644
--- a/@navikt/core/react/src/layout/grid/h-grid.stories.tsx
+++ b/@navikt/core/react/src/layout/grid/h-grid.stories.tsx
@@ -9,7 +9,7 @@ const columnsVariants = {
 };
 
 export default {
-  title: "ds-react/HGrid",
+  title: "ds-react/Primitives/HGrid",
   component: HGrid,
   parameters: {
     layout: "fullscreen",
diff --git a/@navikt/core/react/src/layout/responsive/hide.stories.tsx b/@navikt/core/react/src/layout/responsive/hide.stories.tsx
index e9d144e0cf..825a76cf0d 100644
--- a/@navikt/core/react/src/layout/responsive/hide.stories.tsx
+++ b/@navikt/core/react/src/layout/responsive/hide.stories.tsx
@@ -5,7 +5,7 @@ import { Tag } from "../../tag";
 import { VStack } from "../stack";
 
 export default {
-  title: "ds-react/Responsive/Hide",
+  title: "ds-react/Primitives/Hide",
   component: Hide,
 } satisfies Meta<typeof Hide>;
 
diff --git a/@navikt/core/react/src/layout/responsive/show.stories.tsx b/@navikt/core/react/src/layout/responsive/show.stories.tsx
index 2ed6a98bc9..0644faad62 100644
--- a/@navikt/core/react/src/layout/responsive/show.stories.tsx
+++ b/@navikt/core/react/src/layout/responsive/show.stories.tsx
@@ -5,7 +5,7 @@ import { Tag } from "../../tag";
 import { VStack } from "../stack";
 
 export default {
-  title: "ds-react/Responsive/Show",
+  title: "ds-react/Primitives/Show",
   component: Show,
 } satisfies Meta<typeof Show>;
 
diff --git a/@navikt/core/react/src/layout/stack/stack.stories.tsx b/@navikt/core/react/src/layout/stack/stack.stories.tsx
index 7edc23b4f7..aea1e5b7b6 100644
--- a/@navikt/core/react/src/layout/stack/stack.stories.tsx
+++ b/@navikt/core/react/src/layout/stack/stack.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta } from "@storybook/react";
 import { HStack, VStack, Spacer } from ".";
 
 export default {
-  title: "ds-react/Stack",
+  title: "ds-react/Primitives/Stack",
   component: HStack,
 } satisfies Meta<typeof HStack>;
 
diff --git a/@navikt/core/react/src/layout/utilities/css.ts b/@navikt/core/react/src/layout/utilities/css.ts
index 71473cdb27..f534d2a931 100644
--- a/@navikt/core/react/src/layout/utilities/css.ts
+++ b/@navikt/core/react/src/layout/utilities/css.ts
@@ -1,4 +1,5 @@
 export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
+
 export type SpacingScale =
   | "0"
   | "05"
@@ -21,19 +22,22 @@ export type SpacingScale =
   | "24"
   | "32";
 
-type ResponsivePropConfig<T = string> = {
+export type SpaceDelimitedAttribute<T extends string> =
+  | T
+  | `${T} ${T}`
+  | `${T} ${T} ${T}`
+  | `${T} ${T} ${T} ${T}`;
+
+type FixedResponsiveT<T> = {
   // eslint-disable-next-line no-unused-vars
   [Breakpoint in BreakpointsAlias]?: T;
 };
 
-export type ResponsiveProp<T> = T | ResponsivePropConfig<T>;
+export type ResponsiveProp<T> = T | FixedResponsiveT<T>;
 
-export type ResponsiveValue<T = string> = undefined | ResponsiveProp<T>;
-
-export function getResponsiveProps<T = string>(
+export function getResponsiveValue<T = string>(
   componentName: string,
   componentProp: string,
-  tokenSubgroup: string,
   responsiveProp?: ResponsiveProp<T>
 ) {
   if (!responsiveProp) {
@@ -42,22 +46,24 @@ export function getResponsiveProps<T = string>(
 
   if (typeof responsiveProp === "string") {
     return {
-      [`--__ac-${componentName}-${componentProp}-xs`]: `var(--a-${tokenSubgroup}-${responsiveProp})`,
+      [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp,
     };
   }
 
   return Object.fromEntries(
-    Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => [
+    Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
       `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
-      `var(--a-${tokenSubgroup}-${aliasOrScale})`,
+      responsiveValue,
     ])
   );
 }
 
-export function getResponsiveValue<T = string>(
+export function getResponsiveProps<T extends string>(
   componentName: string,
   componentProp: string,
-  responsiveProp?: ResponsiveValue<T>
+  tokenSubgroup: string,
+  responsiveProp?: ResponsiveProp<T>,
+  tokenExceptions: string[] = []
 ) {
   if (!responsiveProp) {
     return {};
@@ -65,14 +71,26 @@ export function getResponsiveValue<T = string>(
 
   if (typeof responsiveProp === "string") {
     return {
-      [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp,
+      [`--__ac-${componentName}-${componentProp}-xs`]: responsiveProp
+        .split(" ")
+        .map((x) =>
+          tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`
+        )
+        .join(" "),
     };
   }
 
   return Object.fromEntries(
-    Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [
-      `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
-      responsiveValue,
-    ])
+    Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => {
+      return [
+        `--__ac-${componentName}-${componentProp}-${breakpointAlias}`,
+        aliasOrScale
+          .split(" ")
+          .map((x) =>
+            tokenExceptions.includes(x) ? x : `var(--a-${tokenSubgroup}-${x})`
+          )
+          .join(" "),
+      ];
+    })
   );
 }
diff --git a/@navikt/core/react/src/layout/utilities/types.ts b/@navikt/core/react/src/layout/utilities/types.ts
new file mode 100644
index 0000000000..9e7409ef74
--- /dev/null
+++ b/@navikt/core/react/src/layout/utilities/types.ts
@@ -0,0 +1,14 @@
+import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
+import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
+import borderColors from "@navikt/ds-tokens/src/colors-border.json";
+import borderRadii from "@navikt/ds-tokens/src/border.json";
+import shadows from "@navikt/ds-tokens/src/shadow.json";
+
+export type BackgroundToken =
+  | keyof typeof bgColors.a
+  | keyof typeof surfaceColors.a;
+export type BorderColorToken = keyof typeof borderColors.a;
+export type BorderRadiiToken =
+  | keyof (typeof borderRadii.a)["border-radius"]
+  | "0";
+export type ShadowToken = keyof typeof shadows.a.shadow;
diff --git a/@navikt/core/tokens/src/border.json b/@navikt/core/tokens/src/border.json
index 5b17580984..6984335899 100644
--- a/@navikt/core/tokens/src/border.json
+++ b/@navikt/core/tokens/src/border.json
@@ -1,13 +1,11 @@
 {
   "a": {
-    "border": {
-      "radius": {
-        "small": { "value": "2px" },
-        "medium": { "value": "4px" },
-        "large": { "value": "8px" },
-        "xlarge": { "value": "12px" },
-        "full": { "value": "9999px" }
-      }
+    "border-radius": {
+      "small": { "value": "2px" },
+      "medium": { "value": "4px" },
+      "large": { "value": "8px" },
+      "xlarge": { "value": "12px" },
+      "full": { "value": "9999px" }
     }
   }
 }
diff --git a/@navikt/core/tokens/src/colors-bg.json b/@navikt/core/tokens/src/colors-bg.json
new file mode 100644
index 0000000000..6b2b3da2cc
--- /dev/null
+++ b/@navikt/core/tokens/src/colors-bg.json
@@ -0,0 +1,10 @@
+{
+  "a": {
+    "bg-default": {
+      "value": "{a.white.value}"
+    },
+    "bg-subtle": {
+      "value": "{a.gray.100.value}"
+    }
+  }
+}
diff --git a/@navikt/core/tokens/src/colors-border-stateful.json b/@navikt/core/tokens/src/colors-border-stateful.json
new file mode 100644
index 0000000000..bc4458fefa
--- /dev/null
+++ b/@navikt/core/tokens/src/colors-border-stateful.json
@@ -0,0 +1,7 @@
+{
+  "a": {
+    "border-subtle-hover": {
+      "value": "{a.grayalpha.400.value}"
+    }
+  }
+}
diff --git a/@navikt/core/tokens/src/colors-border.json b/@navikt/core/tokens/src/colors-border.json
new file mode 100644
index 0000000000..93ffee58c0
--- /dev/null
+++ b/@navikt/core/tokens/src/colors-border.json
@@ -0,0 +1,58 @@
+{
+  "a": {
+    "border-default": {
+      "value": "{a.grayalpha.500.value}"
+    },
+    "border-strong": {
+      "value": "{a.grayalpha.700.value}"
+    },
+    "border-divider": {
+      "value": "{a.grayalpha.300.value}"
+    },
+    "border-subtle": {
+      "value": "{a.grayalpha.300.value}"
+    },
+    "border-action-selected": {
+      "value": "{a.blue.700.value}"
+    },
+    "border-action": {
+      "value": "{a.blue.500.value}"
+    },
+    "border-selected": {
+      "value": "{a.blue.500.value}"
+    },
+    "border-success": {
+      "value": "{a.green.500.value}"
+    },
+    "border-danger": {
+      "value": "{a.red.500.value}"
+    },
+    "border-warning": {
+      "value": "{a.orange.600.value}"
+    },
+    "border-info": {
+      "value": "{a.lightblue.700.value}"
+    },
+    "border-focus-on-inverted": {
+      "value": "{a.blue.200.value}"
+    },
+    "border-focus": {
+      "value": "{a.blue.800.value}"
+    },
+    "border-on-inverted": {
+      "value": "{a.gray.200.value}"
+    },
+    "border-on-inverted-subtle": {
+      "value": "{a.gray.700.value}"
+    },
+    "border-alt-1": {
+      "value": "{a.purple.400.value}"
+    },
+    "border-alt-2": {
+      "value": "{a.limegreen.700.value}"
+    },
+    "border-alt-3": {
+      "value": "{a.deepblue.500.value}"
+    }
+  }
+}
diff --git a/@navikt/core/tokens/src/colors-icon.json b/@navikt/core/tokens/src/colors-icon.json
new file mode 100644
index 0000000000..a7c427b053
--- /dev/null
+++ b/@navikt/core/tokens/src/colors-icon.json
@@ -0,0 +1,61 @@
+{
+  "a": {
+    "icon-default": {
+      "value": "{a.gray.900.value}"
+    },
+    "icon-subtle": {
+      "value": "{a.grayalpha.700.value}"
+    },
+    "icon-action-selected": {
+      "value": "{a.blue.700.value}"
+    },
+    "icon-action-on-action-subtle": {
+      "value": "{a.blue.600.value}"
+    },
+    "icon-action": {
+      "value": "{a.blue.500.value}"
+    },
+    "icon-success": {
+      "value": "{a.green.500.value}"
+    },
+    "icon-danger": {
+      "value": "{a.red.500.value}"
+    },
+    "icon-warning": {
+      "value": "{a.orange.600.value}"
+    },
+    "icon-info": {
+      "value": "{a.lightblue.800.value}"
+    },
+    "icon-alt-1": {
+      "value": "{a.purple.500.value}"
+    },
+    "icon-alt-2": {
+      "value": "{a.limegreen.700.value}"
+    },
+    "icon-alt-3": {
+      "value": "{a.deepblue.500.value}"
+    },
+    "icon-on-neutral": {
+      "value": "{a.white.value}"
+    },
+    "icon-on-inverted": {
+      "value": "{a.white.value}"
+    },
+    "icon-on-action": {
+      "value": "{a.white.value}"
+    },
+    "icon-on-success": {
+      "value": "{a.white.value}"
+    },
+    "icon-on-danger": {
+      "value": "{a.white.value}"
+    },
+    "icon-on-warning": {
+      "value": "{a.gray.900.value}"
+    },
+    "icon-on-info": {
+      "value": "{a.gray.900.value}"
+    }
+  }
+}
diff --git a/@navikt/core/tokens/src/colors-surface-stateful.json b/@navikt/core/tokens/src/colors-surface-stateful.json
new file mode 100644
index 0000000000..1d223f1bda
--- /dev/null
+++ b/@navikt/core/tokens/src/colors-surface-stateful.json
@@ -0,0 +1,58 @@
+{
+  "a": {
+    "surface-hover": {
+      "value": "{a.grayalpha.100.value}"
+    },
+    "surface-active": {
+      "value": "{a.grayalpha.200.value}"
+    },
+    "surface-inverted-hover": {
+      "value": "{a.gray.800.value}"
+    },
+    "surface-inverted-active": {
+      "value": "{a.gray.700.value}"
+    },
+    "surface-action-subtle-hover": {
+      "value": "{a.blue.100.value}"
+    },
+    "surface-action-hover": {
+      "value": "{a.blue.600.value}"
+    },
+    "surface-action-active": {
+      "value": "{a.blue.700.value}"
+    },
+    "surface-action-selected-hover": {
+      "value": "{a.blue.800.value}"
+    },
+    "surface-neutral-subtle-hover": {
+      "value": "{a.grayalpha.200.value}"
+    },
+    "surface-neutral-active": {
+      "value": "{a.gray.900.value}"
+    },
+    "surface-neutral-hover": {
+      "value": "{a.gray.800.value}"
+    },
+    "surface-success-subtle-hover": {
+      "value": "{a.green.200.value}"
+    },
+    "surface-success-hover": {
+      "value": "{a.green.600.value}"
+    },
+    "surface-danger-subtle-hover": {
+      "value": "{a.red.200.value}"
+    },
+    "surface-danger-hover": {
+      "value": "{a.red.600.value}"
+    },
+    "surface-danger-active": {
+      "value": "{a.red.700.value}"
+    },
+    "surface-warning-subtle-hover": {
+      "value": "{a.orange.200.value}"
+    },
+    "surface-info-subtle-hover": {
+      "value": "{a.lightblue.200.value}"
+    }
+  }
+}
diff --git a/@navikt/core/tokens/src/colors-surface.json b/@navikt/core/tokens/src/colors-surface.json
new file mode 100644
index 0000000000..c30831bda4
--- /dev/null
+++ b/@navikt/core/tokens/src/colors-surface.json
@@ -0,0 +1,109 @@
+{
+  "a": {
+    "surface-default": {
+      "value": "{a.white.value}"
+    },
+    "surface-selected": {
+      "value": "{a.blue.50.value}"
+    },
+    "surface-subtle": {
+      "value": "{a.gray.50.value}"
+    },
+    "surface-transparent": {
+      "value": "{a.transparent.value}"
+    },
+    "surface-backdrop": {
+      "value": "{a.grayalpha.500.value}"
+    },
+    "surface-inverted": {
+      "value": "{a.gray.900.value}"
+    },
+    "surface-action-subtle": {
+      "value": "{a.blue.50.value}"
+    },
+    "surface-action-selected": {
+      "value": "{a.blue.700.value}"
+    },
+    "surface-action": {
+      "value": "{a.blue.500.value}"
+    },
+    "surface-neutral-subtle": {
+      "value": "{a.grayalpha.100.value}"
+    },
+    "surface-neutral-moderate": {
+      "value": "{a.grayalpha.200.value}"
+    },
+    "surface-neutral-selected": {
+      "value": "{a.gray.900.value}"
+    },
+    "surface-neutral": {
+      "value": "{a.gray.700.value}"
+    },
+    "surface-success-subtle": {
+      "value": "{a.green.100.value}"
+    },
+    "surface-success-moderate": {
+      "value": "{a.green.200.value}"
+    },
+    "surface-success": {
+      "value": "{a.green.500.value}"
+    },
+    "surface-danger-subtle": {
+      "value": "{a.red.100.value}"
+    },
+    "surface-danger-moderate": {
+      "value": "{a.red.200.value}"
+    },
+    "surface-danger": {
+      "value": "{a.red.500.value}"
+    },
+    "surface-warning-subtle": {
+      "value": "{a.orange.100.value}"
+    },
+    "surface-warning-moderate": {
+      "value": "{a.orange.200.value}"
+    },
+    "surface-warning": {
+      "value": "{a.orange.500.value}"
+    },
+    "surface-info-subtle": {
+      "value": "{a.lightblue.100.value}"
+    },
+    "surface-info-moderate": {
+      "value": "{a.lightblue.200.value}"
+    },
+    "surface-info": {
+      "value": "{a.lightblue.500.value}"
+    },
+    "surface-alt-1-subtle": {
+      "value": "{a.purple.100.value}"
+    },
+    "surface-alt-1-moderate": {
+      "value": "{a.purple.200.value}"
+    },
+    "surface-alt-1": {
+      "value": "{a.purple.400.value}"
+    },
+    "surface-alt-2-subtle": {
+      "value": "{a.limegreen.100.value}"
+    },
+    "surface-alt-2-moderate": {
+      "value": "{a.limegreen.200.value}"
+    },
+    "surface-alt-2": {
+      "value": "{a.limegreen.400.value}"
+    },
+    "surface-alt-3-subtle": {
+      "value": "{a.deepblue.100.value}"
+    },
+    "surface-alt-3-moderate": {
+      "value": "{a.deepblue.200.value}"
+    },
+    "surface-alt-3-strong": {
+      "value": "{a.deepblue.800.value}"
+    },
+    "surface-alt-3": {
+      "value": "{a.deepblue.500.value}"
+    }
+  }
+}
diff --git a/@navikt/core/tokens/src/colors-text.json b/@navikt/core/tokens/src/colors-text.json
new file mode 100644
index 0000000000..782d2e4ed0
--- /dev/null
+++ b/@navikt/core/tokens/src/colors-text.json
@@ -0,0 +1,55 @@
+{
+  "a": {
+    "text-default": {
+      "value": "{a.gray.900.value}"
+    },
+    "text-subtle": {
+      "value": "{a.grayalpha.700.value}"
+    },
+    "text-visited": {
+      "value": "{a.purple.500.value}"
+    },
+    "text-danger": {
+      "value": "{a.red.500.value}"
+    },
+    "text-action-selected": {
+      "value": "{a.blue.700.value}"
+    },
+    "text-action-on-action-subtle": {
+      "value": "{a.blue.600.value}"
+    },
+    "text-action": {
+      "value": "{a.blue.500.value}"
+    },
+    "text-on-inverted": {
+      "value": "{a.white.value}"
+    },
+    "text-on-neutral": {
+      "value": "{a.white.value}"
+    },
+    "text-on-action": {
+      "value": "{a.white.value}"
+    },
+    "text-on-success": {
+      "value": "{a.white.value}"
+    },
+    "text-on-danger": {
+      "value": "{a.white.value}"
+    },
+    "text-on-warning": {
+      "value": "{a.gray.900.value}"
+    },
+    "text-on-info": {
+      "value": "{a.gray.900.value}"
+    },
+    "text-on-alt-1": {
+      "value": "{a.white.value}"
+    },
+    "text-on-alt-2": {
+      "value": "{a.gray.900.value}"
+    },
+    "text-on-alt-3": {
+      "value": "{a.white.value}"
+    }
+  }
+}
diff --git a/@navikt/core/tokens/src/semantic-colors.json b/@navikt/core/tokens/src/semantic-colors.json
deleted file mode 100644
index f89c298df5..0000000000
--- a/@navikt/core/tokens/src/semantic-colors.json
+++ /dev/null
@@ -1,346 +0,0 @@
-{
-  "a": {
-    "text": {
-      "default": {
-        "value": "{a.gray.900.value}"
-      },
-      "subtle": {
-        "value": "{a.grayalpha.700.value}"
-      },
-      "visited": {
-        "value": "{a.purple.500.value}"
-      },
-      "danger": {
-        "value": "{a.red.500.value}"
-      },
-      "action": {
-        "selected": {
-          "value": "{a.blue.700.value}"
-        },
-        "on": {
-          "action": {
-            "subtle": {
-              "value": "{a.blue.600.value}"
-            }
-          }
-        },
-        "@": {
-          "value": "{a.blue.500.value}"
-        }
-      },
-      "on": {
-        "inverted": {
-          "value": "{a.white.value}"
-        },
-        "neutral": {
-          "value": "{a.white.value}"
-        },
-        "action": {
-          "value": "{a.white.value}"
-        },
-        "success": {
-          "value": "{a.white.value}"
-        },
-        "danger": {
-          "value": "{a.white.value}"
-        },
-        "warning": {
-          "value": "{a.gray.900.value}"
-        },
-        "info": {
-          "value": "{a.gray.900.value}"
-        },
-        "alt1": {
-          "value": "{a.white.value}"
-        },
-        "alt2": {
-          "value": "{a.gray.900.value}"
-        },
-        "alt3": {
-          "value": "{a.white.value}"
-        }
-      }
-    },
-    "bg": {
-      "default": {
-        "value": "{a.white.value}"
-      },
-      "subtle": {
-        "value": "{a.gray.100.value}"
-      }
-    },
-    "surface": {
-      "default": {
-        "value": "{a.white.value}"
-      },
-      "hover": {
-        "value": "{a.grayalpha.100.value}"
-      },
-      "active": {
-        "value": "{a.grayalpha.200.value}"
-      },
-      "selected": {
-        "value": "{a.blue.50.value}"
-      },
-      "subtle": {
-        "value": "{a.gray.50.value}"
-      },
-      "transparent": {
-        "value": "{a.transparent.value}"
-      },
-      "backdrop": {
-        "value": "{a.grayalpha.500.value}"
-      },
-      "inverted": {
-        "hover": {
-          "value": "{a.gray.800.value}"
-        },
-        "active": {
-          "value": "{a.gray.700.value}"
-        },
-        "@": {
-          "value": "{a.gray.900.value}"
-        }
-      },
-      "action": {
-        "subtle": {
-          "hover": {
-            "value": "{a.blue.100.value}"
-          },
-          "@": {
-            "value": "{a.blue.50.value}"
-          }
-        },
-        "hover": {
-          "value": "{a.blue.600.value}"
-        },
-        "active": {
-          "value": "{a.blue.700.value}"
-        },
-        "selected": {
-          "hover": {
-            "value": "{a.blue.800.value}"
-          },
-          "@": { "value": "{a.blue.700.value}" }
-        },
-        "@": {
-          "value": "{a.blue.500.value}"
-        }
-      },
-
-      "neutral": {
-        "subtle": {
-          "hover": {
-            "value": "{a.grayalpha.200.value}"
-          },
-          "@": {
-            "value": "{a.grayalpha.100.value}"
-          }
-        },
-        "moderate": {
-          "value": "{a.grayalpha.200.value}"
-        },
-        "hover": {
-          "value": "{a.gray.800.value}"
-        },
-        "selected": {
-          "value": "{a.gray.900.value}"
-        },
-        "active": {
-          "value": "{a.gray.900.value}"
-        },
-        "@": {
-          "value": "{a.gray.700.value}"
-        }
-      },
-
-      "success": {
-        "subtle": {
-          "hover": { "value": "{a.green.200.value}" },
-          "@": { "value": "{a.green.100.value}" }
-        },
-        "moderate": {
-          "value": "{a.green.200.value}"
-        },
-        "@": { "value": "{a.green.500.value}" },
-        "hover": { "value": "{a.green.600.value}" }
-      },
-
-      "danger": {
-        "subtle": {
-          "hover": { "value": "{a.red.200.value}" },
-          "@": { "value": "{a.red.100.value}" }
-        },
-        "moderate": {
-          "value": "{a.red.200.value}"
-        },
-        "hover": {
-          "value": "{a.red.600.value}"
-        },
-        "active": {
-          "value": "{a.red.700.value}"
-        },
-        "@": { "value": "{a.red.500.value}" }
-      },
-
-      "warning": {
-        "subtle": {
-          "hover": { "value": "{a.orange.200.value}" },
-          "@": { "value": "{a.orange.100.value}" }
-        },
-        "moderate": {
-          "value": "{a.orange.200.value}"
-        },
-        "@": { "value": "{a.orange.500.value}" }
-      },
-
-      "info": {
-        "subtle": {
-          "hover": { "value": "{a.lightblue.200.value}" },
-          "@": { "value": "{a.lightblue.100.value}" }
-        },
-        "moderate": {
-          "value": "{a.lightblue.200.value}"
-        },
-        "@": { "value": "{a.lightblue.500.value}" }
-      },
-
-      "alt1": {
-        "subtle": { "value": "{a.purple.100.value}" },
-        "moderate": { "value": "{a.purple.200.value}" },
-        "@": { "value": "{a.purple.400.value}" }
-      },
-      "alt2": {
-        "subtle": { "value": "{a.limegreen.100.value}" },
-        "moderate": { "value": "{a.limegreen.200.value}" },
-        "@": { "value": "{a.limegreen.400.value}" }
-      },
-      "alt3": {
-        "subtle": { "value": "{a.deepblue.100.value}" },
-        "moderate": { "value": "{a.deepblue.200.value}" },
-        "strong": { "value": "{a.deepblue.800.value}" },
-        "@": { "value": "{a.deepblue.500.value}" }
-      }
-    },
-    "border": {
-      "default": {
-        "value": "{a.grayalpha.500.value}"
-      },
-      "strong": {
-        "value": "{a.grayalpha.700.value}"
-      },
-      "divider": {
-        "value": "{a.grayalpha.300.value}"
-      },
-      "subtle": {
-        "hover": { "value": "{a.grayalpha.400.value}" },
-        "@": { "value": "{a.grayalpha.300.value}" }
-      },
-      "action": {
-        "selected": { "value": "{a.blue.700.value}" },
-        "@": { "value": "{a.blue.500.value}" }
-      },
-      "selected": {
-        "value": "{a.blue.500.value}"
-      },
-      "success": {
-        "value": "{a.green.500.value}"
-      },
-      "danger": {
-        "value": "{a.red.500.value}"
-      },
-      "warning": {
-        "value": "{a.orange.600.value}"
-      },
-      "info": {
-        "value": "{a.lightblue.700.value}"
-      },
-      "focus": {
-        "on": {
-          "inverted": {
-            "value": "{a.blue.200.value}"
-          }
-        },
-        "@": { "value": "{a.blue.800.value}" }
-      },
-      "on": {
-        "inverted": {
-          "@": { "value": "{a.gray.200.value}" },
-          "subtle": { "value": "{a.gray.700.value}" }
-        }
-      },
-      "alt1": {
-        "value": "{a.purple.400.value}"
-      },
-      "alt2": {
-        "value": "{a.limegreen.700.value}"
-      },
-      "alt3": {
-        "value": "{a.deepblue.500.value}"
-      }
-    },
-    "icon": {
-      "default": {
-        "value": "{a.gray.900.value}"
-      },
-      "subtle": {
-        "value": "{a.grayalpha.700.value}"
-      },
-      "action": {
-        "selected": { "value": "{a.blue.700.value}" },
-        "on": {
-          "action": {
-            "subtle": {
-              "value": "{a.blue.600.value}"
-            }
-          }
-        },
-        "@": { "value": "{a.blue.500.value}" }
-      },
-      "success": {
-        "value": "{a.green.500.value}"
-      },
-      "danger": {
-        "value": "{a.red.500.value}"
-      },
-      "warning": {
-        "value": "{a.orange.600.value}"
-      },
-      "info": {
-        "value": "{a.lightblue.800.value}"
-      },
-      "alt1": {
-        "value": "{a.purple.500.value}"
-      },
-      "alt2": {
-        "value": "{a.limegreen.700.value}"
-      },
-      "alt3": {
-        "value": "{a.deepblue.500.value}"
-      },
-      "on": {
-        "neutral": {
-          "value": "{a.white.value}"
-        },
-        "inverted": {
-          "value": "{a.white.value}"
-        },
-        "action": {
-          "value": "{a.white.value}"
-        },
-        "success": {
-          "value": "{a.white.value}"
-        },
-        "danger": {
-          "value": "{a.white.value}"
-        },
-        "warning": {
-          "value": "{a.gray.900.value}"
-        },
-        "info": {
-          "value": "{a.gray.900.value}"
-        }
-      }
-    }
-  }
-}
diff --git a/@navikt/core/tokens/src/shadow-stateful.json b/@navikt/core/tokens/src/shadow-stateful.json
new file mode 100644
index 0000000000..b36f7cdaff
--- /dev/null
+++ b/@navikt/core/tokens/src/shadow-stateful.json
@@ -0,0 +1,12 @@
+{
+  "a": {
+    "shadow": {
+      "focus": {
+        "value": "0 0 0 3px {a.border-focus.value}"
+      },
+      "focus-inverted": {
+        "value": "0 0 0 3px {a.border-focus-on-inverted.value}"
+      }
+    }
+  }
+}
diff --git a/@navikt/core/tokens/src/shadow.json b/@navikt/core/tokens/src/shadow.json
index 78eb4a54bf..d6bd9ecc0f 100644
--- a/@navikt/core/tokens/src/shadow.json
+++ b/@navikt/core/tokens/src/shadow.json
@@ -15,12 +15,6 @@
       },
       "xlarge": {
         "value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)"
-      },
-      "focus": {
-        "inverted": {
-          "value": "0 0 0 3px {a.border.focus.on.inverted.value}"
-        },
-        "@": { "value": "0 0 0 3px {a.border.focus.@.value}" }
       }
     }
   }
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/background.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/background.tsx
new file mode 100644
index 0000000000..a68589428b
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/primitive-box/background.tsx
@@ -0,0 +1,35 @@
+import { Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="4">
+      <Box padding="4" background="surface-alt-3-subtle">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
+        ipsum!
+      </Box>
+      <Box padding="4" background="surface-info-subtle">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
+        ipsum!
+      </Box>
+      <Box padding="4" background="surface-success-subtle">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt,
+        ipsum!
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 0,
+  desc: "'Background'-prop lar deg endre farge basert på tilgjengelige tokens",
+};
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/border-color.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/border-color.tsx
new file mode 100644
index 0000000000..55a6b4538f
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/primitive-box/border-color.tsx
@@ -0,0 +1,47 @@
+import { Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="4">
+      <Box
+        background="surface-alt-3-subtle"
+        borderColor="border-alt-3"
+        padding="4"
+        borderWidth="4"
+      >
+        Alt-3
+      </Box>
+      <Box
+        background="surface-info-subtle"
+        borderColor="border-info"
+        padding="4"
+        borderWidth="4"
+      >
+        Info
+      </Box>
+      <Box
+        background="surface-success-subtle"
+        borderColor="border-success"
+        padding="4"
+        borderWidth="4"
+      >
+        Success
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 5,
+  desc: "'borderColor' lar deg endre border-color på Box basert på tokens",
+};
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/border-radius.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/border-radius.tsx
new file mode 100644
index 0000000000..e14f9e2ea2
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/primitive-box/border-radius.tsx
@@ -0,0 +1,50 @@
+import { Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="4">
+      <Box
+        background="surface-subtle"
+        borderColor="border-alt-3"
+        padding="4"
+        borderWidth="2"
+        borderRadius="xlarge"
+      >
+        border-radius
+      </Box>
+      <Box
+        background="surface-subtle"
+        borderColor="border-alt-3"
+        padding="4"
+        borderWidth="2"
+        borderRadius="xlarge xlarge 0 0"
+      >
+        Fleksibel border-radius
+      </Box>
+      <Box
+        background="surface-subtle"
+        borderColor="border-alt-3"
+        padding="4"
+        borderWidth="2"
+        borderRadius={{ md: "large" }}
+      >
+        Dynamisk border-radius
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 6,
+  desc: "'borderRadius' lar deg endre border-radius på Box basert på tokens. Du kan også enkelt endre border-radius basert på brekkpunkt.",
+};
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/border-width.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/border-width.tsx
new file mode 100644
index 0000000000..e5b808757c
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/primitive-box/border-width.tsx
@@ -0,0 +1,29 @@
+import { Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="4">
+      <Box background="surface-subtle" padding="4" borderWidth="2">
+        border-width
+      </Box>
+      <Box background="surface-subtle" padding="4" borderWidth="2 5">
+        Fleksibel border-width
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 4,
+  desc: "'borderWidth' gir deg kontroll over border på Box",
+};
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/header.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/header.tsx
new file mode 100644
index 0000000000..28ba735a87
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/primitive-box/header.tsx
@@ -0,0 +1,128 @@
+import {
+  Box,
+  Detail,
+  HStack,
+  Heading,
+  BodyShort,
+  Hide,
+  Show,
+  VStack,
+} from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <Box
+      as="header"
+      background="surface-default"
+      borderWidth="0 0 4 0"
+      borderColor="border-warning"
+    >
+      <Box paddingInline="4" paddingBlock="0 6">
+        <HStack align="start" gap="8">
+          <Hide below="md">
+            <Pictogram />
+          </Hide>
+
+          <VStack gap={{ xs: "4", md: "5" }}>
+            <Heading level="1" size="xlarge">
+              Er arbeidsledig eller permittert
+            </Heading>
+
+            <Hide below="md">
+              <HStack gap="4" align="center">
+                <BodyShort size="small">DETTE KAN DU HA RETT TIL</BodyShort>
+                <span aria-hidden="true">|</span>
+                <Detail>Oppdatert 5. juli 2023</Detail>
+              </HStack>
+            </Hide>
+            <Show below="md">
+              <VStack gap="2">
+                <BodyShort size="small">DETTE KAN DU HA RETT TIL</BodyShort>
+                <Detail>Oppdatert 5. juli 2023</Detail>
+              </VStack>
+            </Show>
+          </VStack>
+        </HStack>
+      </Box>
+    </Box>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+  variant: "subtle",
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 8,
+  desc: "Box lar deg enklere bygge opp kjente grensesnitt gjennom felles tokens og brekkpunkt",
+};
+
+function Pictogram() {
+  return (
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 96 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <g clipPath="url(#clip0_275_1062)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M48 24C34.7452 24 24 34.7452 24 48C24 61.2548 34.7452 72 48 72C61.2548 72 72 61.2548 72 48C72 34.7452 61.2548 24 48 24ZM16 48C16 30.3269 30.3269 16 48 16C65.6731 16 80 30.3269 80 48C80 65.6731 65.6731 80 48 80C30.3269 80 16 65.6731 16 48Z"
+          fill="#FFECCC"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M70.3284 30.8284L30.8284 70.3284L25.1716 64.6716L64.6716 25.1716L70.3284 30.8284Z"
+          fill="#FFECCC"
+        />
+        <path
+          d="M50 26.7059H94M62.2222 11.8824V6.94118C62.2222 4.21224 64.4111 2 67.1111 2H76.8889C79.5889 2 81.7778 4.21224 81.7778 6.94118V11.8824M72 26.7059V34.1176M52 44H92C93.1046 44 94 43.1046 94 42V13.8824C94 12.7778 93.1046 11.8824 92 11.8824H52C50.8954 11.8824 50 12.7778 50 13.8824V42C50 43.1046 50.8954 44 52 44Z"
+          stroke="#262626"
+          strokeWidth="3"
+        />
+        <path
+          d="M2 58.6316H48V94H2V58.6316Z"
+          stroke="#262626"
+          strokeWidth="3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M2 58.5L21 48"
+          stroke="#23262A"
+          strokeWidth="3"
+          strokeLinecap="round"
+        />
+        <path
+          d="M48 58.5L29 48"
+          stroke="#23262A"
+          strokeWidth="3"
+          strokeLinecap="round"
+        />
+        <path
+          d="M29 69H21"
+          stroke="#23262A"
+          strokeWidth="3"
+          strokeLinecap="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_275_1062">
+          <rect width="96" height="96" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/padding-block.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/padding-block.tsx
new file mode 100644
index 0000000000..2a4497c2cd
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/primitive-box/padding-block.tsx
@@ -0,0 +1,38 @@
+import { Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="4">
+      <Box background="surface-neutral" paddingBlock="4">
+        <Box background="surface-alt-3-subtle" padding="2">
+          Padding block
+        </Box>
+      </Box>
+      <Box background="surface-neutral" paddingBlock="4 16">
+        <Box background="surface-alt-3-subtle" padding="2">
+          Forskjellig blockStart og blockEnd
+        </Box>
+      </Box>
+      <Box background="surface-neutral" paddingBlock={{ xs: "4", md: "6 16" }}>
+        <Box background="surface-alt-3-subtle" padding="2">
+          Dynamisk paddingBlock
+        </Box>
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 3,
+  desc: "'paddingBlock' gir deg mer kontroll over vertikal padding.",
+};
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/padding-inline.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/padding-inline.tsx
new file mode 100644
index 0000000000..26d509eb68
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/primitive-box/padding-inline.tsx
@@ -0,0 +1,38 @@
+import { Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="4">
+      <Box background="surface-neutral" paddingInline="4">
+        <Box background="surface-alt-3-subtle" padding="2">
+          Padding inline
+        </Box>
+      </Box>
+      <Box background="surface-neutral" paddingInline="4 16">
+        <Box background="surface-alt-3-subtle" padding="2">
+          Forskjellig inlineStart og inlineEnd
+        </Box>
+      </Box>
+      <Box background="surface-neutral" paddingInline={{ xs: "4", md: "6 16" }}>
+        <Box background="surface-alt-3-subtle" padding="2">
+          Dynamisk paddingInline
+        </Box>
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 2,
+  desc: "'paddingInline' gir deg mer kontroll over horisontal padding",
+};
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/padding.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/padding.tsx
new file mode 100644
index 0000000000..96e024bf64
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/primitive-box/padding.tsx
@@ -0,0 +1,33 @@
+import { Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="4">
+      <Box background="surface-neutral" padding="4">
+        <Box background="surface-alt-3-subtle" padding="2">
+          Statisk padding
+        </Box>
+      </Box>
+      <Box background="surface-neutral" padding={{ xs: "2", md: "6" }}>
+        <Box background="surface-alt-3-subtle" padding="2">
+          Dynamisk padding
+        </Box>
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 1,
+  desc: "'padding'-prop lar deg endre padding responsivt basert på brekkpunkt",
+};
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/panel.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/panel.tsx
new file mode 100644
index 0000000000..42cc2d1022
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/primitive-box/panel.tsx
@@ -0,0 +1,37 @@
+import { Box, BodyLong } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <Box background="surface-default" padding="6">
+      <BodyLong spacing>
+        Hvis du er helt eller delvis arbeidsledig eller permittert, kan du ha
+        rett til pengestøtte fra NAV.
+      </BodyLong>
+      <BodyLong spacing>
+        NAV kan også gi deg råd og veiledning i situasjonen din.
+      </BodyLong>
+      <BodyLong spacing>
+        Hvis du ikke får dagpenger kan du ha rett til tiltakspenger. Dette er en
+        dagsats du får de dagene du deltar på et arbeidsmarkedstiltak. Et
+        arbeidsmarkedstiltak kan for eksempel være kurs, jobbklubb eller
+        arbeidstrening.
+      </BodyLong>
+    </Box>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+  variant: "subtle",
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 9,
+  desc: "Box erstatter dagens Panel-komponent",
+};
diff --git a/aksel.nav.no/website/pages/eksempler/primitive-box/shadow.tsx b/aksel.nav.no/website/pages/eksempler/primitive-box/shadow.tsx
new file mode 100644
index 0000000000..4b07e51765
--- /dev/null
+++ b/aksel.nav.no/website/pages/eksempler/primitive-box/shadow.tsx
@@ -0,0 +1,55 @@
+import { Box, VStack } from "@navikt/ds-react";
+import { withDsExample } from "components/website-modules/examples/withDsExample";
+
+const Example = () => {
+  return (
+    <VStack gap="8">
+      <Box
+        background="surface-subtle"
+        padding="4"
+        borderRadius="large"
+        shadow="xsmall"
+      >
+        xsmall
+      </Box>
+      <Box
+        background="surface-subtle"
+        padding="4"
+        borderRadius="large"
+        shadow="small"
+      >
+        small
+      </Box>
+      <Box
+        background="surface-subtle"
+        padding="4"
+        borderRadius="large"
+        shadow="medium"
+      >
+        medium
+      </Box>
+      <Box
+        background="surface-subtle"
+        padding="4"
+        borderRadius="large"
+        shadow="large"
+      >
+        large
+      </Box>
+    </VStack>
+  );
+};
+
+export default withDsExample(Example, {
+  showBreakpoints: true,
+});
+
+/* Storybook story */
+export const Demo = {
+  render: Example,
+};
+
+export const args = {
+  index: 7,
+  desc: "'shadow' lar deg endre box-shadow på Box basert på tokens.",
+};
diff --git a/package.json b/package.json
index e3f2ae5d60..7272a1904a 100644
--- a/package.json
+++ b/package.json
@@ -251,7 +251,7 @@
     "stylelint-config-standard": "^25.0.0",
     "stylelint-declaration-block-no-ignored-properties": "^2.6.0",
     "stylelint-value-no-unknown-custom-properties": "^4.0.0",
-    "typescript": "^4.8.0",
+    "typescript": "^5.1.6",
     "vite": "^4.2.0",
     "yarn": "^1.22.10"
   },
diff --git a/tsconfig.json b/tsconfig.json
index dff49c77e9..028ad7cc60 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,7 @@
     "target": "es6",
     "moduleResolution": "node",
     "incremental": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "resolveJsonModule": true
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 1c981ee289..21dacc60bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3678,6 +3678,7 @@ __metadata:
   dependencies:
     "@floating-ui/react": 0.24.1
     "@navikt/aksel-icons": ^5.4.1
+    "@navikt/ds-tokens": ^5.4.1
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -8710,7 +8711,7 @@ __metadata:
     stylelint-config-standard: ^25.0.0
     stylelint-declaration-block-no-ignored-properties: ^2.6.0
     stylelint-value-no-unknown-custom-properties: ^4.0.0
-    typescript: ^4.8.0
+    typescript: ^5.1.6
     vite: ^4.2.0
     yarn: ^1.22.10
   languageName: unknown
@@ -26034,16 +26035,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^4.8.0":
-  version: 4.9.5
-  resolution: "typescript@npm:4.9.5"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: ee000bc26848147ad423b581bd250075662a354d84f0e06eb76d3b892328d8d4440b7487b5a83e851b12b255f55d71835b008a66cbf8f255a11e4400159237db
-  languageName: node
-  linkType: hard
-
 "typescript@npm:^5.1.6":
   version: 5.2.2
   resolution: "typescript@npm:5.2.2"
@@ -26064,16 +26055,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@^4.8.0#~builtin<compat/typescript>":
-  version: 4.9.5
-  resolution: "typescript@patch:typescript@npm%3A4.9.5#~builtin<compat/typescript>::version=4.9.5&hash=7ad353"
-  bin:
-    tsc: bin/tsc
-    tsserver: bin/tsserver
-  checksum: 2eee5c37cad4390385db5db5a8e81470e42e8f1401b0358d7390095d6f681b410f2c4a0c496c6ff9ebd775423c7785cdace7bcdad76c7bee283df3d9718c0f20
-  languageName: node
-  linkType: hard
-
 "typescript@patch:typescript@^5.1.6#~builtin<compat/typescript>":
   version: 5.2.2
   resolution: "typescript@patch:typescript@npm%3A5.2.2#~builtin<compat/typescript>::version=5.2.2&hash=7ad353"