diff --git a/src/core/client/ui/components/TextField/TextField.css b/src/core/client/ui/components/TextField/TextField.css
index eb8ac9ee9..335fc3734 100644
--- a/src/core/client/ui/components/TextField/TextField.css
+++ b/src/core/client/ui/components/TextField/TextField.css
@@ -27,7 +27,7 @@
   font-family: var(--font-family);
   font-style: normal;
   font-weight: normal;
-  line-height: 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/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/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
index b26303e81..2a80be622 100644
--- a/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
+++ b/src/core/client/ui/components/ValidationMessage/__snapshots__/ValidationMessage.spec.tsx.snap
@@ -3,7 +3,6 @@
 exports[`renders correctly 1`] = `
 <div
   className="ValidationMessage-root ValidationMessage-colorError custom"
-  color="error"
 >
   <span
     className="Icon-root ValidationMessage-icon Icon-sm"
diff --git a/src/core/client/ui/shared/typography.css b/src/core/client/ui/shared/typography.css
index dafe715b2..06287c62a 100644
--- a/src/core/client/ui/shared/typography.css
+++ b/src/core/client/ui/shared/typography.css
@@ -127,7 +127,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);
@@ -153,3 +153,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);
+}