diff --git a/.changeset/perfect-pens-relate.md b/.changeset/perfect-pens-relate.md
new file mode 100644
index 0000000000..a3931fb4c9
--- /dev/null
+++ b/.changeset/perfect-pens-relate.md
@@ -0,0 +1,7 @@
+---
+"@navikt/ds-css": minor
+"@navikt/ds-react": minor
+"@navikt/ds-tokens": minor
+---
+
+Button og ToggleGroup har nå en neutral-variant, oppdatert neutral-tokens
diff --git a/@navikt/core/css/accordion.css b/@navikt/core/css/accordion.css
index 405dfb755e..cee0a4594d 100644
--- a/@navikt/core/css/accordion.css
+++ b/@navikt/core/css/accordion.css
@@ -14,7 +14,7 @@
   background: transparent;
   cursor: pointer;
   border: none;
-  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-strong));
+  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-divider));
 }
 
 .navds-accordion__header:focus {
@@ -24,7 +24,7 @@
 
 .navds-accordion__header:hover {
   color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
-  border-color: var(--ac-accordion-header-border-hover, var(--a-border-strong));
+  border-color: var(--ac-accordion-header-border-hover, var(--a-border-default));
 }
 
 .navds-accordion__header-content {
@@ -39,11 +39,11 @@
 
 .navds-accordion__content {
   padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
-  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-strong));
+  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-divider));
 }
 
 .navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
-  border-color: var(--ac-accordion-content-border-open, var(--a-border-strong));
+  border-color: var(--ac-accordion-content-border-open, var(--a-border-default));
 }
 
 .navds-accordion__expand-icon {
diff --git a/@navikt/core/css/button.css b/@navikt/core/css/button.css
index 703c698562..268e3bbad6 100644
--- a/@navikt/core/css/button.css
+++ b/@navikt/core/css/button.css
@@ -112,13 +112,39 @@
   background-color: var(--ac-button-primary-bg, var(--a-surface-action));
 }
 
+/*************************
+ * .navds-button--primary-neutral *
+ *************************/
+
+.navds-button--primary-neutral {
+  background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
+  color: var(--ac-button-primary-neutral-text, var(--a-text-on-neutral));
+}
+
+.navds-button--primary-neutral:hover {
+  background-color: var(--ac-button-primary-neutral-hover-bg, var(--a-surface-neutral-hover));
+}
+
+.navds-button--primary-neutral:active {
+  background-color: var(--ac-button-primary-neutral-active-bg, var(--a-surface-neutral-active));
+}
+
+.navds-button--primary-neutral:focus {
+  box-shadow: inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
+}
+
+.navds-button--primary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--primary-neutral:active:where(:disabled, .navds-button--disabled) {
+  background-color: var(--ac-button-primary-neutral-bg, var(--a-surface-neutral));
+}
+
 /**************************
 * .navds-button--secondary *
  **************************/
 
 .navds-button--secondary {
   color: var(--ac-button-secondary-text, var(--a-text-action));
-  background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
   box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
 }
 
@@ -144,10 +170,47 @@
 .navds-button--secondary:where(:disabled, .navds-button--disabled),
 .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
   color: var(--ac-button-secondary-text, var(--a-text-action));
-  background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-transparent));
   box-shadow: inset 0 0 0 2px var(--ac-button-secondary-border, var(--a-border-action));
 }
 
+/**************************
+* .navds-button--secondary-neutral *
+ **************************/
+
+.navds-button--secondary-neutral {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
+}
+
+.navds-button--secondary-neutral:hover {
+  background-color: var(--ac-button-secondary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-button--secondary-neutral:focus {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+}
+
+.navds-button--secondary-neutral:active {
+  color: var(--ac-button-secondary-neutral-active-text, var(--a-text-on-neutral));
+  background-color: var(--ac-button-secondary-neutral-active-bg, var(--a-surface-neutral-active));
+  box-shadow: none;
+}
+
+.navds-button--secondary-neutral:focus:active {
+  box-shadow: inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border, var(--a-surface-default)),
+    var(--a-shadow-focus);
+}
+
+.navds-button--secondary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--secondary-neutral:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ac-button-secondary-neutral-text, var(--a-text-default));
+  background-color: var(--ac-button-secondary-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 2px var(--ac-button-secondary-neutral-border, var(--a-border-strong));
+}
+
 /****************************
  * .navds-button--tertiary *
  ****************************/
