diff --git a/package.json b/package.json
index 2f3350f..d59003b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@giveth/ui-design-system",
-	"version": "1.11.19",
+	"version": "1.11.20",
 	"files": [
 		"/lib"
 	],
diff --git a/src/components/typography/ButtonText.tsx b/src/components/typography/ButtonText.tsx
index 3733fee..44c467c 100644
--- a/src/components/typography/ButtonText.tsx
+++ b/src/components/typography/ButtonText.tsx
@@ -9,6 +9,7 @@ export const ButtonText = styled.span<IButtonTextProps>`
 	font-style: normal;
 	text-transform: uppercase;
 	font-weight: 700;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${props => {
 		switch (props.size) {
 			case 'small':
diff --git a/src/components/typography/GLink.tsx b/src/components/typography/GLink.tsx
index 36b5d60..390bc75 100644
--- a/src/components/typography/GLink.tsx
+++ b/src/components/typography/GLink.tsx
@@ -9,6 +9,7 @@ export const GLink = styled.span<IGLinkProps>`
 	font-style: normal;
 	font-weight: normal;
 	display: inline-block;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${props => {
 		switch (props.size) {
 			case 'Tiny':
diff --git a/src/components/typography/Overline.tsx b/src/components/typography/Overline.tsx
index d00370f..3460c24 100644
--- a/src/components/typography/Overline.tsx
+++ b/src/components/typography/Overline.tsx
@@ -8,6 +8,7 @@ export const Overline = styled.span<IOverlineProps>`
 	/* Overline */
 	font-family: Red Hat Text, sans-serif;
 	line-height: 132%;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${props => {
 		switch (props.styleType) {
 			case 'Small':
diff --git a/src/components/typography/QuoteText.tsx b/src/components/typography/QuoteText.tsx
index 710f9f5..4d3a4b0 100644
--- a/src/components/typography/QuoteText.tsx
+++ b/src/components/typography/QuoteText.tsx
@@ -10,6 +10,7 @@ export const QuoteText = styled.div<IQuoteTextProps>`
 	font-weight: normal;
 	font-style: normal;
 	line-height: 134%;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${props => {
 		switch (props.size) {
 			case 'small':
diff --git a/src/components/typography/body/Caption.tsx b/src/components/typography/body/Caption.tsx
index be46bcf..8c5dc56 100644
--- a/src/components/typography/body/Caption.tsx
+++ b/src/components/typography/body/Caption.tsx
@@ -11,4 +11,5 @@ export const Caption = styled.div<ICaptionProps>`
 	font-weight: ${props => (props.medium ? 500 : 400)};
 	font-size: 0.875rem;
 	line-height: 150%;
+	color: ${props => (props.color ? props.color : 'inherit')};
 `;
diff --git a/src/components/typography/body/Lead.tsx b/src/components/typography/body/Lead.tsx
index c8aa35f..92d42b2 100644
--- a/src/components/typography/body/Lead.tsx
+++ b/src/components/typography/body/Lead.tsx
@@ -15,6 +15,7 @@ export const Lead = styled.div<ILeadProps>`
 	font-style: normal;
 	font-weight: normal;
 	line-height: 150%;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${props => {
 		switch (props.size) {
 			case 'medium':
diff --git a/src/components/typography/body/P.tsx b/src/components/typography/body/P.tsx
index c5fe393..d22c124 100644
--- a/src/components/typography/body/P.tsx
+++ b/src/components/typography/body/P.tsx
@@ -7,4 +7,5 @@ export const P = styled.div`
 	font-weight: normal;
 	font-size: 1rem;
 	line-height: 150%;
+	color: ${props => (props.color ? props.color : 'inherit')};
 `;
diff --git a/src/components/typography/body/SemiTitle.tsx b/src/components/typography/body/SemiTitle.tsx
index 0618f21..21fc589 100644
--- a/src/components/typography/body/SemiTitle.tsx
+++ b/src/components/typography/body/SemiTitle.tsx
@@ -8,4 +8,5 @@ export const SemiTitle = styled.div`
 	font-size: 1rem;
 	line-height: 150%;
 	text-transform: uppercase;
+	color: ${props => (props.color ? props.color : 'inherit')};
 `;
diff --git a/src/components/typography/body/Subline.tsx b/src/components/typography/body/Subline.tsx
index fe65ef3..7cc1e1d 100644
--- a/src/components/typography/body/Subline.tsx
+++ b/src/components/typography/body/Subline.tsx
@@ -7,4 +7,5 @@ export const Subline = styled.div`
 	font-weight: normal;
 	font-size: 0.75rem;
 	line-height: 150%;
+	color: ${props => (props.color ? props.color : 'inherit')};
 `;
diff --git a/src/components/typography/body/Title.tsx b/src/components/typography/body/Title.tsx
index 8e75dd9..9081995 100644
--- a/src/components/typography/body/Title.tsx
+++ b/src/components/typography/body/Title.tsx
@@ -8,4 +8,5 @@ export const Title = styled.div`
 	font-size: 2rem;
 	line-height: 132%;
 	letter-spacing: -0.01em;
+	color: ${props => (props.color ? props.color : 'inherit')};
 `;
diff --git a/src/components/typography/displays/D1.tsx b/src/components/typography/displays/D1.tsx
index e8202f1..8e67f6e 100644
--- a/src/components/typography/displays/D1.tsx
+++ b/src/components/typography/displays/D1.tsx
@@ -9,6 +9,7 @@ export const D1 = styled.div`
 	font-size: 5rem;
 	line-height: 130%;
 	letter-spacing: -0.04em;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 6.69rem;
 	}
diff --git a/src/components/typography/displays/D2.tsx b/src/components/typography/displays/D2.tsx
index 2661dbd..82a2747 100644
--- a/src/components/typography/displays/D2.tsx
+++ b/src/components/typography/displays/D2.tsx
@@ -9,6 +9,7 @@ export const D2 = styled.div`
 	font-size: 4.625rem;
 	line-height: 130%;
 	letter-spacing: -0.04em;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 6.06rem;
 	}
diff --git a/src/components/typography/displays/D3.tsx b/src/components/typography/displays/D3.tsx
index de89c93..1cc19c7 100644
--- a/src/components/typography/displays/D3.tsx
+++ b/src/components/typography/displays/D3.tsx
@@ -9,6 +9,7 @@ export const D3 = styled.div`
 	font-size: 4.25rem;
 	line-height: 120%;
 	letter-spacing: -0.04em;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 5.5rem;
 	}
diff --git a/src/components/typography/headlines/H1.tsx b/src/components/typography/headlines/H1.tsx
index ced6adf..31d8604 100644
--- a/src/components/typography/headlines/H1.tsx
+++ b/src/components/typography/headlines/H1.tsx
@@ -12,6 +12,7 @@ export const H1 = styled.h1<IHeadingProps>`
 	letter-spacing: -0.03em;
 	margin-top: 0;
 	margin-bottom: 0;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 4.125rem;
 	}
diff --git a/src/components/typography/headlines/H2.tsx b/src/components/typography/headlines/H2.tsx
index 0c257ac..a9c518b 100644
--- a/src/components/typography/headlines/H2.tsx
+++ b/src/components/typography/headlines/H2.tsx
@@ -12,6 +12,7 @@ export const H2 = styled.h2<IHeadingProps>`
 	letter-spacing: -0.02em;
 	margin-top: 0;
 	margin-bottom: 0;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 3.25rem;
 	}
diff --git a/src/components/typography/headlines/H3.tsx b/src/components/typography/headlines/H3.tsx
index fa2cd7b..c138a2f 100644
--- a/src/components/typography/headlines/H3.tsx
+++ b/src/components/typography/headlines/H3.tsx
@@ -11,6 +11,7 @@ export const H3 = styled.h3<IHeadingProps>`
 	line-height: 130%;
 	margin-top: 0;
 	margin-bottom: 0;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 2.56rem;
 	}
diff --git a/src/components/typography/headlines/H4.tsx b/src/components/typography/headlines/H4.tsx
index 7d7e10f..6058399 100644
--- a/src/components/typography/headlines/H4.tsx
+++ b/src/components/typography/headlines/H4.tsx
@@ -12,6 +12,7 @@ export const H4 = styled.h4<IHeadingProps>`
 	letter-spacing: -0.01em;
 	margin-top: 0;
 	margin-bottom: 0;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 2rem;
 	}
diff --git a/src/components/typography/headlines/H5.tsx b/src/components/typography/headlines/H5.tsx
index 434ae46..916e979 100644
--- a/src/components/typography/headlines/H5.tsx
+++ b/src/components/typography/headlines/H5.tsx
@@ -12,6 +12,7 @@ export const H5 = styled.h5<IHeadingProps>`
 	letter-spacing: -0.005em;
 	margin-top: 0;
 	margin-bottom: 0;
+	color: ${props => (props.color ? props.color : 'inherit')};
 	${mediaQueries.tablet} {
 		font-size: 1.56rem;
 	}
diff --git a/src/components/typography/headlines/H6.tsx b/src/components/typography/headlines/H6.tsx
index 5f8e292..ac7f2e2 100644
--- a/src/components/typography/headlines/H6.tsx
+++ b/src/components/typography/headlines/H6.tsx
@@ -11,4 +11,5 @@ export const H6 = styled.h6<IHeadingProps>`
 	letter-spacing: -0.005em;
 	margin-top: 0;
 	margin-bottom: 0;
+	color: ${props => (props.color ? props.color : 'inherit')};
 `;
diff --git a/src/stories/typography/body/P.stories.tsx b/src/stories/typography/body/P.stories.tsx
index b5a9aca..ae52382 100644
--- a/src/stories/typography/body/P.stories.tsx
+++ b/src/stories/typography/body/P.stories.tsx
@@ -8,9 +8,11 @@ export default {
 } as ComponentMeta<typeof P>;
 
 const Template: ComponentStory<typeof P> = args => (
-	<P {...args}>
+	<P {...args} color='red'>
 		{args.label || 'Was he a beast if music could move him so?'}
 	</P>
 );
 
-export const Example = Template.bind({});
+export const Example = Template.bind({
+	color: 'red',
+});