diff --git a/packages/ffe-core/README.md b/packages/ffe-core/README.md
index a76d76af2b..d9af0bb6e7 100644
--- a/packages/ffe-core/README.md
+++ b/packages/ffe-core/README.md
@@ -70,12 +70,19 @@ This is how you import them:
 
 ```js
 import {
-    fargeHvit,
-    fargeFjell30,
     breakpointMd,
     spacingXl,
 } from '@sb1/ffe-core';
 ```
+## Semantic colors
+
+Semantic colors define and name colors based on how they are used, rather than their hue. The structure are based on a elevation principle with five main categories; background, surface, fill, text/icon and border. We use inverse color style on blue background.
+- Background are for body or section background.
+- Surface are background for elements on top of a background e.g. accordion, cards, modal.
+- Fill are background color for smaller elements e.g. buttons, input,
+- Text/icon are colors for foreground elements on top of background, surface or fill.
+- Border are color for borders or separators between elements.
+
 
 ## Development
 
diff --git a/packages/ffe-core/less/colors.less b/packages/ffe-core/less/colors.less
index 51dba074ec..cba1f19249 100644
--- a/packages/ffe-core/less/colors.less
+++ b/packages/ffe-core/less/colors.less
@@ -1,7 +1,387 @@
 //
-// ======== Ny visuell identitet ========
+// ======== Ny visuell identitet ved bruk av semantiske farger ========
+// ======== PRIMITIVES========
 //
+//Vann
+@ffe-color-vann-0: #f7fafd;
+@ffe-color-vann-25: #e7f1f9;
+@ffe-color-vann-50: #d7e7f4;
+@ffe-color-vann-75: #cfe2f2;
+@ffe-color-vann-100: #c3d9ef;
+@ffe-color-vann-150: #b6d1ec;
+@ffe-color-vann-200: #9ec2e5;
+@ffe-color-vann-250: #8eb8e1;
+@ffe-color-vann-300: #7dabd9;
+@ffe-color-vann-350: #6ba1d6;
+@ffe-color-vann-400: #5494d4;
+@ffe-color-vann-450: #3b85ce;
+@ffe-color-vann-500: #2975c2;
+@ffe-color-vann-550: #1a66b2;
+@ffe-color-vann-600: #025aa4;
+@ffe-color-vann-650: #004f99;
+@ffe-color-vann-700: #00428b;
+@ffe-color-vann-750: #00377e;
+@ffe-color-vann-800: #002b72;
+@ffe-color-vann-850: #002666;
+@ffe-color-vann-900: #001259;
+@ffe-color-vann-950: #000f3a;
+@ffe-color-vann-1000: #000929;
 