@@ -188,6 +251,46 @@
   box-shadow: none;
 }
 
+/****************************
+ * .navds-button--tertiary-neutral *
+ ****************************/
+
+.navds-button--tertiary-neutral {
+  color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
+}
+
+.navds-button--tertiary-neutral:hover {
+  color: var(--ac-button-tertiary-neutral-hover-text, var(--a-text-default));
+  background-color: var(--ac-button-tertiary-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+}
+
+.navds-button--tertiary-neutral:focus {
+  box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border, var(--a-border-strong)), var(--a-shadow-focus);
+}
+
+.navds-button--tertiary-neutral:active {
+  color: var(--ac-button-tertiary-neutral-active-text, var(--a-text-on-neutral));
+  background-color: var(--ac-button-tertiary-neutral-active-bg, var(--a-surface-neutral-active));
+  box-shadow: inset 0 0 0 1px var(--a-surface-default);
+}
+
+.navds-button--tertiary-neutral:active:hover {
+  background-color: var(--ac-button-tertiary-neutral-active-hover-bg, var(--a-surface-neutral-active));
+}
+
+.navds-button--tertiary-neutral:active:focus {
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
+}
+
+.navds-button--tertiary-neutral:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:hover:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:where(:disabled, .navds-button--disabled),
+.navds-button--tertiary-neutral:active:hover:where(:disabled, .navds-button--disabled) {
+  color: var(--ac-button-tertiary-neutral-text, var(--a-text-default));
+  background: none;
+  box-shadow: none;
+}
+
 /*************************
  * .navds-button--danger *
  *************************/
diff --git a/@navikt/core/css/form/radio-checkbox.css b/@navikt/core/css/form/radio-checkbox.css
index d61f89f1eb..bb66915512 100644
--- a/@navikt/core/css/form/radio-checkbox.css
+++ b/@navikt/core/css/form/radio-checkbox.css
@@ -28,7 +28,7 @@
 .navds-radio__label::before {
   content: "";
   background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong));
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default));
   width: 1.5rem;
   height: 1.5rem;
   border-radius: var(--a-border-radius-medium);
@@ -67,7 +67,7 @@
 
 .navds-checkbox__input:focus + .navds-checkbox__label::before,
 .navds-radio__input:focus + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong)), var(--a-shadow-focus);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-default)), var(--a-shadow-focus);
 }
 
 .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
diff --git a/@navikt/core/css/form/select.css b/@navikt/core/css/form/select.css
index 5b5bb52aff..101d08c754 100644
--- a/@navikt/core/css/form/select.css
+++ b/@navikt/core/css/form/select.css
@@ -2,7 +2,7 @@
   appearance: none;
   background-color: var(--ac-select-bg, var(--a-surface-default));
   border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-select-border, var(--a-border-strong));
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
   width: 100%;
   box-sizing: border-box;
   min-height: 48px;
@@ -52,7 +52,7 @@
 
 .navds-select__input:disabled {
   background-color: var(--ac-select-bg, var(--a-surface-default));
-  border: 1px solid var(--ac-select-border, var(--a-border-strong));
+  border: 1px solid var(--ac-select-border, var(--a-border-default));
   box-shadow: none;
   cursor: not-allowed;
 }
diff --git a/@navikt/core/css/toggle-group.css b/@navikt/core/css/toggle-group.css
index 15f3206e7e..cb8124271f 100644
--- a/@navikt/core/css/toggle-group.css
+++ b/@navikt/core/css/toggle-group.css
@@ -6,7 +6,7 @@
 
 .navds-toggle-group {
   border-radius: 9px;
-  background-color: var(--ac-toggle-group-bg, var(--a-surface-default));
+  background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
   box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
   padding: calc(var(--a-spacing-1) + 1px);
   gap: var(--a-spacing-1);
@@ -15,6 +15,11 @@
   grid-auto-columns: 1fr;
 }
 
+.navds-toggle-group--neutral {
+  background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
+  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
+}
+
 .navds-toggle-group__button {
   display: inline-flex;
   align-items: center;
@@ -23,17 +28,27 @@
   min-height: 48px;
   border: none;
   cursor: pointer;
-  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-default));
+  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
   color: var(--ac-toggle-group-button-text, var(--a-text-default));
   border-radius: var(--a-border-radius-medium);
   min-width: fit-content;
 }
 
