diff --git a/developer_manual/design/foundations.rst b/developer_manual/design/foundations.rst
index 3a7956ce94d..0005f91cd12 100644
--- a/developer_manual/design/foundations.rst
+++ b/developer_manual/design/foundations.rst
@@ -87,28 +87,33 @@ Status and indicators
 
 .. list-table::
 
-    * - .. figure:: ../images/colour-success.svg
+    * - .. figure:: ../images/color-info.svg
+
+           Info: #006AA3
+
+      - .. figure:: ../images/color-success.svg
 
            Success: #46BA61
 
-      - .. figure:: ../images/colour-error.svg
+      - .. figure:: ../images/color-error.svg
 
            Error: #E9322D
 
-      - .. figure:: ../images/colour-warning.svg
+      - .. figure:: ../images/color-warning.svg
 
            Warning: #ECA700
 
-Interface elements associated with a status like success, error, or warning may also be colored to communicate the action better.
+Interface elements associated with a status like info, success, error, or warning may also be colored to communicate the action better.
 
 While interface elements like buttons are colored differently depending on their action, the color of the text in that element is almost always either of the main text colors, that is light or dark.
 
 
 * On web:
 
-  * Success colour: ``var(--color-success)``
-  * Warning colour: ``var(--color-warning)``
-  * Error colour: ``var(--color-error)``
+  * Info color: ``var(--color-info)``
+  * Success color: ``var(--color-success)``
+  * Warning color: ``var(--color-warning)``
+  * Error color: ``var(--color-error)``
 
 * Android: Material Design guidelines
 * iOS: `Apple HIG colors <https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/>`_
diff --git a/developer_manual/images/colour-error.svg b/developer_manual/images/color-error.svg
similarity index 100%
rename from developer_manual/images/colour-error.svg
rename to developer_manual/images/color-error.svg
diff --git a/developer_manual/images/color-info.svg b/developer_manual/images/color-info.svg
new file mode 100644
index 00000000000..6a2898e2e5e
--- /dev/null
+++ b/developer_manual/images/color-info.svg
@@ -0,0 +1 @@
+<svg id="screenshot" viewBox="-1.9198620293536806e-7 1.9198620293536806e-7 44 44" width="44" height="44" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:penpot="https://penpot.app/xmlns"><g id="shape-449b6580-0722-11ec-80f0-ffdf49ffffdb"><penpot:shape penpot:center-y="22" penpot:transform-inverse="matrix(1,1.3234889800848443e-23,9.926167350636332e-24,0.9999999999999999,0,0)" penpot:transform="matrix(1,-6.617444900424222e-24,-1.6543612251060553e-23,1,0,0)" penpot:proportion-lock="true" penpot:stroke-style="none" penpot:rotation="0" penpot:stroke-alignment="center" penpot:type="circle" penpot:fill-color-ref-file="f48a3080-a38f-11eb-bb49-81aaa3a367f9" penpot:name="success" penpot:fill-color-ref-id="63bc1da0-b7d2-11eb-9e59-fbf93090aec0" penpot:proportion="1" penpot:center-x="22"><penpot:export penpot:type="png" penpot:suffix="" penpot:scale="1"/></penpot:shape><ellipse cx="22" cy="22" rx="22" ry="22" transform="matrix(1,-6.617444900424222e-24,-1.6543612251060553e-23,1,0,0)" style="fill: rgb(0, 106, 163); fill-opacity: 1;"/></g></svg>
\ No newline at end of file
diff --git a/developer_manual/images/colour-success.svg b/developer_manual/images/color-success.svg
similarity index 100%
rename from developer_manual/images/colour-success.svg
rename to developer_manual/images/color-success.svg
diff --git a/developer_manual/images/colour-warning.svg b/developer_manual/images/color-warning.svg
similarity index 100%
rename from developer_manual/images/colour-warning.svg
rename to developer_manual/images/color-warning.svg