diff --git a/src/components/button/index.ts b/src/components/button/index.ts
index eae9c8e..e41b2b7 100644
--- a/src/components/button/index.ts
+++ b/src/components/button/index.ts
@@ -1 +1,2 @@
 export { default as Button } from './Button';
+export { KIND, SHAPE, SIZE } from './constants';
diff --git a/src/components/typography/Typography.stories.tsx b/src/components/typography/Typography.stories.tsx
new file mode 100644
index 0000000..f2688cc
--- /dev/null
+++ b/src/components/typography/Typography.stories.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import {
+  HeadingXXLarge,
+  HeadingXLarge,
+  HeadingLarge,
+  HeadingMedium,
+  HeadingSmall,
+  HeadingXSmall,
+  DisplayLarge,
+  DisplayMedium,
+  DisplaySmall,
+  DisplayXSmall,
+  LabelLarge,
+  LabelMedium,
+  LabelSmall,
+  LabelXSmall,
+  ParagraphLarge,
+  ParagraphMedium,
+  ParagraphSmall,
+  ParagraphXSmall,
+  CaptionMedium,
+  CaptionSmall,
+} from './Typography';
+
+storiesOf('Typography', module)
+  .add('display', () => (
+    <>
+      <DisplayLarge>Display Large</DisplayLarge>
+      <DisplayMedium>Display Medium</DisplayMedium>
+      <DisplaySmall>Display Small</DisplaySmall>
+      <DisplayXSmall>Display XSmall</DisplayXSmall>
+    </>
+  ))
+  .add('heading', () => (
+    <>
+      <HeadingXXLarge>Heading XXLarge</HeadingXXLarge>
+      <HeadingXLarge>Heading XLarge</HeadingXLarge>
+      <HeadingLarge>Heading Large</HeadingLarge>
+      <HeadingMedium>Heading Medium</HeadingMedium>
+      <HeadingSmall>Heading Small</HeadingSmall>
+      <HeadingXSmall>Heading XSmall</HeadingXSmall>
+    </>
+  ))
+  .add('label', () => (
+    <>
+      <LabelLarge>Label Large</LabelLarge>
+      <LabelMedium>Label Medium</LabelMedium>
+      <LabelSmall>Label Small</LabelSmall>
+      <LabelXSmall>Label XSmall</LabelXSmall>
+    </>
+  ))
+  .add('paragraph', () => (
+    <>
+      <ParagraphLarge>Paragraph Large</ParagraphLarge>
+      <ParagraphMedium>Paragraph Medium</ParagraphMedium>
+      <ParagraphSmall>Paragraph Small</ParagraphSmall>
+      <ParagraphXSmall>Paragraph XSmall</ParagraphXSmall>
+    </>
+  ))
+  .add('caption', () => (
+    <>
+      <CaptionMedium>Caption Medium</CaptionMedium>
+      <CaptionSmall>Caption Small</CaptionSmall>
+    </>
+  ));
diff --git a/src/components/typography/Typography.tsx b/src/components/typography/Typography.tsx
new file mode 100644
index 0000000..8e176e6
--- /dev/null
+++ b/src/components/typography/Typography.tsx
@@ -0,0 +1,150 @@
+import React, { FC, useMemo } from 'react';
+import { Text as RNText } from 'react-native';
+import { useThemedStyle } from '@gorhom/base-ui';
+import { stylesCreator } from './styles';
+import { FONT, COLOR } from './constants';
+
+import type { TypographyProps } from './types';
+
+const createTypography = (
+  _font: string,
+  _color: string
+): FC<TypographyProps> => ({
+  font: _providedFont,
+  color: _providedColor,
+  style: _providedStyle,
+  ...rest
+}) => {
+  //#region variables
+  const font = useMemo(() => (_providedFont ? _providedFont : _font), [
+    _providedFont,
+  ]);
+  const color = useMemo(() => (_providedColor ? _providedColor : _color), [
+    _providedColor,
+  ]);
+  //#endregion
+
+  //#region styles
+  const styles = useThemedStyle(stylesCreator, font, color);
+  const textStyle = useMemo(() => [styles.text, _providedStyle], [
+    styles.text,
+    _providedStyle,
+  ]);
+  //#endregion
+  return <RNText style={textStyle} {...rest} />;
+};
+
+//#region display
+export const DisplayLarge = createTypography(
+  FONT.DisplayLarge,
+  COLOR.contentPrimary
+);
+DisplayLarge.displayName = FONT.DisplayLarge;
+export const DisplayMedium = createTypography(
+  FONT.DisplayMedium,
+  COLOR.contentPrimary
+);
+DisplayMedium.displayName = FONT.DisplayMedium;
+export const DisplaySmall = createTypography(
+  FONT.DisplaySmall,
+  COLOR.contentPrimary
+);
+DisplaySmall.displayName = FONT.DisplaySmall;
+export const DisplayXSmall = createTypography(
+  FONT.DisplayXSmall,
+  COLOR.contentPrimary
+);
+DisplayXSmall.displayName = FONT.DisplayXSmall;
+//#endregion
+
+//#region heading
+export const HeadingXXLarge = createTypography(
+  FONT.HeadingXXLarge,
+  COLOR.contentPrimary
+);
+HeadingXXLarge.displayName = FONT.HeadingXXLarge;
+export const HeadingXLarge = createTypography(
+  FONT.HeadingXLarge,
+  COLOR.contentPrimary
+);
+HeadingXLarge.displayName = FONT.HeadingXLarge;
+export const HeadingLarge = createTypography(
+  FONT.HeadingLarge,
+  COLOR.contentPrimary
+);
+HeadingLarge.displayName = FONT.HeadingLarge;
+export const HeadingMedium = createTypography(
+  FONT.HeadingMedium,
+  COLOR.contentPrimary
+);
+HeadingMedium.displayName = FONT.HeadingMedium;
+export const HeadingSmall = createTypography(
+  FONT.HeadingSmall,
+  COLOR.contentPrimary
+);
+HeadingSmall.displayName = FONT.HeadingSmall;
+export const HeadingXSmall = createTypography(
+  FONT.HeadingXSmall,
+  COLOR.contentPrimary
+);
+HeadingXSmall.displayName = FONT.HeadingXSmall;
+//#endregion
+
+//#region label
+export const LabelLarge = createTypography(
+  FONT.LabelLarge,
+  COLOR.contentPrimary
+);
+LabelLarge.displayName = FONT.LabelLarge;
+export const LabelMedium = createTypography(
+  FONT.LabelMedium,
+  COLOR.contentPrimary
+);
+LabelMedium.displayName = FONT.LabelMedium;
+export const LabelSmall = createTypography(
+  FONT.LabelSmall,
+  COLOR.contentPrimary
+);
+LabelSmall.displayName = FONT.LabelSmall;
+export const LabelXSmall = createTypography(
+  FONT.LabelXSmall,
+  COLOR.contentPrimary
+);
+LabelXSmall.displayName = FONT.LabelXSmall;
+//#endregion
+
+//#region paragraph
+export const ParagraphLarge = createTypography(
+  FONT.ParagraphLarge,
+  COLOR.contentPrimary
+);
+ParagraphLarge.displayName = FONT.ParagraphLarge;
+export const ParagraphMedium = createTypography(
+  FONT.ParagraphMedium,
+  COLOR.contentPrimary
+);
+ParagraphLarge.displayName = FONT.ParagraphMedium;
+export const ParagraphSmall = createTypography(
+  FONT.ParagraphSmall,
+  COLOR.contentPrimary
+);
+ParagraphSmall.displayName = FONT.ParagraphSmall;
+export const ParagraphXSmall = createTypography(
+  FONT.ParagraphXSmall,
+  COLOR.contentPrimary
+);
+ParagraphXSmall.displayName = FONT.ParagraphXSmall;
+//#endregion
+
+//#region caption
+export const CaptionMedium = createTypography(
+  FONT.ParagraphXSmall,
+  COLOR.contentSecondary
+);
+CaptionMedium.displayName = FONT.CaptionMedium;
+export const CaptionSmall = createTypography(
+  FONT.LabelXSmall,
+  COLOR.contentSecondary
+);
+CaptionSmall.displayName = FONT.CaptionSmall;
+//#endregion
diff --git a/src/components/typography/constants.ts b/src/components/typography/constants.ts
new file mode 100644
index 0000000..124ce6b
--- /dev/null
+++ b/src/components/typography/constants.ts
@@ -0,0 +1,33 @@
+enum COLOR {
+  contentPrimary = 'contentPrimary',
+  contentSecondary = 'contentSecondary',
+  contentTertiary = 'contentTertiary',
+  contentInversePrimary = 'contentInversePrimary',
+  contentInverseSecondary = 'contentInverseSecondary',
+  contentInverseTertiary = 'contentInverseTertiary',
+}
+
+enum FONT {
+  ParagraphXSmall = 'ParagraphXSmall',
+  ParagraphSmall = 'ParagraphSmall',
+  ParagraphMedium = 'ParagraphMedium',
+  ParagraphLarge = 'ParagraphLarge',
+  LabelXSmall = 'LabelXSmall',
+  LabelSmall = 'LabelSmall',
+  LabelMedium = 'LabelMedium',
+  LabelLarge = 'LabelLarge',
+  HeadingXSmall = 'HeadingXSmall',
+  HeadingSmall = 'HeadingSmall',
+  HeadingMedium = 'HeadingMedium',
+  HeadingLarge = 'HeadingLarge',
+  HeadingXLarge = 'HeadingXLarge',
+  HeadingXXLarge = 'HeadingXXLarge',
+  DisplayXSmall = 'DisplayXSmall',
+  DisplaySmall = 'DisplaySmall',
+  DisplayMedium = 'DisplayMedium',
+  DisplayLarge = 'DisplayLarge',
+  CaptionMedium = 'CaptionMedium',
+  CaptionSmall = 'CaptionSmall',
+}
+
+export { COLOR, FONT };
diff --git a/src/components/typography/index.ts b/src/components/typography/index.ts
new file mode 100644
index 0000000..525d636
--- /dev/null
+++ b/src/components/typography/index.ts
@@ -0,0 +1,2 @@
+export * from './Typography';
+export { COLOR, FONT } from './constants';
diff --git a/src/components/typography/styles.ts b/src/components/typography/styles.ts
new file mode 100644
index 0000000..d3e1198
--- /dev/null
+++ b/src/components/typography/styles.ts
@@ -0,0 +1,14 @@
+import { createStyles } from '@gorhom/base-ui';
+
+export const stylesCreator = createStyles(
+  (theme, font: string, color: string) => ({
+    text: {
+      // @ts-ignore
+      color: color in theme.colors ? theme.colors[color] : color,
+      ...(font in theme.typography
+        ? //@ts-ignore
+          theme.typography[font]
+        : theme.typography.ParagraphMedium),
+    },
+  })
+);
diff --git a/src/components/typography/types.d.ts b/src/components/typography/types.d.ts
new file mode 100644
index 0000000..c1dde66
--- /dev/null
+++ b/src/components/typography/types.d.ts
@@ -0,0 +1,7 @@
+import type { TextProps } from 'react-native';
+import type { COLOR, FONT } from './constants';
+
+export interface TypographyProps extends TextProps {
+  color?: string | COLOR;
+  font?: string | FONT;
+}
diff --git a/src/index.ts b/src/index.ts
index 73a2c29..3e0f53d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -12,3 +12,4 @@ export type { Theme } from './themes';
 
 // components
 export { Button } from './components/button';
