diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index 428c8228c..ed5b62683 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -1,30 +1,50 @@
-import { clsx } from 'clsx'
-import { ReactElement } from 'react'
+import { cva, VariantProps } from 'class-variance-authority'
+import { CSSProperties, ReactElement } from 'react'
 
-import { Box, BoxProps } from '~/components/Box'
+import { textVariants } from '~/tokens/typography'
 
-import * as styles from './styles.css'
+const badgeVariants = cva(
+  [
+    'inline-flex',
+    'flex-shrink-0',
+    'place-items-center',
+    'rounded-full',
+    'text-white',
+    'whitespace-nowrap',
+  ],
+  {
+    variants: {
+      variant: {
+        info: ['bg-info'],
+        warning: ['bg-warning'],
+        success: ['bg-positive'],
+        error: ['bg-negative'],
+      },
 
-type BadgeProps = BoxProps &
-  styles.BadgeVariants & {
-    value: ReactElement | string | number
+      size: {
+        sm: [textVariants({ variant: 'small' }), 'h-4', 'min-w-4', 'px-2'],
+        md: [textVariants({ variant: 'normal' }), 'h-5', 'min-w-5', 'px-3'],
+        lg: [textVariants({ variant: 'medium' }), 'h-6', 'min-w-6', 'px-4'],
+      },
+    },
+    defaultVariants: {
+      size: 'sm',
+    },
   }
+)
+
+interface BadgeProps extends VariantProps<typeof badgeVariants> {
+  className?: string
+  style?: CSSProperties
+  value: ReactElement | string | number
+}
 
 export const Badge = (props: BadgeProps) => {
   const { className, value, variant = 'info', size = 'md', ...rest } = props
 
   return (
-    <Box
-      className={clsx(className, styles.badgeVariants({ variant, size }))}
-      display="inline-flex"
-      flexShrink="0"
-      placeItems="center"
-      borderRadius="circle"
-      color="white"
-      whiteSpace="nowrap"
-      {...rest}
-    >
+    <div className={badgeVariants({ variant, size, className })} {...rest}>
       {value}
-    </Box>
+    </div>
   )
 }
diff --git a/src/components/Badge/styles.css.ts b/src/components/Badge/styles.css.ts
deleted file mode 100644
index 7880ec775..000000000
--- a/src/components/Badge/styles.css.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { RecipeVariants, recipe } from '@vanilla-extract/recipes'
-
-import { atoms, vars } from '~/css'
-
-import { textVariants } from '../Text/styles.css'
-
-export const badgeVariants = recipe({
-  base: {
-    fontWeight: vars.fontWeights.normal,
-  },
-
-  variants: {
-    variant: {
-      info: atoms({ background: 'info' }),
-      warning: atoms({ background: 'warning' }),
-      success: atoms({ background: 'positive' }),
-      error: atoms({ background: 'negative' }),
-    },
-
-    size: {
-      sm: [
-        textVariants({ variant: 'small' }),
-        atoms({
-          height: '4',
-          minWidth: '4',
-          paddingX: '2',
-        }),
-      ],
-      md: [
-        textVariants({ variant: 'normal' }),
-        atoms({
-          height: '5',
-          minWidth: '5',
-          paddingX: '3',
-        }),
-      ],
-      lg: [
-        textVariants({ variant: 'medium' }),
-        atoms({
-          height: '6',
-          minWidth: '6',
-          paddingX: '4',
-        }),
-      ],
-    },
-  },
-})
-
-export type BadgeVariants = RecipeVariants<typeof badgeVariants>
diff --git a/src/tokens/typography.ts b/src/tokens/typography.ts
index ae7970edb..1414cd2b7 100644
--- a/src/tokens/typography.ts
+++ b/src/tokens/typography.ts
@@ -1,3 +1,5 @@
+import { cva } from 'class-variance-authority'
+
 export const fonts = {
   inherit: 'inherit',
   body: `Inter, system-ui, Roboto, "Helvetica Neue", Arial`,
@@ -115,3 +117,94 @@ export const text: Record<TextVariant, TextVariantAtomProps> = {
     fontWeight: 'normal',
   },
 }
+
+// Tailwind class variants
+export const textVariants = cva(undefined, {
+  variants: {
+    variant: {
+      inherit: ['text-inherit'],
+      xlarge: [
+        'text-3xl',
+        'font-bold',
+        'font-sans',
+        'leading-9',
+        'tracking-none',
+      ],
+      large: [
+        'text-xl',
+        'font-semibold',
+        'font-sans',
+        'leading-7',
+        'tracking-normal',
+      ],
+      medium: [
+        'text-base',
+        'font-bold',
+        'font-sans',
+        'leading-6',
+        'tracking-normal',
+      ],
+      normal: [
+        'text-sm',
+        'font-normal',
+        'font-sans',
+        'leading-5',
+        'tracking-wide',
+      ],
+      small: [
+        'text-xs',
+        'font-medium',
+        'font-sans',
+        'leading-4',
+        'tracking-wide',
+      ],
+      xsmall: [
+        'text-xs',
+        'font-bold',
+        'font-sans',
+        'leading-4',
+        'tracking-wide',
+      ],
+      code: [
+        'text-sm',
+        'font-normal',
+        'font-mono',
+        'leading-5',
+        'tracking-normal',
+      ],
+    },
+
+    ellipsis: {
+      true: ['overflow-hidden', 'whitespace-nowrap', 'overflow-ellipsis'],
+    },
+
+    italic: {
+      true: ['italic'],
+    },
+
+    underline: {
+      true: ['underline'],
+    },
+
+    uppercase: {
+      true: ['uppercase'],
+    },
+
+    capitalize: {
+      true: ['capitalize'],
+    },
+
+    hidden: {
+      true: [
+        'border-0',
+        'clip',
+        'h-1',
+        'm-[-1px]',
+        'overflow-hidden',
+        'p-0',
+        'absolute',
+        'w-[1px]',
+      ],
+    },
+  },
+})
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 55504ecaa..c95ba718b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -5,7 +5,7 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        body: ['Inter', 'system-ui', 'Roboto', '"Helvetica Neue"', 'Arial'],
+        sans: ['Inter', 'system-ui', 'Roboto', '"Helvetica Neue"', 'Arial'],
         mono: [
           '"iAWriter Mono"',
           'Menlo',
@@ -16,13 +16,20 @@ export default {
           'monospace',
         ],
       },
-      fontSize: {
-        xs: '0.625rem', // 10px
-        sm: '0.75rem', // 12px
-        base: '0.875rem', // 14px
-        lg: '1rem', // 16px
-        xl: '1.25rem', // 20px
-        '2xl': '1.875rem', // 30px
+      // fontSize: {
+      //   xs: '0.625rem', // 10px
+      //   sm: '0.75rem', // 12px
+      //   base: '0.875rem', // 14px
+      //   lg: '1rem', // 16px
+      //   xl: '1.25rem', // 20px
+      //   '2xl': '1.875rem', // 30px
+      // },
+
+      colors: {
+        info: '#3b82f6',
+        warning: '#f59e0b',
+        positive: '#10b981',
+        negative: '#ef4444',
       },
     },
   },