diff --git a/__snapshots__/font--fonts-chromium.png b/__snapshots__/font--fonts-chromium.png
new file mode 100644
index 00000000..3346e939
Binary files /dev/null and b/__snapshots__/font--fonts-chromium.png differ
diff --git a/__snapshots__/font--fonts-firefox.png b/__snapshots__/font--fonts-firefox.png
new file mode 100644
index 00000000..2483b264
Binary files /dev/null and b/__snapshots__/font--fonts-firefox.png differ
diff --git a/__snapshots__/font--fonts-webkit.png b/__snapshots__/font--fonts-webkit.png
new file mode 100644
index 00000000..39da7f75
Binary files /dev/null and b/__snapshots__/font--fonts-webkit.png differ
diff --git a/__snapshots__/font--text-sizes-chromium.png b/__snapshots__/font--text-sizes-chromium.png
new file mode 100644
index 00000000..2108cbad
Binary files /dev/null and b/__snapshots__/font--text-sizes-chromium.png differ
diff --git a/__snapshots__/font--text-sizes-firefox.png b/__snapshots__/font--text-sizes-firefox.png
new file mode 100644
index 00000000..41194fb3
Binary files /dev/null and b/__snapshots__/font--text-sizes-firefox.png differ
diff --git a/__snapshots__/font--text-sizes-webkit.png b/__snapshots__/font--text-sizes-webkit.png
new file mode 100644
index 00000000..751225c1
Binary files /dev/null and b/__snapshots__/font--text-sizes-webkit.png differ
diff --git a/src/components/FontSizes/Text.stories.tsx b/src/components/FontSizes/Text.stories.tsx
new file mode 100644
index 00000000..35d9d441
--- /dev/null
+++ b/src/components/FontSizes/Text.stories.tsx
@@ -0,0 +1,32 @@
+import Text from "./Text";
+import React from "react";
+import {Colors, Size, Sizes} from "../../utils/types";
+import {Button, ButtonGroup} from "../../index";
+import Alert from "../alert/Alert";
+import {StoryObj} from "@storybook/react";
+
+
+export default {
+    title: "Font",
+    component: Text,
+    argTypes: {
+        size: {
+            options: ["xs", "sm", "md", "lg", "xl"],
+            control: {type: 'radio'}
+        }
+    }
+};
+
+
+export const TextSizes: StoryObj<typeof Text> = {
+    render: (args) => {
+        const {size} = args
+
+        return <>
+                <Text size={size}>{size}</Text>
+        </>
+    },
+    args: {
+        size: "sm"
+    }
+}
\ No newline at end of file
diff --git a/src/components/FontSizes/Text.style.scss b/src/components/FontSizes/Text.style.scss
new file mode 100644
index 00000000..8ed32977
--- /dev/null
+++ b/src/components/FontSizes/Text.style.scss
@@ -0,0 +1,12 @@
+@import "../../styles/variables";
+
+.text {
+  color: rgba($white, .5);
+  font-family: Ubuntu, sans-serif;
+}
+
+@each $name, $font in $sizes {
+  .size--#{$name} {
+    font-size: $font;
+  }
+}
\ No newline at end of file
diff --git a/src/components/FontSizes/Text.tsx b/src/components/FontSizes/Text.tsx
new file mode 100644
index 00000000..e67c99cf
--- /dev/null
+++ b/src/components/FontSizes/Text.tsx
@@ -0,0 +1,17 @@
+import React, {HTMLProps} from "react";
+import {Size} from "../../utils/types";
+import "./Text.style.scss"
+
+export interface FontType extends Omit<Omit<HTMLProps<HTMLSpanElement>, "children">, "size"> {
+    children: string,
+    size: Size,
+}
+
+const Text: React.FC<FontType> = ({ size, children, ...rest }) => {
+
+    return <span {...rest} className={`text size--${size}`}>
+        {children}
+    </span>
+}
+
+export default Text
\ No newline at end of file
diff --git a/src/components/alert/Alert.stories.tsx b/src/components/alert/Alert.stories.tsx
index d1001323..5862ee62 100644
--- a/src/components/alert/Alert.stories.tsx
+++ b/src/components/alert/Alert.stories.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Alert from "./Alert";
 import {Meta, StoryObj} from "@storybook/react";
+import {Colors} from "../../utils/types";
 
 const meta: Meta<typeof Alert> = {
     title: "Alert",
@@ -14,7 +15,7 @@ const meta: Meta<typeof Alert> = {
         },
         onClose: {table:{disable: true}},
         title: {table:{disable: true}},
-        variant: {table:{disable: true}}
+        color: {table:{disable: true}}
     },
 }
 