+export * from './components/typography';
diff --git a/src/themes/index.ts b/src/themes/index.ts
index 6164dfe..9e84a6e 100644
--- a/src/themes/index.ts
+++ b/src/themes/index.ts
@@ -1,4 +1,4 @@
 export { DarkTheme, createDarkTheme } from './dark';
 export { createStyles } from './utilities';
 
-export type { Theme } from './types';
+export type { Theme, Typography } from './types';
diff --git a/src/themes/shared/typography.ts b/src/themes/shared/typography.ts
index 8945aae..eca7c1d 100644
--- a/src/themes/shared/typography.ts
+++ b/src/themes/shared/typography.ts
@@ -1,12 +1,9 @@
 import type { Typography, FontTokens, Font } from '../types';
 
 export const defaultFontTokens: FontTokens = {
-  primaryFontFamily:
-    'system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif',
+  primaryFontFamily: 'Helvetica Neue',
 };
 
-const monoFontFamily = '"Lucida Console", Monaco, monospace';
-
 export const getTypography = (
   fontTokens: FontTokens = defaultFontTokens
 ): Typography => {
@@ -19,7 +16,7 @@ export const getTypography = (
   const font150: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: 12,
-    fontWeight: 500,
+    fontWeight: '500',
     lineHeight: 16,
   };
   const font200: Font = {
@@ -31,7 +28,7 @@ export const getTypography = (
   const font250: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: 14,
-    fontWeight: 500,
+    fontWeight: '500',
     lineHeight: 16,
   };
   const font300: Font = {
@@ -43,7 +40,7 @@ export const getTypography = (
   const font350: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: 16,
-    fontWeight: 500,
+    fontWeight: '500',
     lineHeight: 20,
   };
   const font400: Font = {
@@ -55,67 +52,67 @@ export const getTypography = (
   const font450: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: 18,
-    fontWeight: 500,
+    fontWeight: '500',
     lineHeight: 24,
   };
   const font550: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: 20,
-    fontWeight: 500,
+    fontWeight: '500',
     lineHeight: 28,
   };
   const font650: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: 24,
-    fontWeight: 500,
+    fontWeight: '500',
     lineHeight: 32,
   };
   const font750: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: 28,
-    fontWeight: 500,
+    fontWeight: '500',
     lineHeight: 36,
   };
   const font850: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: 32,
-    fontWeight: 500,
+    fontWeight: '500',
     lineHeight: 40,
   };
   const font950: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: 36,
