diff --git a/src/components/Typo/index.ts b/src/components/Typo/index.ts
index 3346479..dd6911f 100644
--- a/src/components/Typo/index.ts
+++ b/src/components/Typo/index.ts
@@ -1,12 +1,16 @@
-import { FontWeight, GrayscaleColors, styled } from 'styled-components'
+import { BrandColors, FontWeight, GrayscaleColors, styled } from 'styled-components'
 
 type TypoProps = {
-  color?: keyof GrayscaleColors
+  color?: keyof GrayscaleColors | keyof BrandColors
   weight?: FontWeight
 }
 
 const Typo = styled.p<TypoProps>`
-  color: ${({ color }) => (color ? color : 'inherit')};
+  color: ${({ theme, color }) =>
+    theme.colors.grayscale[color as keyof GrayscaleColors] ||
+    theme.colors.brand[color as keyof BrandColors] ||
+    'inherit'};
+
   font-weight: ${({ weight }) => (weight ? weight : 400)};
 `