@@ -28,9 +29,8 @@ export const WithBody: Story = {
 
         return <>
             {
-                ["primary", "secondary", "info",  "success", "warning", "error"].map(value => {
-                    // @ts-ignore
-                    return <Alert variant={value} onClose={event => window.alert("closed")} dismissible={dismissible} icon={icon} title={value}>
+                Colors.map(value => {
+                    return <Alert color={value} onClose={event => window.alert("closed")} dismissible={dismissible} icon={icon} title={value}>
                         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
                     </Alert>
                 })
@@ -51,9 +51,8 @@ export const WithoutBody: Story = {
 
         return <>
             {
-                ["primary", "secondary", "info",  "success", "warning", "error"].map(value => {
-                    // @ts-ignore
-                    return <Alert variant={value} onClose={event => window.alert("closed")} dismissible={dismissible} icon={icon} title={value}/>
+                Colors.map(value => {
+                    return <Alert color={value} onClose={event => window.alert("closed")} dismissible={dismissible} icon={icon} title={value}/>
                 })
             }
         </>
diff --git a/src/components/alert/Alert.tsx b/src/components/alert/Alert.tsx
index ae25adce..0d6e14c6 100644
--- a/src/components/alert/Alert.tsx
+++ b/src/components/alert/Alert.tsx
@@ -1,13 +1,14 @@
 import React, {ReactElement, ReactNode} from "react";
 import {IconAlertCircle, IconCircleCheck, IconCircleX, IconInfoCircle, IconX} from "@tabler/icons-react";
 import "./Alert.style.scss"
+import {Color} from "../../utils/utils";
 
 export interface AlertType {
 
     children?: ReactNode | ReactNode[]
     title: ReactNode
     //defaults to primary
-    variant?: "primary" | "secondary" | "info" | "success" | "warning" | "error"
+    color?: Color
     //defaults to true
     icon?: boolean
     //defaults to false
@@ -15,7 +16,7 @@ export interface AlertType {
     onClose?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void
 }
 
-const IconVariants = {
+const IconColors = {
     "info": <IconInfoCircle/>,
     "primary": <IconInfoCircle/>,
     "secondary": <IconInfoCircle/>,
@@ -27,12 +28,12 @@ const IconVariants = {
 
 const Alert: React.FC<AlertType> = (props) => {
 
-    const {variant = "primary", dismissible = false, icon = true, title, onClose = (event) => {}, children} = props
+    const {color = "primary", dismissible = false, icon = true, title, onClose = (event) => {}, children} = props
 
-    return <div className={`alert alert--${variant}`}>
+    return <div className={`alert alert--${color}`}>
         <div className={"alert__header"}>
             <div className={"alert__header-wrapper"}>
-                {icon ? <AlertIcon variant={variant}/> : null}
+                {icon ? <AlertIcon color={color}/> : null}
                 <span className={"alert__heading"}>{title}</span>
             </div>
             {dismissible ? <span className={"alert__dismissible"} onClick={onClose}><IconX/></span> : null}
@@ -50,12 +51,12 @@ export interface AlertHeadingType {
 }
 
 export interface AlertIconType {
-    variant: "primary" | "secondary" | "info" | "success" | "warning" | "error"
+    color: Color
 }
 
-const AlertIcon: React.FC<AlertIconType> = ({variant}) => {
+const AlertIcon: React.FC<AlertIconType> = ({color}) => {
     return <span className={"alert__icon"}>
-        {IconVariants[variant]}
+        {IconColors[color]}
     </span>
 }
 
diff --git a/src/components/badge/Badge.stories.tsx b/src/components/badge/Badge.stories.tsx
index 60889e9d..adfcebc3 100644
--- a/src/components/badge/Badge.stories.tsx
+++ b/src/components/badge/Badge.stories.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import Badge from "./Badge";
 import Button from "../button/Button";
 import {IconGitBranch} from "@tabler/icons-react";
+import {Colors as BadgeVariants}  from "../../utils/types";
 
 const meta: Meta = {
     title: "Badge",
@@ -13,9 +14,8 @@ export const Variants = () => {
     return <>
 
         {
-            ["primary", "secondary", "info", "success", "warning", "error"].map(value => {
-                // @ts-ignore
-                return <Badge style={{marginRight: ".5rem"}} variant={value}>
+            BadgeVariants.map(value => {
+                return <Badge style={{marginRight: ".5rem"}} color={value}>
                     {value}
                 </Badge>
             })
@@ -25,12 +25,12 @@ export const Variants = () => {
 }
 
 export const ButtonExample = () => {
-    return <Button variant={"primary"}>
+    return <Button color={"primary"}>
         <Button.Icon>
             <IconGitBranch/>
         </Button.Icon>
         Merge Branch
-        <Badge style={{marginLeft: ".5rem"}} variant={"secondary"}>
+        <Badge style={{marginLeft: ".5rem"}} color={"secondary"}>
             Badge
         </Badge>
     </Button>
diff --git a/src/components/badge/Badge.style.scss b/src/components/badge/Badge.style.scss
index e875bf5c..b9ea7eb5 100644
--- a/src/components/badge/Badge.style.scss
+++ b/src/components/badge/Badge.style.scss
@@ -1,17 +1,18 @@
 @import "../../styles/helpers";
+@import "../../styles/variables";
 
 .badge {
   @include opacityBox(false);
 
   padding: .25rem;
   display: inline-flex;
-  font-size: $tertiaryFontSize;
+  font-size: $xs;
   width: fit-content;
 }
 
 @each $name, $color in $variants {
   .badge--#{$name} {
     @include opacityBox(false, $color);
-    font-size: $tertiaryFontSize;
+    font-size: $xs;
   }
 }
\ No newline at end of file
diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
index bb2d04c2..725369cd 100644
--- a/src/components/badge/Badge.tsx
+++ b/src/components/badge/Badge.tsx
@@ -1,17 +1,18 @@
 import React, {HTMLProps} from "react";
 import "./Badge.style.scss"
+import {Color} from "../../utils/utils";
 
 export interface BadgeType extends HTMLProps<HTMLSpanElement>{
     children: string
     //defaults to primary
-    variant?: "primary" | "secondary" | "info" | "success" | "warning" | "error"
+    color?: Color
 }
 
 const Badge: React.FC<BadgeType> = (props) => {
     
-    const {variant = "primary", children, ...args} = props
+    const {color = "primary", children, ...args} = props
     
-    return <span {...args} className={`badge badge--${variant}`}>
+    return <span {...args} className={`badge badge--${color}`}>
         {children}
     </span>
 }
diff --git a/src/components/button/Button.stories.tsx b/src/components/button/Button.stories.tsx
index 1cb327f7..ce62ccb0 100644
--- a/src/components/button/Button.stories.tsx
+++ b/src/components/button/Button.stories.tsx
@@ -3,6 +3,7 @@ import {StoryObj} from "@storybook/react";
 import React from "react";
 import ButtonGroup from "../button-group/ButtonGroup";
 import {IconAbc} from "@tabler/icons-react";
+import {Colors} from "../../utils/types";
 
 const meta = {
     title: "Button",
@@ -36,9 +37,9 @@ export const Buttons: ButtonStory = {
 
         return <>
             {
-                ["primary", "secondary", "info", "success", "warning", "error"].map(value => {
+                Colors.map(value => {
                     // @ts-ignore
-                    return <Button disabled={disabled} variant={variant} color={value}>
+                    return <Button variant={variant} disabled={disabled} color={value}>
                         {icon ? <Button.Icon><IconAbc/></Button.Icon> : null}
                         {value}
                     </Button>
@@ -58,8 +59,7 @@ export const ButtonGroups: ButtonGroupStory = {
         return <>
             <ButtonGroup>
                 {
-                    ["primary", "secondary", "info", "success", "warning", "error"].map((value, index) => {
-                        // @ts-ignore
+                    Colors.map((value, index) => {
                         return <Button color={value}>
                             {(index % 2) == 0 ? <Button.Icon><IconAbc/></Button.Icon> : null}
                             {value}
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
index 5945d58c..fc3309a3 100644
--- a/src/components/button/Button.tsx
+++ b/src/components/button/Button.tsx
@@ -5,11 +5,12 @@ import React, {
     ReactNode
 } from "react";
 import {getChild, getContent} from "../../utils/utils";
+import {Color} from "../../utils/types"
 
 export interface ButtonType extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
     children: ReactNode | ReactNode[]
     //defaults to primary
-    color?: "primary" | "secondary" | "info" | "success" | "warning" | "error",
+    color?: Color,
     //default to normal
     variant?: "none" | "normal" | "outlined" | "filled",
     //defaults to false
diff --git a/src/components/card/Card.stories.tsx b/src/components/card/Card.stories.tsx
index 38add9c4..a7256db2 100644
--- a/src/components/card/Card.stories.tsx
+++ b/src/components/card/Card.stories.tsx
@@ -15,7 +15,7 @@ const meta: Meta = {
 export default meta
 
 export const Test = () => {
-    return <Card variant={"secondary"}>
+    return <Card color={"secondary"}>
         <Card.Image alt={"Nico Sammito"} src={"https://event.gls-west.de/Nico_Sammito.jpg"}/>
         <Card.Header>
             <Card.Title>Nico Sammito</Card.Title>
diff --git a/src/components/card/Card.style.scss b/src/components/card/Card.style.scss
index 77ee320b..f106379f 100644
--- a/src/components/card/Card.style.scss
+++ b/src/components/card/Card.style.scss
@@ -49,7 +49,7 @@
 
   &__title {
     padding: 0;
-    font-size: $primaryFontSize;
+    font-size: $lg;
     color: rgba($white, 1);
     font-weight: 500;
     margin: 0 0 .5rem;
@@ -57,7 +57,7 @@
 
   &__sub-title {
     padding: 0;
-    font-size: $secondaryFontSize;
+    font-size: $md;
     color: rgba($white, .75);
     font-weight: 500;
     margin: 0 0 .5rem;
diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
index f1927041..2615b0a4 100644
--- a/src/components/card/Card.tsx
+++ b/src/components/card/Card.tsx
@@ -5,20 +5,21 @@ import {CardHeader, CardHeaderType} from "./CardHeader";
 import {CardTitle, CardTitleType} from "./CardTitle";
 import {CardSubTitle, CardSubTitleType} from "./CardSubTitle";
 import {CardFooter, CardFooterType} from "./CardFooter";
+import {Color} from "../../utils/types";
 
 export type CardChildType = CardHeaderType | CardImgStyle | CardTitleType | CardSubTitleType | CardFooterType | any
 
 export interface CardType {
     children: ReactElement<CardChildType> | ReactElement<CardChildType>[]
     //defaults to secondary
-    variant?: "primary" | "secondary" | "info" | "success" | "warning" | "error",
+    color?: Color
 }
 
 const Card: React.FC<CardType> = (props) => {
 
-    const {children, variant = "secondary", ...args} = props
+    const {children, color = "secondary", ...args} = props
 
-    return <div {...args} className={`card card--${variant}`}>
+    return <div {...args} className={`card card--${color}`}>
         {children}
     </div>
 }
diff --git a/src/components/menu/InternalMenu.tsx b/src/components/menu/InternalMenu.tsx
index da9138ae..3ac128fa 100644
--- a/src/components/menu/InternalMenu.tsx
+++ b/src/components/menu/InternalMenu.tsx
@@ -37,7 +37,7 @@ export function InternalMenu<T extends object>(props: AriaMenuProps<T>) {
 
 function InternalMenuItem<T>({item, state}: {item: Node<T>, state: TreeState<T>}) {
 
-    const {variant = "secondary", disabled = false, unselectable = false} = item.props as MenuItemType
+    const {color = "secondary", disabled = false, unselectable = false} = item.props as MenuItemType
 
     // Get props for the menu item element
     const ref = React.useRef(null);
@@ -48,7 +48,7 @@ function InternalMenuItem<T>({item, state}: {item: Node<T>, state: TreeState<T>}
     )
 
     return (
-        <li {...(!disabled ? {...menuItemProps} : {})} ref={ref} className={`menu__item menu__item--${variant} ${disabled && "menu__item--disabled"} ${unselectable && "menu__item--unselectable"}`}>
+        <li {...(!disabled ? {...menuItemProps} : {})} ref={ref} className={`menu__item menu__item--${color} ${disabled && "menu__item--disabled"} ${unselectable && "menu__item--unselectable"}`}>
 
             <div>{item.rendered}</div>
             {isSelected && !unselectable ? <IconCheck size={16} style={{marginLeft: ".5rem"}}/> : menuItemProps.role != "menuitem" ? <IconCheck size={16} style={{marginLeft: ".5rem", opacity: 0}}/> : null}
diff --git a/src/components/menu/Menu.stories.tsx b/src/components/menu/Menu.stories.tsx
index 389ebb14..51f6bc6b 100644
--- a/src/components/menu/Menu.stories.tsx
+++ b/src/components/menu/Menu.stories.tsx
@@ -38,7 +38,7 @@ export const MenuAccount: MenuStory = {
                 </Menu.Trigger>
                 <Menu.Content>
                     <Menu.Section>
-                        <Menu.Item variant={"info"} unselectable key={"ssd"}>
+                        <Menu.Item color={"info"} unselectable key={"ssd"}>
                             Storage almost full. You can <br/>
                             manage your storage in Settings →
                         </Menu.Item>
@@ -46,11 +46,11 @@ export const MenuAccount: MenuStory = {
                     <Menu.Section title={"Account Settings"}>
                         <Menu.Item key={"update-account"}><Menu.Icon><IconUserEdit/></Menu.Icon> Update
                             Account</Menu.Item>
-                        <Menu.Item variant={"error"}
+                        <Menu.Item color={"error"}
                                    key={"delete-account"}><Menu.Icon><IconUserCancel/></Menu.Icon> Delete
                             Account</Menu.Item>
                     </Menu.Section>
-                    <Menu.Item variant={"warning"}
+                    <Menu.Item color={"warning"}
                                key="logout"><Menu.Icon><IconLogout/></Menu.Icon> Logout <Menu.Shortcut>⌘Q</Menu.Shortcut></Menu.Item>
                 </Menu.Content>
             </Menu>
diff --git a/src/components/menu/Menu.style.scss b/src/components/menu/Menu.style.scss
index 4a55ad59..041d1a51 100644
--- a/src/components/menu/Menu.style.scss
+++ b/src/components/menu/Menu.style.scss
@@ -55,7 +55,7 @@
   }
 
   &__section-title {
-    font-size: $tertiaryFontSize;
+    font-size: $xs;
     color: rgba($white, .25);
     display: block;
     margin: .25rem 0 .25rem .25rem;
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index 8c38dcc0..4d15c6d3 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -8,6 +8,7 @@ import {InternalPopover} from "../popover/InternalPopover";
 import {InternalMenu} from "./InternalMenu";
 import Badge from "../badge/Badge";
 import "./Menu.style.scss"
+import {Color} from "../../utils/types";
 
 export interface MenuType<T> extends AriaMenuProps<T>, PopoverProps {
     children: React.ReactElement<MenuTriggerType & MenuContentType>[]
@@ -24,7 +25,7 @@ export interface MenuContentType {
 export interface MenuItemType {
     children: React.ReactNode
     key: Key
-    variant?: "primary" | "secondary" | "info" | "success" | "warning" | "error"
+    color?: Color
     disabled?: boolean
     unselectable?: boolean
     textValue?: string
diff --git a/src/styles/_helpers.scss b/src/styles/_helpers.scss
index c0c5d6a0..a1faa94e 100644
--- a/src/styles/_helpers.scss
+++ b/src/styles/_helpers.scss
@@ -8,7 +8,7 @@
   border-radius: $borderRadius;
   color: rgba($white, .5);
   font-family: Ubuntu, sans-serif;
-  font-size: $secondaryFontSize;
+  font-size: $md;
   position: relative;
 
   @if ($active == true) {
@@ -24,7 +24,7 @@
   border-radius: $borderRadius;
   color: rgba($white, .5);
   font-family: Ubuntu, sans-serif;
-  font-size: $secondaryFontSize;
+  font-size: $md;
   position: relative;
 
   @if ($active == true) {
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 123c9d6e..09b35827 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,4 +1,5 @@
 $bodyBg: #030014;
+//colors
 $primary: #030014;
 $secondary: #ffffff;
 $info: #70ffb2;
@@ -8,11 +9,25 @@ $error: #D90429;
 $black: #000000;
 $white: #ffffff;
 
+//(font-)sizes
+
+$xs: .75rem;
+$sm: .8rem;
+$md: 1rem;
+$lg: 1.25rem;
+$xl: 2rem;
+
+$sizes: (
+        "xs": $xs,
+        "sm": $sm,
+        "md": $md,
+        "lg": $lg,
+        "xl": $xl,
+);
+
+
 //component styling
 $borderRadius: .5rem;
-$primaryFontSize: 1.25rem;
-$secondaryFontSize: 1rem;
-$tertiaryFontSize: .75rem;
 
 $variants: (
         "primary": $primary,
diff --git a/src/utils/types.ts b/src/utils/types.ts
new file mode 100644
index 00000000..f28ff856
--- /dev/null
+++ b/src/utils/types.ts
@@ -0,0 +1,7 @@
+export type Color = "primary" | "secondary" | "info" | "success" | "warning" | "error";
+
+export const Colors: Color[] = ["primary", "secondary", "info", "success", "warning", "error"]
+
+export type Size = "xs" | "sm" | "md" | "lg" | "xl";
+
+export const Sizes: Size[] = ["xs", "sm", "md", "lg", "xl"]
\ No newline at end of file
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 961b1d02..ffbb7f92 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,5 +1,6 @@
 import React, {ReactNode, useEffect, useMemo, useState} from "react";
 
+
 export const getChild = (children: ReactNode | ReactNode[], child: React.FC<any>, required?: boolean): React.ReactElement | undefined => {
 
     const [childComponent, setChildComponent] = useState<React.ReactElement | undefined>()