diff --git a/.storybook/components/FontWeights.tsx b/.storybook/components/FontWeights.tsx
new file mode 100644
index 00000000..2808c3a8
--- /dev/null
+++ b/.storybook/components/FontWeights.tsx
@@ -0,0 +1,34 @@
+import { Unstyled } from "@storybook/blocks";
+import { Box, Text } from "~/components";
+import { useTheme } from "~/theme";
+
+export const FontWeightsPresentation = () => {
+  const { themeValues: vars } = useTheme();
+
+  return (
+    <Unstyled>
+      <Box display="flex" flexDirection="row" flexWrap="wrap" rowGap={7}>
+        {Object.entries(vars.fontWeight)
+          .sort(([_aKey, aValue], [_bKey, bValue]) =>
+            aValue.localeCompare(bValue, undefined, { numeric: true })
+          )
+          .map(([key, value]) => {
+            return (
+              <Box width="100%" key={key}>
+                <Box __fontSize="14px" __minWidth="100px">
+                  <Box
+                    display="inline-block"
+                    color="default1"
+                    __fontSize="15px"
+                  >
+                    {key}
+                  </Box>
+                </Box>
+                <Text fontWeight={key}>Some text</Text>
+              </Box>
+            );
+          })}
+      </Box>
+    </Unstyled>
+  );
+};
diff --git a/.storybook/components/Typography.tsx b/.storybook/components/Typography.tsx
new file mode 100644
index 00000000..17e333aa
--- /dev/null
+++ b/.storybook/components/Typography.tsx
@@ -0,0 +1,36 @@
+import { Unstyled } from "@storybook/blocks";
+import { Box, Text } from "~/components";
+import { useTheme } from "~/theme";
+
+export const TypographyPresentation = () => {
+  const { themeValues: vars } = useTheme();
+
+  return (
+    <Unstyled>
+      <Box display="flex" flexDirection="row" flexWrap="wrap" rowGap={7}>
+        {Object.entries(vars.fontSize)
+          .sort(([_aKey, aValue], [_bKey, bValue]) =>
+            aValue.localeCompare(bValue, undefined, { numeric: true })
+          )
+          .map(([key, value]) => {
+            return (
+              <Box width="100%" key={key}>
+                <Box __fontSize="14px" __minWidth="100px">
+                  <Box
+                    display="inline-block"
+                    color="default1"
+                    __fontSize="15px"
+                  >
+                    size: {key}
+                  </Box>
+                </Box>
+                <Text fontSize={key} lineHeight={key} letterSpacing={key}>
+                  Some text
+                </Text>
+              </Box>
+            );
+          })}
+      </Box>
+    </Unstyled>
+  );
+};
diff --git a/.storybook/components/index.tsx b/.storybook/components/index.tsx
index 31c5e7c4..d0d10e31 100644
--- a/.storybook/components/index.tsx
+++ b/.storybook/components/index.tsx
@@ -1,5 +1,7 @@
+export { BorderRadiusPresentation } from "./BorderRadius";
 export { ColorPresentation } from "./Colors";
-export { SpacingsPresentation } from "./Spacings";
+export { FontWeightsPresentation } from "./FontWeights";
 export { IconsPresentation } from "./Icons";
-export { BorderRadiusPresentation } from "./BorderRadius";
 export { ShadowPresentation } from "./Shadow";
+export { SpacingsPresentation } from "./Spacings";
+export { TypographyPresentation } from "./Typography";
diff --git a/src/components/Avatar/Store/Store.tsx b/src/components/Avatar/Store/Store.tsx
index dc666e4c..f26ad9b7 100644
--- a/src/components/Avatar/Store/Store.tsx
+++ b/src/components/Avatar/Store/Store.tsx
@@ -2,7 +2,7 @@ import { DataAttributes } from "~/components/types";
 import { classNames } from "~/utils";
 
 import { Box, PropsWithBox } from "../../Box";
-import { Text } from "../../Text";
+import { convertSizeToScale, Text } from "../../Text";
 
 import { storeAvatar, StoreAvatarVariants } from "./Store.css";
 