+.navds-toggle-group--neutral > .navds-toggle-group__button {
+  background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
+  color: var(--ac-toggle-group-button-neutral-text, var(c));
+}
+
 .navds-toggle-group__button:hover {
   background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
   color: var(--ac-toggle-group-button-hover-text, var(--a-text-action-on-action-subtle));
 }
 
+.navds-toggle-group--neutral > .navds-toggle-group__button:hover {
+  background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
+  color: var(--ac-toggle-group-button-neutral-hover-text, var(--a-text-default));
+}
+
 .navds-toggle-group__button:focus {
   outline: none;
   box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
@@ -43,6 +58,11 @@
   box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
 }
 
+.navds-toggle-group--neutral > .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
+  box-shadow: 0 0 0 1px var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover)),
+    0 0 0 4px var(--a-border-focus);
+}
+
 .navds-toggle-group__button-inner {
   display: flex;
   align-items: center;
@@ -59,6 +79,12 @@
   color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
 }
 
+.navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
+.navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
+  background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral));
+  color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
+}
+
 .navds-toggle-group--small > .navds-toggle-group__button {
   padding: 0.375rem;
   min-height: 32px;
diff --git a/@navikt/core/css/tokens.json b/@navikt/core/css/tokens.json
index 5a7a50625d..b731568c4f 100644
--- a/@navikt/core/css/tokens.json
+++ b/@navikt/core/css/tokens.json
@@ -10,13 +10,13 @@
     "--ac-alert-success-bg": "--a-surface-success-subtle"
   },
   "accordion": {
-    "--ac-accordion-header-border": "--a-border-strong",
+    "--ac-accordion-header-border": "--a-border-divider",
     "--ac-accordion-header-text-hover": "--a-text-action-on-action-subtle",
-    "--ac-accordion-header-border-hover": "--a-border-strong",
+    "--ac-accordion-header-border-hover": "--a-border-default",
     "--ac-accordion-item-bg-open": "--a-surface-action-subtle",
     "--ac-accordion-item-border-open": "--a-surface-action-subtle",
-    "--ac-accordion-content-border": "--a-border-strong",
-    "--ac-accordion-content-border-open": "--a-border-strong"
+    "--ac-accordion-content-border": "--a-border-divider",
+    "--ac-accordion-content-border-open": "--a-border-default"
   },
   "button": {
     "--ac-button-primary-bg": "--a-surface-action",
@@ -25,7 +25,7 @@
     "--ac-button-primary-active-bg": "--a-surface-action-active",
     "--ac-button-primary-focus-border": "--a-surface-default",
     "--ac-button-secondary-text": "--a-text-action",
-    "--ac-button-secondary-bg": "--a-surface-default",
+    "--ac-button-secondary-bg": "--a-surface-transparent",
     "--ac-button-secondary-border": "--a-border-action",
     "--ac-button-secondary-hover-text": "--a-text-action-on-action-subtle",
     "--ac-button-secondary-hover-bg": "--a-surface-action-subtle-hover",
@@ -45,7 +45,27 @@
     "--ac-button-danger-hover-bg": "--a-surface-danger-hover",
     "--ac-button-danger-active-bg": "--a-surface-danger-active",
     "--ac-button-loader-stroke": "currentColor",
-    "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)"
+    "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)",
+    "--ac-button-primary-neutral-bg": "--a-surface-neutral",
+    "--ac-button-primary-neutral-text": "--a-text-on-neutral",
+    "--ac-button-primary-neutral-hover-bg": "--a-surface-neutral-hover",
+    "--ac-button-primary-neutral-active-bg": "--a-surface-neutral-active",
+    "--ac-button-primary-neutral-focus-border": "--a-surface-default",
+    "--ac-button-secondary-neutral-text": "--a-text-default",
+    "--ac-button-secondary-neutral-bg": "--a-surface-transparent",
+    "--ac-button-secondary-neutral-border": "--a-border-strong",
+    "--ac-button-secondary-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-button-secondary-neutral-focus-border": "--a-border-stron",
+    "--ac-button-secondary-neutral-active-text": "--a-text-on-neutral",
+    "--ac-button-secondary-neutral-active-bg": "--a-surface-neutral-active",
+    "--ac-button-secondary-neutral-active-focus-border": "--a-surface-default",
+    "--ac-button-tertiary-neutral-text": "--a-text-default",
+    "--ac-button-tertiary-neutral-hover-text": "--a-text-default",
+    "--ac-button-tertiary-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-button-tertiary-neutral-focus-border": "--a-border-stron",
+    "--ac-button-tertiary-neutral-active-text": "--a-text-on-neutral",
+    "--ac-button-tertiary-neutral-active-bg": "--a-surface-neutral-active",
+    "--ac-button-tertiary-neutral-active-hover-bg": "--a-surface-neutral-active"
   },
   "chat": {
     "--ac-chat-avatar-bg": "--a-bg-subtle",
@@ -221,14 +241,20 @@
     "--ac-tag-alt-3-filled-text": "--a-text-on-alt-3"
   },
   "togglegroup": {
-    "--ac-toggle-group-bg": "--a-surface-default",
+    "--ac-toggle-group-bg": "--a-surface-transparent",
     "--ac-toggle-group-border": "--a-border-default",
-    "--ac-toggle-group-button-bg": "--a-surface-default",
+    "--ac-toggle-group-button-bg": "--a-surface-transparent",
     "--ac-toggle-group-button-text": "--a-text-default",
     "--ac-toggle-group-button-hover-bg": "--a-surface-action-subtle",
     "--ac-toggle-group-button-hover-text": "--a-text-action-on-action-subtle",
     "--ac-toggle-group-selected-bg": "--a-surface-action-selected",
-    "--ac-toggle-group-selected-text": "--a-text-on-action"
+    "--ac-toggle-group-selected-text": "--a-text-on-action",
+    "--ac-toggle-group-button-neutral-bg": "--a-surface-transparent",
+    "--ac-toggle-group-button-neutral-text": "--ac-toggle-group-button-neutral-text",
+    "--ac-toggle-group-button-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-toggle-group-button-neutral-hover-text": "--a-text-default",
+    "--ac-toggle-group-neutral-selected-bg": "--a-surface-neutral",
+    "--ac-toggle-group-neutral-selected-text": "--a-text-on-neutral"
   },
   "tooltip": {
     "--ac-tooltip-bg": "--a-surface-inverted",
@@ -253,7 +279,7 @@
   },
   "checkbox-radio": {
     "--ac-radio-checkbox-bg": "--a-surface-default",
-    "--ac-radio-checkbox-border": "--a-border-strong",
+    "--ac-radio-checkbox-border": "--a-border-default",
     "--ac-radio-checkbox-action": "--a-surface-action",
     "--ac-radio-checkbox-action-hover-bg": "--a-surface-action-subtle",
     "--ac-radio-checkbox-error-border": "--a-border-danger",
@@ -269,7 +295,7 @@
   },
   "select": {
     "--ac-select-bg": "--a-surface-default",
-    "--ac-select-border": "--a-border-strong",
+    "--ac-select-border": "--a-border-default",
     "--ac-select-hover-bg": "--a-border-action",
     "--ac-select-error-border": "--a-surface-danger"
   },
