diff --git a/src/components/layout/ButtonLink/index.jsx b/src/components/layout/ButtonLink/index.jsx
index ae988f11..12e08b01 100644
--- a/src/components/layout/ButtonLink/index.jsx
+++ b/src/components/layout/ButtonLink/index.jsx
@@ -11,7 +11,7 @@ type Props = {
   type: 'button' | 'submit' | 'reset',
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
   weight?: 'light' | 'regular' | 'bolder' | 'bold',
-  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled',
+  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled' | 'error',
 }
 
 const GnoButtonLink = ({
diff --git a/src/components/layout/ButtonLink/index.scss b/src/components/layout/ButtonLink/index.scss
index b184489a..bd6cf736 100644
--- a/src/components/layout/ButtonLink/index.scss
+++ b/src/components/layout/ButtonLink/index.scss
@@ -74,6 +74,10 @@
   color: $disabled;
 }
 
+.error {
+  color: $error;
+}
+
 .white {
   color: white;
 }
\ No newline at end of file
diff --git a/src/components/layout/Heading/index.jsx b/src/components/layout/Heading/index.jsx
index dd7de50d..c35ba0a1 100644
--- a/src/components/layout/Heading/index.jsx
+++ b/src/components/layout/Heading/index.jsx
@@ -11,7 +11,7 @@ type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4';
 type Props = {
   align?: 'left' | 'center' | 'right',
   margin?: 'sm' | 'md' | 'lg' | 'xl',
-  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled',
+  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled' | 'error',
   tag: HeadingTag,
   truncate?: boolean,
   children: React$Node,
diff --git a/src/components/layout/Heading/index.scss b/src/components/layout/Heading/index.scss
index e3c38b50..8a46620f 100644
--- a/src/components/layout/Heading/index.scss
+++ b/src/components/layout/Heading/index.scss
@@ -95,6 +95,10 @@
   color: $disabled;
 }
 
+.error {
+  color: $error;
+}
+
 .white {
   color: white;
 }
diff --git a/src/components/layout/Paragraph/index.jsx b/src/components/layout/Paragraph/index.jsx
index 5cbd9c7b..8d046aca 100644
--- a/src/components/layout/Paragraph/index.jsx
+++ b/src/components/layout/Paragraph/index.jsx
@@ -11,7 +11,7 @@ type Props = {
   noPadding?: boolean,
   weight?: 'light' | 'regular' | 'bolder' | 'bold',
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl',
-  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled',
+  color?: 'soft' | 'medium' | 'dark' | 'white' | 'fancy' | 'primary' | 'secondary' | 'warning' | 'disabled' | 'error',
   transform?: 'capitalize' | 'lowercase' | 'uppercase',
   children: React$Node,
   dot?: boolean,
diff --git a/src/components/layout/Paragraph/index.scss b/src/components/layout/Paragraph/index.scss
index 0a54b864..2d00bdb2 100644
--- a/src/components/layout/Paragraph/index.scss
+++ b/src/components/layout/Paragraph/index.scss
@@ -35,6 +35,10 @@
   color: $disabled;
 }
 
+.error {
+  color: $error;
+}
+
 .white {
   color: white;
 }
diff --git a/src/theme/mui.js b/src/theme/mui.js
index 5455e662..55dcd377 100644
--- a/src/theme/mui.js
+++ b/src/theme/mui.js
@@ -7,6 +7,7 @@ import {
   disabled,
   primary,
   secondary,
+  error,
   md,
   lg,
   bolderFont,
@@ -27,7 +28,7 @@ const palette = {
     main: secondary,
   },
   error: {
-    main: '#FB4F62',
+    main: error,
   },
   contrastThreshold: 3,
   tonalOffset: 0.2,
diff --git a/src/theme/variables.js b/src/theme/variables.js
index 42694b90..49c4eeea 100644
--- a/src/theme/variables.js
+++ b/src/theme/variables.js
@@ -7,6 +7,7 @@ const tertiary = '#f6f9fc'
 const fontColor = '#4a5579'
 const fancyColor = '#fd7890'
 const warningColor = '#ffc05f'
+const errorColor = '#fb4f62'
 const connectedColor = '#00c4c4'
 const disabled = '#65707e'
 const xs = '4px'
@@ -28,6 +29,7 @@ module.exports = Object.assign(
     fontColor,
     fancy: fancyColor,
     warning: warningColor,
+    error: errorColor,
     connected: connectedColor,
     xs,
     sm,