+//Graa
+@ffe-color-graa-0: #fbfbfb;
+@ffe-color-graa-25: #f0f0f0;
+@ffe-color-graa-50: #e5e5e5;
+@ffe-color-graa-75: #dbdbdb;
+@ffe-color-graa-100: #cccccc;
+@ffe-color-graa-150: #c2c2c2;
+@ffe-color-graa-200: #b8b8b8;
+@ffe-color-graa-250: #adadad;
+@ffe-color-graa-300: #a4a4a4;
+@ffe-color-graa-350: #999999;
+@ffe-color-graa-400: #8f8f8f;
+@ffe-color-graa-450: #858585;
+@ffe-color-graa-500: #7a7a7a;
+@ffe-color-graa-550: #707070;
+@ffe-color-graa-600: #666666;
+@ffe-color-graa-650: #5c5c5c;
+@ffe-color-graa-700: #525252;
+@ffe-color-graa-750: #474747;
+@ffe-color-graa-800: #3d3d3d;
+@ffe-color-graa-850: #333333;
+@ffe-color-graa-900: #292929;
+@ffe-color-graa-950: #1f1f1f;
+@ffe-color-graa-1000: #141414;
+
+//Fjell
+@ffe-color-fjell-0: #f5f7ff;
+@ffe-color-fjell-25: #e8eef7;
+@ffe-color-fjell-50: #e1e8f5;
+@ffe-color-fjell-75: #d9e1f2;
+@ffe-color-fjell-100: #cbd8f0;
+@ffe-color-fjell-150: #bed0ef;
+@ffe-color-fjell-200: #aac4ee;
+@ffe-color-fjell-250: #9cbae8;
+@ffe-color-fjell-300: #88ade7;
+@ffe-color-fjell-350: #78a1e3;
+@ffe-color-fjell-400: #6c93d5;
+@ffe-color-fjell-450: #5c87d1;
+@ffe-color-fjell-500: #4c74bd;
+@ffe-color-fjell-550: #3c68b4;
+@ffe-color-fjell-600: #315aa6;
+@ffe-color-fjell-650: #2d4f9a;
+@ffe-color-fjell-700: #1d428a;
+@ffe-color-fjell-750: #0e3582;
+@ffe-color-fjell-800: #002776;
+@ffe-color-fjell-850: #002066;
+@ffe-color-fjell-900: #0a1957;
+@ffe-color-fjell-950: #061038;
+@ffe-color-fjell-1000: #040b26;
+
+//Natt
+@ffe-color-natt-0: #f4f7fa;
+@ffe-color-natt-25: #e9eef6;
+@ffe-color-natt-50: #dfe6f1;
+@ffe-color-natt-75: #d4deed;
+@ffe-color-natt-100: #c9d5e8;
+@ffe-color-natt-150: #bbcae2;
+@ffe-color-natt-200: #acbfdc;
+@ffe-color-natt-250: #9eb4d6;
+@ffe-color-natt-300: #90a9d0;
+@ffe-color-natt-350: #809cc6;
+@ffe-color-natt-400: #748db4;
+@ffe-color-natt-450: #6782ac;
+@ffe-color-natt-500: #55709b;
+@ffe-color-natt-550: #47618a;
+@ffe-color-natt-600: #3b547c;
+@ffe-color-natt-650: #334a71;
+@ffe-color-natt-700: #263e64;
+@ffe-color-natt-750: #1c3459;
+@ffe-color-natt-800: #12294d;
+@ffe-color-natt-850: #0d213f;
+@ffe-color-natt-900: #031536;
+@ffe-color-natt-950: #001032;
+@ffe-color-natt-1000: #030a19;
+
+//Frost
+@ffe-color-frost-0: #f8fbfc;
+@ffe-color-frost-25: #e5f0f5;
+@ffe-color-frost-50: #dceaef;
+@ffe-color-frost-75: #cbe2eb;
+@ffe-color-frost-100: #c3dfea;
+@ffe-color-frost-150: #b6d7e7;
+@ffe-color-frost-200: #a6cee2;
+@ffe-color-frost-250: #95c3db;
+@ffe-color-frost-300: #7eb5d2;
+@ffe-color-frost-350: #72a8c5;
+@ffe-color-frost-400: #669cb8;
+@ffe-color-frost-450: #5893b1;
+@ffe-color-frost-500: #4e849f;
+@ffe-color-frost-550: #467790;
+@ffe-color-frost-600: #366c86;
+@ffe-color-frost-650: #306078;
+@ffe-color-frost-700: #1d556f;
+@ffe-color-frost-750: #0f4a63;
+@ffe-color-frost-800: #003f58;
+@ffe-color-frost-850: #003347;
+@ffe-color-frost-900: #002438;
+@ffe-color-frost-950: #001f2e;
+@ffe-color-frost-1000: #011520;
+
+//Villblomst
+@ffe-color-villblomst-0: #fffafb;
+@ffe-color-villblomst-25: #ffe0e9;
+@ffe-color-villblomst-50: #ffd7e1;
+@ffe-color-villblomst-75: #fccfd8;
+@ffe-color-villblomst-100: #fdc3d0;
+@ffe-color-villblomst-150: #feb3c2;
+@ffe-color-villblomst-200: #ffa6b5;
+@ffe-color-villblomst-250: #fc9aa8;
+@ffe-color-villblomst-300: #ee8d9c;
+@ffe-color-villblomst-350: #e98696;
+@ffe-color-villblomst-400: #d37484;
+@ffe-color-villblomst-450: #ca6879;
+@ffe-color-villblomst-500: #b85c6c;
+@ffe-color-villblomst-550: #ad5265;
+@ffe-color-villblomst-600: #9d4556;
+@ffe-color-villblomst-650: #913b4c;
+@ffe-color-villblomst-700: #832d40;
+@ffe-color-villblomst-750: #762136;
+@ffe-color-villblomst-800: #6a142b;
+@ffe-color-villblomst-850: #5f0c24;
+@ffe-color-villblomst-900: #510018;
+@ffe-color-villblomst-950: #390614;
+@ffe-color-villblomst-1000: #28050d;
+
+//Skog
+@ffe-color-skog-0: #f6fdfa;
+@ffe-color-skog-25: #dff6eb;
+@ffe-color-skog-50: #cbf0df;
+@ffe-color-skog-75: #bbedd5;
+@ffe-color-skog-100: #b2e6cd;
+@ffe-color-skog-150: #9edbbe;
+@ffe-color-skog-200: #8fd1b1;
+@ffe-color-skog-250: #7cc5a2;
+@ffe-color-skog-300: #6abe97;
+@ffe-color-skog-350: #55b489;
+@ffe-color-skog-400: #48a781;
+@ffe-color-skog-450: #409674;
+@ffe-color-skog-500: #2e8b64;
+@ffe-color-skog-550: #2a7e5b;
+@ffe-color-skog-600: #00754e;
+@ffe-color-skog-650: #006644;
+@ffe-color-skog-700: #005e38;
+@ffe-color-skog-750: #00522e;
+@ffe-color-skog-800: #004724;
+@ffe-color-skog-850: #003d1f;
+@ffe-color-skog-900: #003110;
+@ffe-color-skog-950: #00230e;
+@ffe-color-skog-1000: #001408;
+
+//Syrin
+@ffe-color-syrin-0: #f8f8fc;
+@ffe-color-syrin-25: #eaeaf6;
+@ffe-color-syrin-50: #e6e6f4;
+@ffe-color-syrin-75: #dcdcef;
+@ffe-color-syrin-100: #d6d6ed;
+@ffe-color-syrin-150: #cacae3;
+@ffe-color-syrin-200: #c3c3da;
+@ffe-color-syrin-250: #b6b6cd;
+@ffe-color-syrin-300: #aaaac0;
+@ffe-color-syrin-350: #a2a2b9;
+@ffe-color-syrin-400: #9996ab;
+@ffe-color-syrin-450: #8c88a0;
+@ffe-color-syrin-500: #79748b;
+@ffe-color-syrin-550: #686477;
+@ffe-color-syrin-600: #5d5a6d;
+@ffe-color-syrin-650: #514e5f;
+@ffe-color-syrin-700: #474457;
+@ffe-color-syrin-750: #3d394c;
+@ffe-color-syrin-800: #332f41;
+@ffe-color-syrin-850: #292636;
+@ffe-color-syrin-900: #1f1c2c;
+@ffe-color-syrin-950: #14121c;
+@ffe-color-syrin-1000: #0c0b12;
+
+//Nordlys
+@ffe-color-nordlys-0: #f6fefb;
+@ffe-color-nordlys-25: #d8f8ec;
+@ffe-color-nordlys-50: #c2f5e2;
+@ffe-color-nordlys-75: #acf1d8;
+@ffe-color-nordlys-100: #96edcb;
+@ffe-color-nordlys-150: #8de2c0;
+@ffe-color-nordlys-200: #78d9b3;
+@ffe-color-nordlys-250: #6bcca8;
+@ffe-color-nordlys-300: #58c39b;
+@ffe-color-nordlys-350: #44bb8f;
+@ffe-color-nordlys-400: #33af85;
+@ffe-color-nordlys-450: #2e9e78;
+@ffe-color-nordlys-500: #008f68;
+@ffe-color-nordlys-550: #008560;
+@ffe-color-nordlys-600: #007a55;
+@ffe-color-nordlys-650: #006b4b;
+@ffe-color-nordlys-700: #046240;
+@ffe-color-nordlys-750: #035433;
+@ffe-color-nordlys-800: #004728;
+@ffe-color-nordlys-850: #003d22;
+@ffe-color-nordlys-900: #003316;
+@ffe-color-nordlys-950: #002412;
+@ffe-color-nordlys-1000: #001a0c;
+
+//Myrull
+@ffe-color-myrull-0: #fff8f7;
+@ffe-color-myrull-25: #fee9e7;
+@ffe-color-myrull-50: #fae4e0;
+@ffe-color-myrull-75: #f2d9d4;
+@ffe-color-myrull-100: #e6cbc6;
+@ffe-color-myrull-150: #dabeb9;
+@ffe-color-myrull-200: #ccb2ad;
+@ffe-color-myrull-250: #bfa5a0;
+@ffe-color-myrull-300: #af9b97;
+@ffe-color-myrull-350: #a9938f;
+@ffe-color-myrull-400: #96837f;
+@ffe-color-myrull-450: #8c7773;
+@ffe-color-myrull-500: #7e6b68;
+@ffe-color-myrull-550: #73615f;
+@ffe-color-myrull-600: #675551;
+@ffe-color-myrull-650: #5b4b48;
+@ffe-color-myrull-700: #503f3c;
+@ffe-color-myrull-750: #453532;
+@ffe-color-myrull-800: #3b2b28;
+@ffe-color-myrull-850: #312321;
+@ffe-color-myrull-900: #261815;
+@ffe-color-myrull-950: #1a100e;
+@ffe-color-myrull-1000: #0f0807;
+
+//Lyng
+@ffe-color-lyng-0: #fff5f9;
+@ffe-color-lyng-25: #ffe0ee;
+@ffe-color-lyng-50: #ffd6e7;
+@ffe-color-lyng-75: #ffc7dc;
+@ffe-color-lyng-100: #ffb1cb;
+@ffe-color-lyng-150: #faa3c0;
+@ffe-color-lyng-200: #f297b2;
+@ffe-color-lyng-250: #e58ba5;
+@ffe-color-lyng-300: #d77f99;
+@ffe-color-lyng-350: #ce7892;
+@ffe-color-lyng-400: #bc6781;
+@ffe-color-lyng-450: #b35b76;
+@ffe-color-lyng-500: #a24f69;
+@ffe-color-lyng-550: #98435e;
+@ffe-color-lyng-600: #883853;
+@ffe-color-lyng-650: #7b2d48;
+@ffe-color-lyng-700: #6f213e;
+@ffe-color-lyng-750: #621433;
+@ffe-color-lyng-800: #560629;
+@ffe-color-lyng-850: #4c0524;
+@ffe-color-lyng-900: #3d0016;
+@ffe-color-lyng-950: #28000f;
+@ffe-color-lyng-1000: #190007;
+
+//Bær
+@ffe-color-baer-0: #fff8f5;
+@ffe-color-baer-25: #ffe5e0;
+@ffe-color-baer-50: #ffd7d1;
+@ffe-color-baer-75: #ffc2b8;
+@ffe-color-baer-100: #ffaea8;
+@ffe-color-baer-150: #ff978f;
+@ffe-color-baer-200: #ff7f7a;
+@ffe-color-baer-250: #ff6c68;
+@ffe-color-baer-300: #ff5e5c;
+@ffe-color-baer-350: #f55451;
+@ffe-color-baer-400: #e44244;
+@ffe-color-baer-450: #dd3133;
+@ffe-color-baer-500: #ce2228;
+@ffe-color-baer-550: #ba171a;
+@ffe-color-baer-600: #ab0012;
+@ffe-color-baer-650: #990010;
+@ffe-color-baer-700: #8e0000;
+@ffe-color-baer-750: #800000;
+@ffe-color-baer-800: #720000;
+@ffe-color-baer-850: #660000;
+@ffe-color-baer-900: #560000;
+@ffe-color-baer-950: #390000;
+@ffe-color-baer-1000: #240000;
+
+//Neutral
+@ffe-color-neutral-white: #ffffff;
+@ffe-color-neutral-black: #020a0a;
+
+//Sol
+@ffe-color-sol-0: #fffdf5;
+@ffe-color-sol-25: #fdeed3;
+@ffe-color-sol-50: #ffe0b2;
+@ffe-color-sol-75: #ffd394;
+@ffe-color-sol-100: #ffc675;
+@ffe-color-sol-150: #ffb64d;
+@ffe-color-sol-200: #f6ac3c;
+@ffe-color-sol-250: #f49f1f;
+@ffe-color-sol-300: #ea910b;
+@ffe-color-sol-350: #dc8000;
+@ffe-color-sol-400: #cc7205;
+@ffe-color-sol-450: #bd6a05;
+@ffe-color-sol-500: #a95704;
+@ffe-color-sol-550: #944a00;
+@ffe-color-sol-600: #853f00;
+@ffe-color-sol-650: #753500;
+@ffe-color-sol-700: #682c00;
+@ffe-color-sol-750: #582400;
+@ffe-color-sol-800: #491c00;
+@ffe-color-sol-850: #3d1700;
+@ffe-color-sol-900: #2e0b00;
+@ffe-color-sol-950: #220400;
+@ffe-color-sol-1000: #180000;
+
+//Sand
+@ffe-color-sand-0: #fdfaf7;
+@ffe-color-sand-25: #faefe6;
+@ffe-color-sand-50: #f8e9dd;
+@ffe-color-sand-75: #f0decf;
+@ffe-color-sand-100: #e9d1be;
+@ffe-color-sand-150: #e3c7b0;
+@ffe-color-sand-200: #e0c0a3;
+@ffe-color-sand-250: #dab89a;
+@ffe-color-sand-300: #cfae91;
+@ffe-color-sand-350: #caa686;
+@ffe-color-sand-400: #c19c7b;
+@ffe-color-sand-450: #b98f6a;
+@ffe-color-sand-500: #a9784c;
+@ffe-color-sand-550: #946942;
+@ffe-color-sand-600: #895e36;
+@ffe-color-sand-650: #7c5531;
+@ffe-color-sand-700: #6a492a;
+@ffe-color-sand-750: #563c25;
+@ffe-color-sand-800: #423020;
+@ffe-color-sand-850: #37281b;
+@ffe-color-sand-900: #2b2017;
+@ffe-color-sand-950: #171007;
+@ffe-color-sand-1000: #0e0003;
+
+//Multe
+@ffe-color-multe-0: #fff9f5;
+@ffe-color-multe-25: #ffeadb;
+@ffe-color-multe-50: #ffe0cc;
+@ffe-color-multe-75: #ffd4b8;
+@ffe-color-multe-100: #ffc59e;
+@ffe-color-multe-150: #faba8e;
+@ffe-color-multe-200: #f8b181;
+@ffe-color-multe-250: #f1a674;
+@ffe-color-multe-300: #ec9e6a;
+@ffe-color-multe-350: #e99863;
+@ffe-color-multe-400: #e39059;
+@ffe-color-multe-450: #d2814b;
+@ffe-color-multe-500: #b66e3a;
+@ffe-color-multe-550: #9d5d2f;
+@ffe-color-multe-600: #8f501f;
+@ffe-color-multe-650: #874817;
+@ffe-color-multe-700: #763900;
+@ffe-color-multe-750: #6a2e00;
+@ffe-color-multe-800: #5e2300;
+@ffe-color-multe-850: #4d1700;
+@ffe-color-multe-900: #461400;
+@ffe-color-multe-950: #310e00;
+@ffe-color-multe-1000: #210900;
+
+// ======== DEPRECATED ========
 // Primærpalett
 @ffe-farge-fjell: #002776;
 @ffe-farge-fjell-70: tint(@ffe-farge-fjell, 30%);
