diff --git a/components/knip.json b/components/knip.json
new file mode 100644
index 00000000..e796956c
--- /dev/null
+++ b/components/knip.json
@@ -0,0 +1,3 @@
+{
+  "project": ["src/**"]
+}
\ No newline at end of file
diff --git a/components/src/components/atoms/Button/utils/withColorStyle.ts b/components/src/components/atoms/Button/utils/withColorStyle.ts
deleted file mode 100644
index a4f917a5..00000000
--- a/components/src/components/atoms/Button/utils/withColorStyle.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { P, match } from 'ts-pattern'
-
-import type { Color, Hue } from '@/src/tokens/color'
-import { validatePrimaryColor } from '@/src/tokens/color'
-
-type Shade = 'Primary' | 'Secondary'
-
-export type ColorStyle =
-  | Hue
-  | `${Hue}${Shade}`
-  | 'background'
-  | 'disabled'
-  | 'transparent'
-
-export type WithColorStyle = { colorStyle?: ColorStyle }
-
-type Properties = {
-  background: Color
-  content: Color
-  hover: Color
-  border: Color
-}
-
-type Property = keyof Properties
-
-const getPrimaryColor = (color: Hue, property: Property): Color =>
-  match(property)
-    .with(P.union('background', 'border'), () => `${color}Primary` as Color)
-    .with('content', () => 'textAccent' as const)
-    .with('hover', () => `${color}Bright` as Color)
-    .exhaustive()
-
-const getSecondaryColor = (color: Hue, property: Property): Color =>
-  match(property)
-    .with(P.union('background', 'border'), () => `${color}Surface` as Color)
-    .with('content', () => `${color}Dim` as Color)
-    .with('hover', () => `${color}Light` as Color)
-    .exhaustive()
-
-const getBackgroundColor = (property: Property): Color =>
-  match(property)
-    .with('background', () => 'backgroundPrimary' as const)
-    .with('content', () => 'textSecondary' as const)
-    .with('border', () => 'border' as const)
-    .with('hover', () => 'greySurface' as const)
-    .exhaustive()
-
-const getDisabledColor = (property: Property): Color =>
-  match(property)
-    .with('background', () => 'greyLight' as const)
-    .with('content', () => 'textDisabled' as const)
-    .with('border', () => 'greyLight' as const)
-    .with('hover', () => 'greyLight' as const)
-    .exhaustive()
-
-const getTransparentColor = (property: Property): Color =>
-  match(property)
-    .with('background', () => 'transparent' as Color)
-    .with('content', () => 'textPrimary' as const)
-    .with('border', () => 'transparent' as Color)
-    .with('hover', () => 'greyLight' as const)
-    .exhaustive()
-
-export const getValueForColourStyle = (
-  colorStyle: ColorStyle,
-  property: Property,
-): Color => {
-  const matches = colorStyle.match('^(.*?)(Primary|Secondary)?$')
-  const color = matches?.[1] || 'accent'
-  const style = matches?.[2]
-  return match([color, style])
-    .with([P._, 'Secondary'], ([color]) =>
-      getSecondaryColor(validatePrimaryColor(color), property),
-    )
-    .with(['background', P._], () => getBackgroundColor(property))
-    .with(['disabled', P._], () => getDisabledColor(property))
-    .with(['transparent', P._], () => getTransparentColor(property))
-    .otherwise(([color]) =>
-      getPrimaryColor(validatePrimaryColor(color), property),
-    )
-}
diff --git a/components/src/components/molecules/Checkbox/utils/getValueForColorStyle.ts b/components/src/components/molecules/Checkbox/utils/getValueForColorStyle.ts
deleted file mode 100644
index 46bfd55c..00000000
--- a/components/src/components/molecules/Checkbox/utils/getValueForColorStyle.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { P, match } from 'ts-pattern'
-
-import type { Color, Hue } from '@/src/tokens/color'
-import { validatePrimaryColor } from '@/src/tokens/color'
-
-type Shade = 'Primary' | 'Secondary'
-
-type ColorStyle = Hue | `${Hue}${Shade}`
-
-export type WithColorStyle = { colorStyle?: ColorStyle }
-
-type Properties = {
-  background: string
-  content: string
-}
-
-type Property = keyof Properties
-
-const getPrimaryColor = (color: Hue, property: Property): Color =>
-  match(property)
-    .with('background', () => `${color}Primary` as const)
-    .with('content', () => 'textAccent' as const)
-    .exhaustive()
-
-const getSecondaryColor = (color: Hue, property: Property): Color =>
-  match(property)
-    .with(P.union('background'), () => `${color}Surface` as const)
-    .with('content', () => `${color}Primary` as const)
-    .exhaustive()
-
-export const getValueForColorStyle = (
-  colorStyle: ColorStyle,
-  property: Property,
-): Color => {
-  const matches = colorStyle.match('^(.*?)(Primary|Secondary)?$')
-  const color = matches?.[1] || 'accent'
-  const style = matches?.[2]
-  return match([color, style])
-    .with([P._, 'Secondary'], ([color]) =>
-      getSecondaryColor(validatePrimaryColor(color), property),
-    )
-    .otherwise(([color]) =>
-      getPrimaryColor(validatePrimaryColor(color), property),
-    )
-}
diff --git a/components/src/components/molecules/CurrencyToggle/utils/getValuesForLabel.ts b/components/src/components/molecules/CurrencyToggle/utils/getValuesForLabel.ts
deleted file mode 100644
index 0ac9a551..00000000
--- a/components/src/components/molecules/CurrencyToggle/utils/getValuesForLabel.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { Size } from '../CurrencyToggle'
-import { getValuesForKnob } from './getValuesForKnob'
-
-export const getTransform = ($size: Size, $type: 'eth' | 'fiat') => {
-  const translateX = getValuesForKnob($size, 'translateX')
-  if ($type === 'eth')
-    return `translate(-50%,-50%) translateX(calc(${translateX} * -1))`
-  return `translate(-50%,-50%) translateX(${translateX})`
-}
diff --git a/components/src/components/molecules/RadioButton/utils/getValidatedColor.ts b/components/src/components/molecules/RadioButton/utils/getValidatedColor.ts
deleted file mode 100644
index fd282001..00000000
--- a/components/src/components/molecules/RadioButton/utils/getValidatedColor.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { Hue } from '@/src/tokens/color'
-import { validatePrimaryColor } from '@/src/tokens/color'
-
-export type Color = Hue
-
-export type WithColor = { color: Color }
-
-export const getValidatedColor = (color: Color = 'accent'): string => {
-  const matches = color.match('^(.*?)(Primary|Secondary)?$')
-  const baseColor = matches?.[1] || 'accent'
-  const validatedColor = validatePrimaryColor(baseColor, 'accent')
-  return `$${validatedColor}Primary`
-}
diff --git a/components/src/css/layers.css.ts b/components/src/css/layers.css.ts
deleted file mode 100644
index c9b783f4..00000000
--- a/components/src/css/layers.css.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { layer } from '@vanilla-extract/css'
-
-export const resetLayer = layer('reset')
-export const responsiveLayer = layer('responsive')
-export const interactionLayer = layer('interaction')
diff --git a/components/src/css/utils/common.ts b/components/src/css/utils/common.ts
index 16cf7735..bb79c671 100644
--- a/components/src/css/utils/common.ts
+++ b/components/src/css/utils/common.ts
@@ -24,5 +24,3 @@ export const brightness = (value: number | string) =>
 
 export const rotate = (value: number | string) =>
   base('rotate', value, 0, 'deg')