diff --git a/@navikt/core/react/src/button/Button.tsx b/@navikt/core/react/src/button/Button.tsx
index 1a8d11be1b..13705b81d7 100644
--- a/@navikt/core/react/src/button/Button.tsx
+++ b/@navikt/core/react/src/button/Button.tsx
@@ -13,7 +13,14 @@ export interface ButtonProps
    * Changes design and interaction-visuals
    * @default "primary"
    */
-  variant?: "primary" | "secondary" | "tertiary" | "danger";
+  variant?:
+    | "primary"
+    | "primary-neutral"
+    | "secondary"
+    | "secondary-neutral"
+    | "tertiary"
+    | "tertiary-neutral"
+    | "danger";
   /**
    * Changes padding, height and font-size
    * @default medium
diff --git a/@navikt/core/react/src/button/button.stories.tsx b/@navikt/core/react/src/button/button.stories.tsx
index 2bc5b94f03..c5018e84cd 100644
--- a/@navikt/core/react/src/button/button.stories.tsx
+++ b/@navikt/core/react/src/button/button.stories.tsx
@@ -10,11 +10,22 @@ export default {
   },
 };
 
-const variants: Array<"primary" | "secondary" | "tertiary" | "danger"> = [
+const variants: Array<
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "primary-neutral"
+  | "secondary-neutral"
+  | "tertiary-neutral"
+  | "danger"
+> = [
   "primary",
   "secondary",
   "tertiary",
   "danger",
+  "primary-neutral",
+  "secondary-neutral",
+  "tertiary-neutral",
 ];
 
 const varSwitch = {
@@ -22,6 +33,9 @@ const varSwitch = {
   secondary: "Secondary",
   tertiary: "Tertiary",
   danger: "Danger",
+  "primary-neutral": "Primary",
+  "secondary-neutral": "Secondary",
+  "tertiary-neutral": "Tertiary",
 };
 
 export const Default = {
@@ -51,7 +65,15 @@ export const Default = {
     variant: {
       control: {
         type: "radio",
-        options: ["primary", "secondary", "tertiary", "danger"],
+        options: [
+          "primary",
+          "secondary",
+          "tertiary",
+          "danger",
+          "primary-neutral",
+          "secondary-neutral",
+          "tertiary-neutral",
+        ],
       },
     },
     size: {
diff --git a/@navikt/core/react/src/tag/tag.stories.tsx b/@navikt/core/react/src/tag/tag.stories.tsx
index d3ec2c1ffd..3ef24c2627 100644
--- a/@navikt/core/react/src/tag/tag.stories.tsx
+++ b/@navikt/core/react/src/tag/tag.stories.tsx
@@ -84,6 +84,7 @@ export const Default = {
 
   args: {
     children: "Id elit esse",
+    variant: "info",
   },
 };
 
diff --git a/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx b/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx
index 23132ecf8b..6fac076741 100644
--- a/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx
+++ b/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx
@@ -13,6 +13,12 @@ export default {
         options: ["medium", "small"],
       },
     },
+    variant: {
+      control: {
+        type: "radio",
+        options: ["action", "neutral"],
+      },
+    },
   },
 } as Meta;
 
@@ -88,6 +94,29 @@ export const Compositions = () => {
   );
 };
 
+export const Variants = () => {
+  const [activeValue, setActiveValue] = useState("ulest");
+
+  return (
+    <div className="colgap">
+      <ToggleGroup
+        variant="action"
+        value={activeValue}
+        onChange={setActiveValue}
+      >
+        {Items(true, true)}
+      </ToggleGroup>
+      <ToggleGroup
+        variant="neutral"
+        value={activeValue}
+        onChange={setActiveValue}
+      >
+        {Items(true, true)}
+      </ToggleGroup>
+    </div>
+  );
+};
+
 export const Small = () => {
   const [activeValue, setActiveValue] = useState("ulest");
 
diff --git a/@navikt/core/react/src/toggle-group/ToggleGroup.tsx b/@navikt/core/react/src/toggle-group/ToggleGroup.tsx
index 15b467e08f..6be1491149 100644
--- a/@navikt/core/react/src/toggle-group/ToggleGroup.tsx
+++ b/@navikt/core/react/src/toggle-group/ToggleGroup.tsx
@@ -36,6 +36,11 @@ export interface ToggleGroupProps
    * Label describing ToggleGroup
    */
   label?: React.ReactNode;