@@ -18,7 +398,6 @@
 @ffe-farge-syrin: #d3d3ea;
 @ffe-farge-syrin-70: tint(@ffe-farge-syrin, 30%);
 @ffe-farge-syrin-30: tint(@ffe-farge-syrin, 70%);
-
 // Støttefarger
 @ffe-farge-myrull: #fae4e0;
 @ffe-farge-myrull-70: tint(@ffe-farge-myrull, 30%);
@@ -44,7 +423,6 @@
 @ffe-farge-sol: #dc8000;
 @ffe-farge-sol-70: tint(@ffe-farge-sol, 30%);
 @ffe-farge-sol-30: tint(@ffe-farge-sol, 70%);
-
 // Nøytrale farger
 @ffe-farge-natt: #001032;
 @ffe-farge-svart: #020a0a;
diff --git a/packages/ffe-core/less/theme.less b/packages/ffe-core/less/theme.less
index 4ef7d0bb46..81253b0f49 100644
--- a/packages/ffe-core/less/theme.less
+++ b/packages/ffe-core/less/theme.less
@@ -4,7 +4,597 @@
 
 :root,
 :host {
-    /** Primærpalett */
+    /*
+    ----------
+    PRIMITIVE COLORS
+    Primitive colors should not be used directly.
+    Use the Semantic variables instead
+    -----------
+    */
+    //Neutral
+    --ffe-color-neutral-white: @ffe-color-neutral-white;
+    --ffe-color-neutral-black: @ffe-color-neutral-black;
+
+    //Vann
+    --ffe-color-vann-0: @ffe-color-vann-0;
+    --ffe-color-vann-25: @ffe-color-vann-25;
+    --ffe-color-vann-50: @ffe-color-vann-50;
+    --ffe-color-vann-75: @ffe-color-vann-75;
+    --ffe-color-vann-100: @ffe-color-vann-100;
+    --ffe-color-vann-150: @ffe-color-vann-150;
+    --ffe-color-vann-200: @ffe-color-vann-200;
+    --ffe-color-vann-250: @ffe-color-vann-250;
+    --ffe-color-vann-300: @ffe-color-vann-300;
+    --ffe-color-vann-350: @ffe-color-vann-350;
+    --ffe-color-vann-400: @ffe-color-vann-400;
+    --ffe-color-vann-450: @ffe-color-vann-450;
+    --ffe-color-vann-500: @ffe-color-vann-500;
+    --ffe-color-vann-550: @ffe-color-vann-550;
+    --ffe-color-vann-600: @ffe-color-vann-600;
+    --ffe-color-vann-650: @ffe-color-vann-650;
+    --ffe-color-vann-700: @ffe-color-vann-700;
+    --ffe-color-vann-750: @ffe-color-vann-750;
+    --ffe-color-vann-800: @ffe-color-vann-800;
+    --ffe-color-vann-850: @ffe-color-vann-850;
+    --ffe-color-vann-900: @ffe-color-vann-900;
+    --ffe-color-vann-950: @ffe-color-vann-950;
+    --ffe-color-vann-1000: @ffe-color-vann-1000;
+
+    //Geaa
+    --ffe-color-graa-0: @ffe-color-graa-0;
+    --ffe-color-graa-25: @ffe-color-graa-25;
+    --ffe-color-graa-50: @ffe-color-graa-50;
+    --ffe-color-graa-75: @ffe-color-graa-75;
+    --ffe-color-graa-100: @ffe-color-graa-100;
+    --ffe-color-graa-150: @ffe-color-graa-150;
+    --ffe-color-graa-200: @ffe-color-graa-200;
+    --ffe-color-graa-250: @ffe-color-graa-250;
+    --ffe-color-graa-300: @ffe-color-graa-300;
+    --ffe-color-graa-350: @ffe-color-graa-350;
+    --ffe-color-graa-400: @ffe-color-graa-400;
+    --ffe-color-graa-450: @ffe-color-graa-450;
+    --ffe-color-graa-500: @ffe-color-graa-500;
+    --ffe-color-graa-550: @ffe-color-graa-550;
+    --ffe-color-graa-600: @ffe-color-graa-600;
+    --ffe-color-graa-650: @ffe-color-graa-650;
+    --ffe-color-graa-700: @ffe-color-graa-700;
+    --ffe-color-graa-750: @ffe-color-graa-750;
+    --ffe-color-graa-800: @ffe-color-graa-800;
+    --ffe-color-graa-850: @ffe-color-graa-850;
+    --ffe-color-graa-900: @ffe-color-graa-900;
+    --ffe-color-graa-950: @ffe-color-graa-950;
+    --ffe-color-graa-1000: @ffe-color-graa-1000;
+
+    //Fjell
+    --ffe-color-fjell-0: @ffe-color-fjell-0;
+    --ffe-color-fjell-25: @ffe-color-fjell-25;
+    --ffe-color-fjell-50: @ffe-color-fjell-50;
+    --ffe-color-fjell-75: @ffe-color-fjell-75;
+    --ffe-color-fjell-100: @ffe-color-fjell-100;
+    --ffe-color-fjell-150: @ffe-color-fjell-150;
+    --ffe-color-fjell-200: @ffe-color-fjell-200;
+    --ffe-color-fjell-250: @ffe-color-fjell-250;
+    --ffe-color-fjell-300: @ffe-color-fjell-300;
+    --ffe-color-fjell-350: @ffe-color-fjell-350;
+    --ffe-color-fjell-400: @ffe-color-fjell-400;
+    --ffe-color-fjell-450: @ffe-color-fjell-450;
+    --ffe-color-fjell-500: @ffe-color-fjell-500;
+    --ffe-color-fjell-550: @ffe-color-fjell-550;
+    --ffe-color-fjell-600: @ffe-color-fjell-600;
+    --ffe-color-fjell-650: @ffe-color-fjell-650;
+    --ffe-color-fjell-700: @ffe-color-fjell-700;
+    --ffe-color-fjell-750: @ffe-color-fjell-750;
+    --ffe-color-fjell-800: @ffe-color-fjell-800;
+    --ffe-color-fjell-850: @ffe-color-fjell-850;
+    --ffe-color-fjell-900: @ffe-color-fjell-900;
+    --ffe-color-fjell-950: @ffe-color-fjell-950;
+    --ffe-color-fjell-1000: @ffe-color-fjell-1000;
+
+    //Natt
+    --ffe-color-natt-0: @ffe-color-natt-0;
+    --ffe-color-natt-25: @ffe-color-natt-25;
+    --ffe-color-natt-50: @ffe-color-natt-50;
+    --ffe-color-natt-75: @ffe-color-natt-75;
+    --ffe-color-natt-100: @ffe-color-natt-100;
+    --ffe-color-natt-150: @ffe-color-natt-150;
+    --ffe-color-natt-200: @ffe-color-natt-200;
+    --ffe-color-natt-250: @ffe-color-natt-250;
+    --ffe-color-natt-300: @ffe-color-natt-300;
+    --ffe-color-natt-350: @ffe-color-natt-350;
+    --ffe-color-natt-400: @ffe-color-natt-400;
+    --ffe-color-natt-450: @ffe-color-natt-450;
+    --ffe-color-natt-500: @ffe-color-natt-500;
+    --ffe-color-natt-550: @ffe-color-natt-550;
+    --ffe-color-natt-600: @ffe-color-natt-600;
+    --ffe-color-natt-650: @ffe-color-natt-650;
+    --ffe-color-natt-700: @ffe-color-natt-700;
+    --ffe-color-natt-750: @ffe-color-natt-750;
+    --ffe-color-natt-800: @ffe-color-natt-800;
+    --ffe-color-natt-850: @ffe-color-natt-850;
+    --ffe-color-natt-900: @ffe-color-natt-900;
+    --ffe-color-natt-950: @ffe-color-natt-950;
+    --ffe-color-natt-1000: @ffe-color-natt-1000;
+
+    //Frost
+    --ffe-color-frost-0: @ffe-color-frost-0;
+    --ffe-color-frost-25: @ffe-color-frost-25;
+    --ffe-color-frost-50: @ffe-color-frost-50;
+    --ffe-color-frost-75: @ffe-color-frost-75;
+    --ffe-color-frost-100: @ffe-color-frost-100;
+    --ffe-color-frost-150: @ffe-color-frost-150;
+    --ffe-color-frost-200: @ffe-color-frost-200;
+    --ffe-color-frost-250: @ffe-color-frost-250;
+    --ffe-color-frost-300: @ffe-color-frost-300;
+    --ffe-color-frost-350: @ffe-color-frost-350;
+    --ffe-color-frost-400: @ffe-color-frost-400;
+    --ffe-color-frost-450: @ffe-color-frost-450;
+    --ffe-color-frost-500: @ffe-color-frost-500;
+    --ffe-color-frost-550: @ffe-color-frost-550;
+    --ffe-color-frost-600: @ffe-color-frost-600;
+    --ffe-color-frost-650: @ffe-color-frost-650;
+    --ffe-color-frost-700: @ffe-color-frost-700;
+    --ffe-color-frost-750: @ffe-color-frost-750;
+    --ffe-color-frost-800: @ffe-color-frost-800;
+    --ffe-color-frost-850: @ffe-color-frost-850;
+    --ffe-color-frost-900: @ffe-color-frost-900;
+    --ffe-color-frost-950: @ffe-color-frost-950;
+    --ffe-color-frost-1000: @ffe-color-frost-1000;
+
+    //Villblomst
+    --ffe-color-villblomst-0: @ffe-color-villblomst-0;
+    --ffe-color-villblomst-25: @ffe-color-villblomst-25;
+    --ffe-color-villblomst-50: @ffe-color-villblomst-50;
+    --ffe-color-villblomst-75: @ffe-color-villblomst-75;
+    --ffe-color-villblomst-100: @ffe-color-villblomst-100;
+    --ffe-color-villblomst-150: @ffe-color-villblomst-150;
+    --ffe-color-villblomst-200: @ffe-color-villblomst-200;
+    --ffe-color-villblomst-250: @ffe-color-villblomst-250;
+    --ffe-color-villblomst-300: @ffe-color-villblomst-300;
+    --ffe-color-villblomst-350: @ffe-color-villblomst-350;
+    --ffe-color-villblomst-400: @ffe-color-villblomst-400;
+    --ffe-color-villblomst-450: @ffe-color-villblomst-450;
+    --ffe-color-villblomst-500: @ffe-color-villblomst-500;
+    --ffe-color-villblomst-550: @ffe-color-villblomst-550;
+    --ffe-color-villblomst-600: @ffe-color-villblomst-600;
+    --ffe-color-villblomst-650: @ffe-color-villblomst-650;
+    --ffe-color-villblomst-700: @ffe-color-villblomst-700;
+    --ffe-color-villblomst-750: @ffe-color-villblomst-750;
+    --ffe-color-villblomst-800: @ffe-color-villblomst-800;
+    --ffe-color-villblomst-850: @ffe-color-villblomst-850;
+    --ffe-color-villblomst-900: @ffe-color-villblomst-900;
+    --ffe-color-villblomst-950: @ffe-color-villblomst-950;
+    --ffe-color-villblomst-1000: @ffe-color-villblomst-1000;
+
+    //Skog
+    --ffe-color-skog-0: @ffe-color-skog-0;
+    --ffe-color-skog-25: @ffe-color-skog-25;
+    --ffe-color-skog-50: @ffe-color-skog-50;
+    --ffe-color-skog-75: @ffe-color-skog-75;
+    --ffe-color-skog-100: @ffe-color-skog-100;
+    --ffe-color-skog-150: @ffe-color-skog-150;
+    --ffe-color-skog-200: @ffe-color-skog-200;
+    --ffe-color-skog-250: @ffe-color-skog-250;
+    --ffe-color-skog-300: @ffe-color-skog-300;
+    --ffe-color-skog-350: @ffe-color-skog-350;
+    --ffe-color-skog-400: @ffe-color-skog-400;
+    --ffe-color-skog-450: @ffe-color-skog-450;
+    --ffe-color-skog-500: @ffe-color-skog-500;
+    --ffe-color-skog-550: @ffe-color-skog-550;
+    --ffe-color-skog-600: @ffe-color-skog-600;
+    --ffe-color-skog-650: @ffe-color-skog-650;
+    --ffe-color-skog-700: @ffe-color-skog-700;
+    --ffe-color-skog-750: @ffe-color-skog-750;
+    --ffe-color-skog-800: @ffe-color-skog-800;
+    --ffe-color-skog-850: @ffe-color-skog-850;
+    --ffe-color-skog-900: @ffe-color-skog-900;
+    --ffe-color-skog-950: @ffe-color-skog-950;
+    --ffe-color-skog-1000: @ffe-color-skog-1000;
+
+    //Syrin
+    --ffe-color-syrin-0: @ffe-color-syrin-0;
+    --ffe-color-syrin-25: @ffe-color-syrin-25;
+    --ffe-color-syrin-50: @ffe-color-syrin-50;
+    --ffe-color-syrin-75: @ffe-color-syrin-75;
+    --ffe-color-syrin-100: @ffe-color-syrin-100;
+    --ffe-color-syrin-150: @ffe-color-syrin-150;
+    --ffe-color-syrin-200: @ffe-color-syrin-200;
+    --ffe-color-syrin-250: @ffe-color-syrin-250;
+    --ffe-color-syrin-300: @ffe-color-syrin-300;
+    --ffe-color-syrin-350: @ffe-color-syrin-350;
+    --ffe-color-syrin-400: @ffe-color-syrin-400;
+    --ffe-color-syrin-450: @ffe-color-syrin-450;
+    --ffe-color-syrin-500: @ffe-color-syrin-500;
+    --ffe-color-syrin-550: @ffe-color-syrin-550;
+    --ffe-color-syrin-600: @ffe-color-syrin-600;
+    --ffe-color-syrin-650: @ffe-color-syrin-650;
+    --ffe-color-syrin-700: @ffe-color-syrin-700;
+    --ffe-color-syrin-750: @ffe-color-syrin-750;
+    --ffe-color-syrin-800: @ffe-color-syrin-800;
+    --ffe-color-syrin-850: @ffe-color-syrin-850;
+    --ffe-color-syrin-900: @ffe-color-syrin-900;
+    --ffe-color-syrin-950: @ffe-color-syrin-950;
+    --ffe-color-syrin-1000: @ffe-color-syrin-1000;
+
+    //Nordlys
+    --ffe-color-nordlys-0: @ffe-color-nordlys-0;
+    --ffe-color-nordlys-25: @ffe-color-nordlys-25;
+    --ffe-color-nordlys-50: @ffe-color-nordlys-50;
+    --ffe-color-nordlys-75: @ffe-color-nordlys-75;
+    --ffe-color-nordlys-100: @ffe-color-nordlys-100;
+    --ffe-color-nordlys-150: @ffe-color-nordlys-150;
+    --ffe-color-nordlys-200: @ffe-color-nordlys-200;
+    --ffe-color-nordlys-250: @ffe-color-nordlys-250;
+    --ffe-color-nordlys-300: @ffe-color-nordlys-300;
+    --ffe-color-nordlys-350: @ffe-color-nordlys-350;
+    --ffe-color-nordlys-400: @ffe-color-nordlys-400;
+    --ffe-color-nordlys-450: @ffe-color-nordlys-450;
+    --ffe-color-nordlys-500: @ffe-color-nordlys-500;
+    --ffe-color-nordlys-550: @ffe-color-nordlys-550;
+    --ffe-color-nordlys-600: @ffe-color-nordlys-600;
+    --ffe-color-nordlys-650: @ffe-color-nordlys-650;
+    --ffe-color-nordlys-700: @ffe-color-nordlys-700;
+    --ffe-color-nordlys-750: @ffe-color-nordlys-750;
+    --ffe-color-nordlys-800: @ffe-color-nordlys-800;
+    --ffe-color-nordlys-850: @ffe-color-nordlys-850;
+    --ffe-color-nordlys-900: @ffe-color-nordlys-900;
+    --ffe-color-nordlys-950: @ffe-color-nordlys-950;
+    --ffe-color-nordlys-1000: @ffe-color-nordlys-1000;
+
+    //Myrull
+    --ffe-color-myrull-0: @ffe-color-myrull-0;
+    --ffe-color-myrull-25: @ffe-color-myrull-25;
+    --ffe-color-myrull-50: @ffe-color-myrull-50;
+    --ffe-color-myrull-75: @ffe-color-myrull-75;
+    --ffe-color-myrull-100: @ffe-color-myrull-100;
+    --ffe-color-myrull-150: @ffe-color-myrull-150;
+    --ffe-color-myrull-200: @ffe-color-myrull-200;
+    --ffe-color-myrull-250: @ffe-color-myrull-250;
+    --ffe-color-myrull-300: @ffe-color-myrull-300;
+    --ffe-color-myrull-350: @ffe-color-myrull-350;
+    --ffe-color-myrull-400: @ffe-color-myrull-400;
+    --ffe-color-myrull-450: @ffe-color-myrull-450;
+    --ffe-color-myrull-500: @ffe-color-myrull-500;
+    --ffe-color-myrull-550: @ffe-color-myrull-550;
+    --ffe-color-myrull-600: @ffe-color-myrull-600;
+    --ffe-color-myrull-650: @ffe-color-myrull-650;
+    --ffe-color-myrull-700: @ffe-color-myrull-700;
+    --ffe-color-myrull-750: @ffe-color-myrull-750;
+    --ffe-color-myrull-800: @ffe-color-myrull-800;
+    --ffe-color-myrull-850: @ffe-color-myrull-850;
+    --ffe-color-myrull-900: @ffe-color-myrull-900;
+    --ffe-color-myrull-950: @ffe-color-myrull-950;
+    --ffe-color-myrull-1000: @ffe-color-myrull-1000;
+
+    //Lyng
+    --ffe-color-lyng-0: @ffe-color-lyng-0;
+    --ffe-color-lyng-25: @ffe-color-lyng-25;
+    --ffe-color-lyng-50: @ffe-color-lyng-50;
+    --ffe-color-lyng-75: @ffe-color-lyng-75;
+    --ffe-color-lyng-100: @ffe-color-lyng-100;
+    --ffe-color-lyng-150: @ffe-color-lyng-150;
+    --ffe-color-lyng-200: @ffe-color-lyng-200;
+    --ffe-color-lyng-250: @ffe-color-lyng-250;
+    --ffe-color-lyng-300: @ffe-color-lyng-300;
+    --ffe-color-lyng-350: @ffe-color-lyng-350;
+    --ffe-color-lyng-400: @ffe-color-lyng-400;
+    --ffe-color-lyng-450: @ffe-color-lyng-450;
+    --ffe-color-lyng-500: @ffe-color-lyng-500;
+    --ffe-color-lyng-550: @ffe-color-lyng-550;
+    --ffe-color-lyng-600: @ffe-color-lyng-600;
+    --ffe-color-lyng-650: @ffe-color-lyng-650;
+    --ffe-color-lyng-700: @ffe-color-lyng-700;
+    --ffe-color-lyng-750: @ffe-color-lyng-750;
+    --ffe-color-lyng-800: @ffe-color-lyng-800;
+    --ffe-color-lyng-850: @ffe-color-lyng-850;
+    --ffe-color-lyng-900: @ffe-color-lyng-900;
+    --ffe-color-lyng-950: @ffe-color-lyng-950;
+    --ffe-color-lyng-1000: @ffe-color-lyng-1000;
+
+    //Baer
+    --ffe-color-baer-0: @ffe-color-baer-0;
+    --ffe-color-baer-25: @ffe-color-baer-25;
+    --ffe-color-baer-50: @ffe-color-baer-50;
+    --ffe-color-baer-75: @ffe-color-baer-75;
+    --ffe-color-baer-100: @ffe-color-baer-100;
+    --ffe-color-baer-150: @ffe-color-baer-150;
+    --ffe-color-baer-200: @ffe-color-baer-200;
+    --ffe-color-baer-250: @ffe-color-baer-250;
+    --ffe-color-baer-300: @ffe-color-baer-300;
+    --ffe-color-baer-350: @ffe-color-baer-350;
+    --ffe-color-baer-400: @ffe-color-baer-400;
+    --ffe-color-baer-450: @ffe-color-baer-450;
+    --ffe-color-baer-500: @ffe-color-baer-500;
+    --ffe-color-baer-550: @ffe-color-baer-550;
+    --ffe-color-baer-600: @ffe-color-baer-600;
+    --ffe-color-baer-650: @ffe-color-baer-650;
+    --ffe-color-baer-700: @ffe-color-baer-700;
+    --ffe-color-baer-750: @ffe-color-baer-750;
+    --ffe-color-baer-800: @ffe-color-baer-800;
+    --ffe-color-baer-850: @ffe-color-baer-850;
+    --ffe-color-baer-900: @ffe-color-baer-900;
+    --ffe-color-baer-950: @ffe-color-baer-950;
+    --ffe-color-baer-1000: @ffe-color-baer-1000;
+
+    //Sol
+    --ffe-color-sol-0: @ffe-color-sol-0;
+    --ffe-color-sol-25: @ffe-color-sol-25;
+    --ffe-color-sol-50: @ffe-color-sol-50;
+    --ffe-color-sol-75: @ffe-color-sol-75;
+    --ffe-color-sol-100: @ffe-color-sol-100;
+    --ffe-color-sol-150: @ffe-color-sol-150;
+    --ffe-color-sol-200: @ffe-color-sol-200;
+    --ffe-color-sol-250: @ffe-color-sol-250;
+    --ffe-color-sol-300: @ffe-color-sol-300;
+    --ffe-color-sol-350: @ffe-color-sol-350;
+    --ffe-color-sol-400: @ffe-color-sol-400;
+    --ffe-color-sol-450: @ffe-color-sol-450;
+    --ffe-color-sol-500: @ffe-color-sol-500;
+    --ffe-color-sol-550: @ffe-color-sol-550;
+    --ffe-color-sol-600: @ffe-color-sol-600;
+    --ffe-color-sol-650: @ffe-color-sol-650;
+    --ffe-color-sol-700: @ffe-color-sol-700;
+    --ffe-color-sol-750: @ffe-color-sol-750;
+    --ffe-color-sol-800: @ffe-color-sol-800;
+    --ffe-color-sol-850: @ffe-color-sol-850;
+    --ffe-color-sol-900: @ffe-color-sol-900;
+    --ffe-color-sol-950: @ffe-color-sol-950;
+    --ffe-color-sol-1000: @ffe-color-sol-1000;
+
+    //Sand
+    --ffe-color-sand-0: @ffe-color-sand-0;
+    --ffe-color-sand-25: @ffe-color-sand-25;
+    --ffe-color-sand-50: @ffe-color-sand-50;
+    --ffe-color-sand-75: @ffe-color-sand-75;
+    --ffe-color-sand-100: @ffe-color-sand-100;
+    --ffe-color-sand-150: @ffe-color-sand-150;
+    --ffe-color-sand-200: @ffe-color-sand-200;
+    --ffe-color-sand-250: @ffe-color-sand-250;
+    --ffe-color-sand-300: @ffe-color-sand-300;
+    --ffe-color-sand-350: @ffe-color-sand-350;
+    --ffe-color-sand-400: @ffe-color-sand-400;
+    --ffe-color-sand-450: @ffe-color-sand-450;
+    --ffe-color-sand-500: @ffe-color-sand-500;
+    --ffe-color-sand-550: @ffe-color-sand-550;
+    --ffe-color-sand-600: @ffe-color-sand-600;
+    --ffe-color-sand-650: @ffe-color-sand-650;
+    --ffe-color-sand-700: @ffe-color-sand-700;
+    --ffe-color-sand-750: @ffe-color-sand-750;
+    --ffe-color-sand-800: @ffe-color-sand-800;
+    --ffe-color-sand-850: @ffe-color-sand-850;
+    --ffe-color-sand-900: @ffe-color-sand-900;
+    --ffe-color-sand-950: @ffe-color-sand-950;
+    --ffe-color-sand-1000: @ffe-color-sand-1000;
+
+    //Multe
+    --ffe-color-multe-0: @ffe-color-multe-0;
+    --ffe-color-multe-25: @ffe-color-multe-25;
+    --ffe-color-multe-50: @ffe-color-multe-50;
+    --ffe-color-multe-75: @ffe-color-multe-75;
+    --ffe-color-multe-100: @ffe-color-multe-100;
+    --ffe-color-multe-150: @ffe-color-multe-150;
+    --ffe-color-multe-200: @ffe-color-multe-200;
+    --ffe-color-multe-250: @ffe-color-multe-250;
+    --ffe-color-multe-300: @ffe-color-multe-300;
+    --ffe-color-multe-350: @ffe-color-multe-350;
+    --ffe-color-multe-400: @ffe-color-multe-400;
+    --ffe-color-multe-450: @ffe-color-multe-450;
+    --ffe-color-multe-500: @ffe-color-multe-500;
+    --ffe-color-multe-550: @ffe-color-multe-550;
+    --ffe-color-multe-600: @ffe-color-multe-600;
+    --ffe-color-multe-650: @ffe-color-multe-650;
+    --ffe-color-multe-700: @ffe-color-multe-700;
+    --ffe-color-multe-750: @ffe-color-multe-750;
+    --ffe-color-multe-800: @ffe-color-multe-800;
+    --ffe-color-multe-850: @ffe-color-multe-850;
+    --ffe-color-multe-900: @ffe-color-multe-900;
+    --ffe-color-multe-950: @ffe-color-multe-950;
+    --ffe-color-multe-1000: @ffe-color-multe-1000;
+
+    /*
+    ------------
+    SEMANTIC VARIABLES
+    Use these for colors in your components.
+    ------------
+    */
+    //Background
+    --ffe-color-background-default: var(--ffe-color-neutral-white);
+    --ffe-color-background-subtle: var(--ffe-color-sand-50);
+    --ffe-color-background-inverse: var(--ffe-color-vann-600);
+
+    //Surface
+    --ffe-color-surface-tertiary-default: var(--ffe-color-syrin-25);
+    --ffe-color-surface-tertiary-hover: var(--ffe-color-syrin-50);
+    --ffe-color-surface-tertiary-pressed: var(--ffe-color-syrin-75);
+    --ffe-color-surface-info-default: var(--ffe-color-vann-25);
+    --ffe-color-surface-info-inverse: var(--ffe-color-vann-25);
+    --ffe-color-surface-info-hover: var(--ffe-color-vann-75);
+    --ffe-color-surface-info-inverse-hover: var(--ffe-color-neutral-white);
+    --ffe-color-surface-success-default: var(--ffe-color-skog-25);
+    --ffe-color-surface-success-inverse: var(--ffe-color-skog-50);
+    --ffe-color-surface-warning-default: var(--ffe-color-sol-25);
+    --ffe-color-surface-warning-inverse: var(--ffe-color-sol-50);
+    --ffe-color-surface-critical-default: var(--ffe-color-baer-25);
+    --ffe-color-surface-critical-inverse: var(--ffe-color-baer-50);
+    --ffe-color-surface-secondary-default: var(--ffe-color-frost-50);
+    --ffe-color-surface-secondary-hover: var(--ffe-color-frost-100);
+    --ffe-color-surface-secondary-pressed: var(--ffe-color-frost-200);
+    --ffe-color-surface-primary-hover: var(--ffe-color-vann-25);
+    --ffe-color-surface-primary-pressed: var(--ffe-color-vann-50);
+    --ffe-color-surface-primary-default: var(--ffe-color-neutral-white);
+
+    //Text
+    --ffe-color-text-link-default: var(--ffe-color-vann-600);
+    --ffe-color-text-link-inverse: var(--ffe-color-vann-50);
+    --ffe-color-text-link-hover: var(--ffe-color-vann-700);
+    --ffe-color-text-link-pressed: var(--ffe-color-vann-800);
+    --ffe-color-text-default: var(--ffe-color-neutral-black);
+    --ffe-color-text-subtle: var(--ffe-color-graa-550);
+    --ffe-color-text-default-inverse: var(--ffe-color-neutral-white);
+    --ffe-color-text-sublte-inverse: var(--ffe-color-graa-75);
+    --ffe-color-text-emphasis: var(--ffe-color-fjell-800);
+    --ffe-color-text-emphasis-inverse: var(--ffe-color-fjell-50);
+    --ffe-color-text-label-default: var(--ffe-color-graa-1000);
+    --ffe-color-text-label-default-inverse: var(--ffe-color-neutral-white);
+
+    //Border
+    --ffe-color-border-primary-default: var(--ffe-color-graa-400);
+    --ffe-color-border-primary-subtle: var(--ffe-color-graa-50);
+    --ffe-color-border-primary-hover: var(--ffe-color-graa-500);
+    --ffe-color-border-primary-pressed: var(--ffe-color-vann-700);
+    --ffe-color-border-primary-emphasis: var(--ffe-color-vann-600);
+    --ffe-color-border-primary-selected: var(--ffe-color-vann-600);
+    --ffe-color-border-primary-inverse: var(--ffe-color-neutral-white);
+    --ffe-color-border-info-default: var(--ffe-color-vann-300);
+    --ffe-color-border-success-default: var(--ffe-color-skog-300);
+    --ffe-color-border-warning-default: var(--ffe-color-sol-300);
+    --ffe-color-border-critical-default: var(--ffe-color-baer-500);
+    --ffe-color-border-focus: var(--ffe-color-vann-600);
+    --ffe-color-border-focus-inverse: var(--ffe-color-neutral-white);
+    --ffe-color-border-secondary-default: var(--ffe-color-frost-250);
+    --ffe-color-border-secondary-hover: var(--ffe-color-frost-350);
+    --ffe-color-border-secondary-pressed: var(--ffe-color-frost-450);
+    --ffe-color-border-secondary-inverse: var(--ffe-color-frost-150);
+    --ffe-color-border-tertiary-default: var(--ffe-color-syrin-450);
+    --ffe-color-border-tertiary-hover: var(--ffe-color-syrin-550);
+    --ffe-color-border-tertiary-pressed: var(--ffe-color-syrin-650);
+    --ffe-color-border-tertiary-inverse: var(--ffe-color-syrin-100);
+
+    //Component
+    --ffe-color-component-button-secondary-fill-default: var(
+        --ffe-color-neutral-white
+    );
+    --ffe-color-component-button-secondary-fill-hover: var(--ffe-color-vann-50);
+    --ffe-color-component-button-secondary-fill-pressed: var(
+        --ffe-color-vann-75
+    );
+    --ffe-color-component-button-secondary-text-default: var(
+        --ffe-color-vann-700
+    );
+    --ffe-color-component-button-secondary-text-hover: var(
+        --ffe-color-vann-700
+    );
+    --ffe-color-component-button-secondary-border-default: var(
+        --ffe-color-vann-600
+    );
+    --ffe-color-component-button-secondary-border-hover: var(
+        --ffe-color-vann-700
+    );
+    --ffe-color-component-button-secondary-border-pressed: var(
+        --ffe-color-vann-700
+    );
+    --ffe-color-component-button-action-fill-default: var(--ffe-color-skog-600);
+    --ffe-color-component-button-action-fill-hover: var(--ffe-color-skog-700);
+    --ffe-color-component-button-action-fill-pressed: var(--ffe-color-skog-800);
+    --ffe-color-component-button-action-text-default: var(
+        --ffe-color-neutral-white
+    );
+    --ffe-color-component-button-action-text-hover: var(
+        --ffe-color-neutral-white
+    );
+    --ffe-color-component-button-action-border-default: var(
+        --ffe-color-skog-600
+    );
+    --ffe-color-component-button-action-border-hover: var(--ffe-color-skog-700);
+    --ffe-color-component-button-action-border-pressed: var(
+        --ffe-color-skog-800
+    );
+    --ffe-color-component-button-primary-text-default: var(
+        --ffe-color-neutral-white
+    );
+    --ffe-color-component-button-primary-text-hover: var(
+        --ffe-color-neutral-white
+    );
+    --ffe-color-component-button-primary-text-inverse: var(
+        --ffe-color-vann-600
+    );
+    --ffe-color-component-button-primary-fill-default: var(
+        --ffe-color-vann-600
+    );
+    --ffe-color-component-button-primary-fill-hover: var(--ffe-color-vann-700);
+    --ffe-color-component-button-primary-fill-pressed: var(
+        --ffe-color-vann-800
+    );
+    --ffe-color-component-button-primary-fill-inverse: var(
+        --ffe-color-neutral-white
+    );
+    --ffe-color-component-button-primary-border-default: var(
+        --ffe-color-vann-600
+    );
+    --ffe-color-component-button-primary-border-hover: var(
+        --ffe-color-vann-700
+    );
+    --ffe-color-component-button-primary-border-pressed: var(
+        --ffe-color-vann-800
+    );
+    --ffe-color-component-button-tertiary-text-default: var(
+        --ffe-color-vann-600
+    );
+    --ffe-color-component-button-tertiary-text-hover: var(--ffe-color-vann-600);
+    --ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-vann-50);
+    --ffe-color-component-button-tertiary-fill-pressed: var(
+        --ffe-color-vann-100
+    );
+    --ffe-color-component-button-tertiary-fill-default: var(
+        --ffe-color-neutral-white
+    );
+    --ffe-color-component-button-tertiary-border-default: var(
+        --ffe-color-vann-600
+    );
+    --ffe-color-component-button-tertiary-border-hover: var(
+        --ffe-color-vann-100
+    );
+    --ffe-color-component-button-tertiary-border-pressed: var(
+        --ffe-color-vann-700
+    );
+    --ffe-color-component-logo-name: var(--ffe-color-fjell-800);
+    --ffe-color-component-logo-number1: var(--ffe-color-neutral-white);
+    --ffe-color-component-logo-circle-dark-red: #AF0000;
+    --ffe-color-component-logo-circle-light-red: #E60000;
+
+    //Fill
+    --ffe-color-fill-info-default: var(--ffe-color-vann-500);
+    --ffe-color-fill-info-inverse: var(--ffe-color-vann-500);
+    --ffe-color-fill-info-hover: var(--ffe-color-vann-500);
+    --ffe-color-fill-info-pressed: var(--ffe-color-vann-600);
+    --ffe-color-fill-success-default: var(--ffe-color-skog-500);
+    --ffe-color-fill-success-hover: var(--ffe-color-skog-500);
+    --ffe-color-fill-success-inverse: var(--ffe-color-skog-500);
+    --ffe-color-fill-success-pressed: var(--ffe-color-skog-600);
+    --ffe-color-fill-warning-default: var(--ffe-color-sol-500);
+    --ffe-color-fill-warning-hover: var(--ffe-color-sol-500);
+    --ffe-color-fill-warning-pressed: var(--ffe-color-sol-600);
+    --ffe-color-fill-warning-inverse: var(--ffe-color-sol-500);
+    --ffe-color-fill-critical-default: var(--ffe-color-baer-500);
+    --ffe-color-fill-critical-hover: var(--ffe-color-baer-600);
+    --ffe-color-fill-critical-pressed: var(--ffe-color-baer-700);
+    --ffe-color-fill-critical-inverse: var(--ffe-color-baer-500);
+    --ffe-color-fill-primary-default: var(--ffe-color-neutral-white);
+    --ffe-color-fill-primary-pressed: var(--ffe-color-frost-150);
+    --ffe-color-fill-primary-hover: var(--ffe-color-frost-50);
+    --ffe-color-fill-primary-inverse: var(--ffe-color-vann-600);
+    --ffe-color-fill-primary-selected: var(--ffe-color-vann-600);
+    --ffe-color-fill-primary-selected-inverse: var(--ffe-color-neutral-white);
+    --ffe-color-fill-primary-hover-inverse: var(--ffe-color-vann-700);
+    --ffe-color-fill-primary-pressed-inverse: var(--ffe-color-fjell-800);
+    --ffe-color-fill-primary-selected-hover: var(--ffe-color-vann-700);
+    --ffe-color-fill-primary-selected-pressed: var(--ffe-color-vann-800);
+    --ffe-color-fill-secondary-default: var(--ffe-color-graa-25);
+    --ffe-color-fill-secondary-hover: var(--ffe-color-graa-100);
+    --ffe-color-fill-secondary-pressed: var(--ffe-color-graa-200);
+    --ffe-color-fill-secondary-inverse: var(--ffe-color-neutral-white);
+    --ffe-color-fill-tertiary-default: var(--ffe-color-syrin-500);
+
+    //Icon
+    --ffe-color-icon-info: var(--ffe-color-vann-600);
+    --ffe-color-icon-success: var(--ffe-color-skog-600);
+    --ffe-color-icon-warning: var(--ffe-color-sol-500);
+    --ffe-color-icon-critical: var(--ffe-color-baer-500);
+    --ffe-color-icon-default: var(--ffe-color-text-default);
+    --ffe-color-icon-subtle: var(--ffe-color-text-subtle);
+    --ffe-color-icon-emphasis: var(--ffe-color-text-emphasis);
+    --ffe-color-icon-inverse: var(--ffe-color-text-default-inverse);
+
+    /* DEPRECATED */
     --ffe-farge-fjell: @ffe-farge-fjell;
     --ffe-farge-fjell-70: @ffe-farge-fjell-70;
     --ffe-farge-fjell-30: @ffe-farge-fjell-30;