-
-export const rgb = (value: string) => `rgb(${value})`
diff --git a/components/src/css/utils/getColorStyle.ts b/components/src/css/utils/getColorStyle.ts
deleted file mode 100644
index 59bc59fe..00000000
--- a/components/src/css/utils/getColorStyle.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-const BASE_COLORS = [
-  'accent',
-  'blue',
-  'indigo',
-  'purple',
-  'pink',
-  'red',
-  'orange',
-  'yellow',
-  'green',
-  'teal',
-  'grey',
-] as const
-
-type BaseColor = (typeof BASE_COLORS)[number]
-
-const GRADIENT_COLORS = [
-  'accent',
-  'blue',
-  'purple',
-  'red',
-  'green',
-  'grey',
-] as const
-
-type GradientColor = (typeof GRADIENT_COLORS)[number]
-
-const makeColorStyleMap = () => {
-  const primaryStyles = Object.fromEntries(
-    BASE_COLORS.map(color => [
-      `${color}Primary`,
-      {
-        text: `$backgroundPrimary`,
-        background: `$${color}Primary`,
-        border: 'transparent',
-        hover: `$${color}Bright`,
-      },
-    ]),
-  ) as {
-    [key in `${BaseColor}Primary`]: any
-  }
-  const secondaryStyles = Object.fromEntries(
-    BASE_COLORS.map(color => [
-      `${color}Secondary`,
-      {
-        text: `$${color}Primary`,
-        background: `$${color}Surface`,
-        border: 'transparent',
-        hover: `$${color}Light`,
-      },
-    ]),
-  ) as {
-    [key in `${BaseColor}Secondary`]: any
-  }
-
-  const gradientValues = Object.fromEntries(
-    GRADIENT_COLORS.map(color => [
-      `${color}Gradient`,
-      {
-        text: `$backgroundPrimary`,
-        background: `$${color}Gradient`,
-        border: 'transparent',
-        hover: `$${color}Gradient`,
-      },
-    ]),
-  ) as {
-    [key in `${GradientColor}Gradient`]: any
-  }
-
-  const transparent = {
-    text: 'initial',
-    background: 'transparent',
-    border: 'transparent',
-    hover: 'greyLight',
-  } as const
-
-  const disabled = {
-    text: 'greyPrimary',
-    background: 'greyLight',
-    border: 'greyLight',
-    hover: 'greyLight',
-  } as const
-
-  const background = {
-    text: 'textPrimary',
-    background: 'backgroundPrimary',
-    border: 'border',
-    hover: 'backgroundSecondary',
-  } as const
-
-  return {
-    ...primaryStyles,
-    ...secondaryStyles,
-    ...gradientValues,
-    transparent,
-    disabled,
-    background,
-  }
-}
-
-const colorStyleMap = makeColorStyleMap()
-
-type ColorStyle = keyof ReturnType<typeof makeColorStyleMap>
-type ColorStyleProperty = 'text' | 'background' | 'border' | 'hover'
-export const getColorStyle = (
-  colorStyle: ColorStyle,
-  property: ColorStyleProperty,
-) => colorStyleMap[colorStyle]?.[property] || 'redPrimary'
diff --git a/components/src/interfaces/withColourStyle.ts b/components/src/interfaces/withColourStyle.ts
deleted file mode 100644
index 834772cc..00000000
--- a/components/src/interfaces/withColourStyle.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { P, match } from 'ts-pattern'
-
-import type { Color, Hue } from '../tokens/color'
-import { validatePrimaryColor } from '../tokens/color'
-
-type Shade = 'Primary' | 'Secondary'
-
-type ColourStyle =
-  | Hue
-  | `${Hue}${Shade}`
-  | 'background'
-  | 'disabled'
-
-export type WithColourStyle = { colourStyle: ColourStyle }
-
-type Properties = {
-  background: Color
-  content: Color
-  hover: Color
-  border: Color
-}
-
-type Property = keyof Properties
-
-const getPrimaryColor = (colour: Hue, property: Property): Color =>
-  match(property)
-    .with(P.union('background', 'border'), () => `${colour}Primary` as const)
-    .with('content', () => 'textAccent' as const)
-    .with('hover', () => `${colour}Bright` as const)
-    .exhaustive()
-
-const getSecondaryColor = (colour: Hue, property: Property): Color =>
-  match(property)
-    .with(P.union('background', 'border'), () => `${colour}Surface` as const)
-    .with('content', () => `${colour}Dim` as const)
-    .with('hover', () => `${colour}Light` as const)
-    .exhaustive()
-
-const getBackgroundColor = (property: Property): Color =>
-  match(property)
-    .with('background', () => 'backgroundPrimary' as const)
-    .with('content', () => 'textSecondary' as const)
-    .with('border', () => 'border' as const)
-    .with('hover', () => 'greySurface' as const)
-    .exhaustive()
-
-const getDisabledColor = (property: Property): Color =>
-  match(property)
-    .with('background', () => 'greyLight' as const)
-    .with('content', () => 'textDisabled' as const)
-    .with('border', () => 'greyLight' as const)
-    .with('hover', () => 'greyLight' as const)
-    .exhaustive()
-
-export const getValueForColourStyle = (
-  colourStyle: ColourStyle,
-  property: Property,
-): Color => {
-  const matches = colourStyle.match('^(.*)(Primary|Secondary)$')
-  const colour = matches?.[1] || 'accent'
-  const style = matches?.[2]
-  return match([colour, style])
-    .with([P._, 'Secondary'], ([colour]) =>
-      getSecondaryColor(validatePrimaryColor(colour), property),
-    )
-    .with(['background', P._], () => getBackgroundColor(property))
-    .with(['disabled', P._], () => getDisabledColor(property))
-    .otherwise(([colour]) =>
-      getPrimaryColor(validatePrimaryColor(colour), property),
-    )
-}
diff --git a/components/src/tokens/breakpoints.ts b/components/src/tokens/breakpoints.ts
deleted file mode 100644
index cd96b6a0..00000000
--- a/components/src/tokens/breakpoints.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export const breakpoints = {
-  xs: 360,
-  sm: 640,
-  md: 768,
-  lg: 1024,
-  xl: 1280,
-}
-
-export type Breakpoint = keyof typeof breakpoints
-
-export const breakpointNames = Object.keys(breakpoints) as Breakpoint[]
diff --git a/components/src/types/withTypography2.ts b/components/src/types/withTypography2.ts
deleted file mode 100644
index 49e0e73f..00000000
--- a/components/src/types/withTypography2.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import type {
-  FontSize,
-  FontWeight,
-  fontWeights,
-  LineHeight } from '../tokens/typography'
-import {
-  fontSizes,
-} from '../tokens/typography'
-
-type Legacy = 'label' | 'labelHeading'
-
-type FontSizes = keyof typeof fontSizes
-
-type BoldFontSizes = keyof Omit<
-  typeof fontSizes,
-  'headingOne' | 'headingTwo' | 'headingThree' | 'headingFour'
->
-
-const fonts = Object.keys(fontSizes) as FontSizes[]
-
-const fontOverides: {
-  [key in FontSizes]?: {
-    weight?: keyof typeof fontWeights
-  }
-} = {
-  headingOne: {
-    weight: 'extraBold',
-  },
-  headingTwo: {
-    weight: 'bold',
-  },
-  headingThree: {
-    weight: 'bold',
-  },
-  headingFour: {
-    weight: 'bold',
-  },
-}
-
-type FontDetail = {
-  size: FontSize
-  lineHeight: LineHeight
-  weight: FontWeight
-}
-
-const boldFontSizes = [
-  'extraLarge',
-  'large',
-  'body',
-  'small',
-  'extraSmall',
-] as BoldFontSizes[]
-
-const legacy = {
-  label: {
-    size: 'extraSmall',
-    lineHeight: 'extraSmall',
-    weight: 'normal',
-  },
-  labelHeading: {
-    size: 'small',
-    lineHeight: 'small',
-    weight: 'normal',
-  },
-} as { [key in Legacy]: FontDetail }
-
-const makeFonts = () => {
-  return Object.fromEntries(
-    fonts.map((font) => {
-      const fontWeight = fontOverides[font]?.weight || 'normal'
-      return [
-        font,
-        {
-          size: font,
-          lineHeight: font,
-          weight: fontWeight,
-        },
-      ]
-    }),
-  ) as { [key in FontSizes]: FontDetail }
-}
-
-const makeBoldFonts = () => {
-  return Object.fromEntries(
-    boldFontSizes.map(font => [
-      `${font}Bold`,
-      {
-        size: font,
-        lineHeight: font,
-        weight: 'bold',
-      },
-    ]),
-  ) as {
-    [key in `${BoldFontSizes}Bold`]: FontDetail
-  }
-}
-
-const makeFontDetails = () => {
-  return {
-    ...legacy,
-    ...makeFonts(),
-    ...makeBoldFonts(),
-  }
-}
-
-const fontDetails = makeFontDetails()
-
-export type FontVariant = keyof typeof fontDetails
-
-export const getFontSize = (fontVariant: FontVariant) => {
-  return fontDetails[fontVariant]?.size
-}
-
-export const getLineHeight = (fontVariant: FontVariant) => {
-  return fontDetails[fontVariant]?.lineHeight
-}
-
-export const getFontWeight = (fontVariant: FontVariant) => {
-  return fontDetails[fontVariant]?.weight
-}
-
-export const getValueForFontVariant = (
-  fontVariant: FontVariant,
-  property: keyof FontDetail,
-) => {
-  return fontDetails[fontVariant]?.[property]
-}
-
-export type WithTypography = {
-  fontVariant?: FontVariant
-}