+  /**
+   * Changes design and interaction-visuals
+   * @default "action"
+   */
+  variant?: "action" | "neutral";
 }
 
 interface ToggleGroupComponent
@@ -65,6 +70,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
       defaultValue,
       id,
       "aria-describedby": desc,
+      variant = "action",
       ...rest
     },
     ref
@@ -114,7 +120,11 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
             value={value ?? groupValue}
             defaultValue={defaultValue}
             ref={ref}
-            className={cl("navds-toggle-group", `navds-toggle-group--${size}`)}
+            className={cl(
+              "navds-toggle-group",
+              `navds-toggle-group--${size}`,
+              `navds-toggle-group--${variant}`
+            )}
             {...(describeBy && { "aria-describedby": describeBy })}
             role="radiogroup"
             type="single"
diff --git a/@navikt/core/tokens/docs.json b/@navikt/core/tokens/docs.json
index 1d72731feb..3434bf355b 100644
--- a/@navikt/core/tokens/docs.json
+++ b/@navikt/core/tokens/docs.json
@@ -154,7 +154,7 @@
 
   "semantic-border": [
     { "name": "--a-border-default", "value": "rgba(0, 0, 0, 0.44)" },
-    { "name": "--a-border-strong", "value": "rgba(0, 0, 0, 0.56)" },
+    { "name": "--a-border-strong", "value": "rgba(0, 0, 0, 0.65)" },
     { "name": "--a-border-divider", "value": "rgba(0, 0, 0, 0.19)" },
     { "name": "--a-border-subtle", "value": "rgba(0, 0, 0, 0.1)" },
     { "name": "--a-border-subtle-hover", "value": "rgba(0, 0, 0, 0.19)" },
@@ -227,9 +227,10 @@
       "name": "--a-surface-neutral-subtle-hover",
       "value": "rgba(0, 0, 0, 0.1)"
     },