-    fontWeight: 500,
+    fontWeight: '500',
     lineHeight: 44,
   };
   const font1050: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: 40,
-    fontWeight: 500,
+    fontWeight: '500',
     lineHeight: 52,
   };
   const font1150: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: 36,
-    fontWeight: 500,
+    fontWeight: '500',
     lineHeight: 44,
   };
   const font1250: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: 44,
-    fontWeight: 500,
+    fontWeight: '500',
     lineHeight: 52,
   };
   const font1350: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: 52,
-    fontWeight: 500,
+    fontWeight: '500',
     lineHeight: 64,
   };
   const font1450: Font = {
     fontFamily: fontTokens.primaryFontFamily,
     fontSize: 96,
-    fontWeight: 500,
+    fontWeight: '500',
     lineHeight: 112,
   };
 
@@ -157,24 +154,5 @@ export const getTypography = (
     DisplaySmall: font1250,
     DisplayMedium: font1350,
     DisplayLarge: font1450,
-
-    MonoParagraphXSmall: { ...font100, fontFamily: monoFontFamily },
-    MonoParagraphSmall: { ...font200, fontFamily: monoFontFamily },
-    MonoParagraphMedium: { ...font300, fontFamily: monoFontFamily },
-    MonoParagraphLarge: { ...font400, fontFamily: monoFontFamily },
-    MonoLabelXSmall: { ...font150, fontFamily: monoFontFamily },
-    MonoLabelSmall: { ...font250, fontFamily: monoFontFamily },
-    MonoLabelMedium: { ...font350, fontFamily: monoFontFamily },
-    MonoLabelLarge: { ...font450, fontFamily: monoFontFamily },
-    MonoHeadingXSmall: { ...font550, fontFamily: monoFontFamily },
-    MonoHeadingSmall: { ...font650, fontFamily: monoFontFamily },
-    MonoHeadingMedium: { ...font750, fontFamily: monoFontFamily },
-    MonoHeadingLarge: { ...font850, fontFamily: monoFontFamily },
-    MonoHeadingXLarge: { ...font950, fontFamily: monoFontFamily },
-    MonoHeadingXXLarge: { ...font1050, fontFamily: monoFontFamily },
-    MonoDisplayXSmall: { ...font1150, fontFamily: monoFontFamily },
-    MonoDisplaySmall: { ...font1250, fontFamily: monoFontFamily },
-    MonoDisplayMedium: { ...font1350, fontFamily: monoFontFamily },
-    MonoDisplayLarge: { ...font1450, fontFamily: monoFontFamily },
   };
 };
