diff --git a/src/core/client/ui/components/InputLabel/__snapshots__/InputLabel.spec.tsx.snap b/src/core/client/ui/components/InputLabel/__snapshots__/InputLabel.spec.tsx.snap
index 25f8d3cdf..ec528e72d 100644
--- a/src/core/client/ui/components/InputLabel/__snapshots__/InputLabel.spec.tsx.snap
+++ b/src/core/client/ui/components/InputLabel/__snapshots__/InputLabel.spec.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<p
-  className="Typography-root Typography-bodyCopy Typography-colorTextPrimary InputLabel-root custom"
+<label
+  className="Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root custom"
 >
   Hello
-</p>
+</label>
 `;
diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css
index 924d6483a..335fc3734 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: calc(16rem / var(--rem-base));
+  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/>
diff --git a/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap b/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
index 1f68a613c..a277de918 100644
--- a/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
+++ b/src/core/client/ui/components/TextField/__snapshots__/TextField.spec.tsx.snap
@@ -4,5 +4,6 @@ exports[`renders correctly 1`] = `
 <input
   className="TextField-root TextField-colorRegular custom"
   defaultValue="Hello World"
+  placeholder=""
 />
 `;
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.css b/src/core/client/ui/components/ValidationMessage/ValidationMessage.css
index 330281ad4..b3d6a6290 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.css
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.css
@@ -1,5 +1,5 @@
 .root {
-  composes: validationMessage from "talk-ui/shared/typography.css";
+  composes: alertMessage from "talk-ui/shared/typography.css";
   position: relative;
   display: inline-flex;
   justify-content: flex-start;
diff --git a/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx b/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx
index ddd3d343e..f336fb06e 100644
--- a/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx
+++ b/src/core/client/ui/components/ValidationMessage/ValidationMessage.spec.tsx
@@ -8,7 +8,6 @@ import ValidationMessage from "./ValidationMessage";
 it("renders correctly", () => {
   const props: PropTypesOf<typeof ValidationMessage> = {
     className: "custom",
-    color: "error",
     children: "Hello World",
   };
   const renderer = TestRenderer.create(<ValidationMessage {...props} />);
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index 9f59d5abe..9213b5d80 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -132,7 +132,7 @@
   letter-spacing: calc(0.2em / 16);
 }
 
-.validationMessage {
+.alertMessage {
   color: var(--palette-common-black);
   font-family: var(--font-family);
   font-weight: var(--font-weight-medium);
@@ -158,3 +158,12 @@
   letter-spacing: calc(0.2em / 16);
   color: var(--palette-text-primary);
 }
+
+.placeholder {
+  font-family: var(--font-family);
+  font-style: normal;
+  font-weight: normal;
+  line-height: calc(16rem / var(--rem-base));
+  font-size: calc(16rem / var(--rem-base));
+  color: var(--palette-grey-lighter);
+}