diff --git a/components/Checkbox/__snapshots__/Checkbox.unit.test.jsx.snap b/components/Checkbox/__snapshots__/Checkbox.unit.test.jsx.snap
index c15aa2c79..6206452e0 100644
--- a/components/Checkbox/__snapshots__/Checkbox.unit.test.jsx.snap
+++ b/components/Checkbox/__snapshots__/Checkbox.unit.test.jsx.snap
@@ -135,6 +135,7 @@ exports[`<Checkbox /> should match the snapshot 2`] = `
   cursor: text;
   font-style: italic;
   font-weight: 600;
+  display: block;
 }
 
 .c0 {
@@ -330,11 +331,11 @@ exports[`<Checkbox /> should match the snapshot 2`] = `
       
     </label>
   </div>
-  <div
+  <span
     className="c5"
   >
     error message
-  </div>
+  </span>
 </div>
 `;
 
@@ -345,6 +346,7 @@ exports[`<Checkbox /> should match the snapshot 3`] = `
   cursor: text;
   font-style: italic;
   font-weight: 600;
+  display: block;
 }
 
 .c0 {
@@ -540,11 +542,11 @@ exports[`<Checkbox /> should match the snapshot 3`] = `
       
     </label>
   </div>
-  <div
+  <span
     className="c5"
   >
     error message
-  </div>
+  </span>
 </div>
 `;
 
diff --git a/components/Checkbox/__snapshots__/CheckboxGroup.unit.test.jsx.snap b/components/Checkbox/__snapshots__/CheckboxGroup.unit.test.jsx.snap
index 71de58963..e3e4ca9c5 100644
--- a/components/Checkbox/__snapshots__/CheckboxGroup.unit.test.jsx.snap
+++ b/components/Checkbox/__snapshots__/CheckboxGroup.unit.test.jsx.snap
@@ -1323,6 +1323,7 @@ exports[`<CheckboxGroup /> snapshot with <CheckboxGroup.Button /> with an error
   cursor: text;
   font-style: italic;
   font-weight: 600;
+  display: block;
   margin-left: -2px;
 }
 
@@ -1407,11 +1408,11 @@ exports[`<CheckboxGroup /> snapshot with <CheckboxGroup.Button /> with an error
       Baz
     </label>
   </div>
-  <div
+  <span
     className="c5"
   >
     Error Message
-  </div>
+  </span>
 </div>
 `;
 
@@ -1873,6 +1874,7 @@ exports[`<CheckboxGroup /> snapshot with <CheckboxGroup.Checkbox /> with an erro
   cursor: text;
   font-style: italic;
   font-weight: 600;
+  display: block;
   margin-left: -2px;
 }
 
@@ -1984,11 +1986,11 @@ exports[`<CheckboxGroup /> snapshot with <CheckboxGroup.Checkbox /> with an erro
       </label>
     </div>
   </div>
-  <div
+  <span
     className="c6"
   >
     Error Message
-  </div>
+  </span>
 </div>
 `;
 
diff --git a/components/Dropdown/__snapshots__/Dropdown.unit.test.jsx.snap b/components/Dropdown/__snapshots__/Dropdown.unit.test.jsx.snap
index 35c4d3aad..288e0dc25 100644
--- a/components/Dropdown/__snapshots__/Dropdown.unit.test.jsx.snap
+++ b/components/Dropdown/__snapshots__/Dropdown.unit.test.jsx.snap
@@ -444,6 +444,7 @@ exports[`Input component  should match the snapshot 4`] = `
   cursor: text;
   font-style: italic;
   font-weight: 600;
+  display: block;
   padding: 8px 12px 0px;
 }
 
@@ -503,11 +504,11 @@ exports[`Input component  should match the snapshot 4`] = `
       </span>
     </button>
   </div>
-  <div
+  <span
     className="c4"
   >
     Error message
-  </div>
+  </span>
 </div>
 `;
 
diff --git a/components/Form/__snapshots__/Form.unit.test.jsx.snap b/components/Form/__snapshots__/Form.unit.test.jsx.snap
index 2846de426..97d861c7a 100644
--- a/components/Form/__snapshots__/Form.unit.test.jsx.snap
+++ b/components/Form/__snapshots__/Form.unit.test.jsx.snap
@@ -10,9 +10,8 @@ exports[`Form component  should match the snapshot 1`] = `
 
 .c1 {
   display: block;
-  margin-bottom: 0;
-  padding: 8px 12px 0px;
   font-weight: bold;
+  margin: 8px 12px 0;
 }
 
 .c2 {
diff --git a/components/Input/Input.jsx b/components/Input/Input.jsx
index ecb30abfe..a5d72090b 100644
--- a/components/Input/Input.jsx
+++ b/components/Input/Input.jsx
@@ -4,7 +4,6 @@ import React from 'react';
 import MaskedInput from 'react-text-mask';
 
 import { FieldGroup, uniqId } from '../shared';
-import Colors from '../Colors';
 import Icon from '../Icon';
 import InputTypes from './InputTypes';
 import {
@@ -26,12 +25,18 @@ const InputIcon = styled(Icon)`
   bottom: 10px;
 `;
 
-const InputSearchIcon = styled(InputIcon)`
+const InputSearchIcon = styled(InputIcon).attrs({ name: 'search' })`
   left: 12px;
 `;
 
-const InputErrorIcon = styled(InputIcon)`
-  color: ${Colors.ERROR['500']};
+const InputErrorIcon = styled(InputIcon).attrs({ name: 'error' })`
+  ${({
+    theme: {
+      colors: {
+        error: { 500: error500 },
+      },
+    },
+  }) => `color: ${error500};`}
 `;
 
 const DescriptionLabel = styled.span`
@@ -103,6 +108,7 @@ class Input extends React.Component {
       ...rest
     } = this.props;
     const { type: typeState } = this.state;
+
     const _isSearchType = typeProp === 'search';
     const _isPassword = typeProp === 'password';
     const _hasValue = !!value;
@@ -120,9 +126,7 @@ class Input extends React.Component {
           <DescriptionLabel theme={theme}>{descriptionLabel}</DescriptionLabel>
         )}
         <InputWrapper>
-          {_isSearchType && (
-            <InputSearchIcon name="search" description={descriptionLabel} />
-          )}
+          {_isSearchType && <InputSearchIcon description={descriptionLabel} />}
           <MaskedInput
             {...rest}
             id={this._id}
@@ -139,7 +143,7 @@ class Input extends React.Component {
             )}
           />
           {error && (
-            <InputErrorIcon name="error" description={descriptionLabel} />
+            <InputErrorIcon description={descriptionLabel} theme={theme} />
           )}
           {_isPassword && !error && (
             <InputIcon
diff --git a/components/Input/__snapshots__/Input.mask.unit.test.jsx.snap b/components/Input/__snapshots__/Input.mask.unit.test.jsx.snap
index 454c738e7..b81dec2f4 100644
--- a/components/Input/__snapshots__/Input.mask.unit.test.jsx.snap
+++ b/components/Input/__snapshots__/Input.mask.unit.test.jsx.snap
@@ -195,6 +195,65 @@ exports[`Input component should match snapshots 4`] = `
           "color": "",
         }
       }
+      theme={
+        Object {
+          "colors": Object {
+            "error": Object {
+              "100": "#ffe5e9",
+              "300": "#ff6c82",
+              "500": "#ff2d4d",
+              "700": "#ff223d",
+              "900": "#ac001a",
+            },
+            "neutral": Object {
+              "100": "#f2f2f2",
+              "300": "#cccccc",
+              "500": "#999999",
+              "700": "#4c4c4c",
+              "900": "#191919",
+            },
+            "primary": Object {
+              "100": "#e5edfc",
+              "300": "#5a88de",
+              "500": "#1355d0",
+              "700": "#0e44c4",
+              "900": "#062ab3",
+            },
+            "secondary": Object {
+              "100": "#f5b3cd",
+              "300": "#e84d8b",
+              "500": "#de0059",
+              "700": "#d50048",
+              "900": "#c8002e",
+            },
+            "success": Object {
+              "100": "#edfadf",
+              "300": "#a5e064",
+              "500": "#7ed321",
+              "700": "#6bc818",
+              "900": "#3c6510",
+            },
+            "warning": Object {
+              "100": "#ffefd6",
+              "300": "#f5b24d",
+              "500": "#f09100",
+              "700": "#ec7e00",
+              "900": "#a36300",
+            },
+          },
+          "spacing": Object {
+            "large": 24,
+            "medium": 16,
+            "small": 12,
+            "xlarge": 32,
+            "xsmall": 8,
+            "xxlarge": 40,
+            "xxsmall": 4,
+            "xxxlarge": 48,
+            "xxxsmall": 2,
+          },
+        }
+      }
     >
       error
     </span>
diff --git a/components/Input/sub-components/TextInput.jsx b/components/Input/sub-components/TextInput.jsx
index c8e383546..1ea1b1d51 100644
--- a/components/Input/sub-components/TextInput.jsx
+++ b/components/Input/sub-components/TextInput.jsx
@@ -1,83 +1,78 @@
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
-import Colors from '../../Colors';
-import { spacing } from '../../shared/theme';
+import styled from 'styled-components';
+import { spacing, colors } from '../../shared/theme';
+import { shadow } from '../../shared';
 
 const TextInput = styled.input.attrs({
   type: 'text',
 })`
-  box-sizing: border-box;
-
-  ${({
-    hasIcon,
-    theme: {
-      spacing: { xsmall, small, xxlarge },
-    },
-  }) => `
-    margin-top: ${xsmall}px;
-    padding: ${small}px;
-    ${hasIcon && `padding-right: ${xxlarge}px;`}
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-  `}
-
-  background-color: ${Colors.WHITE};
   border-radius: 4px;
-  border: 1.5px solid ${Colors.BLACK['400']};
   box-sizing: border-box;
-  color: ${Colors.BLACK['700']};
+  box-sizing: border-box;
   font-size: initial;
   height: 44px;
-  min-height: 44px;
   letter-spacing: 0.2px;
+  min-height: 44px;
   outline: none;
   transition: all 0.2s ease-in-out;
   width: 100%;
 
-  :hover,
-  :focus {
-    border-color: ${Colors.BLUE['500']};
-    box-shadow: 0 2px 6px 0 ${Colors.BLUE['50']};
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
   }
 
-  ${({ error }) =>
-    error &&
-    css`
-      border-color: ${Colors.ERROR['500']};
+  &::-webkit-calendar-picker-indicator {
+    display: none;
+  }
 
-      :hover,
-      :focus {
-        border-color: ${Colors.ERROR['500']};
-        box-shadow: 0 2px 6px 0 ${Colors.ERROR['500']};
-      }
-    `};
+  ${({ error, placeholder, defaultValue, value, hasIcon, theme }) => {
+    const {
+      colors: {
+        primary: { 500: primaryColor },
+        error: { 100: error100, 500: error500 },
+        neutral: {
+          100: neutral100,
+          300: neutral300,
+          500: neutral500,
+          700: neutral700,
+        },
+      },
+      spacing: { xsmall, small, xxlarge },
+    } = theme;
 
-  &[disabled] {
-    background-color: ${Colors.BLACK['100']};
-    border-color: ${Colors.BLACK['400']};
-    box-shadow: none;
-    color: ${Colors.BLACK['400']};
-    cursor: not-allowed;
-  }
+    const mainColor = error ? error500 : primaryColor;
 
-  ${({ placeholder, defaultValue, value }) =>
-    placeholder &&
-    !defaultValue &&
-    !value &&
-    `
-    color: ${Colors.BLACK['400']};
-  `}
+    return `
+      background-color: ${neutral100};
+      border: 2px solid ${neutral500};
+      color: ${neutral700};
+      margin-top: ${xsmall}px;
+      padding: ${small}px;
 
-  &::-webkit-calendar-picker-indicator {
-    display: none;
-  }
+      ${hasIcon ? `padding-right: ${xxlarge}px;` : ''}
+      ${error ? `border-color: ${mainColor};` : ''}
+      ${placeholder && !defaultValue && !value ? `color: ${neutral500};` : ''}
 
-  :-webkit-autofill {
-    box-shadow: 0 0 0px 1000px ${Colors.BLUE['200']} inset;
-  }
+      :hover, :focus {
+        border-color: ${mainColor};
+        ${shadow(5, mainColor)({ theme })}
+      }
+
+      &[disabled] {
+        background-color: ${neutral300};
+        border-color: ${neutral500};
+        box-shadow: none;
+        color: ${neutral500};
+        cursor: not-allowed;
+      }
+
+      :-webkit-autofill {
+        box-shadow: 0 0 0px 1000px ${error100} inset;
+      }
+    `;
+  }}
 `;
 
 TextInput.displayName = 'TextInput';
@@ -85,11 +80,12 @@ TextInput.displayName = 'TextInput';
 TextInput.propTypes = {
   theme: PropTypes.shape({
     spacing: PropTypes.object,
+    colors: PropTypes.object,
   }),
 };
 
 TextInput.defaultProps = {
-  theme: { spacing },
+  theme: { spacing, colors },
 };
 
 export default TextInput;
diff --git a/components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap b/components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap
index a0b959a53..bb731ac21 100644
--- a/components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap
+++ b/components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap
@@ -1107,6 +1107,7 @@ exports[`<RadioGroup /> snapshot with an error 1`] = `
   cursor: text;
   font-style: italic;
   font-weight: 600;
+  display: block;
   margin-left: -4px;
 }
 
@@ -1131,10 +1132,10 @@ exports[`<RadioGroup /> snapshot with an error 1`] = `
     />
     Foo
   </label>
-  <div
+  <span
     className="c6"
   >
     Error text
-  </div>
+  </span>
 </div>
 `;
diff --git a/components/TextArea/__snapshots__/TextArea.unit.test.jsx.snap b/components/TextArea/__snapshots__/TextArea.unit.test.jsx.snap
index d00b31f1e..5d8c930bf 100644
--- a/components/TextArea/__snapshots__/TextArea.unit.test.jsx.snap
+++ b/components/TextArea/__snapshots__/TextArea.unit.test.jsx.snap
@@ -559,6 +559,7 @@ exports[`TextArea component should match snapshots 8`] = `
   cursor: text;
   font-style: italic;
   font-weight: 600;
+  display: block;
   padding: 8px 12px 0px;
 }
 
@@ -575,10 +576,10 @@ exports[`TextArea component should match snapshots 8`] = `
     value=""
   />
   
-  <div
+  <span
     className="c2"
   >
     Error message
-  </div>
+  </span>
 </div>
 `;