-    { "name": "--a-surface-neutral", "value": "rgba(112, 112, 112, 1)" },
-    { "name": "--a-surface-neutral-hover", "value": "rgba(89, 89, 89, 1)" },
-    { "name": "--a-surface-neutral-selected", "value": "rgba(89, 89, 89, 1)" },
+    { "name": "--a-surface-neutral", "value": "rgba(89, 89, 89, 1)" },
+    { "name": "--a-surface-neutral-hover", "value": "rgba(64, 64, 64, 1)" },
+    { "name": "--a-surface-neutral-selected", "value": "rgba(38, 38, 38, 1)" },
+    { "name": "--a-surface-neutral-active", "value": "rgba(38, 38, 38, 1)" },
     { "name": "--a-surface-success-subtle", "value": "rgba(243, 252, 245, 1)" },
     {
       "name": "--a-surface-success-subtle-hover",
diff --git a/@navikt/core/tokens/src/semantic-colors.json b/@navikt/core/tokens/src/semantic-colors.json
index f7f14a9ab0..a265c4e946 100644
--- a/@navikt/core/tokens/src/semantic-colors.json
+++ b/@navikt/core/tokens/src/semantic-colors.json
@@ -138,13 +138,16 @@
           }
         },
         "hover": {
-          "value": "{a.gray.700.value}"
+          "value": "{a.gray.800.value}"
         },
         "selected": {
-          "value": "{a.gray.700.value}"
+          "value": "{a.gray.900.value}"
+        },
+        "active": {
+          "value": "{a.gray.900.value}"
         },
         "@": {
-          "value": "{a.gray.600.value}"
+          "value": "{a.gray.700.value}"
         }
       },
 
@@ -206,7 +209,7 @@
         "value": "{a.grayalpha.500.value}"
       },
       "strong": {
-        "value": "{a.grayalpha.600.value}"
+        "value": "{a.grayalpha.700.value}"
       },
       "divider": {
         "value": "{a.grayalpha.300.value}"
diff --git a/aksel.nav.no/website/pages/eksempler/button/primary.tsx b/aksel.nav.no/website/pages/eksempler/button/primary.tsx
index 8cc8b19cec..df39865aee 100644
--- a/aksel.nav.no/website/pages/eksempler/button/primary.tsx
+++ b/aksel.nav.no/website/pages/eksempler/button/primary.tsx
@@ -2,7 +2,12 @@ import { Button } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
-  return <Button>Primary</Button>;
+  return (
+    <div className="flex gap-2">
+      <Button>Primary</Button>
+      <Button variant="primary-neutral">Primary</Button>
+    </div>
+  );
 };
 
 export default withDsExample(Example);
