bimdata · NicolasRichel · Jan 30, 2026 · Jan 30, 2026
diff --git a/src/assets/css/utilities/_colors.css b/src/assets/css/utilities/_colors.css
@@ -50,6 +50,14 @@
     background-color: var(--color-neutral);
   }
 
+  /* background ACTION COLORS */
+  .bg-action-high {
+    background-color: var(--color-action-high);
+  }
+  .bg-color-action-medium {
+    background-color: var(--color-action-medium);
+  }
+
   /* color BRAND COLORS */
   .color-primary {
     color: var(--color-primary);
@@ -101,6 +109,14 @@
     color: var(--color-neutral);
   }
 
+  /* color ACTION COLORS */
+  .color-action-high {
+    color: var(--color-action-high);
+  }
+  .color-action-medium {
+    color: var(--color-action-medium);
+  }
+
   /* fill BRAND COLORS */
   .fill-primary {
     fill: var(--color-primary);
@@ -152,6 +168,14 @@
     fill: var(--color-neutral);
   }
 
+  /* fill ACTION COLORS */
+  .fill-action-high {
+    fill: var(--color-action-high);
+  }
+  .fill-action-medium {
+    fill: var(--color-action-medium);
+  }
+
   /* stroke BRAND COLORS */
   .stroke-primary {
     fill: transparent;
@@ -218,6 +242,14 @@
     stroke: var(--color-neutral);
   }
 
+  /* stroke ACTION COLORS */
+  .stroke-action-high {
+    stroke: var(--color-action-high);
+  }
+  .stroke-action-medium {
+    stroke: var(--color-action-medium);
+  }
+
   .dark {
     .fill-white {
       fill: var(--color-quaternary);
@@ -226,4 +258,4 @@
       fill: var(--color-quaternary-lighter);
     }
   }
-}
+}
diff --git a/src/assets/css/variables.css b/src/assets/css/variables.css
@@ -24,10 +24,10 @@ html {
   --color-tertiary-light: rgba(140, 247, 255, 1);
   --color-tertiary-lighter: rgba(242, 254, 255, 1);
 
-    /* --------------------------------------------------------
+  /* --------------------------------------------------------
   --------------- color QUATERNARY & VARIANTS -----------------
   ----------------------------------------------------------- */
-  --color-quaternary: rgba(28, 32,44, 1);
+  --color-quaternary: rgba(28, 32, 44, 1);
   --color-quaternary-darker: rgba(12, 16, 27, 1);
   --color-quaternary-dark: rgba(17, 22, 34, 1);
   --color-quaternary-light: rgba(38, 43, 60, 1);
@@ -77,6 +77,12 @@ html {
   --color-neutral-light: rgba(51, 117, 221, 1);
   --color-neutral-lighter: rgba(240, 245, 255, 1);
 
+  /* --------------------------------------------------------
+  -------------------- color ACTION --------------------------
+  ----------------------------------------------------------- */
+  --color-action-high: rgba(255, 30, 67, 1);
+  --color-action-medium: rgba(255, 255, 59, 1);
+
   /* color TEXT --------------------------------------------- */
   --color-text: rgba(47, 55, 74, 1);
 
@@ -117,8 +123,8 @@ html {
     --color-ds-dark-pre: #282b34;
     --color-ds-text: var(--color-primary);
     --color-ds-border: var(--color-silver);
-    --color-ds-light-border: rgba(0,0,0,.05);
-    --color-ds-hover: rgb(240,240,240);
+    --color-ds-light-border: rgba(0, 0, 0, 0.05);
+    --color-ds-hover: rgb(240, 240, 240);
     --color-ds-granite-light: var(--color-granite-light);
   }
-}
+}
diff --git a/src/web/views/Guidelines/Colors/ColorImplementing/ColorsImplementingContent.vue b/src/web/views/Guidelines/Colors/ColorImplementing/ColorsImplementingContent.vue
@@ -120,6 +120,18 @@
       :columns="neutralColorData[0]"
       :rows="neutralColorData.slice(1)"
     />
+
+    <!-- color ACTION HIGH -->
+    <BIMDataText component="h5" color="color-primary" margin="15px 0 5px">
+      Action High color & variants
+    </BIMDataText>
+    <ColorSwatche :colors="actionHighColors"></ColorSwatche>
+
+    <!-- color ACTION MEDIUM -->
+    <BIMDataText component="h5" color="color-primary" margin="15px 0 5px">
+      Action Medium color & variants
+    </BIMDataText>
+    <ColorSwatche :colors="actionMediumColors"></ColorSwatche>
   </div>
 </template>
 
@@ -132,6 +144,8 @@ import tertiaryColors from "../js/tertiaryColors.js";
 import quaternaryColors from "../js/quaternaryColors.js";
 import successColors from "../js/successColors.js";
 import warningColors from "../js/warningColors.js";
+import actionHighColors from "../js/actionHighColors.js";
+import actionMediumColors from "../js/actionMediumColors.js";
 
 import BIMDataTable from "../../../../../BIMDataComponents/BIMDataTable/BIMDataTable.vue";
 import BIMDataText from "../../../../../BIMDataComponents/BIMDataText/BIMDataText.vue";
