diff --git a/src/components/general/Typography/Link.stories.tsx b/src/components/general/Typography/Link.stories.tsx
index 74e9e65bf..8786cd167 100644
--- a/src/components/general/Typography/Link.stories.tsx
+++ b/src/components/general/Typography/Link.stories.tsx
@@ -1,35 +1,74 @@
-import { type Meta } from '@storybook/react'
-import { type StoryObj } from '@storybook/react'
-import { Space } from 'src/components'
+import type { Meta } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
+import { Flex, Icon, Space, Tooltip } from 'src/components'
 import { Typography } from 'src/components/general/Typography/Typography'
 import { ExampleStory } from 'src/utils/ExampleStory'
+import { TypographyColors } from './colors'
 
 const meta: Meta<typeof Typography.Link> = {
-  title: 'Components/General/Link',
+  title: 'Components/General/Typography/Link',
   component: props => <Typography.Link {...props}>Example Link</Typography.Link>,
 
   args: {
+    children: 'Example Text',
+    type: undefined,
+    color: undefined,
+    size: 'base',
     code: false,
     copyable: false,
     delete: false,
     disabled: false,
     editable: false,
     ellipsis: false,
-    keyboard: false,
     mark: false,
     strong: false,
     italic: false,
-    type: undefined,
     underline: false,
-    onClick: (event: React.MouseEvent) => {
-      console.log('Link Clicked')
-    },
   },
   argTypes: {
+    children: {
+      control: 'text',
+      name: 'text',
+    },
     type: {
       control: 'select',
       options: ['secondary', 'success', 'warning', 'danger'],
     },
+    size: {
+      control: 'select',
+      options: ['base', 'sm', 'lg', 'xl'],
+    },
+    color: {
+      control: 'select',
+      options: TypographyColors,
+    },
+    copyable: {
+      control: 'boolean',
+    },
+    delete: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    editable: {
+      control: 'boolean',
+    },
+    ellipsis: {
+      control: 'boolean',
+    },
+    mark: {
+      control: 'boolean',
+    },
+    strong: {
+      control: 'boolean',
+    },
+    italic: {
+      control: 'boolean',
+    },
+    code: {
+      control: 'boolean',
+    },
   },
 }
 export default meta
@@ -43,95 +82,28 @@ type Story = StoryObj<typeof Typography.Link>
 
 export const Primary: Story = {}
 