@@ -37,7 +37,11 @@ export const Store = (props: StoreAvatarProps) => {
       data-macaw-ui-component="Avatar.Store"
       {...rest}
     >
-      <Text variant="bodyEmp" size={size} color="buttonDefaultPrimary">
+      <Text
+        size={convertSizeToScale(size)}
+        color="buttonDefaultPrimary"
+        fontWeight="medium"
+      >
         {initials}
       </Text>
     </Box>
diff --git a/src/components/Avatar/User/User.tsx b/src/components/Avatar/User/User.tsx
index fc92d3c5..abdfb93e 100644
--- a/src/components/Avatar/User/User.tsx
+++ b/src/components/Avatar/User/User.tsx
@@ -2,7 +2,7 @@ import { DataAttributes } from "~/components/types";
 import { classNames } from "~/utils";
 
 import { Box, PropsWithBox } from "../../Box";
-import { Text } from "../../Text";
+import { convertSizeToScale, Text } from "../../Text";
 
 import { userAvatar, UserAvatarVariants } from "./User.css";
 
@@ -37,7 +37,11 @@ export const User = (props: UserAvatarProps) => {
       data-macaw-ui-component="Avatar.User"
       {...rest}
     >
-      <Text variant="bodyEmp" size={size} color="buttonDefaultPrimary">
+      <Text
+        size={convertSizeToScale(size)}
+        color="buttonDefaultPrimary"
+        fontWeight="medium"
+      >
         {initials}
       </Text>
     </Box>
diff --git a/src/components/BaseInput/BaseInput.css.ts b/src/components/BaseInput/BaseInput.css.ts
index 4714bd48..80e5c093 100644
--- a/src/components/BaseInput/BaseInput.css.ts
+++ b/src/components/BaseInput/BaseInput.css.ts
@@ -144,13 +144,13 @@ export const spanRecipe = recipe({
   variants: {
     size: {
       small: sprinkles({
-        typeSize: "bodySmall",
+        typeSize: 1,
       }),
       medium: sprinkles({
-        typeSize: "bodyMedium",
+        typeSize: 2,
       }),
       large: sprinkles({
-        typeSize: "bodyLarge",
+        typeSize: 3,
       }),
     },
     disabled: {
@@ -179,8 +179,8 @@ export const inputRecipe = recipe({
     sprinkles({
       width: "100%",
       backgroundColor: "transparent",
-      fontSize: "bodyLarge",
-      lineHeight: "bodyLarge",
+      fontSize: 3,
+      lineHeight: 3,
       borderWidth: 0,
       outlineStyle: "none",
       padding: 0,
@@ -225,16 +225,16 @@ export const inputRecipe = recipe({
   variants: {
     size: {
       small: sprinkles({
-        fontSize: "bodySmall",
-        lineHeight: "captionMedium",
+        fontSize: 1,
+        lineHeight: 1,
       }),
       medium: sprinkles({
-        fontSize: "bodyMedium",
-        lineHeight: "bodySmall",
+        fontSize: 2,
+        lineHeight: 2,
       }),
       large: sprinkles({
-        fontSize: "bodyLarge",
-        lineHeight: "bodyLarge",
+        fontSize: 3,
+        lineHeight: 3,
       }),
     },
     error: {
diff --git a/src/components/BaseInput/HelperText.tsx b/src/components/BaseInput/HelperText.tsx
index 5a9562d4..ecc5d22e 100644
--- a/src/components/BaseInput/HelperText.tsx
+++ b/src/components/BaseInput/HelperText.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { Box, Text } from "..";
+import { Box, Text, convertSizeToScale } from "..";
 import { helperTextRecipe } from "./BaseInput.css";
 
 type HelperTextProps = {
@@ -12,8 +12,7 @@ export const HelperText = ({ size, error, children }: HelperTextProps) => {
   return (
     <Box className={helperTextRecipe({ size })}>
       <Text
-        variant="caption"
-        size={size}
+        size={convertSizeToScale(size)}
         color={error ? "critical1" : "default2"}
       >
         {children}
diff --git a/src/components/BaseSelect/LoadingListItem/LoadingListItem.tsx b/src/components/BaseSelect/LoadingListItem/LoadingListItem.tsx
index 3a8d4791..35399374 100644
--- a/src/components/BaseSelect/LoadingListItem/LoadingListItem.tsx
+++ b/src/components/BaseSelect/LoadingListItem/LoadingListItem.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { List, Spinner, Text } from "~/components";
+import { List, Spinner, Text, convertSizeToScale } from "~/components";
 
 import { listItemStyle } from "../BaseSelect.css";
 
@@ -18,7 +18,7 @@ export const LoadingListItem = ({
     gap={1.5}
     color="default2"
   >
-    <Text size={size} color="default2">
+    <Text size={convertSizeToScale(size)} color="default2">
       {children}
     </Text>
     <Spinner />
diff --git a/src/components/BaseSelect/helpers.ts b/src/components/BaseSelect/helpers.ts
index 219eee2e..cbe95a8f 100644
--- a/src/components/BaseSelect/helpers.ts
+++ b/src/components/BaseSelect/helpers.ts
@@ -37,8 +37,8 @@ export const getListTextSize = (
   switch (size) {
     case "small":
     case "medium":
-      return "medium";
+      return 2;
     case "large":
-      return "large";
+      return 3;
   }
 };
diff --git a/src/components/Button/Button.css.ts b/src/components/Button/Button.css.ts
index d38a6fdd..7ff9c8e3 100644
--- a/src/components/Button/Button.css.ts
+++ b/src/components/Button/Button.css.ts
@@ -117,7 +117,7 @@ export const button = recipe({
         width: 6,
         borderRadius: 2,
         padding: 0.5,
-        typeSize: "buttonSmall",
+        typeSize: 1,
         gap: 1,
       }),
     },
@@ -131,7 +131,7 @@ export const button = recipe({
         width: 8,
         borderRadius: 3,
         padding: 1,
-        typeSize: "buttonMedium",
+        typeSize: 2,
         gap: 1,
       }),
     },
@@ -145,7 +145,7 @@ export const button = recipe({
         width: 10,
         borderRadius: 3,
         padding: 2,
-        typeSize: "buttonLarge",
+        typeSize: 3,
         gap: 2,
       }),
     },
@@ -159,7 +159,7 @@ export const button = recipe({
         borderRadius: 2,
         paddingX: 2,
         paddingY: 0,
-        typeSize: "buttonSmall",
+        typeSize: 1,
         gap: 1,
       }),
     },
@@ -173,7 +173,7 @@ export const button = recipe({
         borderRadius: 3,
         paddingX: 3,
         paddingY: 1,
-        typeSize: "buttonMedium",
+        typeSize: 2,
         gap: 1,
       }),
     },
@@ -187,7 +187,7 @@ export const button = recipe({
         borderRadius: 3,
         paddingX: 4,
         paddingY: 2,
-        typeSize: "buttonLarge",
+        typeSize: 3,
         gap: 2,
       }),
     },
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
index 61f839e9..d8da0764 100644
--- a/src/components/Checkbox/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof Checkbox>;
 export const Primary: Story = {
   args: {
     children: [
-      <Text variant="body">Option 1</Text>, // eslint-disable-line react/jsx-key
+      <Text size={2}>Option 1</Text>, // eslint-disable-line react/jsx-key
     ],
   },
 };
@@ -32,7 +32,7 @@ export const Disabled: Story = {
     disabled: true,
     children: [
       // eslint-disable-next-line react/jsx-key
-      <Text variant="body" color="defaultDisabled">
+      <Text size={2} color="defaultDisabled">
         Option 1
       </Text>,
     ],
diff --git a/src/components/Chip/Chip.stories.tsx b/src/components/Chip/Chip.stories.tsx
index 172648fd..1fc951c5 100644
--- a/src/components/Chip/Chip.stories.tsx
+++ b/src/components/Chip/Chip.stories.tsx
@@ -21,7 +21,7 @@ export const Primary: Story = {
     <Box display="grid" gridTemplateColumns={2} gap={5}>
       {/* Neutral */}
       <Chip {...props} color="default1" backgroundColor="default1">
-        <Text variant="caption" size="small" color="default1">
+        <Text size={1} color="default1">
           Example
         </Text>
       </Chip>
@@ -32,7 +32,7 @@ export const Primary: Story = {
         backgroundColor="critical1"
         borderColor="critical1"
       >
-        <Text color="critical1" size="small" variant="caption">
+        <Text color="critical1" size={1}>
           Example
         </Text>
       </Chip>
@@ -43,13 +43,13 @@ export const Primary: Story = {
         backgroundColor="success1"
         borderColor="success1"
       >
-        <Text color="success1" size="small" variant="caption">
+        <Text color="success1" size={1}>
           Example
         </Text>
       </Chip>
       {/* Blue */}
       <Chip {...props} backgroundColor="info1" borderColor="info1">
-        <Text color="info1" size="small" variant="caption">
+        <Text color="info1" size={1}>
           Example
         </Text>
       </Chip>
diff --git a/src/components/DropdownButton/DropdownButton.css.ts b/src/components/DropdownButton/DropdownButton.css.ts
index 735adcdf..ee66f296 100644
--- a/src/components/DropdownButton/DropdownButton.css.ts
+++ b/src/components/DropdownButton/DropdownButton.css.ts
@@ -53,9 +53,9 @@ export const dropdownButton = recipe({
         borderRadius: 2,
         paddingX: 2,
         paddingY: 1,
-        typeSize: "buttonSmall",
-        fontWeight: "bodyMedium",
-        lineHeight: "captionMedium",
+        typeSize: 1,
+        fontWeight: "medium",
+        lineHeight: 2,
         gap: 3,
       }),
       medium: sprinkles({
@@ -63,8 +63,8 @@ export const dropdownButton = recipe({
         borderRadius: 3,
         paddingX: 2,
         paddingY: 1.5,
-        typeSize: "buttonMedium",
-        fontWeight: "bodyMedium",
+        typeSize: 2,
+        fontWeight: "medium",
         gap: 1,
       }),
       large: sprinkles({
@@ -72,8 +72,8 @@ export const dropdownButton = recipe({
         borderRadius: 3,
         paddingX: 3,
         paddingY: 2,
-        typeSize: "buttonLarge",
-        fontWeight: "bodyMedium",
+        typeSize: 3,
+        fontWeight: "medium",
         gap: 2,
       }),
     },
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
index 95959174..3af18770 100644
--- a/src/components/Input/Input.stories.tsx
+++ b/src/components/Input/Input.stories.tsx
@@ -133,7 +133,7 @@ const InputNumberTemplate: Story = {
           type="number"
           value={value}
           onChange={(e) => setValue(e.target.value)}
-          endAdornment={<Text variant="caption">USD</Text>}
+          endAdornment={<Text size={1}>USD</Text>}
         />
       </Box>
     );
@@ -156,7 +156,7 @@ export const Number: Story = {
     type="number"
     value={value}
     onChange={(e) => setValue(e.target.value)}
-    endAdornment={<Text variant="caption">USD</Text>}
+    endAdornment={<Text size={1}>USD</Text>}
   />`,
       },
     },
@@ -180,7 +180,7 @@ export const NumberWithLabel: Story = {
     type="number"
     value={value}
     onChange={(e) => setValue(e.target.value)}
-    endAdornment={<Text variant="caption">USD</Text>}
+    endAdornment={<Text size={1}>USD</Text>}
   />`,
       },
     },
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 6ea21361..612f5372 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -2,7 +2,7 @@ import { FocusEvent, InputHTMLAttributes, ReactNode, forwardRef } from "react";
 
 import { classNames } from "~/utils";
 
-import { Box, PropsWithBox, Text } from "..";
+import { Box, PropsWithBox, Text, convertSizeToScale } from "..";
 import { InputVariants, helperTextRecipe, inputRecipe } from "../BaseInput";
 
 import { InputWrapper, useStateEvents } from "./InputWrapper";
@@ -112,8 +112,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         {helperText && (
           <Box className={helperTextRecipe({ size })}>
             <Text
-              variant="caption"
-              size={size}
+              size={convertSizeToScale(size)}
               color={error ? "critical1" : "default2"}
             >
               {helperText}
diff --git a/src/components/Multiselect/Common/Multiselect.css.ts b/src/components/Multiselect/Common/Multiselect.css.ts
index cc60edd2..a8052eaa 100644
--- a/src/components/Multiselect/Common/Multiselect.css.ts
+++ b/src/components/Multiselect/Common/Multiselect.css.ts
@@ -26,8 +26,8 @@ export const multiselectInputRecipe = recipe({
     sprinkles({
       width: "100%",
       backgroundColor: "transparent",
-      fontSize: "bodyLarge",
-      lineHeight: "bodyLarge",
+      fontSize: 3,
+      lineHeight: 3,
       borderWidth: 0,
       outlineStyle: "none",
       padding: 0,
@@ -56,13 +56,13 @@ export const multiselectInputRecipe = recipe({
   variants: {
     size: {
       small: sprinkles({
-        typeSize: "captionSmall",
+        typeSize: 1,
       }),
       medium: sprinkles({
-        typeSize: "captionMedium",
+        typeSize: 2,
       }),
       large: sprinkles({
-        typeSize: "captionMedium",
+        typeSize: 2,
       }),
     },
     error: {
diff --git a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
index 2b5f821d..5f54452b 100644
--- a/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
+++ b/src/components/Multiselect/Dynamic/DynamicMultiselect.tsx
@@ -153,14 +153,11 @@ const DynamicMultiselectInner = <T extends Option>(
               index: idx,
             })}
           >
-            <Text variant="caption" size="small">
-              {item.label}
-            </Text>
+            <Text size={1}>{item.label}</Text>
             {!disabled && (
               <Text
                 cursor="pointer"
-                variant="caption"
-                size="small"
+                size={1}
                 onClick={(event) => {
                   event.stopPropagation();
                   event.preventDefault();
diff --git a/src/components/Multiselect/Static/Multiselect.tsx b/src/components/Multiselect/Static/Multiselect.tsx
index 9764103f..3a976ad0 100644
--- a/src/components/Multiselect/Static/Multiselect.tsx
+++ b/src/components/Multiselect/Static/Multiselect.tsx
@@ -142,14 +142,11 @@ const MultiselectInner = <T extends Option, V extends Option | string>(
               index: idx,
             })}
           >
-            <Text variant="caption" size="small">
-              {item.label}
-            </Text>
+            <Text size={1}>{item.label}</Text>
             {!disabled && (
               <Text
                 cursor="pointer"
-                variant="caption"
-                size="small"
+                size={1}
                 onClick={(event) => {
                   event.stopPropagation();
                   event.preventDefault();
diff --git a/src/components/RadioGroup/Group.css.ts b/src/components/RadioGroup/Group.css.ts
index 65adb59d..9e8ca78e 100644
--- a/src/components/RadioGroup/Group.css.ts
+++ b/src/components/RadioGroup/Group.css.ts
@@ -17,13 +17,13 @@ export const groupLabelRecipe = recipe({
   variants: {
     size: {
       small: sprinkles({
-        typeSize: "captionSmall",
+        typeSize: 1,
       }),
       medium: sprinkles({
-        typeSize: "captionMedium",
+        typeSize: 2,
       }),
       large: sprinkles({
-        typeSize: "captionLarge",
+        typeSize: 3,
       }),
     },
     disabled: {
diff --git a/src/components/RadioGroup/RadioGroup.stories.tsx b/src/components/RadioGroup/RadioGroup.stories.tsx
index e22dd376..e8ec9d68 100644
--- a/src/components/RadioGroup/RadioGroup.stories.tsx
+++ b/src/components/RadioGroup/RadioGroup.stories.tsx
@@ -18,10 +18,10 @@ const meta: Meta<typeof RadioGroup> = {
   render: (args) => (
     <RadioGroup {...args}>
       <RadioGroup.Item value="default-unchecked" id="default-unchecked">
-        <Text size={args.size}>Unchecked</Text>
+        <Text size={2}>Unchecked</Text>
       </RadioGroup.Item>
       <RadioGroup.Item value="default-checked" id="default-checked">
-        <Text size={args.size}>Checked</Text>
+        <Text size={2}>Checked</Text>
       </RadioGroup.Item>
     </RadioGroup>
   ),
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 283b2751..739afbe3 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -9,7 +9,14 @@ import {
 
 import { useFloating } from "~/hooks/useFloating";
 import { isString } from "~/utils";
-import { Box, List, PropsWithBox, Text, TextProps } from "..";
+import {
+  Box,
+  List,
+  PropsWithBox,
+  Text,
+  TextProps,
+  convertSizeToScale,
+} from "..";
 import { HelperText, InputVariants } from "../BaseInput";
 import {
   NoOptions,
@@ -141,8 +148,7 @@ const SelectInner = <T extends Option, V extends Option | string>(
           textOverflow="ellipsis"
         >
           <Text
-            size={size}
-            variant="body"
+            size={convertSizeToScale(size)}
             color={labelColor}
             title={selectedItem?.label}
           >
diff --git a/src/components/Text/Text.css.ts b/src/components/Text/Text.css.ts
index 5a9c5484..9f347e1a 100644
--- a/src/components/Text/Text.css.ts
+++ b/src/components/Text/Text.css.ts
@@ -4,22 +4,6 @@ import { sprinkles } from "~/theme";
 
 export const text = recipe({
   variants: {
-    variant: {
-      hero: {},
-      title: {},
-      heading: {},
-      bodyStrong: {},
-      bodyEmp: {},
-      body: {},
-      button: {},
-      caption: {},
-    },
-    size: {
-      small: {},
-      medium: {},
-      large: {},
-      inherit: {},
-    },
     ellipsis: {
       multiline: sprinkles({ overflow: "hidden", textOverflow: "ellipsis" }),
       true: sprinkles({
@@ -31,187 +15,7 @@ export const text = recipe({
     },
   },
 
-  compoundVariants: [
-    {
-      variants: {
-        variant: "hero",
-        size: "large",
-      },
-      style: sprinkles({ typeSize: "heroLarge" }),
-    },
-    {
-      variants: {
-        variant: "hero",
-        size: "medium",
-      },
-      style: sprinkles({ typeSize: "heroMedium" }),
-    },
-    {
-      variants: {
-        variant: "hero",
-        size: "small",
-      },
-      style: sprinkles({ typeSize: "heroSmall" }),
-    },
-
-    {
-      variants: {
-        variant: "title",
-        size: "large",
-      },
-      style: sprinkles({ typeSize: "titleLarge" }),
-    },
-    {
-      variants: {
-        variant: "title",
-        size: "medium",
-      },
-      style: sprinkles({ typeSize: "titleMedium" }),
-    },
-    {
-      variants: {
-        variant: "title",
-        size: "small",
-      },
-      style: sprinkles({ typeSize: "titleSmall" }),
-    },
-
-    {
-      variants: {
-        variant: "heading",
-        size: "large",
-      },
-      style: sprinkles({ typeSize: "headingLarge" }),
-    },
-    {
-      variants: {
-        variant: "heading",
-        size: "medium",
-      },
-      style: sprinkles({ typeSize: "headingMedium" }),
-    },
-    {
-      variants: {
-        variant: "heading",
-        size: "small",
-      },
-      style: sprinkles({ typeSize: "headingSmall" }),
-    },
-
-    {
-      variants: {
-        variant: "bodyStrong",
-        size: "large",
-      },
-      style: sprinkles({ typeSize: "bodyStrongLarge" }),
-    },
-    {
-      variants: {
-        variant: "bodyStrong",
-        size: "medium",
-      },
-      style: sprinkles({ typeSize: "bodyStrongMedium" }),
-    },
-    {
-      variants: {
-        variant: "bodyStrong",
-        size: "small",
-      },
-      style: sprinkles({ typeSize: "bodyStrongSmall" }),
-    },
-
-    {
-      variants: {
-        variant: "bodyEmp",
-        size: "large",
-      },
-      style: sprinkles({ typeSize: "bodyEmpLarge" }),
-    },
-    {
-      variants: {
-        variant: "bodyEmp",
-        size: "medium",
-      },
-      style: sprinkles({ typeSize: "bodyEmpMedium" }),
-    },
-    {
-      variants: {
-        variant: "bodyEmp",
-        size: "small",
-      },
-      style: sprinkles({ typeSize: "bodyEmpSmall" }),
-    },
-
-    {
-      variants: {
-        variant: "body",
-        size: "large",
-      },
-      style: sprinkles({ typeSize: "bodyLarge" }),
-    },
-    {
-      variants: {
-        variant: "body",
-        size: "medium",
-      },
-      style: sprinkles({ typeSize: "bodyMedium" }),
-    },
-    {
-      variants: {
-        variant: "body",
-        size: "small",
-      },
-      style: sprinkles({ typeSize: "bodySmall" }),
-    },
-
-    {
-      variants: {
-        variant: "button",
-        size: "large",
-      },
-      style: sprinkles({ typeSize: "buttonLarge" }),
-    },
-    {
-      variants: {
-        variant: "button",
-        size: "medium",
-      },
-      style: sprinkles({ typeSize: "buttonMedium" }),
-    },
-    {
-      variants: {
-        variant: "button",
-        size: "small",
-      },
-      style: sprinkles({ typeSize: "buttonSmall" }),
-    },
-
-    {
-      variants: {
-        variant: "caption",
-        size: "large",
-      },
-      style: sprinkles({ typeSize: "captionLarge" }),
-    },
-    {
-      variants: {
-        variant: "caption",
-        size: "medium",
-      },
-      style: sprinkles({ typeSize: "captionMedium" }),
-    },
-    {
-      variants: {
-        variant: "caption",
-        size: "small",
-      },
-      style: sprinkles({ typeSize: "captionSmall" }),
-    },
-  ],
-
   defaultVariants: {
-    variant: "body",
-    size: "medium",
     ellipsis: false,
   },
 });
diff --git a/src/components/Text/Text.stories.tsx b/src/components/Text/Text.stories.tsx
index 8f8e0cd4..530b7b73 100644
--- a/src/components/Text/Text.stories.tsx
+++ b/src/components/Text/Text.stories.tsx
@@ -10,58 +10,9 @@ const meta: Meta<typeof Text> = {
 export default meta;
 type Story = StoryObj<typeof Text>;
 
-export const Hero: Story = {
+export const Default: Story = {
   args: {
-    variant: "hero",
+    size: 4,
     children: "Some text",
   },
 };
-
-export const Title: Story = {
-  args: {
-    ...Hero.args,
-    variant: "title",
-  },
-};
-
-export const Heading: Story = {
-  args: {
-    ...Hero.args,
-    variant: "heading",
-  },
-};
-
-export const BodyStrong: Story = {
-  args: {
-    ...Hero.args,
-    variant: "bodyStrong",
-  },
-};
-
-export const BodyEmp: Story = {
-  args: {
-    ...Hero.args,
-    variant: "bodyEmp",
-  },
-};
-
-export const Body: Story = {
-  args: {
-    ...Hero.args,
-    variant: "body",
-  },
-};
-
-export const Button: Story = {
-  args: {
-    ...Hero.args,
-    variant: "button",
-  },
-};
-
-export const Caption: Story = {
-  args: {
-    ...Hero.args,
-    variant: "caption",
-  },
-};
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index e37a0c33..8097048e 100644
--- a/src/components/Text/Text.tsx
+++ b/src/components/Text/Text.tsx
@@ -10,6 +10,7 @@ export type TextProps = PropsWithBox<{
   children: ReactNode;
   as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "a" | "strong";
   className?: string;
+  size?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
 }> &
   TextVariants;
 
@@ -18,29 +19,29 @@ export const Text = forwardRef<HTMLSpanElement, TextProps>(
     {
       children,
       as = "span",
-      variant,
-      size,
+      size = 4,
       ellipsis,
       color = "default1",
       className,
+      fontWeight = "regular",
       ...rest
     },
     ref
-  ) => {
-    return (
-      <Box
-        as={as}
-        className={classNames(text({ variant, size, ellipsis }), className)}
-        color={color}
-        ref={ref}
-        margin={0}
-        data-macaw-ui-component="Text"
-        {...rest}
-      >
-        {children}
-      </Box>
-    );
-  }
+  ) => (
+    <Box
+      as={as}
+      className={classNames(text({ ellipsis }), className)}
+      color={color}
+      ref={ref}
+      margin={0}
+      data-macaw-ui-component="Text"
+      typeSize={size}
+      fontWeight={fontWeight}
+      {...rest}
+    >
+      {children}
+    </Box>
+  )
 );
 
 Text.displayName = "Text";
diff --git a/src/components/Text/helpers.ts b/src/components/Text/helpers.ts
new file mode 100644
index 00000000..a3b28ecf
--- /dev/null
+++ b/src/components/Text/helpers.ts
@@ -0,0 +1,14 @@
+export const convertSizeToScale = (
+  size: "small" | "medium" | "large" | undefined
+) => {
+  switch (size) {
+    case "small":
+      return 1;
+    case "medium":
+      return 2;
+    case "large":
+      return 3;
+    default:
+      return 2;
+  }
+};
diff --git a/src/components/Text/index.ts b/src/components/Text/index.ts
index 22e10b67..b8096124 100644
--- a/src/components/Text/index.ts
+++ b/src/components/Text/index.ts
@@ -1 +1,2 @@
 export * from "./Text";
+export * from "./helpers";
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
index ef769c81..4d3eeefa 100644
--- a/src/components/Textarea/Textarea.tsx
+++ b/src/components/Textarea/Textarea.tsx
@@ -10,7 +10,7 @@ import {
 import { classNames } from "~/utils";
 
 import { useAutoHeightTextarea } from "~/hooks/useAutoHeightTextarea";
-import { Box, PropsWithBox, Text } from "../..";
+import { Box, PropsWithBox, Text, convertSizeToScale } from "../..";
 import { InputVariants, helperTextRecipe, inputRecipe } from "../BaseInput";
 
 import { TextareaWrapper, useStateEvents } from "./TextareaWrapper";
@@ -112,8 +112,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         {helperText && (
           <Box className={helperTextRecipe({ size })}>
             <Text
-              variant="caption"
-              size={size}
+              size={convertSizeToScale(size)}
               color={error ? "critical1" : "default2"}
             >
               {helperText}
diff --git a/src/components/Toggle/Toggle.stories.tsx b/src/components/Toggle/Toggle.stories.tsx
index cdc2b349..a1f549ac 100644
--- a/src/components/Toggle/Toggle.stories.tsx
+++ b/src/components/Toggle/Toggle.stories.tsx
@@ -15,7 +15,7 @@ export const Primary: Story = {
   args: {
     children: [
       // eslint-disable-next-line react/jsx-key
-      <Text variant="body">Option 1</Text>,
+      <Text size={2}>Option 1</Text>,
     ],
   },
 };
@@ -25,7 +25,7 @@ export const DefaultPressed: Story = {
     defaultPressed: true,
     children: [
       // eslint-disable-next-line react/jsx-key
-      <Text variant="body">Option 1</Text>,
+      <Text size={2}>Option 1</Text>,
     ],
   },
 };
@@ -35,7 +35,7 @@ export const Disabled: Story = {
     disabled: true,
     children: [
       // eslint-disable-next-line react/jsx-key
-      <Text variant="body">Option 1</Text>,
+      <Text size={2}>Option 1</Text>,
     ],
   },
 };
@@ -46,7 +46,7 @@ export const DisabledAndPressed: Story = {
     pressed: true,
     children: [
       // eslint-disable-next-line react/jsx-key
-      <Text variant="body">Option 1</Text>,
+      <Text size={2}>Option 1</Text>,
     ],
   },
 };
diff --git a/src/components/Tooltip/ContentHeading.tsx b/src/components/Tooltip/ContentHeading.tsx
index 60db2b2b..598b108c 100644
--- a/src/components/Tooltip/ContentHeading.tsx
+++ b/src/components/Tooltip/ContentHeading.tsx
@@ -9,7 +9,7 @@ export const ContentHeading = ({ children }: TooltipContentHeadingProps) => {
   return (
     <Text
       display="block"
-      variant="caption"
+      size={1}
       color="default2"
       marginBottom={0.5}
       data-macaw-ui-component="Tooltip.ContentHeading"
diff --git a/src/components/Tooltip/Tooltip.css.ts b/src/components/Tooltip/Tooltip.css.ts
index 8a8be84e..4e9b1266 100644
--- a/src/components/Tooltip/Tooltip.css.ts
+++ b/src/components/Tooltip/Tooltip.css.ts
@@ -8,7 +8,7 @@ export const content = sprinkles({
   backgroundColor: "default1",
   padding: 2,
   borderRadius: 3,
-  typeSize: "bodyEmpSmall",
+  typeSize: 1,
   color: "default1",
   boxShadow: "defaultOverlay",
 });
diff --git a/src/theme/contract.css.ts b/src/theme/contract.css.ts
index 2e644641..c77d7871 100644
--- a/src/theme/contract.css.ts
+++ b/src/theme/contract.css.ts
@@ -114,30 +114,17 @@ export const vars = createGlobalThemeContract(
       },
     },
     fontSize: {
-      heroLarge: null,
-      heroMedium: null,
-      heroSmall: null,
-      titleLarge: null,
-      titleMedium: null,
-      titleSmall: null,
-      headingLarge: null,
-      headingMedium: null,
-      headingSmall: null,
-      bodyStrongLarge: null,
-      bodyStrongMedium: null,
-      bodyStrongSmall: null,
-      bodyEmpLarge: null,
-      bodyEmpMedium: null,
-      bodyEmpSmall: null,
-      bodyLarge: null,
-      bodyMedium: null,
-      bodySmall: null,
-      buttonLarge: null,
-      buttonMedium: null,
-      buttonSmall: null,
-      captionLarge: null,
-      captionMedium: null,
-      captionSmall: null,
+      1: null,
+      2: null,
+      3: null,
+      4: null,
+      5: null,
+      6: null,
+      7: null,
+      8: null,
+      9: null,
+      10: null,
+      11: null,
     },
     borderRadius: {
       1: null,
@@ -152,82 +139,35 @@ export const vars = createGlobalThemeContract(
     },
     lineHeight: {
       1: null,
-      heroLarge: null,
-      heroMedium: null,
-      heroSmall: null,
-      titleLarge: null,
-      titleMedium: null,
-      titleSmall: null,
-      headingLarge: null,
-      headingMedium: null,
-      headingSmall: null,
-      bodyStrongLarge: null,
-      bodyStrongMedium: null,
-      bodyStrongSmall: null,
-      bodyEmpLarge: null,
-      bodyEmpMedium: null,
-      bodyEmpSmall: null,
-      bodyLarge: null,
-      bodyMedium: null,
-      bodySmall: null,
-      buttonLarge: null,
-      buttonMedium: null,
-      buttonSmall: null,
-      captionLarge: null,
-      captionMedium: null,
-      captionSmall: null,
+      2: null,
+      3: null,
+      4: null,
+      5: null,
+      6: null,
+      7: null,
+      8: null,
+      9: null,
+      10: null,
+      11: null,
     },
     fontWeight: {
-      heroLarge: null,
-      heroMedium: null,
-      heroSmall: null,
-      titleLarge: null,
-      titleMedium: null,
-      titleSmall: null,
-      headingLarge: null,
-      headingMedium: null,
-      headingSmall: null,
-      bodyStrongLarge: null,
-      bodyStrongMedium: null,
-      bodyStrongSmall: null,
-      bodyEmpLarge: null,
-      bodyEmpMedium: null,
-      bodyEmpSmall: null,
-      bodyLarge: null,
-      bodyMedium: null,
-      bodySmall: null,
-      buttonLarge: null,
-      buttonMedium: null,
-      buttonSmall: null,
-      captionLarge: null,
-      captionMedium: null,
-      captionSmall: null,
+      light: null,
+      regular: null,
+      medium: null,
+      bold: null,
     },
     letterSpacing: {
-      heroLarge: null,
-      heroMedium: null,
-      heroSmall: null,
-      titleLarge: null,
-      titleMedium: null,
-      titleSmall: null,
-      headingLarge: null,
-      headingMedium: null,
-      headingSmall: null,
-      bodyStrongLarge: null,
-      bodyStrongMedium: null,
-      bodyStrongSmall: null,
-      bodyEmpLarge: null,
-      bodyEmpMedium: null,
-      bodyEmpSmall: null,
-      bodyLarge: null,
-      bodyMedium: null,
-      bodySmall: null,
-      buttonLarge: null,
-      buttonMedium: null,
-      buttonSmall: null,
-      captionLarge: null,
-      captionMedium: null,
-      captionSmall: null,
+      1: null,
+      2: null,
+      3: null,
+      4: null,
+      5: null,
+      6: null,
+      7: null,
+      8: null,
+      9: null,
+      10: null,
+      11: null,
     },
     boxShadow: {
       defaultFocused: null,
diff --git a/src/theme/docs/Typography-8.mdx b/src/theme/docs/Typography-8.mdx
new file mode 100644
index 00000000..b04220b2
--- /dev/null
+++ b/src/theme/docs/Typography-8.mdx
@@ -0,0 +1,18 @@
+import { Meta } from "@storybook/blocks";
+import {
+  TypographyPresentation,
+  FontWeightsPresentation,
+} from "./../../../.storybook/components";
+
+<Meta title="Tokens / Typography" />
+
+# Typography
+
+<TypographyPresentation />
+
+<br />
+<br />
+
+# Font weights
+
+<FontWeightsPresentation />
diff --git a/src/theme/sprinkles.css.ts b/src/theme/sprinkles.css.ts
index 6538d995..ea711231 100644
--- a/src/theme/sprinkles.css.ts
+++ b/src/theme/sprinkles.css.ts
@@ -180,7 +180,7 @@ const responsiveProperties = defineProperties({
     marginX: ["marginLeft", "marginRight"],
     marginY: ["marginTop", "marginBottom"],
     placeItems: ["alignItems", "justifyContent"],
-    typeSize: ["fontSize", "lineHeight", "fontWeight", "letterSpacing"],
+    typeSize: ["fontSize", "lineHeight", "letterSpacing"],
     borderWidth: [
       "borderTopWidth",
       "borderBottomWidth",
diff --git a/src/theme/themes/common.ts b/src/theme/themes/common.ts
index 6de285db..0c972434 100644
--- a/src/theme/themes/common.ts
+++ b/src/theme/themes/common.ts
@@ -31,30 +31,17 @@ export const spacing = {
 };
 
 export const fontSize = {
-  heroLarge: "34px",
-  heroMedium: "28px",
-  heroSmall: "24px",
-  titleLarge: "22px",
-  titleMedium: "20px",
-  titleSmall: "18px",
-  headingLarge: "18px",
-  headingMedium: "16px",
-  headingSmall: "14px",
-  bodyStrongLarge: "16px",
-  bodyStrongMedium: "14px",
-  bodyStrongSmall: "13px",
-  bodyEmpLarge: "16px",
-  bodyEmpMedium: "14px",
-  bodyEmpSmall: "13px",
-  bodyLarge: "16px",
-  bodyMedium: "14px",
-  bodySmall: "13px",
-  buttonLarge: "16px",
-  buttonMedium: "14px",
-  buttonSmall: "13px",
-  captionLarge: "13px",
-  captionMedium: "12px",
-  captionSmall: "11px",
+  1: "11px",
+  2: "12px",
+  3: "13px",
+  4: "14px",
+  5: "16px",
+  6: "18px",
+  7: "20px",
+  8: "22px",
+  9: "24px",
+  10: "28px",
+  11: "34px",
 };
 
 export const borderRadius = {
@@ -70,85 +57,38 @@ export const borderRadius = {
 };
 
 export const lineHeight = {
-  1: `1`,
-  heroLarge: "40px",
-  heroMedium: "36px",
-  heroSmall: "30px",
-  titleLarge: "28px",
-  titleMedium: "26px",
-  titleSmall: "24px",
-  headingLarge: "24px",
-  headingMedium: "22px",
-  headingSmall: "18px",
-  bodyStrongLarge: "24px",
-  bodyStrongMedium: "22px",
-  bodyStrongSmall: "20px",
-  bodyEmpLarge: "24px",
-  bodyEmpMedium: "22px",
-  bodyEmpSmall: "20px",
-  bodyLarge: "24px",
-  bodyMedium: "22px",
-  bodySmall: "20px",
-  buttonLarge: "24px",
-  buttonMedium: "22px",
-  buttonSmall: "20px",
-  captionLarge: "20px",
-  captionMedium: "18px",
-  captionSmall: "16px",
+  1: "16px",
+  2: "18px",
+  3: "20px",
+  4: "20px",
+  5: "22px",
+  6: "24px",
+  7: "26px",
+  8: "28px",
+  9: "30px",
+  10: "36px",
+  11: "40px",
 };
 
 export const fontWeight = {
-  heroLarge: "580",
-  heroMedium: "580",
-  heroSmall: "500",
-  titleLarge: "380",
-  titleMedium: "380",
-  titleSmall: "380",
-  headingLarge: "600",
-  headingMedium: "600",
-  headingSmall: "600",
-  bodyStrongLarge: "600",
-  bodyStrongMedium: "600",
-  bodyStrongSmall: "600",
-  bodyEmpLarge: "500",
-  bodyEmpMedium: "500",
-  bodyEmpSmall: "500",
-  bodyLarge: "440",
-  bodyMedium: "440",
-  bodySmall: "440",
-  buttonLarge: "580",
-  buttonMedium: "580",
-  buttonSmall: "580",
-  captionLarge: "380",
-  captionMedium: "440",
-  captionSmall: "480",
+  light: "300",
+  regular: "400",
+  medium: "500",
+  bold: "700",
 };
 
 export const letterSpacing = {
-  heroLarge: "-0.01em",
-  heroMedium: "-0.01em",
-  heroSmall: "-0.01em",
-  titleLarge: "normal",
-  titleMedium: "normal",
-  titleSmall: "normal",
-  headingLarge: "normal",
-  headingMedium: "normal",
-  headingSmall: "0.01em",
-  bodyStrongLarge: "0.01em",
-  bodyStrongMedium: "0.01em",
-  bodyStrongSmall: "0.015em",
-  bodyEmpLarge: "0.01em",
-  bodyEmpMedium: "0.01em",
-  bodyEmpSmall: "0.015em",
-  bodyLarge: "0.01em",
-  bodyMedium: "0.01em",
-  bodySmall: "0.015em",
-  buttonLarge: "0.02em",
-  buttonMedium: "0.02em",
-  buttonSmall: "0.025em",
-  captionLarge: "0.01em",
-  captionMedium: "0.015em",
-  captionSmall: "0.025em",
+  1: "0.025em",
+  2: "0.015em",
+  3: "0.015em",
+  4: "0.01em",
+  5: "0em",
+  6: "0em",
+  7: "0em",
+  8: "0em",
+  9: "-0.01em",
+  10: "-0.01em",
+  11: "-0.01em",
 };
 
 export const borderWidth = {