@@ -153,6 +167,8 @@ export default {
       quaternaryColors,
       successColors,
       warningColors,
+      actionHighColors,
+      actionMediumColors,
       primaryColorData: [
         ["Colors", "Description"],
         ["Primary", ""],

diff --git a/src/web/views/Guidelines/Colors/ColorPalette/ColorsPaletteContent.vue b/src/web/views/Guidelines/Colors/ColorPalette/ColorsPaletteContent.vue
@@ -125,6 +125,18 @@ export default {
           "rgb(0, 175, 80)",
           "This color is used for success states, status, success or confirmation messages.",
         ],
+        [
+          "Action High",
+          "--color-action-high",
+          "rgb(255, 30, 67)",
+          "This color is used for actions that require the user be very careful (e.g. destructive actions).",
+        ],
+        [
+          "Action Medium",
+          "--color-action-medium",
+          "rgb(255, 255, 59)",
+          "This color is used for actions that require the user to pay attention (e.g. patch/update actions).",
+        ],
         [
           "Text",
           "--color-text",

diff --git a/src/web/views/Guidelines/Colors/js/actionHighColors.js b/src/web/views/Guidelines/Colors/js/actionHighColors.js
@@ -0,0 +1,13 @@
+export default Object.freeze([
+  {
+    name: "Action High",
+    hex: "#ff1e43",
+    rgb: "255, 30, 67",
+    css: "var(--color-action-high)",
+    background: "bg-action-high",
+    color: "color-action-high",
+    fill: "fill-action-high",
+    stroke: "stroke-action-high",
+    textcolor: "#ffffff",
+  },
+]);
diff --git a/src/web/views/Guidelines/Colors/js/actionMediumColors.js b/src/web/views/Guidelines/Colors/js/actionMediumColors.js
@@ -0,0 +1,13 @@
+export default Object.freeze([
+  {
+    name: "Action Medium",
+    hex: "#ffff3b",
+    rgb: "255, 255, 59",
+    css: "var(--color-action-medium)",
+    background: "bg-action-medium",
+    color: "color-action-medium",
+    fill: "fill-action-medium",
+    stroke: "stroke-action-medium",
+    textcolor: "#2f374a",
+  },
+]);
diff --git a/src/web/views/Guidelines/Colors/js/allBrandColors.js b/src/web/views/Guidelines/Colors/js/allBrandColors.js
@@ -74,4 +74,14 @@ export default Object.freeze([
     hex: "#205dbd",
     textcolor: "#ffffff",
   },
+  {
+    name: "Action High",
+    hex: "#ff1e43",
+    textcolor: "#ffffff",
+  },
+  {
+    name: "Action Medium",
+    hex: "#ffff3b",
+    textcolor: "#2f374a",
+  },
 ]);
diff --git a/src/web/views/Guidelines/Utilities/Utilities.vue b/src/web/views/Guidelines/Utilities/Utilities.vue
@@ -10,8 +10,11 @@
           Usage
         </BIMDataText>
         <p>
-          To use BIMData utility classes you need to add the <b>"bimdata-design-system"</b> class to the root of your application.<br/>
-          Utility classes will only be applied when on element that have an ancestor with <b>"bimdata-design-system"</b> class. 
+          To use BIMData utility classes you need to add the
+          <b>"bimdata-design-system"</b> class to the root of your
+          application.<br />
+          Utility classes will only be applied when on element that have an
+          ancestor with <b>"bimdata-design-system"</b> class.
         </p>
       </div>
       <div id="colors">
@@ -108,7 +111,15 @@ export default {
   },
   data() {
     return {
-      navElements: ["usage", "colors", "flexbox", "grid", "spacing", "text", "import"],
+      navElements: [
+        "usage",
+        "colors",
+        "flexbox",
+        "grid",
+        "spacing",
+        "text",
+        "import",
+      ],
       columns: [
         { id: "name", label: "Class name", width: "300px" },
         { id: "value", label: "Output value" },
@@ -127,6 +138,8 @@ export default {
         ["bg-warning", "background-color: #ff9100"],
         ["bg-high", "background-color: #ff3d1e"],
         ["bg-neutral", "background-color: #205dbd"],
+        ["bg-action-high", "background-color: #ff1e43"],
+        ["bg-action-medium", "background-color: #ffff3b"],
         ["color-primary", "color: #2f374a"],
         ["color-secondary", "color: #f9c72c"],
         ["color-silver", "color: #d8d8d8"],
@@ -140,6 +153,8 @@ export default {
         ["color-warning", "color: #ff9100"],
         ["color-high", "color: #ff3d1e"],
         ["color-neutral", "color: #205dbd"],
+        ["color-action-high", "color: #ff1e43"],
+        ["color-action-medium", "color: #ffff3b"],
       ],
       flexboxUtilities: [
         ["flex", "display: flex"],

diff --git a/src/web/views/Guidelines/Variables/Variables.vue b/src/web/views/Guidelines/Variables/Variables.vue
@@ -1,7 +1,10 @@
 <template>
   <main class="article variables">
     <div class="article-wrapper">
-      <BIMDataText component="h1" :color="currentTheme === 'theme-dark' ? 'color-white' : 'color-primary'">
+      <BIMDataText
+        component="h1"
+        :color="currentTheme === 'theme-dark' ? 'color-white' : 'color-primary'"
+      >
         Variables
       </BIMDataText>
       <BIMDataText margin="12px 0">
@@ -123,6 +126,8 @@ export default {
         ["--color-neutral-light", "rgba(51, 117, 221, 1)"],
         ["--color-neutral-lighter", "rgba(240, 245, 255, 1)"],
         ["--color-neutral-dark", "rgba(25, 72, 145, 1)"],
+        ["--color-action-high", "rgba(255, 30, 67, 1)"],
+        ["--color-action-medium", "rgba(255, 255, 59, 1)"],
         ["--color-text", "rgba(47, 55, 74, 1)"],
       ],
       boxShadowVariables: [