diff --git a/src/themes/types.d.ts b/src/themes/types.d.ts
index 6fb1866..6154dc7 100644
--- a/src/themes/types.d.ts
+++ b/src/themes/types.d.ts
@@ -77,21 +77,22 @@ export interface ColorTokens {
   rating400: string;
 }
 
-export interface CoreSemanticColorTokens {
-  // Background
-  backgroundPrimary: string;
-  backgroundSecondary: string;
-  backgroundTertiary: string;
-  backgroundInversePrimary: string;
-  backgroundInverseSecondary: string;
-
-  // Content
+export interface CoreContentColorTokens {
   contentPrimary: string;
   contentSecondary: string;
   contentTertiary: string;
   contentInversePrimary: string;
   contentInverseSecondary: string;
   contentInverseTertiary: string;
+}
+
+export interface CoreSemanticColorTokens extends CoreContentColorTokens {
+  // Background
+  backgroundPrimary: string;
+  backgroundSecondary: string;
+  backgroundTertiary: string;
+  backgroundInversePrimary: string;
+  backgroundInverseSecondary: string;
 
   // Border
   borderOpaque: string;
@@ -221,7 +222,19 @@ export interface FontTokens {
 
 export type Font = {
   fontFamily: string;
-  fontWeight: 'bold' | 'normal' | 'bolder' | 'lighter' | number;
+  fontWeight:
+    | 'bold'
+    | 'normal'
+    | 'bolder'
+    | 'lighter'
+    | '100'
+    | '200'
+    | '300'
+    | '500'
+    | '600'
+    | '700'
+    | '800'
+    | '900';
   fontSize: number;
   lineHeight: number;
 };
@@ -264,25 +277,6 @@ export interface Typography {
   DisplaySmall: Font;
   DisplayMedium: Font;
   DisplayLarge: Font;
-
-  MonoParagraphXSmall: Font;
-  MonoParagraphSmall: Font;
-  MonoParagraphMedium: Font;
-  MonoParagraphLarge: Font;
-  MonoLabelXSmall: Font;
-  MonoLabelSmall: Font;
-  MonoLabelMedium: Font;
-  MonoLabelLarge: Font;
-  MonoHeadingXSmall: Font;
-  MonoHeadingSmall: Font;
-  MonoHeadingMedium: Font;
-  MonoHeadingLarge: Font;
-  MonoHeadingXLarge: Font;
-  MonoHeadingXXLarge: Font;
-  MonoDisplayXSmall: Font;
-  MonoDisplaySmall: Font;
-  MonoDisplayMedium: Font;
-  MonoDisplayLarge: Font;
 }
 
 export interface Sizing {
diff --git a/storybook/stories/index.ts b/storybook/stories/index.ts
index 7243259..173ec1a 100644
--- a/storybook/stories/index.ts
+++ b/storybook/stories/index.ts
@@ -1 +1,2 @@
 import '../../src/components/button/Button.stories';
+import '../../src/components/typography/Typography.stories';