diff --git a/apps/storybook-react/stories/Typography.stories.jsx b/apps/storybook-react/stories/Typography.stories.tsx
similarity index 91%
rename from apps/storybook-react/stories/Typography.stories.jsx
rename to apps/storybook-react/stories/Typography.stories.tsx
index 8dab9a729f..5942833514 100644
--- a/apps/storybook-react/stories/Typography.stories.jsx
+++ b/apps/storybook-react/stories/Typography.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
-import { Typography } from '@equinor/eds-core-react'
+import { Typography, TypographyProps } from '@equinor/eds-core-react'
 import styled from 'styled-components'
-import './../style.css'
+import { Story, Meta } from '@storybook/react'
 
 const Wrapper = styled.div`
   margin: 32px;
@@ -15,9 +15,9 @@ const Grid = styled(Wrapper)`
 export default {
   title: 'Components/Typography',
   component: Typography,
-}
+} as Meta
 
-export const headings = () => (
+export const headings: Story<TypographyProps> = () => (
   <Grid>
     <Typography variant="h1" bold>
       Heading 1 bold
@@ -31,7 +31,7 @@ export const headings = () => (
   </Grid>
 )
 
-export const paragraphs = () => (
+export const paragraphs = (): JSX.Element => (
   <Grid>
     <Typography variant="body_short" link>
       Body short link
@@ -67,7 +67,7 @@ export const paragraphs = () => (
   </Grid>
 )
 
-export const colors = () => (
+export const colors = (): JSX.Element => (
   <Grid>
     <Typography color="primary"> Primary</Typography>
     <Typography color="secondary">Secondary</Typography>
@@ -80,7 +80,7 @@ export const colors = () => (
   </Grid>
 )
 
-export const custom = () => (
+export const custom = (): JSX.Element => (
   <Grid>
     <Typography group="navigation" variant="label">
       Navigation / Label
@@ -126,7 +126,7 @@ export const custom = () => (
   </Grid>
 )
 
-export const Lines = () => (
+export const Lines = (): JSX.Element => (
   <Wrapper>
     <Typography variant="body_long" lines={2}>
       Cupcake ipsum dolor sit amet caramels powder. Chocolate powder donut
diff --git a/libraries/core-react/src/Banner/BannerMessage.tsx b/libraries/core-react/src/Banner/BannerMessage.tsx
index b92f79a23b..56f6edbb82 100644
--- a/libraries/core-react/src/Banner/BannerMessage.tsx
+++ b/libraries/core-react/src/Banner/BannerMessage.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import styled from 'styled-components'
 import { Typography } from '../Typography'
-import { Props as TypographyProps } from '../Typography/Typography'
+import { TypographyProps } from '../Typography/Typography'
 
 const StyledBannerMessage = styled(Typography)``
 
diff --git a/libraries/core-react/src/Typography/Typography.tsx b/libraries/core-react/src/Typography/Typography.tsx
index 49afe7a25f..75f6d6065b 100644
--- a/libraries/core-react/src/Typography/Typography.tsx
+++ b/libraries/core-react/src/Typography/Typography.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, ElementType } from 'react'
+import React, { forwardRef, ElementType, HTMLAttributes } from 'react'
 import styled, { css } from 'styled-components'
 import { typographyTemplate } from '../_common/templates'
 import {
@@ -45,7 +45,9 @@ const findTypography = (
   return (typography[group] as unknown)[variantName] as TypographyType
 }
 
-const findColor = (inputColor: ColorVariants): string =>
+const findColor: (a: ColorVariants | string) => string = (
+  inputColor = null,
+): string =>
   typeof colors[inputColor] === 'undefined' ? inputColor : colors[inputColor]
 
 const toVariantName = (
@@ -82,64 +84,66 @@ const StyledTypography = styled.p<StyledProps>`
     `}
 `
 
-export type Props = {
+export type TypographyProps = {
   variant?: TypographyVariants
   group?: TypographyGroups
   bold?: boolean
   italic?: boolean
   link?: boolean
-  color?: ColorVariants
+  color?: ColorVariants | string
   token?: Partial<TypographyType>
   lines?: number
   as?: ElementType
-} & React.HTMLAttributes<HTMLElement>
+} & HTMLAttributes<HTMLElement>
 
-export const Typography = forwardRef<HTMLElement, Props>(function EdsTypography(
-  {
-    variant = 'body_short',
-    children,
-    bold,
-    italic,
-    link,
-    group,
-    token,
-    as: providedAs,
-    ...other
-  },
-  ref,
-) {
-  const as: ElementType = providedAs
-    ? providedAs
-    : getElementType(variant, link)
+export const Typography = forwardRef<HTMLElement, TypographyProps>(
+  function Typography(
+    {
+      variant = 'body_short',
+      children,
+      bold,
+      italic,
+      link,
+      group,
+      token,
+      as: providedAs,
+      ...other
+    },
+    ref,
+  ) {
+    const as: ElementType = providedAs
+      ? providedAs
+      : getElementType(variant, link)
 
-  const variantName = toVariantName(
-    variant,
-    bold,
-    italic,
-    link,
-  ) as TypographyVariants
+    const variantName = toVariantName(
+      variant,
+      bold,
+      italic,
+      link,
+    ) as TypographyVariants
 
-  const typography = findTypography(variantName, group)
+    const typography = findTypography(variantName, group)
 
-  if (typeof typography === 'undefined') {
-    throw new Error(
-      `Typography variant not found for variant "${variantName}" ("${variant}") & group "${
-        group || ''
-      }"`,
-    )
-  }
+    if (typeof typography === 'undefined') {
+      throw new Error(
+        `Typography variant not found for variant "${variantName}" ("${variant}") & group "${
+          group || ''
+        }"`,
+      )
+    }
 
-  return (
-    <StyledTypography
-      as={as}
-      typography={{ ...typography, ...token }}
-      link={link}
-      ref={ref}
-      {...other}
-    >
-      {children}
-    </StyledTypography>
-  )
-})
+    return (
+      <StyledTypography
+        as={as}
+        typography={{ ...typography, ...token }}
+        link={link}
+        ref={ref}
+        {...other}
+      >
+        {children}
+      </StyledTypography>
+    )
+  },
+)
 
 // Typography.displayName = 'EdsTypography'
diff --git a/libraries/core-react/src/Typography/index.js b/libraries/core-react/src/Typography/index.js
deleted file mode 100644
index eab8a710ad..0000000000
--- a/libraries/core-react/src/Typography/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-// @ts-nocheck
-export { Typography } from './Typography'
diff --git a/libraries/core-react/src/Typography/index.ts b/libraries/core-react/src/Typography/index.ts
index 3ec44f36f0..2a899b55f3 100644
--- a/libraries/core-react/src/Typography/index.ts
+++ b/libraries/core-react/src/Typography/index.ts
@@ -1 +1 @@
-export { Typography } from './Typography'
+export * from './Typography'
diff --git a/libraries/core-react/src/index.ts b/libraries/core-react/src/index.ts
index bc28ccb930..4613a152a4 100644
--- a/libraries/core-react/src/index.ts
+++ b/libraries/core-react/src/index.ts
@@ -1,6 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 export { Button } from './Button'
-export { Typography } from './Typography'
+export * from './Typography'
 export { Table } from './Table'
 export { Divider, DividerProps } from './Divider'
 export { TextField } from './TextField'