diff --git a/.eslintrc.js b/.eslintrc.js
index 8616af42..52944b83 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -42,24 +42,49 @@ module.exports = {
       2,
       {
         skip: [
-          'Text.H1',
-          'Text.H1Bold',
-          'Text.H2',
-          'Text.H2Bold',
-          'Text.H3',
-          'Text.H3Bold',
-          'Text.H4',
-          'Text.H4Bold',
-          'Text.H5',
-          'Text.H5Bold',
-          'Text.H6',
-          'Text.H6Bold',
-          'Text.Body',
-          'Text.Bold',
-          'Text.Caption',
-          'Text.CaptionBold',
-          'Text.Subtitle',
-          'Text.SubtitleBold',
+          'Text.LgBold',
+          'Text.LgMedium',
+          'Text.LgRegular',
+          'Text.LgSemibold',
+          'Text.MdBold',
+          'Text.MdMedium',
+          'Text.MdRegular',
+          'Text.MdSemibold',
+          'Text.SmBold',
+          'Text.SmMedium',
+          'Text.SmRegular',
+          'Text.SmSemibold',
+          'Text.XlBold',
+          'Text.XlMedium',
+          'Text.XlRegular',
+          'Text.XlSemibold',
+          'Text.XsBold',
+          'Text.XsMedium',
+          'Text.XsRegular',
+          'Text.XsSemibold',
+
+          'Display',
+          'Display.LgBold',
+          'Display.LgMedium',
+          'Display.LgRegular',
+          'Display.LgSemibold',
+          'Display.MdBold',
+          'Display.MdMedium',
+          'Display.MdRegular',
+          'Display.MdSemibold',
+          'Display.SmBold',
+          'Display.SmMedium',
+          'Display.SmRegular',
+          'Display.SmSemibold',
+          'Display.XlBold',
+          'Display.XlMedium',
+          'Display.XlRegular',
+          'Display.XlSemibold',
+          'Display.XsBold',
+          'Display.XsMedium',
+          'Display.XsRegular',
+          'Display.XsSemibold',
+
           'Button',
           'Heading',
           'Menu.Item',
diff --git a/.gitignore b/.gitignore
index 87431789..98645798 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,10 +23,11 @@ dist/
 # project files
 
 # CONFIG: uncomment following lines
-# .env
-# .env.qa
-# .env.production
-# .env.staging
+.env
+.env.qa
+.env.production
+.env.staging
+env.json
 # Local Netlify folder
 .netlify
 
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 70ffdf77..4a67ca0f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,5 @@
 {
-  "cSpell.words": ["icomoon", "notificated", "postsecondary"],
+  "cSpell.words": ["icomoon", "notificated", "postsecondary", "Touchables"],
   "todohighlight.keywords": [
     {
       "text": "CONFIG:",
diff --git a/assets/fonts/Lato_Black.ttf b/assets/fonts/Lato_Black.ttf
deleted file mode 100644
index a4a924f9..00000000
Binary files a/assets/fonts/Lato_Black.ttf and /dev/null differ
diff --git a/assets/fonts/Lato_Bold.ttf b/assets/fonts/Lato_Bold.ttf
index b63a14d6..1d23c706 100644
Binary files a/assets/fonts/Lato_Bold.ttf and b/assets/fonts/Lato_Bold.ttf differ
diff --git a/assets/fonts/Lato_Light.ttf b/assets/fonts/Lato_Light.ttf
deleted file mode 100644
index dfa72ce8..00000000
Binary files a/assets/fonts/Lato_Light.ttf and /dev/null differ
diff --git a/assets/fonts/Lato_Medium.ttf b/assets/fonts/Lato_Medium.ttf
new file mode 100644
index 00000000..0648fb2d
Binary files /dev/null and b/assets/fonts/Lato_Medium.ttf differ
diff --git a/assets/fonts/Lato_SemiBold.ttf b/assets/fonts/Lato_SemiBold.ttf
new file mode 100644
index 00000000..3b1bcccc
Binary files /dev/null and b/assets/fonts/Lato_SemiBold.ttf differ
diff --git a/assets/fonts/Lato_Thin.ttf b/assets/fonts/Lato_Thin.ttf
deleted file mode 100644
index ba58da1a..00000000
Binary files a/assets/fonts/Lato_Thin.ttf and /dev/null differ
diff --git a/src/components/AppLoading.tsx b/src/components/AppLoading.tsx
index 912abd32..e776ae50 100644
--- a/src/components/AppLoading.tsx
+++ b/src/components/AppLoading.tsx
@@ -11,11 +11,10 @@ SplashScreen.preventAutoHideAsync()
 export const AppLoading: FC<PropsWithChildren> = ({ children }) => {
   const isLoadingComplete = useCachedResources()
   const [fontsLoaded, fontError] = useFonts({
-    Lato_100Thin: require('../../assets/fonts/Lato_Thin.ttf'),
-    Lato_300Light: require('../../assets/fonts/Lato_Light.ttf'),
     Lato_400Regular: require('../../assets/fonts/Lato_Regular.ttf'),
+    Lato_500Medium: require('../../assets/fonts/Lato_Medium.ttf'),
+    Lato_600SemiBold: require('../../assets/fonts/Lato_SemiBold.ttf'),
     Lato_700Bold: require('../../assets/fonts/Lato_Bold.ttf'),
-    Lato_900Black: require('../../assets/fonts/Lato_Black.ttf'),
     IcoMoon: require('../../assets/icomoon/icomoon.ttf'),
   })
 
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index fd02683d..0b552871 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -21,9 +21,9 @@ export const Header = ({ options }: NativeStackHeaderProps) => {
           <>
             <Box height={logoHeight} />
             <Row ml={8} flex={1}>
-              <Text.H4Bold numberOfLines={1} color="text.brand.primary">
+              <Text.LgBold numberOfLines={1} color="text.brand.primary">
                 {options.title}
-              </Text.H4Bold>
+              </Text.LgBold>
             </Row>
           </>
         ) : (
diff --git a/src/components/LanguagePicker.tsx b/src/components/LanguagePicker.tsx
index 806eabf5..984d0f17 100644
--- a/src/components/LanguagePicker.tsx
+++ b/src/components/LanguagePicker.tsx
@@ -43,9 +43,7 @@ export const LanguagePicker: React.FC = () => {
       return (
         <Touchable {...props}>
           <Row alignItems="center">
-            <Text fontSize="xl" pr={2}>
-              {languages?.[language]?.emoji}
-            </Text>
+            <Text.XlRegular pr={2}>{languages?.[language]?.emoji}</Text.XlRegular>
             <Animated.View style={[animatedIconStyle, styles.icon]}>
               <Icon size={24} name="arrow-down-s-line" color={iconColor} />
             </Animated.View>
diff --git a/src/design-system/bottomSheets/BottomSheetHeader.tsx b/src/design-system/bottomSheets/BottomSheetHeader.tsx
index 2a9b79ec..5cb0cedf 100644
--- a/src/design-system/bottomSheets/BottomSheetHeader.tsx
+++ b/src/design-system/bottomSheets/BottomSheetHeader.tsx
@@ -22,9 +22,9 @@ export const BottomSheetHeader = ({
   return (
     <Row alignItems="center">
       <Box flex={1} px={4}>
-        <Text.H4Bold numberOfLines={numberOfLines} allowFontScaling={false}>
+        <Text.MdBold numberOfLines={numberOfLines} allowFontScaling={false}>
           {title}
-        </Text.H4Bold>
+        </Text.MdBold>
       </Box>
       {showCloseButton && (
         <Touchable onPress={onClose} hitSlop={10} p={4} pl={8}>
diff --git a/src/design-system/components/Button/Button.test.tsx b/src/design-system/components/Button/Button.test.tsx
index 2ea0c888..433ea986 100644
--- a/src/design-system/components/Button/Button.test.tsx
+++ b/src/design-system/components/Button/Button.test.tsx
@@ -1,9 +1,17 @@
 import { theme } from '@baca/design-system'
 import { cleanup, render, fireEvent, act } from '@baca/utils/testUtils'
-import { StyleSheet } from 'react-native'
 
 import { Button } from './Button'
 
+const baseStyles = {
+  alignItems: 'center',
+  borderRadius: 4,
+  flexDirection: 'row',
+  justifyContent: 'center',
+  paddingHorizontal: 14,
+  paddingVertical: 10,
+}
+
 afterEach(cleanup)
 describe('Button', () => {
   it('renders correctly', () => {
@@ -14,80 +22,115 @@ describe('Button', () => {
   it('renders correctly Button.Primary', () => {
     const { getByTestId } = render(<Button.Primary title="Button" />)
     expect(getByTestId('baseButton').props.style).toStrictEqual({
+      ...baseStyles,
       alignItems: 'center',
       backgroundColor: theme.light.colors.button.primary.bg,
-      borderColor: 'transparent',
-      borderRadius: 4,
-      borderWidth: undefined,
-      flexDirection: 'row',
-      justifyContent: 'center',
-      minWidth: 128,
-      paddingHorizontal: 24,
-      paddingVertical: 8,
+      borderColor: theme.light.colors.button.primary.border,
+      borderWidth: 1,
+    })
+  })
+
+  it('renders correctly Button.PrimaryDestructive', () => {
+    const { getByTestId } = render(<Button.PrimaryDestructive title="Button" />)
+    expect(getByTestId('baseButton').props.style).toStrictEqual({
+      ...baseStyles,
+      alignItems: 'center',
+      backgroundColor: theme.light.colors.button.primary.error.bg,
+      borderColor: theme.light.colors.button.primary.error.border,
+      borderWidth: 1,
     })
   })
 
-  it('renders correctly Button.Secondary', () => {
-    const { getByTestId } = render(<Button.Secondary title="Button" />)
+  it('renders correctly Button.SecondaryColor', () => {
+    const { getByTestId } = render(<Button.SecondaryColor title="Button" />)
     expect(getByTestId('baseButton').props.style).toStrictEqual({
+      ...baseStyles,
       alignItems: 'center',
       backgroundColor: theme.light.colors.button.secondary.bg,
-      borderColor: 'transparent',
-      borderRadius: 4,
-      borderWidth: undefined,
-      flexDirection: 'row',
-      justifyContent: 'center',
-      minWidth: 128,
-      paddingHorizontal: 24,
-      paddingVertical: 8,
+      borderColor: theme.light.colors.button.secondary.border,
+      borderWidth: 1,
     })
   })
 
-  it('renders correctly Button.Outline', () => {
-    const { getByTestId } = render(<Button.Outline title="Button" />)
+  it('renders correctly Button.SecondaryGray', () => {
+    const { getByTestId } = render(<Button.SecondaryGray title="Button" />)
     expect(getByTestId('baseButton').props.style).toStrictEqual({
+      ...baseStyles,
       alignItems: 'center',
-      backgroundColor: theme.light.colors.button.tertiary.fg,
-      borderColor: theme.light.colors.border.primary,
-      borderRadius: 4,
-      borderWidth: StyleSheet.hairlineWidth,
-      flexDirection: 'row',
-      justifyContent: 'center',
-      minWidth: 128,
-      paddingHorizontal: 24,
-      paddingVertical: 8,
+      backgroundColor: theme.light.colors.button.secondary.bg,
+      borderColor: theme.light.colors.button.secondary.border,
+      borderWidth: 1,
     })
   })
 
-  it('renders correctly Button.Ghost', () => {
-    const { getByTestId } = render(<Button.Ghost title="Button" />)
+  it('renders correctly Button.SecondaryDestructive', () => {
+    const { getByTestId } = render(<Button.SecondaryDestructive title="Button" />)
     expect(getByTestId('baseButton').props.style).toStrictEqual({
+      ...baseStyles,
       alignItems: 'center',
-      backgroundColor: theme.light.colors.button.tertiary.fg,
+      backgroundColor: theme.light.colors.button.secondary.error.bg,
+      borderColor: theme.light.colors.button.secondary.error.border,
+      borderWidth: 1,
+    })
+  })
+
+  it('renders correctly Button.TertiaryColor', () => {
+    const { getByTestId } = render(<Button.TertiaryColor title="Button" />)
+    expect(getByTestId('baseButton').props.style).toStrictEqual({
+      ...baseStyles,
+      backgroundColor: 'transparent',
       borderColor: 'transparent',
-      borderRadius: 4,
       borderWidth: undefined,
-      flexDirection: 'row',
-      justifyContent: 'center',
-      minWidth: 128,
-      paddingHorizontal: 24,
-      paddingVertical: 8,
     })
   })
 
-  it('renders correctly Button.Link', () => {
-    const { getByTestId } = render(<Button.Link title="Button" />)
+  it('renders correctly Button.TertiaryGray', () => {
+    const { getByTestId } = render(<Button.TertiaryGray title="Button" />)
     expect(getByTestId('baseButton').props.style).toStrictEqual({
-      alignItems: 'center',
-      backgroundColor: theme.light.colors.button.tertiary.fg,
+      ...baseStyles,
+      backgroundColor: 'transparent',
+      borderColor: 'transparent',
+      borderWidth: undefined,
+    })
+  })
+
+  it('renders correctly Button.TertiaryDestructive', () => {
+    const { getByTestId } = render(<Button.TertiaryDestructive title="Button" />)
+    expect(getByTestId('baseButton').props.style).toStrictEqual({
+      ...baseStyles,
+      backgroundColor: 'transparent',
+      borderColor: 'transparent',
+      borderWidth: undefined,
+    })
+  })
+
+  it('renders correctly Button.LinkColor', () => {
+    const { getByTestId } = render(<Button.LinkColor title="Button" />)
+    expect(getByTestId('baseButton').props.style).toStrictEqual({
+      ...baseStyles,
+      backgroundColor: 'transparent',
+      borderColor: 'transparent',
+      borderWidth: undefined,
+    })
+  })
+
+  it('renders correctly Button.LinkGray', () => {
+    const { getByTestId } = render(<Button.LinkGray title="Button" />)
+    expect(getByTestId('baseButton').props.style).toStrictEqual({
+      ...baseStyles,
+      backgroundColor: 'transparent',
+      borderColor: 'transparent',
+      borderWidth: undefined,
+    })
+  })
+
+  it('renders correctly Button.LinkDestructive', () => {
+    const { getByTestId } = render(<Button.LinkDestructive title="Button" />)
+    expect(getByTestId('baseButton').props.style).toStrictEqual({
+      ...baseStyles,
+      backgroundColor: 'transparent',
       borderColor: 'transparent',
-      borderRadius: 4,
       borderWidth: undefined,
-      flexDirection: 'row',
-      justifyContent: 'center',
-      minWidth: 128,
-      paddingHorizontal: 24,
-      paddingVertical: 8,
     })
   })
 
diff --git a/src/design-system/components/Button/Button.tsx b/src/design-system/components/Button/Button.tsx
index 7740c9f0..08e474a0 100644
--- a/src/design-system/components/Button/Button.tsx
+++ b/src/design-system/components/Button/Button.tsx
@@ -20,18 +20,19 @@ import {
   View,
 } from 'react-native'
 
-import { buttonVariants, theme } from '../../config'
+import { ButtonSize, ButtonVariant, buttonSizeVariants, buttonVariants, theme } from '../../config'
 import { generateStyledComponent } from '../../utils'
 import { Box } from '../Box'
 import { Loader } from '../Loader'
 import { Text } from '../Text'
+import { useHover } from '../Touchables/useHover'
 import { StyledProps } from '../types'
 
 export type ButtonProps = StyledProps &
   PressableProps & {
     title?: string
     variant?: ButtonVariant
-    size?: 'sm' | 'md' | 'lg'
+    size?: ButtonSize
     loading?: boolean
     disabled?: boolean
     leftIcon?: JSX.Element
@@ -46,11 +47,8 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     flexDirection: 'row',
     justifyContent: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
   },
   baseText: {
-    color: theme.light.colors.text.primary,
     fontStyle: 'normal',
     fontWeight: '400',
     letterSpacing: 0,
@@ -77,69 +75,70 @@ const RawButton = memo(
       ref
     ) => {
       const { colorScheme } = useColorScheme()
-      const { pressedStyle, notPressedStyle, disabledStyle } = useMemo(
+      const { hoverProps, isHovered } = useHover()
+      const { hoveredStyle, defaultStyle, disabledStyle } = useMemo(
         () => buttonVariants[variant],
         [variant]
       )
 
-      const pressedStyles = useMemo<ViewStyle>(
+      const hoveredStyles = useMemo<ViewStyle>(
         () => ({
           backgroundColor: getColorValue({
-            color: pressedStyle.backgroundColor,
+            color: hoveredStyle.backgroundColor,
             colors: colorScheme === 'light' ? theme.light.colors : theme.dark.colors,
           }),
           borderColor: getColorValue({
-            color: pressedStyle.borderColor!,
+            color: hoveredStyle.borderColor!,
             colors: colorScheme === 'light' ? theme.light.colors : theme.dark.colors,
           }),
-          borderWidth: pressedStyle.borderWidth,
+          borderWidth: hoveredStyle.borderWidth,
         }),
         [
           colorScheme,
-          pressedStyle.backgroundColor,
-          pressedStyle.borderColor,
-          pressedStyle.borderWidth,
+          hoveredStyle.backgroundColor,
+          hoveredStyle.borderColor,
+          hoveredStyle.borderWidth,
         ]
       )
 
-      const pressedColorStyle = useMemo<TextStyle>(
+      const hoverColorStyle = useMemo<TextStyle>(
         () => ({
           color: getColorValue({
-            color: pressedStyle.color!,
+            color: hoveredStyle.color!,
             colors: colorScheme === 'light' ? theme.light.colors : theme.dark.colors,
           }),
         }),
-        [colorScheme, pressedStyle.color]
+        [colorScheme, hoveredStyle.color]
       )
 
-      const notPressedStyles = useMemo<ViewStyle>(
+      const defaultStyles = useMemo<ViewStyle>(
         () => ({
           backgroundColor: getColorValue({
-            color: notPressedStyle.backgroundColor,
+            color: defaultStyle.backgroundColor,
             colors: colorScheme === 'light' ? theme.light.colors : theme.dark.colors,
           }),
           borderColor: getColorValue({
-            color: notPressedStyle.borderColor!,
+            color: defaultStyle.borderColor!,
             colors: colorScheme === 'light' ? theme.light.colors : theme.dark.colors,
           }),
-          borderWidth: notPressedStyle.borderWidth,
+          borderWidth: defaultStyle.borderWidth,
         }),
         [
           colorScheme,
-          notPressedStyle.backgroundColor,
-          notPressedStyle.borderColor,
-          notPressedStyle.borderWidth,
+          defaultStyle.backgroundColor,
+          defaultStyle.borderColor,
+          defaultStyle.borderWidth,
         ]
       )
 
-      const notPressedColorStyle = useMemo<TextStyle>(
+      const defaultColorStyle = useMemo<TextStyle>(
         () => ({
           color: getColorValue({
-            color: notPressedStyle.color!,
+            color: defaultStyle.color!,
             colors: colorScheme === 'light' ? theme.light.colors : theme.dark.colors,
           }),
         }),
-        [colorScheme, notPressedStyle.color]
+        [colorScheme, defaultStyle.color]
       )
 
       const disabledStyles = useMemo<ViewStyle>(
@@ -171,37 +170,47 @@ const RawButton = memo(
         }),
         [colorScheme, disabledStyle.color]
       )
+      const buttonSizeVariant = buttonSizeVariants[size]
 
       const buttonSizeStyle = useMemo<ViewStyle>(
         () => ({
-          paddingHorizontal: size === 'sm' ? 12 : size === 'md' ? 24 : 48,
-          minWidth: size === 'sm' ? 64 : size === 'md' ? 128 : 256,
+          paddingHorizontal: buttonSizeVariant.paddingHorizontal,
+          paddingVertical: buttonSizeVariant.paddingVertical,
         }),
-        [size]
+        [buttonSizeVariant.paddingHorizontal, buttonSizeVariant.paddingVertical]
       )
 
       const pressableStyleFunction = useCallback(
         ({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> =>
           StyleSheet.flatten<ViewStyle>([
             styles.baseButton,
-            pressed ? pressedStyles : notPressedStyles,
+            pressed || isHovered ? hoveredStyles : defaultStyles,
             disabled && disabledStyles,
             loading && disabledStyles,
             buttonSizeStyle,
             typeof style === 'function' ? style({ pressed }) : style,
           ]),
-        [pressedStyles, notPressedStyles, loading, buttonSizeStyle, disabled, disabledStyles, style]
+        [
+          buttonSizeStyle,
+          defaultStyles,
+          disabled,
+          disabledStyles,
+          hoveredStyles,
+          isHovered,
+          loading,
+          style,
+        ]
       )
 
       const pressableTextStyleFunction = useCallback(
         ({ pressed }: PressableStateCallbackType) =>
           StyleSheet.flatten([
             styles.baseText,
-            pressed ? pressedColorStyle : notPressedColorStyle,
+            pressed ? hoverColorStyle : defaultColorStyle,
             disabled && disabledColorStyle,
             textStyle,
           ]),
-        [pressedColorStyle, notPressedColorStyle, disabled, disabledColorStyle, textStyle]
+        [hoverColorStyle, defaultColorStyle, disabled, disabledColorStyle, textStyle]
       )
 
       const childrenElement = useCallback(
@@ -211,47 +220,47 @@ const RawButton = memo(
           }
           if (title) {
             return (
-              <Text.BodyBold
+              <Text
+                variant={buttonSizeVariant.textVariant}
                 allowFontScaling={false}
                 style={pressableTextStyleFunction(props)}
                 textAlign="center"
               >
                 {title}
-              </Text.BodyBold>
+              </Text>
             )
           }
 
           if (typeof children === 'string') {
             return (
-              <Text.BodyBold
+              <Text
+                variant={buttonSizeVariant.textVariant}
                 allowFontScaling={false}
                 style={pressableTextStyleFunction(props)}
                 textAlign="center"
               >
                 {children}
-              </Text.BodyBold>
+              </Text>
             )
           }
           return children
         },
-        [children, loading, pressableTextStyleFunction, title]
+        [buttonSizeVariant.textVariant, children, loading, pressableTextStyleFunction, title]
       )
 
       return (
         <Pressable
-          ref={ref}
-          role="button"
           accessibilityRole="button"
+          role="button"
           style={pressableStyleFunction}
-          disabled={disabled}
           testID="baseButton"
-          {...props}
+          {...{ disabled, ...hoverProps, ref, ...props }}
         >
           {(props: PressableStateCallbackType) => (
             <>
-              {leftIcon && <Box mr={8}>{leftIcon}</Box>}
+              {leftIcon && <Box mr={buttonSizeVariant.iconGap}>{leftIcon}</Box>}
               {childrenElement(props)}
-              {rightIcon && <Box ml={8}>{rightIcon}</Box>}
+              {rightIcon && <Box ml={buttonSizeVariant.iconGap}>{rightIcon}</Box>}
             </>
           )}
         </Pressable>
@@ -259,7 +268,7 @@ const RawButton = memo(
     }
   )
 )
-export type ButtonVariant = 'Primary' | 'Secondary' | 'Outline' | 'Ghost' | 'Link'
+
 type ButtonComposition = ForwardRefExoticComponent<
   PropsWithoutRef<ButtonProps> & RefAttributes<View>
 > & {
@@ -275,9 +284,15 @@ const generateButtonVariant = (variant: ButtonVariant) =>
   forwardRef<View, ButtonProps>((props, ref) => <Button variant={variant} {...props} ref={ref} />)
 
 Button.Primary = generateButtonVariant('Primary')
-Button.Secondary = generateButtonVariant('Secondary')
-Button.Outline = generateButtonVariant('Outline')
-Button.Ghost = generateButtonVariant('Ghost')
-Button.Link = generateButtonVariant('Link')
+Button.PrimaryDestructive = generateButtonVariant('PrimaryDestructive')
+Button.SecondaryColor = generateButtonVariant('SecondaryColor')
+Button.SecondaryGray = generateButtonVariant('SecondaryGray')
+Button.SecondaryDestructive = generateButtonVariant('SecondaryDestructive')
+Button.TertiaryColor = generateButtonVariant('TertiaryColor')
+Button.TertiaryGray = generateButtonVariant('TertiaryGray')
+Button.TertiaryDestructive = generateButtonVariant('TertiaryDestructive')
+Button.LinkColor = generateButtonVariant('LinkColor')
+Button.LinkGray = generateButtonVariant('LinkGray')
+Button.LinkDestructive = generateButtonVariant('LinkDestructive')
 
 export { Button }
diff --git a/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap b/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap
index 29186051..262fe22f 100644
--- a/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/src/design-system/components/Button/__snapshots__/Button.test.tsx.snap
@@ -37,14 +37,13 @@ exports[`Button renders correctly 1`] = `
     {
       "alignItems": "center",
       "backgroundColor": "#7F56D9",
-      "borderColor": "transparent",
+      "borderColor": "#7F56D9",
       "borderRadius": 4,
-      "borderWidth": undefined,
+      "borderWidth": 1,
       "flexDirection": "row",
       "justifyContent": "center",
-      "minWidth": 128,
-      "paddingHorizontal": 24,
-      "paddingVertical": 8,
+      "paddingHorizontal": 14,
+      "paddingVertical": 10,
     }
   }
   testID="baseButton"
@@ -54,8 +53,8 @@ exports[`Button renders correctly 1`] = `
     style={
       {
         "color": "#FFFFFF",
-        "fontFamily": "Lato_700Bold",
-        "fontSize": 16,
+        "fontFamily": "Lato_600Semibold",
+        "fontSize": 14,
         "fontStyle": "normal",
         "fontWeight": "400",
         "lineHeight": 21,
diff --git a/src/design-system/components/Input.tsx b/src/design-system/components/Input.tsx
index 9a24e59c..f50de767 100644
--- a/src/design-system/components/Input.tsx
+++ b/src/design-system/components/Input.tsx
@@ -7,7 +7,7 @@ import {
   useImperativeHandle,
   useMemo,
 } from '@baca/hooks'
-import { convertEmToNumber, getColorValue, getFontWeight } from '@baca/utils'
+import { convertEmToNumber, getColorValue } from '@baca/utils'
 import { forwardRef } from 'react'
 import {
   NativeSyntheticEvent,
@@ -21,6 +21,7 @@ import { Box } from './Box'
 import { Icon } from './Icon'
 import { Touchable } from './Touchables/Touchable'
 import type { InputProps } from './types'
+import { fontTextSize, fontWeights } from '../config'
 import { generateStyleSheet, generateStyledSystem } from '../utils'
 
 const layoutPropsKeys = [
@@ -51,11 +52,11 @@ const layoutPropsKeys = [
 ]
 
 const StyledInput = forwardRef<TextInput, InputProps>((props, ref) => {
-  const { colors, fontSizes, fontWeights, fonts, lineHeights } = useTheme()
+  const { colors, fonts, lineHeights } = useTheme()
 
-  const fontSize = fontSizes[props.fontSize || 'xs']
-  const fontWeight = fontWeights[props.fontWeight || 'normal']
-  const fontFamily = fonts[props.fontFamily || 'regular']
+  const fontSize = fontTextSize[props.fontSize || 'sm']
+  const fontWeight = fontWeights[props.fontWeight || 'Regular']
+  const fontFamily = fonts[props.fontFamily || 'Regular']
 
   const lineHeightStyle = useMemo<TextStyle>(
     () => ({
@@ -108,7 +109,7 @@ const StyledInput = forwardRef<TextInput, InputProps>((props, ref) => {
 
   const fontWeightStyle = useMemo<TextStyle>(
     () => ({
-      fontWeight: (props.bold && 'bold') || (fontWeight && getFontWeight(fontWeight)),
+      fontWeight: (props.bold && fontWeights.Bold) || fontWeight,
     }),
     [fontWeight, props.bold]
   )
@@ -130,7 +131,6 @@ const StyledInput = forwardRef<TextInput, InputProps>((props, ref) => {
   const inputTextStyle = useMemo<TextStyle>(
     () =>
       generateStyleSheet<TextStyle>([
-        props.bold && { fontWeight: '500' },
         props.italic && { fontStyle: 'italic' },
         fontFamilyStyle,
         fontSizeStyle,
@@ -146,7 +146,6 @@ const StyledInput = forwardRef<TextInput, InputProps>((props, ref) => {
       fontSizeStyle,
       fontWeightStyle,
       lineHeightStyle,
-      props.bold,
       props.italic,
       textAlignmentStyle,
       textColorStyle,
@@ -249,9 +248,9 @@ export const Input = forwardRef<TextInput, InputProps>(
             web: { disabled: isDisabled },
           })}
           flex={1}
-          fontFamily="regular"
+          fontFamily="Regular"
           fontSize="xs"
-          fontWeight="bold"
+          // fontWeight="bold"
           height="100%"
           placeholder="Enter your email"
           px={3}
diff --git a/src/design-system/components/Text/Text.test.tsx b/src/design-system/components/Text/Text.test.tsx
index 3fe1dbd9..2c584bfe 100644
--- a/src/design-system/components/Text/Text.test.tsx
+++ b/src/design-system/components/Text/Text.test.tsx
@@ -1,7 +1,7 @@
 import { theme } from '@baca/design-system'
 import { cleanup, render } from '@baca/utils/testUtils'
 
-import { Text } from './Text'
+import { Display, Text } from './Text'
 
 afterEach(cleanup)
 
@@ -9,8 +9,11 @@ console.error = jest.fn()
 console.warn = jest.fn()
 
 const defaultTextStyles = {
-  textTransform: 'none',
   color: theme.light.colors.text.brand.primary,
+  fontFamily: 'Lato_400Regular',
+  fontSize: 16,
+  fontWeight: '400',
+  textTransform: 'none',
 }
 
 describe('Text', () => {
@@ -125,219 +128,275 @@ describe('Text', () => {
     })
   })
 
-  it('renders correctly with variant H1', () => {
-    const { getByText } = render(<Text variant="H1">Hello World</Text>)
+  it('renders correctly with variant LgRegular (Display)', () => {
+    const { getByText } = render(
+      <Display type="display" variant="LgRegular">
+        Hello World
+      </Display>
+    )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_400Regular',
       fontSize: 48,
+      fontWeight: '400',
     })
   })
 
-  it('renders correctly compound Text.H1', () => {
-    const { getByText } = render(<Text.H1>Hello World</Text.H1>)
+  it('renders correctly compound Text.LgRegular', () => {
+    const { getByText } = render(<Display.LgRegular>Hello World</Display.LgRegular>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_400Regular',
       fontSize: 48,
+      fontWeight: '400',
     })
   })
 
-  it('renders correctly with variant H1Bold', () => {
-    const { getByText } = render(<Text variant="H1Bold">Hello World</Text>)
+  it('renders correctly with variant LgBold (Display)', () => {
+    const { getByText } = render(
+      <Display type="display" variant="LgBold">
+        Hello World
+      </Display>
+    )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_700Bold',
       fontSize: 48,
+      fontWeight: '700',
     })
   })
 
-  it('renders correctly compound Text.H1Bold', () => {
-    const { getByText } = render(<Text.H1Bold>Hello World</Text.H1Bold>)
+  it('renders correctly compound Display.LgBold', () => {
+    const { getByText } = render(<Display.LgBold>Hello World</Display.LgBold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_700Bold',
       fontSize: 48,
+      fontWeight: '700',
     })
   })
 
   it('renders correctly with variant H2', () => {
-    const { getByText } = render(<Text variant="H2">Hello World</Text>)
+    const { getByText } = render(
+      <Display type="display" variant="MdRegular">
+        Hello World
+      </Display>
+    )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_400Regular',
       fontSize: 36,
+      fontWeight: '400',
     })
   })
 
-  it('renders correctly compound Text.H2', () => {
-    const { getByText } = render(<Text.H2>Hello World</Text.H2>)
+  it('renders correctly compound Display.H2', () => {
+    const { getByText } = render(<Display.MdRegular>Hello World</Display.MdRegular>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_400Regular',
       fontSize: 36,
+      fontWeight: '400',
     })
   })
 
-  it('renders correctly with variant H2Bold', () => {
-    const { getByText } = render(<Text variant="H2Bold">Hello World</Text>)
+  it('renders correctly with variant MdBold (Display)', () => {
+    const { getByText } = render(
+      <Display type="display" variant="MdBold">
+        Hello World
+      </Display>
+    )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_700Bold',
       fontSize: 36,
+      fontWeight: '700',
     })
   })
 
-  it('renders correctly compound Text.H2Bold', () => {
-    const { getByText } = render(<Text.H2Bold>Hello World</Text.H2Bold>)
+  it('renders correctly compound Display.MdBold', () => {
+    const { getByText } = render(<Display.MdBold>Hello World</Display.MdBold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_700Bold',
       fontSize: 36,
+      fontWeight: '700',
     })
   })
 
-  it('renders correctly with variant H3', () => {
-    const { getByText } = render(<Text variant="H3">Hello World</Text>)
+  it('renders correctly with variant SmRegular (Display)', () => {
+    const { getByText } = render(
+      <Display type="display" variant="SmRegular">
+        Hello World
+      </Display>
+    )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_400Regular',
       fontSize: 30,
+      fontWeight: '400',
     })
   })
 
-  it('renders correctly compound Text.H3', () => {
-    const { getByText } = render(<Text.H3>Hello World</Text.H3>)
+  it('renders correctly compound Display.SmRegular', () => {
+    const { getByText } = render(<Display.SmRegular>Hello World</Display.SmRegular>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_400Regular',
       fontSize: 30,
+      fontWeight: '400',
     })
   })
 
-  it('renders correctly with variant H3Bold', () => {
-    const { getByText } = render(<Text variant="H3Bold">Hello World</Text>)
+  it('renders correctly with variant SmBold (Display)', () => {
+    const { getByText } = render(
+      <Display type="display" variant="SmBold">
+        Hello World
+      </Display>
+    )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_700Bold',
       fontSize: 30,
+      fontWeight: '700',
     })
   })
 
-  it('renders correctly compound Text.H3Bold', () => {
-    const { getByText } = render(<Text.H3Bold>Hello World</Text.H3Bold>)
+  it('renders correctly compound Display.SmBold', () => {
+    const { getByText } = render(<Display.SmBold>Hello World</Display.SmBold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_700Bold',
       fontSize: 30,
+      fontWeight: '700',
     })
   })
 
-  it('renders correctly with variant H4', () => {
-    const { getByText } = render(<Text variant="H4">Hello World</Text>)
+  it('renders correctly with variant XsRegular (Display)', () => {
+    const { getByText } = render(
+      <Display type="display" variant="XsRegular">
+        Hello World
+      </Display>
+    )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_400Regular',
       fontSize: 24,
+      fontWeight: '400',
     })
   })
 
-  it('renders correctly compound Text.H4', () => {
-    const { getByText } = render(<Text.H4>Hello World</Text.H4>)
+  it('renders correctly compound Display.XsRegular', () => {
+    const { getByText } = render(<Display.XsRegular>Hello World</Display.XsRegular>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_400Regular',
       fontSize: 24,
+      fontWeight: '400',
     })
   })
 
-  it('renders correctly with variant H4Bold', () => {
-    const { getByText } = render(<Text variant="H4Bold">Hello World</Text>)
+  it('renders correctly with variant XsBold (Display)', () => {
+    const { getByText } = render(
+      <Display type="display" variant="XsBold">
+        Hello World
+      </Display>
+    )
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_700Bold',
       fontSize: 24,
+      fontWeight: '700',
     })
   })
 
-  it('renders correctly compound Text.H4Bold', () => {
-    const { getByText } = render(<Text.H4Bold>Hello World</Text.H4Bold>)
+  it('renders correctly compound Display.XsBold', () => {
+    const { getByText } = render(<Display.XsBold>Hello World</Display.XsBold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_700Bold',
       fontSize: 24,
+      fontWeight: '700',
     })
   })
 
-  it('renders correctly with variant H5', () => {
-    const { getByText } = render(<Text variant="H5">Hello World</Text>)
+  it('renders correctly with variant XlRegular', () => {
+    const { getByText } = render(<Text variant="XlRegular">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_400Regular',
       fontSize: 20,
+      fontWeight: '400',
     })
   })
 
-  it('renders correctly compound Text.H5', () => {
-    const { getByText } = render(<Text.H5>Hello World</Text.H5>)
+  it('renders correctly compound Text.XlRegular', () => {
+    const { getByText } = render(<Text.XlRegular>Hello World</Text.XlRegular>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_400Regular',
       fontSize: 20,
+      fontWeight: '400',
     })
   })
 
-  it('renders correctly with variant H5Bold', () => {
-    const { getByText } = render(<Text variant="H5Bold">Hello World</Text>)
+  it('renders correctly with variant XlBold', () => {
+    const { getByText } = render(<Text variant="XlBold">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_700Bold',
       fontSize: 20,
+      fontWeight: '700',
     })
   })
 
-  it('renders correctly compound Text.H5Bold', () => {
-    const { getByText } = render(<Text.H5Bold>Hello World</Text.H5Bold>)
+  it('renders correctly compound Text.XlBold', () => {
+    const { getByText } = render(<Text.XlBold>Hello World</Text.XlBold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_700Bold',
       fontSize: 20,
+      fontWeight: '700',
     })
   })
 
-  it('renders correctly with variant H6', () => {
-    const { getByText } = render(<Text variant="H6">Hello World</Text>)
+  it('renders correctly with variant LgRegular', () => {
+    const { getByText } = render(<Text variant="LgRegular">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_400Regular',
       fontSize: 18,
+      fontWeight: '400',
     })
   })
 
-  it('renders correctly compound Text.H6', () => {
-    const { getByText } = render(<Text.H6>Hello World</Text.H6>)
+  it('renders correctly compound Text.LgRegular', () => {
+    const { getByText } = render(<Text.LgRegular>Hello World</Text.LgRegular>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_400Regular',
       fontSize: 18,
+      fontWeight: '400',
     })
   })
 
-  it('renders correctly with variant H6Bold', () => {
-    const { getByText } = render(<Text variant="H6Bold">Hello World</Text>)
+  it('renders correctly with variant LgBold', () => {
+    const { getByText } = render(<Text variant="LgBold">Hello World</Text>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_700Bold',
       fontSize: 18,
+      fontWeight: '700',
     })
   })
 
-  it('renders correctly compound Text.H6Bold', async () => {
-    const { getByText } = render(<Text.H6Bold>Hello World</Text.H6Bold>)
+  it('renders correctly compound Text.LgBold', async () => {
+    const { getByText } = render(<Text.LgBold>Hello World</Text.LgBold>)
     expect(getByText('Hello World').props.style).toStrictEqual({
       ...defaultTextStyles,
       fontFamily: 'Lato_700Bold',
       fontSize: 18,
+      fontWeight: '700',
     })
   })
 })
diff --git a/src/design-system/components/Text/Text.tsx b/src/design-system/components/Text/Text.tsx
index d79afa76..0d63f5a4 100644
--- a/src/design-system/components/Text/Text.tsx
+++ b/src/design-system/components/Text/Text.tsx
@@ -3,16 +3,34 @@ import { getColorValue, convertEmToNumber } from '@baca/utils'
 import { useMemo, memo, forwardRef, PropsWithoutRef, RefAttributes } from 'react'
 import { TextProps as BaseTextProps, Text as BaseText, TextStyle } from 'react-native'
 
-import { textVariants } from '../../config'
+import {
+  DisplayVariant,
+  displayVariants,
+  fontDisplaySize,
+  fontTextSize,
+  fontWeights,
+  TextVariant,
+  textVariants,
+} from '../../config'
 import { generateStyledComponent, generateStyleSheet } from '../../utils'
 import { StyledProps } from '../types'
 
+type ConditionalTextProps =
+  | {
+      type?: 'text' | never
+      variant?: TextVariant
+    }
+  | {
+      type: 'display'
+      variant?: DisplayVariant
+    }
+
 type TypographyProps = {
-  fontSize?: FontSizes | number
+  fontSize?: TextStyle['fontSize']
   letterSpacing?: LetterSpacings
   lineHeight?: LineHeights
-  fontWeight?: TextStyle['fontWeight']
   fontFamily?: Fonts
+  fontWeight?: TextStyle['fontWeight']
   color?: ColorNames
   noOfLines?: number
   textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify'
@@ -25,9 +43,9 @@ type TypographyProps = {
   capitalize?: boolean
   uppercase?: boolean
   lowercase?: boolean
-  variant?: TextVariant
 }
-type TextProps = StyledProps & BaseTextProps & TypographyProps
+
+type TextProps = StyledProps & BaseTextProps & TypographyProps & ConditionalTextProps
 
 const RawText = memo(
   forwardRef<BaseText, TextProps>(
@@ -45,25 +63,35 @@ const RawText = memo(
         textTransform,
         underline,
         uppercase,
-        fontWeight,
         lowercase,
         style,
-        variant,
+        type = 'text',
+        variant = 'MdRegular',
         ...props
       },
       ref
     ) => {
       const theme = useTheme()
-      const { fontFamily: variantFontFamily, fontSize: variantFontSize } =
-        (variant && textVariants[variant]) || {}
 
-      const fontFamily = props.fontFamily || variantFontFamily
-      const fontSize = props.fontSize || variantFontSize
-      const finalFontSize = fontSize
-        ? typeof fontSize === 'number'
-          ? fontSize
-          : theme.fontSizes[fontSize]
-        : undefined
+      const { fontWeight: variantFontWeight, fontSize: variantFontSize } =
+        type === 'text' ? textVariants[variant as TextVariant] : displayVariants[variant]
+
+      const fontFamily = props.fontFamily || variantFontWeight
+      const fontWeight = bold ? 'bold' : props.fontWeight || fontWeights[variantFontWeight]
+      const fontSize =
+        props.fontSize ||
+        (type === 'text'
+          ? fontTextSize[variantFontSize as keyof typeof fontTextSize]
+          : fontDisplaySize[variantFontSize])
+
+      const fontFamilyStyle = useMemo<TextStyle>(
+        () => ({
+          fontFamily: fontFamily ? theme.fonts[fontFamily] : undefined,
+        }),
+        [theme, fontFamily]
+      )
+
+      const finalFontSize = fontSize && typeof fontSize === 'number' ? fontSize : undefined
 
       const lineHeightStyle = useMemo<TextStyle>(
         () => ({
@@ -83,6 +111,13 @@ const RawText = memo(
         [theme, letterSpacing, finalFontSize]
       )
 
+      const fontSizeStyle = useMemo<TextStyle>(
+        () => ({
+          fontSize: finalFontSize,
+        }),
+        [finalFontSize]
+      )
+
       const textColor = useMemo<TextStyle>(
         () => ({
           color: color
@@ -125,48 +160,33 @@ const RawText = memo(
         [underline, strikeThrough, textDecoration]
       )
 
-      const fontFamilyStyle = useMemo<TextStyle>(
-        () => ({
-          fontFamily: fontFamily ? theme.fonts[fontFamily] : undefined,
-        }),
-        [theme, fontFamily]
-      )
-
-      const fontSizeStyle = useMemo<TextStyle>(
-        () => ({
-          fontSize: finalFontSize,
-        }),
-        [finalFontSize]
-      )
-
       const textStyle = useMemo(
         () =>
           generateStyleSheet<TextStyle>([
-            (fontWeight || bold) && { fontWeight: fontWeight || 'bold' },
+            { fontWeight },
             italic && { fontStyle: 'italic' },
             fontFamilyStyle,
             fontSizeStyle,
+            letterSpacingStyle,
+            lineHeightStyle,
             textAlignmentStyle,
             textColor,
             textDecorationStyle,
-            letterSpacingStyle,
-            lineHeightStyle,
             textTransformStyle,
             style,
           ]),
         [
-          fontWeight,
-          bold,
-          italic,
           fontFamilyStyle,
           fontSizeStyle,
+          fontWeight,
+          italic,
+          letterSpacingStyle,
+          lineHeightStyle,
+          style,
           textAlignmentStyle,
           textColor,
           textDecorationStyle,
-          letterSpacingStyle,
-          lineHeightStyle,
           textTransformStyle,
-          style,
         ]
       )
 
@@ -183,58 +203,71 @@ const RawText = memo(
   )
 )
 
-export type TextVariant =
-  | 'H1'
-  | 'H1Bold'
-  | 'H2'
-  | 'H2Bold'
-  | 'H3'
-  | 'H3Bold'
-  | 'H4'
-  | 'H4Bold'
-  | 'H5'
-  | 'H5Bold'
-  | 'H6'
-  | 'H6Bold'
-  | 'Body'
-  | 'BodyBold'
-  | 'Caption'
-  | 'CaptionBold'
-  | 'Subtitle'
-  | 'SubtitleBold'
-  | 'NavLabel'
-  | 'NavLabelBold'
-type TextComposition = React.ForwardRefExoticComponent<
+type TextComposition<T extends string> = React.ForwardRefExoticComponent<
   PropsWithoutRef<TextProps> & RefAttributes<BaseText>
 > & {
-  [key in TextVariant]: React.ForwardRefExoticComponent<
-    PropsWithoutRef<TextProps> & RefAttributes<BaseText>
-  >
+  [key in T]: React.ForwardRefExoticComponent<PropsWithoutRef<TextProps> & RefAttributes<BaseText>>
 }
 
-const Text = generateStyledComponent(RawText) as TextComposition
+const Text = generateStyledComponent(RawText) as TextComposition<TextVariant>
+
 const generateTextVariant = (variant: TextVariant) =>
-  forwardRef<BaseText, TextProps>((props, ref) => <Text variant={variant} {...props} ref={ref} />)
-
-Text.H1 = generateTextVariant('H1')
-Text.H1Bold = generateTextVariant('H1Bold')
-Text.H2 = generateTextVariant('H2')
-Text.H2Bold = generateTextVariant('H2Bold')
-Text.H3 = generateTextVariant('H3')
-Text.H3Bold = generateTextVariant('H3Bold')
-Text.H4 = generateTextVariant('H4')
-Text.H4Bold = generateTextVariant('H4Bold')
-Text.H5 = generateTextVariant('H5')
-Text.H5Bold = generateTextVariant('H5Bold')
-Text.H6 = generateTextVariant('H6')
-Text.H6Bold = generateTextVariant('H6Bold')
-Text.Body = generateTextVariant('Body')
-Text.BodyBold = generateTextVariant('BodyBold')
-Text.Caption = generateTextVariant('Caption')
-Text.CaptionBold = generateTextVariant('CaptionBold')
-Text.Subtitle = generateTextVariant('Subtitle')
-Text.SubtitleBold = generateTextVariant('SubtitleBold')
-Text.NavLabel = generateTextVariant('NavLabel')
-Text.NavLabelBold = generateTextVariant('NavLabelBold')
-
-export { Text }
+  forwardRef<BaseText, TextProps>((props, ref) => <Text {...{ ...props, ref, variant }} />)
+
+Text.LgBold = generateTextVariant('LgBold')
+Text.LgMedium = generateTextVariant('LgMedium')
+Text.LgRegular = generateTextVariant('LgRegular')
+Text.LgSemibold = generateTextVariant('LgSemibold')
+Text.MdBold = generateTextVariant('MdBold')
+Text.MdMedium = generateTextVariant('MdMedium')
+Text.MdRegular = generateTextVariant('MdRegular')
+Text.MdSemibold = generateTextVariant('MdSemibold')
+Text.SmBold = generateTextVariant('SmBold')
+Text.SmMedium = generateTextVariant('SmMedium')
+Text.SmRegular = generateTextVariant('SmRegular')
+Text.SmSemibold = generateTextVariant('SmSemibold')
+Text.XsBold = generateTextVariant('XsBold')
+Text.XsMedium = generateTextVariant('XsMedium')
+Text.XsRegular = generateTextVariant('XsRegular')
+Text.XsSemibold = generateTextVariant('XsSemibold')
+Text.XlBold = generateTextVariant('XlBold')
+Text.XlMedium = generateTextVariant('XlMedium')
+Text.XlRegular = generateTextVariant('XlRegular')
+Text.XlSemibold = generateTextVariant('XlSemibold')
+
+export { Display, Text }
+
+const Display = generateStyledComponent(RawText) as TextComposition<DisplayVariant>
+
+const generateDisplayVariant = (variant: DisplayVariant = 'MdRegular') =>
+  forwardRef<BaseText, TextProps>((props, ref) => {
+    return <Display {...{ ...props, ref, variant }} type="display" />
+  })
+
+Display.LgMedium = generateDisplayVariant('LgMedium')
+Display.LgRegular = generateDisplayVariant('LgRegular')
+Display.LgSemibold = generateDisplayVariant('LgSemibold')
+Display.LgBold = generateDisplayVariant('LgBold')
+Display.LgMedium = generateDisplayVariant('LgMedium')
+Display.LgRegular = generateDisplayVariant('LgRegular')
+Display.LgSemibold = generateDisplayVariant('LgSemibold')
+Display.MdBold = generateDisplayVariant('MdBold')
+Display.MdMedium = generateDisplayVariant('MdMedium')
+Display.MdRegular = generateDisplayVariant('MdRegular')
+Display.MdSemibold = generateDisplayVariant('MdSemibold')
+Display.SmBold = generateDisplayVariant('SmBold')
+Display.SmMedium = generateDisplayVariant('SmMedium')
+Display.SmRegular = generateDisplayVariant('SmRegular')
+Display.SmSemibold = generateDisplayVariant('SmSemibold')
+Display.XsBold = generateDisplayVariant('XsBold')
+Display.XsMedium = generateDisplayVariant('XsMedium')
+Display.XsRegular = generateDisplayVariant('XsRegular')
+Display.XsSemibold = generateDisplayVariant('XsSemibold')
+Display.XlBold = generateDisplayVariant('XlBold')
+Display.XlMedium = generateDisplayVariant('XlMedium')
+Display.XlRegular = generateDisplayVariant('XlRegular')
+Display.XlSemibold = generateDisplayVariant('XlSemibold')
+Display.XxlBold = generateDisplayVariant('XxlBold')
+Display.XxlMedium = generateDisplayVariant('XxlMedium')
+Display.XxlRegular = generateDisplayVariant('XxlRegular')
+Display.XxlSemibold = generateDisplayVariant('XxlSemibold')
diff --git a/src/design-system/components/types.ts b/src/design-system/components/types.ts
index 566e5c2c..fe1d70ec 100644
--- a/src/design-system/components/types.ts
+++ b/src/design-system/components/types.ts
@@ -1,4 +1,4 @@
-import { _appTheme } from '@baca/design-system'
+import { FontWeight, TextFontSize, _appTheme } from '@baca/design-system'
 import { IconNames } from '@baca/types/icon'
 import { DimensionValue, TextStyle, ViewProps, ViewStyle, TextInputProps } from 'react-native'
 
@@ -123,10 +123,10 @@ export type BordersProps = {
 
 export type TextProps = {
   color?: ColorNames
-  fontSize?: FontSizes
+  fontSize?: TextFontSize
   letterSpacing?: LetterSpacings
   lineHeight?: LineHeights
-  fontWeight?: FontWeights
+  fontWeight?: FontWeight
   fontFamily?: Fonts
   bold?: boolean
   italic?: boolean
diff --git a/src/design-system/config/buttonVariants.ts b/src/design-system/config/buttonVariants.ts
index 8986f755..bd3e4697 100644
--- a/src/design-system/config/buttonVariants.ts
+++ b/src/design-system/config/buttonVariants.ts
@@ -1,102 +1,297 @@
-import { StyleSheet } from 'react-native'
+import { TextVariant } from './textVariants'
+
+export type ButtonVariant =
+  | 'Primary'
+  | 'PrimaryDestructive'
+  | 'SecondaryColor'
+  | 'SecondaryGray'
+  | 'SecondaryDestructive'
+  | 'TertiaryColor'
+  | 'TertiaryGray'
+  | 'TertiaryDestructive'
+  | 'LinkColor'
+  | 'LinkGray'
+  | 'LinkDestructive'
+
+type BtnStyle = {
+  backgroundColor?: ColorNames
+  borderColor?: ColorNames
+  borderWidth?: number
+  color: ColorNames
+}
 
-type ButtonVariant = 'Primary' | 'Secondary' | 'Outline' | 'Ghost' | 'Link'
 type VariantStyle = {
-  pressedStyle: {
-    backgroundColor: ColorNames
-    color?: ColorNames
-    borderColor?: ColorNames
-    borderWidth?: number
-  }
-  notPressedStyle: {
-    backgroundColor: ColorNames
-    color?: ColorNames
-    borderColor?: ColorNames
-    borderWidth?: number
-  }
-  disabledStyle: {
-    backgroundColor: ColorNames
-    color?: ColorNames
-    borderColor?: ColorNames
-    borderWidth?: number
-  }
+  defaultStyle: BtnStyle
+  hoveredStyle: BtnStyle
+  focusedStyle: BtnStyle
+  disabledStyle: BtnStyle
 }
 
 export const buttonVariants: { [key in ButtonVariant]: VariantStyle } = {
   Primary: {
-    pressedStyle: {
+    defaultStyle: {
       backgroundColor: 'button.primary.bg',
       color: 'button.primary.fg',
+      borderColor: 'button.primary.border',
+      borderWidth: 1,
+    },
+    hoveredStyle: {
+      backgroundColor: 'button.primary.bg_hover',
+      color: 'button.primary.fg_hover',
+      borderColor: 'button.primary.border_hover',
+      borderWidth: 1,
     },
-    notPressedStyle: {
+    focusedStyle: {
       backgroundColor: 'button.primary.bg',
       color: 'button.primary.fg',
+      borderColor: 'button.primary.border',
+      borderWidth: 1,
     },
     disabledStyle: {
-      backgroundColor: 'toggle.button.fg_disabled',
-      color: 'text.white',
+      backgroundColor: 'bg.disabled',
+      color: 'fg.disabled',
+      borderWidth: 1,
+      borderColor: 'border.disabled_subtle',
     },
   },
-  Secondary: {
-    pressedStyle: {
+  PrimaryDestructive: {
+    defaultStyle: {
+      backgroundColor: 'button.primary.error.bg',
+      color: 'fg.white',
+      borderColor: 'button.primary.error.border',
+      borderWidth: 1,
+    },
+    hoveredStyle: {
+      backgroundColor: 'button.primary.error.bg_hover',
+      color: 'button.primary.error.fg_hover',
+      borderColor: 'button.primary.error.border_hover',
+      borderWidth: 1,
+    },
+    focusedStyle: {
+      backgroundColor: 'button.primary.error.bg',
+      color: 'fg.white',
+      borderColor: 'button.primary.error.border',
+      borderWidth: 1,
+    },
+    disabledStyle: {
+      backgroundColor: 'bg.disabled',
+      color: 'fg.disabled',
+      borderWidth: 1,
+      borderColor: 'border.disabled_subtle',
+    },
+  },
+  SecondaryColor: {
+    defaultStyle: {
       backgroundColor: 'button.secondary.bg',
-      color: 'text.brand.tertiary',
+      color: 'button.secondary.fg',
+      borderColor: 'button.secondary.border',
+      borderWidth: 1,
+    },
+    hoveredStyle: {
+      backgroundColor: 'button.secondary.bg_hover',
+      color: 'button.secondary.fg_hover',
+      borderColor: 'button.secondary.border_hover',
+      borderWidth: 1,
     },
-    notPressedStyle: {
+    focusedStyle: {
       backgroundColor: 'button.secondary.bg',
-      color: 'text.brand.tertiary',
+      color: 'button.secondary.fg',
+      borderColor: 'button.secondary.border',
+      borderWidth: 1,
+    },
+    disabledStyle: {
+      backgroundColor: 'bg.primary',
+      color: 'fg.disabled',
+      borderColor: 'bg.disabled_subtle',
+      borderWidth: 1,
+    },
+  },
+  SecondaryDestructive: {
+    defaultStyle: {
+      backgroundColor: 'button.secondary.error.bg',
+      color: 'button.secondary.error.fg',
+      borderColor: 'button.secondary.error.border',
+      borderWidth: 1,
+    },
+    hoveredStyle: {
+      backgroundColor: 'button.secondary.error.bg_hover',
+      color: 'button.secondary.error.fg_hover',
+      borderColor: 'button.secondary.error.border_hover',
+      borderWidth: 1,
+    },
+    focusedStyle: {
+      backgroundColor: 'button.secondary.error.bg',
+      color: 'button.secondary.error.fg',
+      borderColor: 'button.secondary.error.border',
+      borderWidth: 1,
+    },
+    disabledStyle: {
+      backgroundColor: 'bg.primary',
+      color: 'fg.disabled',
+      borderColor: 'bg.disabled_subtle',
+      borderWidth: 1,
+    },
+  },
+  SecondaryGray: {
+    defaultStyle: {
+      backgroundColor: 'button.secondary.bg',
+      color: 'button.secondary.fg',
+      borderColor: 'button.secondary.border',
+      borderWidth: 1,
+    },
+    hoveredStyle: {
+      backgroundColor: 'button.secondary.bg_hover',
+      color: 'button.secondary.fg_hover',
+      borderColor: 'button.secondary.border_hover',
+      borderWidth: 1,
+    },
+    focusedStyle: {
+      backgroundColor: 'button.secondary.bg',
+      color: 'button.secondary.fg',
+      borderColor: 'button.secondary.border',
+      borderWidth: 1,
     },
     disabledStyle: {
       backgroundColor: 'toggle.button.fg_disabled',
-      color: 'text.brand.secondary',
+      color: 'fg.disabled',
+      borderColor: 'border.disabled_subtle',
+      borderWidth: 1,
     },
   },
-  Outline: {
-    pressedStyle: {
-      backgroundColor: 'button.tertiary.fg',
-      borderColor: 'border.primary',
-      borderWidth: StyleSheet.hairlineWidth,
-      color: 'text.brand.primary',
+  TertiaryGray: {
+    defaultStyle: {
+      color: 'button.tertiary.fg',
     },
-    notPressedStyle: {
-      backgroundColor: 'button.tertiary.fg',
-      borderColor: 'border.primary',
-      borderWidth: StyleSheet.hairlineWidth,
-      color: 'text.brand.secondary',
+    hoveredStyle: {
+      backgroundColor: 'button.tertiary.bg_hover',
+      color: 'button.tertiary.fg_hover',
+    },
+    focusedStyle: {
+      color: 'button.tertiary.fg',
     },
     disabledStyle: {
-      backgroundColor: 'button.tertiary.fg',
-      borderColor: 'border.disabled',
-      borderWidth: StyleSheet.hairlineWidth,
-      color: 'text.disabled',
+      color: 'fg.disabled',
     },
   },
-  Ghost: {
-    pressedStyle: {
-      backgroundColor: 'button.primary.bg',
-      color: 'text.primary',
+  TertiaryColor: {
+    defaultStyle: {
+      color: 'button.tertiary.color.fg',
+    },
+    hoveredStyle: {
+      backgroundColor: 'button.tertiary.bg_hover',
+      color: 'button.tertiary.color.fg_hover',
     },
-    notPressedStyle: {
-      backgroundColor: 'button.tertiary.fg',
-      color: 'text.primary',
+    focusedStyle: {
+      color: 'button.tertiary.color.fg',
     },
     disabledStyle: {
-      backgroundColor: 'button.tertiary.fg',
-      color: 'text.brand.secondary',
+      color: 'fg.disabled',
     },
   },
-  Link: {
-    pressedStyle: {
-      backgroundColor: 'button.tertiary.fg',
-      color: 'text.brand.primary',
+  TertiaryDestructive: {
+    defaultStyle: {
+      color: 'button.tertiary.error.fg',
     },
-    notPressedStyle: {
-      backgroundColor: 'button.tertiary.fg',
-      color: 'text.brand.secondary',
+    hoveredStyle: {
+      backgroundColor: 'button.tertiary.error.bg_hover',
+      color: 'button.tertiary.error.fg_hover',
+    },
+    focusedStyle: {
+      color: 'button.tertiary.error.fg',
+    },
+    disabledStyle: {
+      color: 'fg.disabled',
+    },
+  },
+  LinkGray: {
+    defaultStyle: {
+      color: 'button.tertiary.fg',
+    },
+    hoveredStyle: {
+      color: 'button.tertiary.fg_hover',
+    },
+    focusedStyle: {
+      color: 'button.tertiary.fg',
+    },
+    disabledStyle: {
+      color: 'fg.disabled',
+    },
+  },
+  LinkColor: {
+    defaultStyle: {
+      color: 'button.tertiary.color.fg',
+    },
+    hoveredStyle: {
+      color: 'button.tertiary.color.fg_hover',
+    },
+    focusedStyle: {
+      color: 'button.tertiary.color.fg',
+    },
+    disabledStyle: {
+      color: 'fg.disabled',
+    },
+  },
+  LinkDestructive: {
+    defaultStyle: {
+      color: 'button.tertiary.error.fg',
+    },
+    hoveredStyle: {
+      color: 'button.tertiary.error.fg_hover',
+    },
+    focusedStyle: {
+      color: 'button.tertiary.error.fg',
     },
     disabledStyle: {
-      backgroundColor: 'button.tertiary.fg',
-      color: 'text.disabled',
+      color: 'fg.disabled',
     },
   },
 }
+
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+
+type SizeStyle = {
+  textVariant: TextVariant
+  // FIXME: add untitled ui theme sizing dimensions here instead of number
+  paddingHorizontal: number
+  paddingVertical: number
+  iconGap: number
+  iconSize: number
+}
+
+export const buttonSizeVariants: { [key in ButtonSize]: SizeStyle } = {
+  sm: {
+    textVariant: 'SmSemibold',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    iconGap: 4,
+    iconSize: 20,
+  },
+  md: {
+    textVariant: 'SmSemibold',
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    iconGap: 4,
+    iconSize: 20,
+  },
+  lg: {
+    textVariant: 'MdSemibold',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    iconGap: 6,
+    iconSize: 20,
+  },
+  xl: {
+    textVariant: 'MdSemibold',
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    iconGap: 6,
+    iconSize: 20,
+  },
+  xxl: {
+    textVariant: 'LgSemibold',
+    paddingHorizontal: 22,
+    paddingVertical: 18,
+    iconGap: 10,
+    iconSize: 24,
+  },
+} as const
diff --git a/src/design-system/config/textVariants.ts b/src/design-system/config/textVariants.ts
index 282b1db0..22f560bd 100644
--- a/src/design-system/config/textVariants.ts
+++ b/src/design-system/config/textVariants.ts
@@ -1,89 +1,103 @@
-import { TextVariant } from '@baca/design-system'
+import { FontWeight, fontDisplaySize, fontTextSize } from './theme'
 
-type VariantStyle = {
-  fontFamily: Fonts
-  fontSize: FontSizes
+export type TextVariant =
+  | 'LgBold'
+  | 'LgMedium'
+  | 'LgRegular'
+  | 'LgSemibold'
+  | 'MdBold'
+  | 'MdMedium'
+  | 'MdRegular'
+  | 'MdSemibold'
+  | 'SmBold'
+  | 'SmMedium'
+  | 'SmRegular'
+  | 'SmSemibold'
+  | 'XlBold'
+  | 'XlMedium'
+  | 'XlRegular'
+  | 'XlSemibold'
+  | 'XsBold'
+  | 'XsMedium'
+  | 'XsRegular'
+  | 'XsSemibold'
+
+export const textVariants: {
+  [key in TextVariant]: { fontWeight: FontWeight; fontSize: keyof typeof fontTextSize }
+} = {
+  LgBold: { fontWeight: 'Bold', fontSize: 'lg' },
+  LgMedium: { fontWeight: 'Medium', fontSize: 'lg' },
+  LgRegular: { fontWeight: 'Regular', fontSize: 'lg' },
+  LgSemibold: { fontWeight: 'Semibold', fontSize: 'lg' },
+  MdBold: { fontWeight: 'Bold', fontSize: 'md' },
+  MdMedium: { fontWeight: 'Medium', fontSize: 'md' },
+  MdRegular: { fontWeight: 'Regular', fontSize: 'md' },
+  MdSemibold: { fontWeight: 'Semibold', fontSize: 'md' },
+  SmBold: { fontWeight: 'Bold', fontSize: 'sm' },
+  SmMedium: { fontWeight: 'Medium', fontSize: 'sm' },
+  SmRegular: { fontWeight: 'Regular', fontSize: 'sm' },
+  SmSemibold: { fontWeight: 'Semibold', fontSize: 'sm' },
+  XlBold: { fontWeight: 'Bold', fontSize: 'xl' },
+  XlMedium: { fontWeight: 'Medium', fontSize: 'xl' },
+  XlRegular: { fontWeight: 'Regular', fontSize: 'xl' },
+  XlSemibold: { fontWeight: 'Semibold', fontSize: 'xl' },
+  XsBold: { fontWeight: 'Bold', fontSize: 'xs' },
+  XsMedium: { fontWeight: 'Medium', fontSize: 'xs' },
+  XsRegular: { fontWeight: 'Regular', fontSize: 'xs' },
+  XsSemibold: { fontWeight: 'Semibold', fontSize: 'xs' },
 }
 
-export const textVariants: { [key in TextVariant]: VariantStyle } = {
-  H1: {
-    fontFamily: 'regular',
-    fontSize: '5xl',
-  },
-  H1Bold: {
-    fontFamily: 'bold',
-    fontSize: '5xl',
-  },
-  H2: {
-    fontFamily: 'regular',
-    fontSize: '4xl',
-  },
-  H2Bold: {
-    fontFamily: 'bold',
-    fontSize: '4xl',
-  },
-  H3: {
-    fontFamily: 'regular',
-    fontSize: '3xl',
-  },
-  H3Bold: {
-    fontFamily: 'bold',
-    fontSize: '3xl',
-  },
-  H4: {
-    fontFamily: 'regular',
-    fontSize: '2xl',
-  },
-  H4Bold: {
-    fontFamily: 'bold',
-    fontSize: '2xl',
-  },
-  H5: {
-    fontFamily: 'regular',
-    fontSize: 'xl',
-  },
-  H5Bold: {
-    fontFamily: 'bold',
-    fontSize: 'xl',
-  },
-  H6: {
-    fontFamily: 'regular',
-    fontSize: 'lg',
-  },
-  H6Bold: {
-    fontFamily: 'bold',
-    fontSize: 'lg',
-  },
-  Subtitle: {
-    fontFamily: 'regular',
-    fontSize: 'lg',
-  },
-  SubtitleBold: {
-    fontFamily: 'bold',
-    fontSize: 'lg',
-  },
-  Body: {
-    fontFamily: 'regular',
-    fontSize: 'md',
-  },
-  BodyBold: {
-    fontFamily: 'bold',
-    fontSize: 'md',
-  },
-  Caption: {
-    fontFamily: 'regular',
-    fontSize: 'sm',
-  },
-  CaptionBold: {
-    fontFamily: 'bold',
-    fontSize: 'sm',
-  },
-  NavLabel: {
-    fontFamily: 'regular',
-    fontSize: 'xs',
-  },
-  NavLabelBold: {
-    fontFamily: 'bold',
-    fontSize: 'xs',
-  },
+export type DisplayVariant =
+  | 'LgBold'
+  | 'LgMedium'
+  | 'LgRegular'
+  | 'LgSemibold'
+  | 'MdBold'
+  | 'MdMedium'
+  | 'MdRegular'
+  | 'MdSemibold'
+  | 'SmBold'
+  | 'SmMedium'
+  | 'SmRegular'
+  | 'SmSemibold'
+  | 'XlBold'
+  | 'XlMedium'
+  | 'XlRegular'
+  | 'XlSemibold'
+  | 'XsBold'
+  | 'XsMedium'
+  | 'XsRegular'
+  | 'XsSemibold'
+  | 'XxlBold'
+  | 'XxlMedium'
+  | 'XxlRegular'
+  | 'XxlSemibold'
+
+export const displayVariants: {
+  [key in DisplayVariant]: { fontWeight: FontWeight; fontSize: keyof typeof fontDisplaySize }
+} = {
+  LgBold: { fontWeight: 'Bold', fontSize: 'lg' },
+  LgMedium: { fontWeight: 'Medium', fontSize: 'lg' },
+  LgRegular: { fontWeight: 'Regular', fontSize: 'lg' },
+  LgSemibold: { fontWeight: 'Semibold', fontSize: 'lg' },
+  MdBold: { fontWeight: 'Bold', fontSize: 'md' },
+  MdMedium: { fontWeight: 'Medium', fontSize: 'md' },
+  MdRegular: { fontWeight: 'Regular', fontSize: 'md' },
+  MdSemibold: { fontWeight: 'Semibold', fontSize: 'md' },
+  SmBold: { fontWeight: 'Bold', fontSize: 'sm' },
+  SmMedium: { fontWeight: 'Medium', fontSize: 'sm' },
+  SmRegular: { fontWeight: 'Regular', fontSize: 'sm' },
+  SmSemibold: { fontWeight: 'Semibold', fontSize: 'sm' },
+  XlBold: { fontWeight: 'Bold', fontSize: 'xl' },
+  XlMedium: { fontWeight: 'Medium', fontSize: 'xl' },
+  XlRegular: { fontWeight: 'Regular', fontSize: 'xl' },
+  XlSemibold: { fontWeight: 'Semibold', fontSize: 'xl' },
+  XsBold: { fontWeight: 'Bold', fontSize: 'xs' },
+  XsMedium: { fontWeight: 'Medium', fontSize: 'xs' },
+  XsRegular: { fontWeight: 'Regular', fontSize: 'xs' },
+  XsSemibold: { fontWeight: 'Semibold', fontSize: 'xs' },
+  XxlBold: { fontWeight: 'Bold', fontSize: 'xxl' },
+  XxlMedium: { fontWeight: 'Medium', fontSize: 'xxl' },
+  XxlRegular: { fontWeight: 'Regular', fontSize: 'xxl' },
+  XxlSemibold: { fontWeight: 'Semibold', fontSize: 'xxl' },
 }
diff --git a/src/design-system/config/theme.ts b/src/design-system/config/theme.ts
index ba143d42..e049d9c7 100644
--- a/src/design-system/config/theme.ts
+++ b/src/design-system/config/theme.ts
@@ -93,25 +93,42 @@ export const ProjectColors = {
   //CONFIG: Add your project specific colors here
   modalBackground: 'rgba(0, 0, 0, 0.5)',
 }
+export type TextFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type DisplayFontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+export type FontWeight = 'Regular' | 'Medium' | 'Semibold' | 'Bold'
 
-export const fontSizes = {
-  '2xs': 10,
+export const fontTextSize: { [key in TextFontSize]: number } = {
   xs: 12,
   sm: 14,
   md: 16,
   lg: 18,
   xl: 20,
-  '2xl': 24,
-  '3xl': 30,
-  '4xl': 36,
-  '5xl': 48,
-  '6xl': 60,
-  '7xl': 72,
-  '8xl': 96,
-  '9xl': 128,
 } as const
 
-export const scale = fontSizes.md
+export const fontDisplaySize: { [key in DisplayFontSize]: number } = {
+  xs: 24,
+  sm: 30,
+  md: 36,
+  lg: 48,
+  xl: 60,
+  xxl: 72,
+} as const
+
+export const fontWeights: { [key in FontWeight]: '400' | '500' | '600' | '700' } = {
+  Regular: '400',
+  Medium: '500',
+  Semibold: '600',
+  Bold: '700',
+} as const
+
+export const fonts: { [key in FontWeight]: string } = {
+  Regular: 'Lato_400Regular',
+  Medium: 'Lato_500Medium',
+  Semibold: 'Lato_600Semibold',
+  Bold: 'Lato_700Bold',
+} as const
+
+export const scale = fontTextSize.md
 
 export const letterSpacings = {
   xs: '-0.05em',
@@ -135,26 +152,6 @@ export const lineHeights = {
   '5xl': '4em',
 } as const
 
-export const fontWeights = {
-  hairline: '100',
-  thin: '200',
-  light: '300',
-  normal: '400',
-  medium: '500',
-  semibold: '600',
-  bold: '700',
-  extrabold: '800',
-  black: '900',
-} as const
-
-export const fonts = {
-  thin: 'Lato_100Thin',
-  light: 'Lato_300Light',
-  regular: 'Lato_400Regular',
-  bold: 'Lato_700Bold',
-  black: 'Lato_900Black',
-} as const
-
 export const size = {
   '0': 0,
   '0.5': 0.125 * scale,
@@ -335,7 +332,6 @@ export const _appTheme = {
   },
   fonts,
   letterSpacings,
-  fontSizes,
   lineHeights,
   fontWeights,
   size,
diff --git a/src/i18n/translations/en.json b/src/i18n/translations/en.json
index 6fabeca1..88c94d7a 100644
--- a/src/i18n/translations/en.json
+++ b/src/i18n/translations/en.json
@@ -98,13 +98,19 @@
   "components_screen": {
     "button_variants": {
       "disabled": "Button disabled",
-      "ghost": "Button ghost",
       "header": "Button variants",
-      "link": "Button link",
+      "link_color": "Button link color",
+      "link_destructive": "Button link destructive",
+      "link_gray": "Button link gray",
       "loading": "Button loading",
-      "outline": "Button outline",
       "primary": "Button primary",
-      "secondary": "Button secondary",
+      "primary_destructive": "Button primary destructive",
+      "secondary_color": "Button secondary color",
+      "secondary_destructive": "Button secondary destructive",
+      "secondary_gray": "Button secondary gray",
+      "tertiary_color": "Button tertiary color",
+      "tertiary_destructive": "Button tertiary destructive",
+      "tertiary_gray": "Button tertiary gray",
       "with_icons": "Button with icons"
     },
 
@@ -219,8 +225,8 @@
     "which_music": "what kind of music do you listen ?"
   },
   "typography_screen": {
-    "heading_size": "Heading.size: ",
-    "text_font_size": "Text.fontSize: "
+    "display_font_size": "Display fontSize: ",
+    "text_font_size": "Text fontSize: "
   },
   "hello": "Welcome",
   "thanks": "Thank you for using the best template for expo apps",
diff --git a/src/i18n/translations/pl.json b/src/i18n/translations/pl.json
index 73c882f4..e71ced3f 100644
--- a/src/i18n/translations/pl.json
+++ b/src/i18n/translations/pl.json
@@ -110,13 +110,19 @@
     },
     "button_variants": {
       "disabled": "Button disabled",
-      "ghost": "Button ghost",
       "header": "Button variants",
-      "link": "Button link",
+      "link_color": "Button link color",
+      "link_destructive": "Button link destructive",
+      "link_gray": "Button link gray",
       "loading": "Button loading",
-      "outline": "Button outline",
       "primary": "Button primary",
-      "secondary": "Button secondary",
+      "primary_destructive": "Button primary destructive",
+      "secondary_color": "Button secondary color",
+      "secondary_destructive": "Button secondary destructive",
+      "secondary_gray": "Button secondary gray",
+      "tertiary_color": "Button tertiary color",
+      "tertiary_destructive": "Button tertiary destructive",
+      "tertiary_gray": "Button tertiary gray",
       "with_icons": "Button with icons"
     },
     "loader_variants": {
@@ -218,8 +224,8 @@
     "which_music": "Jakiej muzyki słuchasz ?"
   },
   "typography_screen": {
-    "text_font_size": "Text.fontSize: ",
-    "heading_size": "Heading.size: "
+    "display_font_size": "Display fontSize: ",
+    "text_font_size": "Text fontSize: "
   },
   "hello": "Witaj",
   "thanks": "Dzięki za używanie najlepszej templatki dla aplikacji expo",
diff --git a/src/screens/CategoriesScreen.tsx b/src/screens/CategoriesScreen.tsx
index 97c3a875..03be5123 100644
--- a/src/screens/CategoriesScreen.tsx
+++ b/src/screens/CategoriesScreen.tsx
@@ -19,7 +19,7 @@ export const CategoriesScreen = () => {
         source={colorScheme === 'light' ? lightLogo : darkLogo}
         style={styles.logo}
       />
-      <Text.H1Bold textAlign="center">Categories screen</Text.H1Bold>
+      <Text.LgBold textAlign="center">Categories screen</Text.LgBold>
     </Center>
   )
 }
diff --git a/src/screens/ComponentsScreen.tsx b/src/screens/ComponentsScreen.tsx
index 1b10f5c0..311db3dc 100644
--- a/src/screens/ComponentsScreen.tsx
+++ b/src/screens/ComponentsScreen.tsx
@@ -1,8 +1,7 @@
-import { Icon, Loader, Box, Text, Button, Center, ScrollView } from '@baca/design-system'
+import { Icon, Loader, Box, Text, Button, Center, ScrollView, Display } from '@baca/design-system'
 import { useCallback, useNotifications, useScreenOptions, useTranslation } from '@baca/hooks'
 import * as Linking from 'expo-linking'
 
-const headingSizes = ['xs', 'sm', 'md', 'lg', '2xl', '3xl', '4xl'] as const
 const loaderVariants = [
   {
     type: 'circle',
@@ -54,17 +53,12 @@ export const ComponentsScreen = (): JSX.Element => {
         {t('components_screen.test_notification')}
       </Button.Primary>
       <Box alignItems="center">
-        <Text.H4 mt={8} mb={4}>
+        <Text.LgRegular mt={8} mb={4}>
           {t('components_screen.typography.label')}
-        </Text.H4>
-        {headingSizes.map((size) => (
-          <Text key={size} fontSize={size}>
-            {t(`components_screen.typography.${size}`)}
-          </Text>
-        ))}
-        <Text.H4 mt={8} mb={4}>
+        </Text.LgRegular>
+        <Text.LgRegular mt={8} mb={4}>
           {t('components_screen.button_variants.header')}
-        </Text.H4>
+        </Text.LgRegular>
         <Button.Primary title={t('components_screen.button_variants.primary')} />
         <Button.Primary
           mt={4}
@@ -72,27 +66,53 @@ export const ComponentsScreen = (): JSX.Element => {
           rightIcon={<Icon name="account-box-fill" size={24} color="alpha.black.100" />}
           title={t('components_screen.button_variants.with_icons')}
         />
-        <Button.Secondary mt={4} title={t('components_screen.button_variants.secondary')} />
-        <Button.Outline mt={4} title={t('components_screen.button_variants.outline')} />
-        <Button.Ghost mt={4} title={t('components_screen.button_variants.ghost')} />
-        <Button.Link mt={4} title={t('components_screen.button_variants.link')} />
+        <Button.PrimaryDestructive
+          mt={4}
+          title={t('components_screen.button_variants.primary_destructive')}
+        />
+        <Button.SecondaryColor
+          mt={4}
+          title={t('components_screen.button_variants.secondary_color')}
+        />
+        <Button.SecondaryGray
+          mt={4}
+          title={t('components_screen.button_variants.secondary_gray')}
+        />
+        <Button.SecondaryDestructive
+          mt={4}
+          title={t('components_screen.button_variants.secondary_destructive')}
+        />
+        <Button.TertiaryColor
+          mt={4}
+          title={t('components_screen.button_variants.tertiary_color')}
+        />
+        <Button.TertiaryGray mt={4} title={t('components_screen.button_variants.tertiary_gray')} />
+        <Button.TertiaryDestructive
+          mt={4}
+          title={t('components_screen.button_variants.tertiary_destructive')}
+        />
+        <Button.LinkColor mt={4} title={t('components_screen.button_variants.link_color')} />
+        <Button.LinkGray mt={4} title={t('components_screen.button_variants.link_gray')} />
+        <Button.LinkDestructive
+          mt={4}
+          title={t('components_screen.button_variants.link_destructive')}
+        />
         <Button mt={4} disabled>
           {t('components_screen.button_variants.disabled')}
         </Button>
         <Button mt={4} loading size="lg" />
-        <Text.H4 mt={8} mb={4}>
+        <Text.LgRegular mt={8} mb={4}>
           {t('components_screen.loader_variants.header')}
-        </Text.H4>
+        </Text.LgRegular>
         {loaderVariants?.map((loader) => (
           <Box flex={1} key={loader.type}>
-            <Text my={4} fontSize="sm">
-              {t(loader?.headerText)}
-            </Text>
+            <Text.SmRegular my={4}>{t(loader?.headerText)}</Text.SmRegular>
             <Center>
               <Loader type={loader?.type} />
             </Center>
           </Box>
         ))}
+        <Display.LgBold>TEST</Display.LgBold>
       </Box>
     </ScrollView>
   )
diff --git a/src/screens/DataFromBeScreen_EXAMPLE.tsx b/src/screens/DataFromBeScreen_EXAMPLE.tsx
index 5c56e5c6..f11f903d 100644
--- a/src/screens/DataFromBeScreen_EXAMPLE.tsx
+++ b/src/screens/DataFromBeScreen_EXAMPLE.tsx
@@ -19,7 +19,7 @@ export const DataFromBeScreen_EXAMPLE = () => {
     return (
       <Box mb="1" bg="fg.brand.primary" borderRadius={2} m={2}>
         <Text>{'id: ' + id}</Text>
-        <Text.Body mb={2}>{'title: ' + title}</Text.Body>
+        <Text.MdRegular mb={2}>{'title: ' + title}</Text.MdRegular>
       </Box>
     )
   }, [])
@@ -27,8 +27,8 @@ export const DataFromBeScreen_EXAMPLE = () => {
   return (
     <Box flex={1}>
       <Center flex={1}>
-        <Text fontSize="xl">THIS IS EXAMPLE SCREEN</Text>
-        <Text fontSize="xl">which contains data from backend</Text>
+        <Text.XlRegular>THIS IS EXAMPLE SCREEN</Text.XlRegular>
+        <Text.XlRegular>which contains data from backend</Text.XlRegular>
         <Spacer y="1" />
         <FlatList
           ListEmptyComponent={
diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx
index e569b987..52919f0a 100644
--- a/src/screens/HomeScreen.tsx
+++ b/src/screens/HomeScreen.tsx
@@ -39,9 +39,9 @@ export const HomeScreen = () => {
         source={colorScheme === 'light' ? lightLogo : darkLogo}
         style={styles.logo}
       />
-      <Text.H3Bold textAlign="center">{t('hello')}</Text.H3Bold>
-      <Text.Caption textAlign="center">{t('thanks')}</Text.Caption>
-      <Text.Caption textAlign="center">{t('app_information')}</Text.Caption>
+      <Text.MdBold textAlign="center">{t('hello')}</Text.MdBold>
+      <Text.MdRegular textAlign="center">{t('thanks')}</Text.MdRegular>
+      <Text.MdRegular textAlign="center">{t('app_information')}</Text.MdRegular>
       <Button mt={4} onPress={navigateToDetails}>
         {t('home_screen.details')}
       </Button>
diff --git a/src/screens/LandingScreen.tsx b/src/screens/LandingScreen.tsx
index ab343deb..dcfe8b8c 100644
--- a/src/screens/LandingScreen.tsx
+++ b/src/screens/LandingScreen.tsx
@@ -33,9 +33,9 @@ export const LandingScreen = () => {
           source={colorScheme === 'light' ? lightLogo : darkLogo}
           style={styles.logo}
         />
-        <Text.H3Bold textAlign="center">{t('hello')}</Text.H3Bold>
-        <Text.Caption textAlign="center">{t('thanks')}</Text.Caption>
-        <Text.Caption textAlign="center">{t('app_information')}</Text.Caption>
+        <Text.LgBold textAlign="center">{t('hello')}</Text.LgBold>
+        <Text.MdRegular textAlign="center">{t('thanks')}</Text.MdRegular>
+        <Text.MdRegular textAlign="center">{t('app_information')}</Text.MdRegular>
         <Button mt={4} onPress={navigateToBigForm}>
           {t('landing_screen.go_to_form')}
         </Button>
diff --git a/src/screens/ProfileScreen.tsx b/src/screens/ProfileScreen.tsx
index d3e9b521..d78c83cd 100644
--- a/src/screens/ProfileScreen.tsx
+++ b/src/screens/ProfileScreen.tsx
@@ -15,8 +15,8 @@ export const ProfileScreen = () => {
 
   return (
     <Box m={8}>
-      <Text.H1Bold>Profile</Text.H1Bold>
-      <Text.Subtitle>Update your personal details here.</Text.Subtitle>
+      <Text.LgBold>Profile</Text.LgBold>
+      <Text.MdRegular>Update your personal details here.</Text.MdRegular>
 
       <Box borderColor="utility.gray.300" borderBottomWidth={2} borderTopWidth={2} my={4} py={4}>
         <ControlledField.Input
@@ -52,7 +52,7 @@ export const ProfileScreen = () => {
       </Box>
 
       <Row justifyContent="flex-end">
-        <Button.Secondary
+        <Button.SecondaryColor
           disabled={isSubmitting}
           loading={isSubmitting}
           my={8}
@@ -60,7 +60,7 @@ export const ProfileScreen = () => {
           testID="backProfileButton"
         >
           {t('common.cancel')}
-        </Button.Secondary>
+        </Button.SecondaryColor>
         <Spacer x="4" />
         <Button
           disabled={isSubmitting}
diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx
index f40b3fd1..18c18bb0 100644
--- a/src/screens/SettingsScreen.tsx
+++ b/src/screens/SettingsScreen.tsx
@@ -24,7 +24,7 @@ export const SettingsScreen = (): JSX.Element => {
   return (
     <ScrollView mt={4}>
       <Center flex={1}>
-        <Text fontSize="2xl" bold mb={2}>
+        <Text bold mb={2}>
           {t('settings_screen.current_theme', { theme: colorSchemeSetting })}
         </Text>
         {colorSchemesList.map((scheme) => {
@@ -37,9 +37,9 @@ export const SettingsScreen = (): JSX.Element => {
           )
         })}
 
-        <Button.Secondary mt={8} size="lg" onPress={signOut}>
+        <Button.SecondaryColor mt={8} size="lg" onPress={signOut}>
           {t('settings_screen.sign_out')}
-        </Button.Secondary>
+        </Button.SecondaryColor>
         <Spacer y={10} />
         <Version onPress={noop} />
       </Center>
diff --git a/src/screens/SignInScreen.tsx b/src/screens/SignInScreen.tsx
index ad621289..9b142746 100644
--- a/src/screens/SignInScreen.tsx
+++ b/src/screens/SignInScreen.tsx
@@ -100,7 +100,9 @@ export const SignInScreen = (): JSX.Element => {
           <Text bold mb={4}>
             {t('sign_in_screen.do_not_have_an_account')}
           </Text>
-          <Button.Link onPress={navigateToSignUp}>{t('sign_in_screen.sign_up')}</Button.Link>
+          <Button.LinkColor onPress={navigateToSignUp}>
+            {t('sign_in_screen.sign_up')}
+          </Button.LinkColor>
         </Center>
 
         <Box mt={12} />
diff --git a/src/screens/TestFormScreen.tsx b/src/screens/TestFormScreen.tsx
index f3e94503..4f6c5029 100644
--- a/src/screens/TestFormScreen.tsx
+++ b/src/screens/TestFormScreen.tsx
@@ -70,7 +70,7 @@ export const TestFormScreen = (): JSX.Element => {
 
   return (
     <KeyboardAwareScrollView contentContainerStyle={styles.container}>
-      <Text fontSize="xl" fontWeight="bold" py={2}>
+      <Text type="display" variant="XxlBold" fontWeight="bold" py={2}>
         {t('test_form.contact_data')}
       </Text>
       <ControlledField.Input
@@ -170,7 +170,7 @@ export const TestFormScreen = (): JSX.Element => {
         name="interests"
         rules={VALIDATION.interests}
       />
-      <Text fontSize="xl" fontWeight="bold" py={2}>
+      <Text fontWeight="bold" py={2}>
         {t('test_form.additional_comment')}
       </Text>
       <Controller
diff --git a/src/screens/TypographyScreen.tsx b/src/screens/TypographyScreen.tsx
index a680575c..cfa686db 100644
--- a/src/screens/TypographyScreen.tsx
+++ b/src/screens/TypographyScreen.tsx
@@ -1,22 +1,56 @@
 import { useColorScheme } from '@baca/contexts'
-import { Column, Row, Box, Text } from '@baca/design-system'
+import { Column, Row, Box, Text, Display, DisplayVariant, TextVariant } from '@baca/design-system'
 import { useTranslation } from '@baca/hooks'
 import { ScrollView, Switch, Platform } from 'react-native'
 
-export const fontSizes = [
-  'xs',
-  'sm',
-  'md',
-  'lg',
-  'xl',
-  '2xl',
-  '3xl',
-  '4xl',
-  '5xl',
-  '6xl',
-  '7xl',
-  '8xl',
-  '9xl',
+export const textVariants: TextVariant[] = [
+  'XlBold',
+  'XlSemibold',
+  'XlMedium',
+  'XlRegular',
+  'LgBold',
+  'LgSemibold',
+  'LgMedium',
+  'LgRegular',
+  'MdBold',
+  'MdSemibold',
+  'MdMedium',
+  'MdRegular',
+  'SmBold',
+  'SmSemibold',
+  'SmMedium',
+  'SmRegular',
+  'XsBold',
+  'XsSemibold',
+  'XsMedium',
+  'XsRegular',
+] as const
+
+const displayTextVariants: DisplayVariant[] = [
+  'XxlBold',
+  'XxlSemibold',
+  'XxlMedium',
+  'XxlRegular',
+  'XlBold',
+  'XlSemibold',
+  'XlMedium',
+  'XlRegular',
+  'LgBold',
+  'LgSemibold',
+  'LgMedium',
+  'LgRegular',
+  'MdBold',
+  'MdSemibold',
+  'MdMedium',
+  'MdRegular',
+  'SmBold',
+  'SmSemibold',
+  'SmMedium',
+  'SmRegular',
+  'XsBold',
+  'XsSemibold',
+  'XsMedium',
+  'XsRegular',
 ] as const
 const isWeb = Platform.OS === 'web'
 
@@ -50,11 +84,20 @@ export const TypographyScreen = (): JSX.Element => {
             </Box>
             <Text>🌚</Text>
           </Row>
-          <Text fontSize="4xl">{t('typography_screen.text_font_size')}</Text>
-          <Text.H4>{t('typography_screen.text_font_size')}</Text.H4>
-          {fontSizes.map((fontSize) => (
-            <Text key={fontSize} p={8} fontSize={fontSize}>
-              Text - {fontSize}
+          <Text color="text.error.primary" variant="XlBold">
+            {t('typography_screen.display_font_size')}
+          </Text>
+          {displayTextVariants.map((variant) => (
+            <Display type="display" key={variant} p={8} variant={variant}>
+              Display - {variant}
+            </Display>
+          ))}
+          <Text color="text.error.primary" my={4} variant="XlBold">
+            {t('typography_screen.text_font_size')}
+          </Text>
+          {textVariants.map((variant) => (
+            <Text key={variant} p={8} variant={variant}>
+              Text - {variant}
             </Text>
           ))}
         </Column>
diff --git a/src/types/theme.d.ts b/src/types/theme.d.ts
index 8aa90a37..58ddebbc 100644
--- a/src/types/theme.d.ts
+++ b/src/types/theme.d.ts
@@ -5,7 +5,6 @@ declare global {
   type AppTheme = typeof theme.light
 
   // FONTS
-  type FontSizes = keyof AppTheme['fontSizes']
   type LetterSpacings = keyof AppTheme['letterSpacings']
   type LineHeights = keyof AppTheme['lineHeights']
   type FontWeights = keyof AppTheme['fontWeights']
diff --git a/src/utils/getColorValue.ts b/src/utils/getColorValue.ts
index 93f0c8a0..d792b776 100644
--- a/src/utils/getColorValue.ts
+++ b/src/utils/getColorValue.ts
@@ -1,5 +1,5 @@
 type GetColorValueProps = {
-  color: ColorNames | string
+  color?: ColorNames | string
   colors: Colors
 }
 
diff --git a/src/utils/getFontWeight.ts b/src/utils/getFontWeight.ts
deleted file mode 100644
index 34ec71a5..00000000
--- a/src/utils/getFontWeight.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { _appTheme } from '@baca/design-system'
-import { TextStyle } from 'react-native'
-
-type FontWeights = NonNullable<keyof (typeof _appTheme)['fontWeights'] | TextStyle['fontWeight']>
-
-const fontWeightsMap: { [key in FontWeights]: TextStyle['fontWeight'] } = {
-  '100': '100',
-  '200': '200',
-  '300': '300',
-  '400': '400',
-  '500': '500',
-  '600': '600',
-  '700': '700',
-  '800': '800',
-  '900': '900',
-  bold: 'bold',
-  normal: 'normal',
-  hairline: '100',
-  thin: '100',
-  light: '300',
-  medium: '500',
-  semibold: '600',
-  extrabold: '800',
-  black: '900',
-}
-
-export const getFontWeight = (fontWeight: FontWeights): TextStyle['fontWeight'] =>
-  fontWeightsMap[fontWeight]
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 02f68f98..e5862b97 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -2,7 +2,6 @@ export * from './alert'
 export * from './checkForUpdates'
 export * from './getApiError'
 export * from './getColorValue'
-export * from './getFontWeight'
 export * from './getNavigator'
 export * from './hapticImpact'
 export * from './hex2rgba'