@@ -20,8 +610,6 @@
     --ffe-farge-syrin: @ffe-farge-syrin;
     --ffe-farge-syrin-70: @ffe-farge-syrin-70;
     --ffe-farge-syrin-30: @ffe-farge-syrin-30;
-
-    /** Støttefarger */
     --ffe-farge-myrull: @ffe-farge-myrull;
     --ffe-farge-myrull-70: @ffe-farge-myrull-70;
     --ffe-farge-myrull-30: @ffe-farge-myrull-30;
@@ -46,8 +634,6 @@
     --ffe-farge-sol: @ffe-farge-sol;
     --ffe-farge-sol-70: @ffe-farge-sol-70;
     --ffe-farge-sol-30: @ffe-farge-sol-30;
-
-    /** Nøytrale farger */
     --ffe-farge-natt: @ffe-farge-natt;
     --ffe-farge-svart: @ffe-farge-svart;
     --ffe-farge-koksgraa: @ffe-farge-koksgraa;
@@ -174,6 +760,230 @@
 
     @media (prefers-color-scheme: dark) {
         .regard-color-scheme-preference {
+            /* SEMANTIC VARIABLES */
+            //Background
+            --ffe-color-background-default: var(--ffe-color-graa-1000);
+            --ffe-color-background-subtle: var(--ffe-color-sand-950);
+            --ffe-color-background-inverse: var(--ffe-color-vann-1000);
+
+            //Surface
+            --ffe-color-surface-tertiary-default: var(--ffe-color-syrin-900);
+            --ffe-color-surface-tertiary-hover: var(--ffe-color-syrin-750);
+            --ffe-color-surface-tertiary-pressed: var(--ffe-color-syrin-750);
+            --ffe-color-surface-info-default: var(--ffe-color-vann-850);
+            --ffe-color-surface-info-inverse: var(--ffe-color-vann-650);
+            --ffe-color-surface-info-hover: var(--ffe-color-vann-750);
+            --ffe-color-surface-info-inverse-hover: var(
+                --ffe-color-neutral-white
+            );
+            --ffe-color-surface-success-default: var(--ffe-color-skog-850);
+            --ffe-color-surface-success-inverse: var(--ffe-color-skog-850);
+            --ffe-color-surface-warning-default: var(--ffe-color-sol-850);
+            --ffe-color-surface-warning-inverse: var(--ffe-color-sol-850);
+            --ffe-color-surface-critical-default: var(--ffe-color-baer-850);
+            --ffe-color-surface-critical-inverse: var(--ffe-color-baer-850);
+            --ffe-color-surface-secondary-default: var(--ffe-color-frost-900);
+            --ffe-color-surface-secondary-hover: var(--ffe-color-frost-850);
+            --ffe-color-surface-secondary-pressed: var(--ffe-color-frost-800);
+            --ffe-color-surface-primary-hover: var(--ffe-color-graa-600);
+            --ffe-color-surface-primary-pressed: var(--ffe-color-graa-600);
+            --ffe-color-surface-primary-default: var(--ffe-color-graa-900);
+
+            //Text
+            --ffe-color-text-link-default: var(--ffe-color-vann-100);
+            --ffe-color-text-link-inverse: var(--ffe-color-vann-50);
+            --ffe-color-text-link-hover: var(--ffe-color-vann-200);
+            --ffe-color-text-link-pressed: var(--ffe-color-vann-300);
+            --ffe-color-text-default: var(--ffe-color-neutral-white);
+            --ffe-color-text-subtle: var(--ffe-color-graa-200);
+            --ffe-color-text-default-inverse: var(--ffe-color-neutral-white);
+            --ffe-color-text-sublte-inverse: var(--ffe-color-graa-200);
+            --ffe-color-text-emphasis: var(--ffe-color-fjell-250);
+            --ffe-color-text-emphasis-inverse: var(--ffe-color-fjell-300);
+            --ffe-color-text-label-default: var(--ffe-color-neutral-white);
+            --ffe-color-text-label-default-inverse: var(
+                --ffe-color-neutral-white
+            );
+
+            //Border
+            --ffe-color-border-primary-default: var(--ffe-color-graa-600);
+            --ffe-color-border-primary-subtle: var(--ffe-color-graa-800);
+            --ffe-color-border-primary-hover: var(--ffe-color-graa-500);
+            --ffe-color-border-primary-pressed: var(--ffe-color-vann-500);
+            --ffe-color-border-primary-emphasis: var(--ffe-color-vann-600);
+            --ffe-color-border-primary-selected: var(--ffe-color-vann-650);
+            --ffe-color-border-primary-inverse: var(--ffe-color-neutral-white);
+            --ffe-color-border-info-default: var(--ffe-color-vann-400);
+            --ffe-color-border-success-default: var(--ffe-color-skog-400);
+            --ffe-color-border-warning-default: var(--ffe-color-sol-400);
+            --ffe-color-border-critical-default: var(--ffe-color-baer-500);
+            --ffe-color-border-focus: var(--ffe-color-neutral-white);
+            --ffe-color-border-focus-inverse: var(--ffe-color-neutral-white);
+            --ffe-color-border-secondary-default: var(--ffe-color-frost-400);
+            --ffe-color-border-secondary-hover: var(--ffe-fffff);
+            --ffe-color-border-secondary-pressed: var(--ffe-fffff);
+            --ffe-color-border-secondary-inverse: var(--ffe-fffff);
+            --ffe-color-border-tertiary-default: var(--ffe-color-syrin-400);
+            --ffe-color-border-tertiary-hover: var(--ffe-fffff);
+            --ffe-color-border-tertiary-pressed: var(--ffe-fffff);
+            --ffe-color-border-tertiary-inverse: var(--ffe-fffff);
+
+            //Component
+            --ffe-color-component-button-secondary-fill-default: var(
+                --ffe-color-neutral-black
+            );
+            --ffe-color-component-button-secondary-fill-hover: var(
+                --ffe-color-vann-800
+            );
+            --ffe-color-component-button-secondary-fill-pressed: var(
+                --ffe-color-vann-600
+            );
+            --ffe-color-component-button-secondary-text-default: var(
+                --ffe-color-vann-100
+            );
+            --ffe-color-component-button-secondary-text-hover: var(
+                --ffe-color-neutral-white
+            );
+            --ffe-color-component-button-secondary-border-default: var(
+                --ffe-color-vann-300
+            );
+            --ffe-color-component-button-secondary-border-hover: var(
+                --ffe-color-vann-400
+            );
+            --ffe-color-component-button-secondary-border-pressed: var(
+                --ffe-color-vann-600
+            );
+            --ffe-color-component-button-action-fill-default: var(
+                --ffe-color-skog-600
+            );
+            --ffe-color-component-button-action-fill-hover: var(
+                --ffe-color-skog-550
+            );
+            --ffe-color-component-button-action-fill-pressed: var(
+                --ffe-color-skog-400
+            );
+            --ffe-color-component-button-action-text-default: var(
+                --ffe-color-neutral-white
+            );
+            --ffe-color-component-button-action-text-hover: var(
+                --ffe-color-neutral-white
+            );
+            --ffe-color-component-button-action-border-default: var(
+                --ffe-color-skog-600
+            );
+            --ffe-color-component-button-action-border-hover: var(
+                --ffe-color-skog-500
+            );
+            --ffe-color-component-button-action-border-pressed: var(
+                --ffe-color-skog-400
+            );
+            --ffe-color-component-button-primary-text-default: var(
+                --ffe-color-neutral-white
+            );
+            --ffe-color-component-button-primary-text-hover: var(
+                --ffe-color-neutral-white
+            );
+            --ffe-color-component-button-primary-text-inverse: var(
+                --ffe-color-neutral-white
+            );
+            --ffe-color-component-button-primary-fill-default: var(
+                --ffe-color-vann-550
+            );
+            --ffe-color-component-button-primary-fill-hover: var(
+                --ffe-color-vann-500
+            );
+            --ffe-color-component-button-primary-fill-pressed: var(
+                --ffe-color-vann-400
+            );
+            --ffe-color-component-button-primary-fill-inverse: var(
+                --ffe-color-vann-900
+            );
+            --ffe-color-component-button-primary-border-default: var(
+                --ffe-color-vann-600
+            );
+            --ffe-color-component-button-primary-border-hover: var(
+                --ffe-color-vann-500
+            );
+            --ffe-color-component-button-primary-border-pressed: var(
+                --ffe-color-vann-400
+            );
+            --ffe-color-component-button-tertiary-text-default: var(
+                --ffe-color-vann-100
+            );
+            --ffe-color-component-button-tertiary-text-hover: var(
+                --ffe-color-vann-100
+            );
+            --ffe-color-component-button-tertiary-fill-hover: var(
+                --ffe-color-vann-800
+            );
+            --ffe-color-component-button-tertiary-fill-pressed: var(
+                --ffe-color-vann-700
+            );
+            --ffe-color-component-button-tertiary-fill-default: var(
+                --ffe-color-neutral-black-0
+            );
+            --ffe-color-component-button-tertiary-border-default: var(
+                --ffe-color-graa-1000
+            );
+            --ffe-color-component-button-tertiary-border-hover: var(
+                --ffe-color-vann-500
+            );
+            --ffe-color-component-button-tertiary-border-pressed: var(
+                --ffe-color-vann-600
+            );
+            --ffe-color-component-logo-name: var(--ffe-color-neutral-white);
+            --ffe-color-component-logo-number1: var(--ffe-color-neutral-white);
+            --ffe-color-component-logo-cirle-dark-red: var(--ffe-af000);
+            --ffe-color-component-logo-cirle-light-red: var(--ffe-e6000);
+
+            //Fill
+            --ffe-color-fill-info-default: var(--ffe-color-vann-550);
+            --ffe-color-fill-info-inverse: var(--ffe-color-vann-600);
+            --ffe-color-fill-info-hover: var(--ffe-color-vann-400);
+            --ffe-color-fill-info-pressed: var(--ffe-color-vann-300);
+            --ffe-color-fill-success-default: var(--ffe-color-skog-550);
+            --ffe-color-fill-success-hover: var(--ffe-color-skog-400);
+            --ffe-color-fill-success-inverse: var(--ffe-color-skog-600);
+            --ffe-color-fill-success-pressed: var(--ffe-color-skog-300);
+            --ffe-color-fill-warning-default: var(--ffe-color-sol-550);
+            --ffe-color-fill-warning-hover: var(--ffe-color-sol-400);
+            --ffe-color-fill-warning-pressed: var(--ffe-color-sol-300);
+            --ffe-color-fill-warning-inverse: var(--ffe-color-sol-600);
+            --ffe-color-fill-critical-default: var(--ffe-color-baer-550);
+            --ffe-color-fill-critical-hover: var(--ffe-color-baer-400);
+            --ffe-color-fill-critical-pressed: var(--ffe-color-baer-300);
+            --ffe-color-fill-critical-inverse: var(--ffe-color-baer-550);
+            --ffe-color-fill-primary-default: var(--ffe-color-graa-1000);
+            --ffe-color-fill-primary-pressed: var(--ffe-color-vann-850);
+            --ffe-color-fill-primary-hover: var(--ffe-color-vann-950);
+            --ffe-color-fill-primary-inverse: var(--ffe-color-vann-1000);
+            --ffe-color-fill-primary-selected: var(--ffe-color-vann-550);
+            --ffe-color-fill-primary-selected-inverse: var(
+                --ffe-color-vann-500
+            );
+            --ffe-color-fill-primary-hover-inverse: var(--ffe-color-vann-900);
+            --ffe-color-fill-primary-pressed-inverse: var(--ffe-color-vann-800);
+            --ffe-color-fill-primary-selected-hover: var(--ffe-color-vann-400);
+            --ffe-color-fill-primary-selected-pressed: var(
+                --ffe-color-vann-300
+            );
+            --ffe-color-fill-secondary-default: var(--ffe-color-graa-750);
+            --ffe-color-fill-secondary-hover: var(--ffe-color-graa-600);
+            --ffe-color-fill-secondary-pressed: var(--ffe-color-graa-450);
+            --ffe-color-fill-secondary-inverse: var(--ffe-color-neutral-white);
+            --ffe-color-fill-tertiary-default: var(--ffe-color-syrin-700);
+
+            //Icon
+            --ffe-color-icon-info: var(--ffe-color-vann-700);
+            --ffe-color-icon-success: var(--ffe-color-skog-700);
+            --ffe-color-icon-warning: var(--ffe-color-sol-700);
+            --ffe-color-icon-critical: var(--ffe-color-baer-600);
+            --ffe-color-icon-default: var(--ffe-color-text-default);
+            --ffe-color-icon-subtle: var(--ffe-color-text-subtle);
+            --ffe-color-icon-emphasis: var(--ffe-color-text-emphasis);
+            --ffe-color-icon-inverse: var(--ffe-color-text-default-inverse);
+
+            /* DEPRECATED */
             --ffe-g-primary-color: var(--ffe-farge-vann-70);
             --ffe-g-secondary-color: var(--ffe-farge-vann-70);
             --ffe-g-border-color: var(--ffe-farge-graa);