diff --git a/src/components/Hint/index.js b/src/components/Hint/index.js
index 8db83814bd..31e1220969 100644
--- a/src/components/Hint/index.js
+++ b/src/components/Hint/index.js
@@ -12,8 +12,6 @@ export const Hint = forwardRef(({ children, variant }, ref) => (
 Hint.displayName = 'Hint'
 
 Hint.propTypes = {
-  /** Node component from parent */
   children: node,
-  /** Variant of component */
   variant: oneOf(['warning', 'error'])
 }
diff --git a/src/components/Hint/index.test.js b/src/components/Hint/index.test.js
index b5b4159522..c5aadbdb5e 100644
--- a/src/components/Hint/index.test.js
+++ b/src/components/Hint/index.test.js
@@ -12,7 +12,7 @@ describe('<Hint>', () => {
     const button = getByTestId('hint')
 
     expect(button).toHaveTextContent(content)
-    expect(button).toHaveStyleRule('color', undefined)
+    expect(button).toHaveStyleRule('color', '#8e8e8e')
   })
 
   it('should render correctly with a state', () => {
diff --git a/src/components/Hint/styles.js b/src/components/Hint/styles.js
index c8ead8f387..c9d0343876 100644
--- a/src/components/Hint/styles.js
+++ b/src/components/Hint/styles.js
@@ -5,9 +5,8 @@ import { getVariantStateColor, system } from '../../utils/'
 
 export const Hint = styled.div(
   props => css`
-    font-family: texts;
-    color: ${getVariantStateColor(props.variant)};
     ${th('fields.hint')};
+    color: ${getVariantStateColor(props.variant)};
     margin-top: sm;
     ${system};
   `
diff --git a/src/theme/fields.js b/src/theme/fields.js
index e625072118..aff4825a42 100644
--- a/src/theme/fields.js
+++ b/src/theme/fields.js
@@ -53,6 +53,7 @@ export const getFields = theme => {
       color: colors.nude[600]
     },
     hint: {
+      color: colors.nude[600],
       'font-size': fontSizes.body3,
       'font-weight': fontWeights.regular
     },
diff --git a/src/utils/variants.js b/src/utils/variants.js
index 8dc224bdf5..2f3e5e4c88 100644
--- a/src/utils/variants.js
+++ b/src/utils/variants.js
@@ -21,7 +21,7 @@ export const getHintText = ({ connected, error, hint, touched, warning }) => {
   }
 }
 
-const variantStateColors = {
+const VARIANTS = {
   focused: 'colors.primary.500',
   error: 'colors.danger.500',
   warning: 'colors.warning.500',
@@ -29,7 +29,7 @@ const variantStateColors = {
 }
 
 export const getVariantStateColor = variant => {
-  const variantColor = variantStateColors[variant]
+  const variantColor = VARIANTS[variant]
   return variantColor ? th(variantColor) : null
 }
 
@@ -45,7 +45,7 @@ const variantColors = {
   secondary: 'colors.secondary.500',
   turquoize: 'colors.sub.turquoize',
   yellow: 'colors.sub.yellow',
-  ...variantStateColors
+  ...VARIANTS
 }
 
 export const getVariantColor = variant => {