diff --git a/src/components/input-checkbox.scss b/src/components/input-checkbox.scss
index a0f4e1d..08e17a4 100644
--- a/src/components/input-checkbox.scss
+++ b/src/components/input-checkbox.scss
@@ -1,6 +1,7 @@
 @use '../rem' as *;
 @use '../mixins/focus-outline' as *;
 @use '../mixins/alert-wc' as *;
+@use '../mixins/typography' as *;
 
 @layer kol-theme-component {
 	:host {
@@ -24,7 +25,7 @@
 		gap: rem(calc(0.4 * 16));
 
 		.hint {
-			font-size: rem(calc(0.9 * 16));
+			@include kol-typography-hint;
 		}
 	}
 
diff --git a/src/components/input-color.scss b/src/components/input-color.scss
index 7e17a7d..7ab94d2 100644
--- a/src/components/input-color.scss
+++ b/src/components/input-color.scss
@@ -1,6 +1,7 @@
 @use '../rem' as *;
 @use '../mixins/alert-wc' as *;
 @use '../mixins/input-error' as *;
+@use '../mixins/typography' as *;
 
 @layer kol-theme-component {
 	:host {
@@ -28,8 +29,7 @@
 
 	.kol-input .hint {
 		order: 4;
-		font-size: rem(calc(0.9 * 16));
-		font-style: italic;
+		@include kol-typography-hint;
 	}
 
 	input {
diff --git a/src/components/input-date.scss b/src/components/input-date.scss
index 23eba9e..cf9760b 100644
--- a/src/components/input-date.scss
+++ b/src/components/input-date.scss
@@ -1,6 +1,7 @@
 @use '../rem' as *;
 @use '../mixins/alert-wc' as *;
 @use '../mixins/input-error' as *;
+@use '../mixins/typography' as *;
 
 @layer kol-theme-component {
 	:host {
@@ -28,8 +29,7 @@
 
 	.kol-input .hint {
 		order: 4;
-		font-size: rem(calc(0.9 * 16));
-		font-style: italic;
+		@include kol-typography-hint;
 	}
 
 	input {
diff --git a/src/components/input-email.scss b/src/components/input-email.scss
index 23eba9e..cf9760b 100644
--- a/src/components/input-email.scss
+++ b/src/components/input-email.scss
@@ -1,6 +1,7 @@
 @use '../rem' as *;
 @use '../mixins/alert-wc' as *;
 @use '../mixins/input-error' as *;
+@use '../mixins/typography' as *;
 
 @layer kol-theme-component {
 	:host {
@@ -28,8 +29,7 @@
 
 	.kol-input .hint {
 		order: 4;
-		font-size: rem(calc(0.9 * 16));
-		font-style: italic;
+		@include kol-typography-hint;
 	}
 
 	input {
diff --git a/src/components/input-file.scss b/src/components/input-file.scss
index 7392286..5a17ddc 100644
--- a/src/components/input-file.scss
+++ b/src/components/input-file.scss
@@ -1,6 +1,7 @@
 @use '../rem' as *;
 @use '../mixins/alert-wc' as *;
 @use '../mixins/input-error' as *;
+@use '../mixins/typography' as *;
 
 @layer kol-theme-component {
 	:host {
@@ -28,8 +29,7 @@
 
 	.kol-input .hint {
 		order: 4;
-		font-size: rem(calc(0.9 * 16));
-		font-style: italic;
+		@include kol-typography-hint;
 	}
 
 	.kol-input .input input[type='file'] {
diff --git a/src/components/input-number.scss b/src/components/input-number.scss
index 23eba9e..cf9760b 100644
--- a/src/components/input-number.scss
+++ b/src/components/input-number.scss
@@ -1,6 +1,7 @@
 @use '../rem' as *;
 @use '../mixins/alert-wc' as *;
 @use '../mixins/input-error' as *;
+@use '../mixins/typography' as *;
 
 @layer kol-theme-component {
 	:host {
@@ -28,8 +29,7 @@
 
 	.kol-input .hint {
 		order: 4;
-		font-size: rem(calc(0.9 * 16));
-		font-style: italic;
+		@include kol-typography-hint;
 	}
 
 	input {
diff --git a/src/components/input-password.scss b/src/components/input-password.scss
index 23eba9e..cf9760b 100644
--- a/src/components/input-password.scss
+++ b/src/components/input-password.scss
@@ -1,6 +1,7 @@
 @use '../rem' as *;
 @use '../mixins/alert-wc' as *;
 @use '../mixins/input-error' as *;
+@use '../mixins/typography' as *;
 
 @layer kol-theme-component {
 	:host {
@@ -28,8 +29,7 @@
 
 	.kol-input .hint {
 		order: 4;
-		font-size: rem(calc(0.9 * 16));
-		font-style: italic;
+		@include kol-typography-hint;
 	}
 
 	input {
diff --git a/src/components/input-range.scss b/src/components/input-range.scss
index 08452d5..6a433ee 100644
--- a/src/components/input-range.scss
+++ b/src/components/input-range.scss
@@ -1,6 +1,7 @@
 @use '../rem' as *;
 @use '../mixins/alert-wc' as *;
 @use '../mixins/input-error' as *;
+@use '../mixins/typography' as *;
 
 @layer kol-theme-component {
 	:host {
@@ -32,8 +33,7 @@
 
 	.kol-input .hint {
 		order: 4;
-		font-size: rem(calc(0.9 * 16));
-		font-style: italic;
+		@include kol-typography-hint;
 	}
 
 	input::placeholder {
diff --git a/src/components/input-text.scss b/src/components/input-text.scss
index 23eba9e..cf9760b 100644
--- a/src/components/input-text.scss
+++ b/src/components/input-text.scss
@@ -1,6 +1,7 @@
 @use '../rem' as *;
 @use '../mixins/alert-wc' as *;
 @use '../mixins/input-error' as *;
+@use '../mixins/typography' as *;
 
 @layer kol-theme-component {
 	:host {
@@ -28,8 +29,7 @@
 
 	.kol-input .hint {
 		order: 4;
-		font-size: rem(calc(0.9 * 16));
-		font-style: italic;
+		@include kol-typography-hint;
 	}
 
 	input {
diff --git a/src/components/select.scss b/src/components/select.scss
index e6337c9..cb0ccc6 100644
--- a/src/components/select.scss
+++ b/src/components/select.scss
@@ -1,6 +1,7 @@
 @use '../rem' as *;
 @use '../mixins/alert-wc' as *;
 @use '../mixins/input-error' as *;
+@use '../mixins/typography' as *;
 
 @layer kol-theme-component {
 	:host {
@@ -28,8 +29,7 @@
 
 	.kol-input .hint {
 		order: 4;
-		font-size: rem(calc(0.9 * 16));
-		font-style: italic;
+		@include kol-typography-hint;
 	}
 
 	select {
diff --git a/src/components/textarea.scss b/src/components/textarea.scss
index e0eac67..dad104d 100644
--- a/src/components/textarea.scss
+++ b/src/components/textarea.scss
@@ -1,6 +1,7 @@
 @use '../rem' as *;
 @use '../mixins/alert-wc' as *;
 @use '../mixins/input-error' as *;
+@use '../mixins/typography' as *;
 
 @layer kol-theme-component {
 	:host {
@@ -32,8 +33,7 @@
 
 	.kol-input .hint {
 		order: 5;
-		font-size: rem(calc(0.9 * 16));
-		font-style: italic;
+		@include kol-typography-hint;
 	}
 
 	textarea {