diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css
index 924d6483a..eb8ac9ee9 100644
--- a/src/core/client/ui/components/TextField/TextField.css
+++ b/src/core/client/ui/components/TextField/TextField.css
@@ -8,7 +8,7 @@
 }
 
 .colorRegular {
-  backgroun-color: var(--palette-common-white);
+  background-color: var(--palette-common-white);
   color: var(--palette-common-black);
   border: 1px solid var(--palette-grey-light);
 }
@@ -16,10 +16,18 @@
 .colorError {
   background-color: var(--palette-common-white);
   border-color: var(--palette-error-main);
-  border: 2px solid #FA4643;
+  border: 2px solid var(--palette-error-darkest);
 }
 
 .fullWidth {
   width: 100%;
 }
 
+::placeholder {
+  font-family: var(--font-family);
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  font-size: calc(16rem / var(--rem-base));
+  color: var(--palette-grey-lighter);
+}
diff --git a/src/core/client/ui/components/TextField/TextField.mdx b/src/core/client/ui/components/TextField/TextField.mdx
index 82196c778..bbfceb20d 100644
--- a/src/core/client/ui/components/TextField/TextField.mdx
+++ b/src/core/client/ui/components/TextField/TextField.mdx
@@ -12,6 +12,7 @@ import Flex from '../Flex'
 ## Basic Use
 <Playground>
   <Flex itemGutter direction="column">
+    <TextField placeholder="This is a placeholder" />
     <TextField defaultValue="This is an input field" />
     <TextField color="error" defaultValue="A TextField with an error" />
     <TextField color="error" defaultValue="A TextField with an error" fullWidth/>