-export const Code: Story = {
-  args: {
-    code: true,
-  },
-}
-
-export const Copyable: Story = {
-  args: {
-    copyable: true,
-  },
-}
-
-export const Deleted: Story = {
-  args: {
-    delete: true,
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-}
-
-export const Editable: Story = {
-  args: {
-    editable: true,
-  },
-}
-
-export const Keyboard: Story = {
-  args: {
-    keyboard: true,
-  },
-}
-
-export const Marked: Story = {
-  args: {
-    mark: true,
-  },
-}
-
-export const Strong: Story = {
-  args: {
-    strong: true,
-  },
-}
-
-export const Italic: Story = {
-  args: {
-    italic: true,
-  },
-}
-
-export const Success: Story = {
-  args: {
-    type: 'success',
-  },
-}
-
-export const Secondary: Story = {
-  args: {
-    type: 'secondary',
-  },
-}
-
-export const Warning: Story = {
-  args: {
-    type: 'warning',
-  },
-}
-
-export const Danger: Story = {
-  args: {
-    type: 'danger',
-  },
-}
-
-export const Underline: Story = {
-  args: {
-    underline: true,
-  },
-}
-
-export const CustomOnClick: Story = {
-  args: {
-    onClick: event => {
-      alert('Custom Click Handler')
-    },
+export const InsideTooltip: Story = {
+  render: () => {
+    return (
+      <ExampleStory title="Link inside a Tooltip">
+        <Flex align="center" gap={2}>
+          <Typography.Text>Typography inside of a tooltip, hover icon to see</Typography.Text>
+          <Tooltip
+            title={
+              <>
+                <Typography.Text tooltip>
+                  Help lorem ipsum{' '}
+                  <Typography.Link href="/" tooltip>
+                    Learn More
+                  </Typography.Link>
+                </Typography.Text>
+              </>
+            }>
+            <Icon name="help" size="sm" />
+          </Tooltip>
+        </Flex>
+      </ExampleStory>
+    )
   },
 }
 
diff --git a/src/components/general/Typography/Paragraph.stories.tsx b/src/components/general/Typography/Paragraph.stories.tsx
index e77bb86c7..1719a6473 100644
--- a/src/components/general/Typography/Paragraph.stories.tsx
+++ b/src/components/general/Typography/Paragraph.stories.tsx
@@ -1,5 +1,5 @@
-import { type Meta } from '@storybook/react'
-import { type StoryObj } from '@storybook/react'
+import type { Meta } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
 import { Typography } from 'src/components/general/Typography/Typography'
 import { ExampleStory } from 'src/utils/ExampleStory'
 import { useMemo } from 'react'
@@ -8,12 +8,16 @@ import { Radio } from 'src/components'
 import { Switch } from 'src/components'
 import { Slider } from 'src/components'
 import { Icon } from 'src/components'
+import { TypographyColors } from './colors'
 
 const meta: Meta<typeof Typography.Paragraph> = {
-  title: 'Components/General/Typography.Paragraph',
+  title: 'Components/General/Typography/Paragraph',
   component: props => <Typography.Paragraph {...props}>Paragraph text goes here</Typography.Paragraph>,
-
   args: {
+    children: 'Example Text',
+    type: undefined,
+    color: undefined,
+    size: 'base',
     code: false,
     copyable: false,
     delete: false,
@@ -23,17 +27,52 @@ const meta: Meta<typeof Typography.Paragraph> = {
     mark: false,
     strong: false,
     italic: false,
-    type: undefined,
     underline: false,
-    onClick: event => {
-      console.log('Paragraph Clicked')
-    },
   },
   argTypes: {
+    children: {
+      control: 'text',
+      name: 'text',
+    },
     type: {
       control: 'select',
       options: ['secondary', 'success', 'warning', 'danger'],
     },
+    size: {
+      control: 'select',
+      options: ['base', 'sm', 'lg', 'xl'],
+    },
+    color: {
+      control: 'select',
+      options: TypographyColors,
+    },
+    copyable: {
+      control: 'boolean',
+    },
+    delete: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    editable: {
+      control: 'boolean',
+    },
+    ellipsis: {
+      control: 'boolean',
+    },
+    mark: {
+      control: 'boolean',
+    },
+    strong: {
+      control: 'boolean',
+    },
+    italic: {
+      control: 'boolean',
+    },
+    code: {
+      control: 'boolean',
+    },
   },
 }
 export default meta
@@ -47,98 +86,6 @@ type Story = StoryObj<typeof Typography.Paragraph>
 
 export const Primary: Story = {}
 
-export const Code: Story = {
-  args: {
-    code: true,
-  },
-}
-
-export const Copyable: Story = {
-  args: {
-    copyable: true,
-  },
-}
-
-export const DeletedLine: Story = {
-  args: {
-    delete: true,
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-}
-
-export const Editable: Story = {
-  args: {
-    editable: true,
-  },
-}
-
-export const Ellipsis: Story = {
-  args: {
-    ellipsis: true,
-  },
-}
-
-export const Marked: Story = {
-  args: {
-    mark: true,
-  },
-}
-
-export const Strong: Story = {
-  args: {
-    strong: true,
-  },
-}
-
-export const Italic: Story = {
-  args: {
-    italic: true,
-  },
-}
-
-export const Success: Story = {
-  args: {
-    type: 'success',
-  },
-}
-
-export const Secondary: Story = {
-  args: {
-    type: 'secondary',
-  },
-}
-
-export const Warning: Story = {
-  args: {
-    type: 'warning',
-  },
-}
-
-export const Danger: Story = {
-  args: {
-    type: 'danger',
-  },
-}
-
-export const Underline: Story = {
-  args: {
-    underline: true,
-  },
-}
-
-export const CustomOnClick: Story = {
-  args: {
-    onClick: event => {
-      alert('Custom Click Handler')
-    },
-  },
-}
-
 export const ExampleEditable: Story = {
   render: () => {
     const [editableStr, setEditableStr] = useState('This is an editable text.')
diff --git a/src/components/general/Typography/Text.stories.tsx b/src/components/general/Typography/Text.stories.tsx
index 35a867493..5edac07f7 100644
--- a/src/components/general/Typography/Text.stories.tsx
+++ b/src/components/general/Typography/Text.stories.tsx
@@ -1,35 +1,38 @@
-import { type Meta } from '@storybook/react'
-import { type StoryObj } from '@storybook/react'
+import type { Meta } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
 import { Space } from 'src/components'
 import { Switch } from 'src/components'
 import { Typography } from 'src/components/general/Typography/Typography'
 import { ExampleStory } from 'src/utils/ExampleStory'
 import { useState } from 'react'
 import { expect } from '@storybook/test'
+import { ColorText } from 'src/styles/style'
+import { TypographyColors } from './colors'
 
 const meta: Meta<typeof Typography.Text> = {
-  title: 'Components/General/Typography.Text',
-  component: props => <Typography.Text {...props}>Example Text</Typography.Text>,
-
+  title: 'Components/General/Typography/Text',
+  component: props => <Typography.Text {...props}>{props.children}</Typography.Text>,
   args: {
-    code: false,
+    children: 'Example Text',
+    type: undefined,
+    color: undefined,
     size: 'base',
+    code: false,
     copyable: false,
     delete: false,
     disabled: false,
     editable: false,
     ellipsis: false,
-    keyboard: false,
     mark: false,
     strong: false,
     italic: false,
-    type: undefined,
     underline: false,
-    onClick: (event: React.MouseEvent) => {
-      console.log('Text Clicked')
-    },
   },
   argTypes: {
+    children: {
+      control: 'text',
+      name: 'text',
+    },
     type: {
       control: 'select',
       options: ['secondary', 'success', 'warning', 'danger'],
@@ -38,113 +41,48 @@ const meta: Meta<typeof Typography.Text> = {
       control: 'select',
       options: ['base', 'sm', 'lg', 'xl'],
     },
+    color: {
+      control: 'select',
+      options: TypographyColors,
+    },
+    copyable: {
+      control: 'boolean',
+    },
+    delete: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    editable: {
+      control: 'boolean',
+    },
+    ellipsis: {
+      control: 'boolean',
+    },
+    mark: {
+      control: 'boolean',
+    },
+    strong: {
+      control: 'boolean',
+    },
+    italic: {
+      control: 'boolean',
+    },
+    code: {
+      control: 'boolean',
+    },
   },
 }
 export default meta
 
 type Story = StoryObj<typeof Typography.Text>
 
-/*
-  Initial story templates generated by AI.
-  Customize the stories based on specific requirements.
-*/
-
 export const Primary: Story = {
   play: async context => {
     const text = context.canvasElement.querySelector('span')
     void expect(text?.textContent).toEqual('Example Text')
-  },
-}
-
-export const Code: Story = {
-  args: {
-    code: true,
-  },
-}
-
-export const Copyable: Story = {
-  args: {
-    copyable: true,
-  },
-}
-
-export const Deleted: Story = {
-  args: {
-    delete: true,
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-}
-
-export const Editable: Story = {
-  args: {
-    editable: true,
-  },
-}
-
-export const Keyboard: Story = {
-  args: {
-    keyboard: true,
-  },
-}
-
-export const Marked: Story = {
-  args: {
-    mark: true,
-  },
-}
-
-export const Strong: Story = {
-  args: {
-    strong: true,
-  },
-}
-
-export const Italic: Story = {
-  args: {
-    italic: true,
-  },
-}
-
-export const Success: Story = {
-  args: {
-    type: 'success',
-  },
-}
-
-export const Secondary: Story = {
-  args: {
-    type: 'secondary',
-  },
-}
-
-export const Warning: Story = {
-  args: {
-    type: 'warning',
-  },
-}
-
-export const Danger: Story = {
-  args: {
-    type: 'danger',
-  },
-}
-
-export const Underline: Story = {
-  args: {
-    underline: true,
-  },
-}
-
-export const CustomOnClick: Story = {
-  args: {
-    onClick: event => {
-      alert('Custom Click Handler')
-    },
+    void expect(text?.style.color).toEqual(ColorText)
   },
 }
 
@@ -153,19 +91,19 @@ export const ExampleTexts: Story = {
     return (
       <ExampleStory title={<> </>}>
         <Space direction="vertical">
-          <Typography.Text>Ant Design (default)</Typography.Text>
-          <Typography.Text type="secondary">Ant Design (secondary)</Typography.Text>
-          <Typography.Text type="success">Ant Design (success)</Typography.Text>
-          <Typography.Text type="warning">Ant Design (warning)</Typography.Text>
-          <Typography.Text type="danger">Ant Design (danger)</Typography.Text>
-          <Typography.Text disabled>Ant Design (disabled)</Typography.Text>
-          <Typography.Text mark>Ant Design (mark)</Typography.Text>
-          <Typography.Text code>Ant Design (code)</Typography.Text>
-          <Typography.Text keyboard>Ant Design (keyboard)</Typography.Text>
-          <Typography.Text underline>Ant Design (underline)</Typography.Text>
-          <Typography.Text delete>Ant Design (delete)</Typography.Text>
-          <Typography.Text strong>Ant Design (strong)</Typography.Text>
-          <Typography.Text italic>Ant Design (italic)</Typography.Text>
+          <Typography.Text>Aquarium (default)</Typography.Text>
+          <Typography.Text type="secondary">Aquarium (secondary)</Typography.Text>
+          <Typography.Text type="success">Aquarium (success)</Typography.Text>
+          <Typography.Text type="warning">Aquarium (warning)</Typography.Text>
+          <Typography.Text type="danger">Aquarium (danger)</Typography.Text>
+          <Typography.Text disabled>Aquarium (disabled)</Typography.Text>
+          <Typography.Text mark>Aquarium (mark)</Typography.Text>
+          <Typography.Text code>Aquarium (code)</Typography.Text>
+          <Typography.Text keyboard>Aquarium (keyboard)</Typography.Text>
+          <Typography.Text underline>Aquarium (underline)</Typography.Text>
+          <Typography.Text delete>Aquarium (delete)</Typography.Text>
+          <Typography.Text strong>Aquarium (strong)</Typography.Text>
+          <Typography.Text italic>Aquarium (italic)</Typography.Text>
         </Space>
       </ExampleStory>
     )
diff --git a/src/components/general/Typography/Title.stories.tsx b/src/components/general/Typography/Title.stories.tsx
index 3d60f9b03..61617f1f4 100644
--- a/src/components/general/Typography/Title.stories.tsx
+++ b/src/components/general/Typography/Title.stories.tsx
@@ -1,38 +1,35 @@
-import { type Meta } from '@storybook/react'
-import { type StoryObj } from '@storybook/react'
+import type { Meta } from '@storybook/react'
+import type { StoryObj } from '@storybook/react'
 import { Typography } from 'src/components/general/Typography/Typography'
 import { ExampleStory } from 'src/utils/ExampleStory'
 
 const meta: Meta<typeof Typography.Title> = {
-  title: 'Components/General/Title',
+  title: 'Components/General/Typography/Title',
   component: Typography.Title,
-
-  args: {},
 }
+
 export default meta
 
 type Story = StoryObj<typeof Typography.Title>
 
-export const Primary = {}
-
-export const ExampleHeadings: Story = {
+export const Primary: Story = {
   render: () => {
     return (
       <ExampleStory title="Different Headings.">
         <Typography.Title editable level={1} style={{ margin: 0 }}>
-          h1. Ant Design
+          h1. Aquarium Component Library
         </Typography.Title>
         <Typography.Title editable level={2} style={{ margin: 0 }}>
-          h2. Ant Design
+          h2. Aquarium Component Library
         </Typography.Title>
         <Typography.Title editable level={3} style={{ margin: 0 }}>
-          h3. Ant Design
+          h3. Aquarium Component Library
         </Typography.Title>
         <Typography.Title editable level={4} style={{ margin: 0 }}>
-          h4. Ant Design
+          h4. Aquarium Component Library
         </Typography.Title>
         <Typography.Title editable level={5} style={{ margin: 0 }}>
-          h5. Ant Design
+          h5. Aquarium Component Library
         </Typography.Title>
       </ExampleStory>
     )
diff --git a/src/components/general/Typography/Typography.tsx b/src/components/general/Typography/Typography.tsx
index 76a911c92..4b4fb1bd6 100644
--- a/src/components/general/Typography/Typography.tsx
+++ b/src/components/general/Typography/Typography.tsx
@@ -1,29 +1,14 @@
-import {
-  Typography as AntTypography,
-  type TypographyProps as AntTypographyProps,
-  ConfigProvider as AntConfigProvider,
-} from 'antd'
+import { Typography as AntTypography } from 'antd'
 import { ConfigProvider } from 'src/components'
-import { type ReactNode } from 'react'
-import { type TextProps as AntTextProps } from 'antd/es/typography/Text'
-import { type TitleProps as AntTitleProps } from 'antd/es/typography/Title'
-import { type LinkProps as AntLinkProps } from 'antd/es/typography/Link'
-import { type ParagraphProps as AntParagraphProps } from 'antd/es/typography/Paragraph'
+import type { ReactNode } from 'react'
+import type { TextProps as AntTextProps } from 'antd/es/typography/Text'
+import type { TitleProps as AntTitleProps } from 'antd/es/typography/Title'
+import type { LinkProps as AntLinkProps } from 'antd/es/typography/Link'
+import type { ParagraphProps as AntParagraphProps } from 'antd/es/typography/Paragraph'
+import { getColorFromStyles, type TypographyColor } from './colors'
+import { ColorTextLightSolid } from 'src/styles/style'
 
-export interface ITypographyProps extends AntTypographyProps {
-  children: ReactNode
-}
-
-export const Typography = (props: ITypographyProps) => (
-  <ConfigProvider>
-    <AntTypography {...props}>{props.children}</AntTypography>
-  </ConfigProvider>
-)
-
-type TypographySize = 'base' | 'sm' | 'lg' | 'xl'
-export interface ITextProps extends AntTextProps {
-  size?: TypographySize
-}
+type TypographySize = 'base' | 'sm' | 'lg' | 'xl' | number
 
 // TODO: Replace hardcoded values in getFontSize and getLineHeight with tokens when design is ready
 // These values are currently coming from https://www.figma.com/design/LffDbOUjeYqDMZ3djs9Cga/mParticle-Foundation-v1.0.1?node-id=3745-8164&m=dev
@@ -31,7 +16,8 @@ const getFontSize = (size: TypographySize): number => {
   if (size === 'base') return 14
   if (size === 'sm') return 12
   if (size === 'lg') return 16
-  return 20
+  if (size === 'xl') return 20
+  return size
 }
 
 const getLineHeight = (size: TypographySize): number => {
@@ -41,50 +27,116 @@ const getLineHeight = (size: TypographySize): number => {
   return 1.4
 }
 
-const Text = ({ size = 'base', ...props }: ITextProps) => {
-  const fontSize = getFontSize(size)
-  const lineHeight = getLineHeight(size)
+/**
+ * @v-gtiburcio some feedback regarding the link component that migh be useful for aquarium documentation.
+ * a) there is no size prop to control the font-size 😢
+ * b) if you want to match link color to be the same as the Typography.Text,
+ * the only way is to override the style. but it removes the hover state. so here I wanted something that looks like Typography.Text,
+ * but behaves like Typography.Link. for both options I had to do some sacrifices 😅
+ *
+ * @v-gtiburcio awesome! 2 main things I've noticed re: link component are changing color to match with the text or adjusting font size
+ */
+
+interface InternalTypographyProps {
+  size?: TypographySize
+  color?: TypographyColor
+  children: ReactNode
+}
+
+export const Typography = () => {
+  return <>DO NOT USE</>
+}
+
+type InternalTextProps = InternalTypographyProps & AntTextProps
+type InternalTitleProps = InternalTypographyProps & AntTitleProps
+type InternalLinkProps = InternalTypographyProps & AntLinkProps
+type InternalParagraphProps = InternalTypographyProps & AntParagraphProps
+
+export interface ITextProps extends InternalTextProps {
+  tooltip?: boolean
+}
+
+export interface ITitleProps extends InternalTitleProps {}
+
+export interface ILinkProps extends InternalLinkProps {
+  tooltip?: boolean
+}
+
+export interface IParagraphProps extends InternalParagraphProps {}
+
+// Tried generalizing into a higher order component but couldn't do it type-safely, so just repeated the code
+const Text = (props: ITextProps) => {
+  const { size, color, type, tooltip, children, ...rest } = props
+
+  const fontSize = size ? getFontSize(size) : undefined
+  const lineHeight = size ? getLineHeight(size) : undefined
+  const fontColor = !type && color ? getColorFromStyles(color) : tooltip ? ColorTextLightSolid : undefined
 
   return (
     <ConfigProvider>
-      <AntConfigProvider theme={{ components: { Typography: { fontSize, lineHeight } } }}>
-        <AntTypography.Text {...props}>{props.children}</AntTypography.Text>
-      </AntConfigProvider>
+      <AntTypography.Text style={{ color: fontColor, fontSize, lineHeight, ...props.style }} type={type} {...rest}>
+        {children}
+      </AntTypography.Text>
     </ConfigProvider>
   )
 }
 
 Typography.Text = Text
 
-interface ITitleProps extends AntTitleProps {
-  children: ReactNode
+const Title = (props: ITitleProps) => {
+  const { size, color, type, children, ...rest } = props
+
+  const fontSize = size ? getFontSize(size) : undefined
+  const lineHeight = size ? getLineHeight(size) : undefined
+  const fontColor = !type && color ? getColorFromStyles(color) : undefined
+
+  return (
+    <ConfigProvider>
+      <AntTypography.Title style={{ color: fontColor, fontSize, lineHeight, ...props.style }} type={type} {...rest}>
+        {children}
+      </AntTypography.Title>
+    </ConfigProvider>
+  )
 }
 
-const Title = (props: ITitleProps) => (
-  <ConfigProvider>
-    <AntTypography.Title {...props}>{props.children}</AntTypography.Title>
-  </ConfigProvider>
-)
 Typography.Title = Title
 
-export interface ILinkProps extends AntLinkProps {
-  children: ReactNode
+const Link = (props: ILinkProps) => {
+  const { size, color, type, tooltip, underline, children, ...rest } = props
+
+  const fontSize = size ? getFontSize(size) : undefined
+  const lineHeight = size ? getLineHeight(size) : undefined
+  const fontColor = !type && color ? getColorFromStyles(color) : tooltip ? ColorTextLightSolid : undefined
+
+  return (
+    <ConfigProvider>
+      <AntTypography.Link
+        style={{ color: fontColor, fontSize, lineHeight, ...props.style }}
+        type={type}
+        underline={tooltip ?? underline}
+        {...rest}>
+        {children}
+      </AntTypography.Link>
+    </ConfigProvider>
+  )
 }
 
-const Link = (props: ILinkProps) => (
-  <ConfigProvider>
-    <AntTypography.Link {...props}>{props.children}</AntTypography.Link>
-  </ConfigProvider>
-)
 Typography.Link = Link
 
-export interface IParagraphProps extends AntParagraphProps {
-  children: ReactNode
+const Paragraph = (props: IParagraphProps) => {
+  const { size, color, type, children, ...rest } = props
+
+  const fontSize = size ? getFontSize(size) : undefined
+  const lineHeight = size ? getLineHeight(size) : undefined
+  const fontColor = !type && color ? getColorFromStyles(color) : undefined
+
+  return (
+    <ConfigProvider>
+      <AntTypography.Paragraph style={{ color: fontColor, fontSize, lineHeight, ...props.style }} type={type} {...rest}>
+        {children}
+      </AntTypography.Paragraph>
+    </ConfigProvider>
+  )
 }
 
-const Paragraph = (props: IParagraphProps) => (
-  <ConfigProvider>
-    <AntTypography.Paragraph {...props}>{props.children}</AntTypography.Paragraph>
-  </ConfigProvider>
-)
 Typography.Paragraph = Paragraph
diff --git a/src/components/general/Typography/colors.ts b/src/components/general/Typography/colors.ts
new file mode 100644
index 000000000..af807bcd0
--- /dev/null
+++ b/src/components/general/Typography/colors.ts
@@ -0,0 +1,41 @@
+import * as styles from '../../../styles/style'
+
+export const TypographyColors = [
+  'ColorText',
+  'ColorTextSecondary',
+  'ColorTextTertiary',
+  'ColorTextQuaternary',
+  'ColorInfoText',
+  'ColorInfoTextActive',
+  'ColorPrimaryTextHover',
+  'ColorPrimaryText',
+  'ColorPrimaryTextActive',
+  'ColorSuccessTextHover',
+  'ColorSuccessText',
+  'ColorSuccessTextActive',
+  'ColorErrorTextHover',
+  'ColorErrorText',
+  'ColorErrorTextActive',
+  'ColorWarningTextHover',
+  'ColorWarningText',
+  'ColorWarningTextActive',
+  'ColorLink',
+  'ColorLinkHover',
+  'ColorLinkActive',
+  'ColorTextPlaceholder',
+  'ColorTextDisabled',
+  'ColorTextHeading',
+  'ColorTextLabel',
+  'ColorTextDescription',
+  'ColorTextLightSolid',
+] as const
+
+export type TypographyColor = (typeof TypographyColors)[number]
+
+export function getColorFromStyles(color: TypographyColor | string): string {
+  if (styles[color as TypographyColor]) {
+    return (styles as unknown as Record<TypographyColor, string>)[color as TypographyColor]
+  }
+
+  return color
+}