@@ -14,4 +19,5 @@ export const Demo = {
 
 export const args = {
   index: 0,
+  desc: "Brukes som primærhandling i løsningen. Som regel ønsker man å ha kun én primærknapp per side.",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/button/secondary.tsx b/aksel.nav.no/website/pages/eksempler/button/secondary.tsx
index a8f5175865..caa96eb278 100644
--- a/aksel.nav.no/website/pages/eksempler/button/secondary.tsx
+++ b/aksel.nav.no/website/pages/eksempler/button/secondary.tsx
@@ -2,7 +2,12 @@ import { Button } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
-  return <Button variant="secondary">Secondary</Button>;
+  return (
+    <div className="flex gap-2">
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="secondary-neutral">Secondary</Button>
+    </div>
+  );
 };
 
 export default withDsExample(Example);
@@ -14,4 +19,5 @@ export const Demo = {
 
 export const args = {
   index: 1,
+  desc: "De fleste knapper i løsninger vil bruke denne varianten.",
 };
diff --git a/aksel.nav.no/website/pages/eksempler/button/tertiary.tsx b/aksel.nav.no/website/pages/eksempler/button/tertiary.tsx
index 7aacaa4fad..8b7dc47287 100644
--- a/aksel.nav.no/website/pages/eksempler/button/tertiary.tsx
+++ b/aksel.nav.no/website/pages/eksempler/button/tertiary.tsx
@@ -2,7 +2,12 @@ import { Button } from "@navikt/ds-react";
 import { withDsExample } from "components/website-modules/examples/withDsExample";
 
 const Example = () => {
-  return <Button variant="tertiary">Tertiary</Button>;
+  return (
+    <div className="flex gap-2">
+      <Button variant="tertiary">Tertiary</Button>
+      <Button variant="tertiary-neutral">Tertiary</Button>
+    </div>
+  );
 };
 
 export default withDsExample(Example);
diff --git a/aksel.nav.no/website/pages/eksempler/togglegroup/default.tsx b/aksel.nav.no/website/pages/eksempler/togglegroup/default.tsx
index 9793d58f7a..e312075df0 100644
--- a/aksel.nav.no/website/pages/eksempler/togglegroup/default.tsx
+++ b/aksel.nav.no/website/pages/eksempler/togglegroup/default.tsx
@@ -4,20 +4,36 @@ import { withDsExample } from "components/website-modules/examples/withDsExample
 
 const Example = () => {
   return (
-    <ToggleGroup defaultValue="lest" onChange={console.log}>
-      <ToggleGroup.Item value="ulest">
-        <Email aria-hidden />
-        Ulest
-      </ToggleGroup.Item>
-      <ToggleGroup.Item value="lest">
-        <EmailOpened aria-hidden />
-        Leste
-      </ToggleGroup.Item>
-      <ToggleGroup.Item value="sendt">
-        <Send aria-hidden />
-        Sendt
-      </ToggleGroup.Item>
-    </ToggleGroup>
+    <div className="grid gap-4">
+      <ToggleGroup defaultValue="lest" onChange={console.log}>
+        <ToggleGroup.Item value="ulest">
+          <Email aria-hidden />
+          Ulest
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="lest">
+          <EmailOpened aria-hidden />
+          Leste
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="sendt">
+          <Send aria-hidden />
+          Sendt
+        </ToggleGroup.Item>
+      </ToggleGroup>
+      <ToggleGroup defaultValue="lest" onChange={console.log} variant="neutral">
+        <ToggleGroup.Item value="ulest">
+          <Email aria-hidden />
+          Ulest
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="lest">
+          <EmailOpened aria-hidden />
+          Leste
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="sendt">
+          <Send aria-hidden />
+          Sendt
+        </ToggleGroup.Item>
+      </ToggleGroup>
+    </div>
   );
 };
 
diff --git a/aksel.nav.no/website/pages/eksempler/togglegroup/ikon.tsx b/aksel.nav.no/website/pages/eksempler/togglegroup/ikon.tsx
index e321315aca..351844f525 100644
--- a/aksel.nav.no/website/pages/eksempler/togglegroup/ikon.tsx
+++ b/aksel.nav.no/website/pages/eksempler/togglegroup/ikon.tsx
@@ -4,17 +4,30 @@ import { withDsExample } from "components/website-modules/examples/withDsExample
 
 const Example = () => {
   return (
-    <ToggleGroup defaultValue="lest" onChange={console.log}>
-      <ToggleGroup.Item value="ulest">
-        <Email title="ulest" />
-      </ToggleGroup.Item>
-      <ToggleGroup.Item value="lest">
-        <EmailOpened title="lest" />
-      </ToggleGroup.Item>
-      <ToggleGroup.Item value="sendt">
-        <Send title="sendt" />
-      </ToggleGroup.Item>
-    </ToggleGroup>
+    <div className="grid gap-4">
+      <ToggleGroup defaultValue="lest" onChange={console.log}>
+        <ToggleGroup.Item value="ulest">
+          <Email title="ulest" />
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="lest">
+          <EmailOpened title="lest" />
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="sendt">
+          <Send title="sendt" />
+        </ToggleGroup.Item>
+      </ToggleGroup>
+      <ToggleGroup defaultValue="lest" onChange={console.log} variant="neutral">
+        <ToggleGroup.Item value="ulest">
+          <Email title="ulest" />
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="lest">
+          <EmailOpened title="lest" />
+        </ToggleGroup.Item>
+        <ToggleGroup.Item value="sendt">
+          <Send title="sendt" />
+        </ToggleGroup.Item>
+      </ToggleGroup>
+    </div>
   );
 };