diff --git a/package.json b/package.json
index ce952d97ff2..5b4b9e20108 100644
--- a/package.json
+++ b/package.json
@@ -232,6 +232,7 @@
     "@actions/core": "1.10.1",
     "@btckit/types": "0.0.19",
     "@leather-wallet/prettier-config": "0.0.1",
+    "@leather-wallet/tokens": "0.0.2",
     "@ls-lint/ls-lint": "2.1.0",
     "@pandacss/dev": "0.18.3",
     "@playwright/test": "1.38.1",
diff --git a/theme/breakpoints.ts b/theme/breakpoints.ts
index f2eb092de96..9b562db7dca 100644
--- a/theme/breakpoints.ts
+++ b/theme/breakpoints.ts
@@ -1,8 +1,7 @@
+import { breakpoints as leatherBreakpoints } from '@leather-wallet/tokens';
+
+// TODO consider removing this from the tokens package / doing this better
 // ts-unused-exports:disable-next-line
 export const breakpoints = {
-  sm: '398px',
-  md: '768px',
-  lg: '1024px',
-  xl: '1280px',
-  '2xl': '1536px',
+  ...leatherBreakpoints,
 };
diff --git a/theme/colors.ts b/theme/colors.ts
index 69c182613b0..6f51e8e6d32 100644
--- a/theme/colors.ts
+++ b/theme/colors.ts
@@ -1,115 +1,7 @@
+import { colors as leatherColors } from '@leather-wallet/tokens';
 import { defineTokens } from '@pandacss/dev';
 
+// ts-unused-exports:disable-next-line
 export const colors = defineTokens.colors({
-  current: { value: 'currentColor' },
-  dark: { value: '#111' },
-  black: { value: '#000' },
-  white: { value: '#fff' },
-  lightModeRed: {
-    100: { value: '#FCEEED' },
-    300: { value: '#FFABB1' },
-    500: { value: '#FF5863' },
-    600: { value: '#FF2E3C' },
-  },
-  darkModeRed: {
-    100: { value: '#38191A' },
-    300: { value: '#4F1A1D' },
-    500: { value: '#7C1E24' },
-    600: { value: '#AB1F29' },
-  },
-  lightModeBlue: {
-    100: { value: '#E6F2FF' },
-    300: { value: '#9BCAFF' },
-    500: { value: '#3795FF' },
-    600: { value: '#057AFF' },
-  },
-  darkModeBlue: {
-    100: { value: '#0C2644' },
-    300: { value: '#092F5A' },
-    500: { value: '#053E80' },
-    600: { value: '#004EA6' },
-  },
-  lightModeYellow: {
-    100: { value: '#FEF9E6' },
-    300: { value: '#FBE699' },
-    500: { value: '#F7CD33' },
-    600: { value: '#F5C000' },
-  },
-  darkModeYellow: {
-    100: { value: '#473D1C' },
-    300: { value: '#5C4F21' },
-    500: { value: '#A98D29' },
-    600: { value: '#D8B021' },
-  },
-  lightModeGreen: {
-    100: { value: '#E6F5ED' },
-    300: { value: '#99D8B9' },
-    500: { value: '#33B172' },
-    600: { value: '#009E4F' },
-  },
-  darkModeGreen: {
-    100: { value: '#1A3124' },
-    300: { value: '#19422C' },
-    500: { value: '#165C38' },
-    600: { value: '#00753A' },
-  },
-  lightModeBrown: {
-    1: { value: '#FFFFFF' },
-    2: { value: '#F7F5F3' },
-    3: { value: '#F5F1ED' },
-    4: { value: '#EAE5E0' },
-    5: { value: '#E4DDD6' },
-    6: { value: '#DED6CD' },
-    7: { value: '#D8CEC4' },
-    8: { value: '#948677' },
-    9: { value: '#948677' },
-    10: { value: '#64594D' },
-    11: { value: '#4A423B' },
-    12: { value: '#12100F' },
-  },
-  darkModeBrown: {
-    1: { value: '#12100F' },
-    2: { value: '#2C2A24' },
-    3: { value: '#4A423B' },
-    4: { value: '#34312A' },
-    5: { value: '#12100F' },
-    6: { value: '#716A60' },
-    7: { value: '#8F887D' },
-    8: { value: '#948677' },
-    9: { value: '#F5F1ED' },
-    10: { value: '#DED6CD' },
-    11: { value: '#DED6CD' },
-    12: { value: '#F5F1ED' },
-  },
-  lightModeInk: {
-    1: { value: '#FFFFFF' },
-    2: { value: '#F9F9F9' },
-    3: { value: '#F1F1F1' },
-    4: { value: '#EBEBEB' },
-    5: { value: '#E4E4E4' },
-    6: { value: '#DDDDDD' },
-    7: { value: '#D4D4D4' },
-    8: { value: '#BBBBBB' },
-    9: { value: '#8D8D8D' },
-    10: { value: '#808080' },
-    11: { value: '#646464' },
-    12: { value: '#12100F' },
-  },
-  darkModeInk: {
-    1: { value: '#12100F' },
-    2: { value: '#1B1B1B' },
-    3: { value: '#282828' },
-    4: { value: '#303030' },
-    5: { value: '#373737' },
-    6: { value: '#3F3F3F' },
-    7: { value: '#4A4A4A' },
-    8: { value: '#606060' },
-    9: { value: '#6E6E6E' },
-    10: { value: '#818181' },
-    11: { value: '#B1B1B1' },
-    12: { value: '#EEEEEE' },
-  },
-  lightModeStacks: { value: '#5546FF' },
-  darkModeStacks: { value: '#7F80FF' },
-  overlay: { value: 'rgba(0,0,0,0.4)' },
+  ...leatherColors,
 });
diff --git a/theme/keyframes.ts b/theme/keyframes.ts
index be88dc91df2..d82a4737e3d 100644
--- a/theme/keyframes.ts
+++ b/theme/keyframes.ts
@@ -1,46 +1,7 @@
+import { keyframes as leatherKeyframes } from '@leather-wallet/tokens';
 import { CssKeyframes } from 'leather-styles/types/system-types';
 
 // ts-unused-exports:disable-next-line
 export const keyframes: CssKeyframes = {
-  fadein: {
-    '0%': { opacity: '0' },
-    '100%': { opacity: '1' },
-  },
-  fadeout: {
-    '0%': { opacity: '1' },
-    '100%': { opacity: '0' },
-  },
-  shine: {
-    '0%': {
-      backgroundPosition: '-50px',
-    },
-    '100%': {
-      backgroundPosition: '500px',
-    },
-  },
-  rotate: {
-    '0%': {
-      transform: 'rotate(0deg)',
-    },
-    '100%': {
-      transform: 'rotate(360deg)',
-    },
-  },
-  // TODO: identical to above, remove
-  spin: {
-    '0%': {
-      transform: 'rotate(0deg)',
-    },
-    '100%': {
-      transform: 'rotate(360deg)',
-    },
-  },
-  animatedTick: {
-    from: {
-      strokeDashoffset: 350,
-    },
-    to: {
-      strokeDashoffset: 0,
-    },
-  },
+  ...leatherKeyframes,
 };
diff --git a/theme/semantic-tokens.ts b/theme/semantic-tokens.ts
index b6661b6b097..cc2dd434cd9 100644
--- a/theme/semantic-tokens.ts
+++ b/theme/semantic-tokens.ts
@@ -1,110 +1,7 @@
+import { semanticTokens as leatherSemanticTokens } from '@leather-wallet/tokens';
 import { defineSemanticTokens } from '@pandacss/dev';
 
 // ts-unused-exports:disable-next-line
 export const semanticTokens = defineSemanticTokens({
-  colors: {
-    // Primative colours defined as semantic tokens to match Radix
-    brown: {
-      1: { value: { base: '{colors.lightModeBrown.1}', _dark: '{colors.darkModeBrown.1}' } },
-      2: { value: { base: '{colors.lightModeBrown.2}', _dark: '{colors.darkModeBrown.2}' } },
-      3: { value: { base: '{colors.lightModeBrown.3}', _dark: '{colors.darkModeBrown.3}' } },
-      4: { value: { base: '{colors.lightModeBrown.4}', _dark: '{colors.darkModeBrown.4}' } },
-      5: { value: { base: '{colors.lightModeBrown.5}', _dark: '{colors.darkModeBrown.5}' } },
-      6: { value: { base: '{colors.lightModeBrown.6}', _dark: '{colors.darkModeBrown.6}' } },
-      7: { value: { base: '{colors.lightModeBrown.7}', _dark: '{colors.darkModeBrown.7}' } },
-      8: { value: { base: '{colors.lightModeBrown.8}', _dark: '{colors.darkModeBrown.8}' } },
-      9: { value: { base: '{colors.lightModeBrown.9}', _dark: '{colors.darkModeBrown.9}' } },
-      10: { value: { base: '{colors.lightModeBrown.10}', _dark: '{colors.darkModeBrown.10}' } },
-      11: { value: { base: '{colors.lightModeBrown.11}', _dark: '{colors.darkModeBrown.11}' } },
-      12: { value: { base: '{colors.lightModeBrown.12}', _dark: '{colors.darkModeBrown.12}' } },
-    },
-    ink: {
-      1: { value: { base: '{colors.lightModeInk.1}', _dark: '{colors.darkModeInk.1}' } },
-      2: { value: { base: '{colors.lightModeInk.2}', _dark: '{colors.darkModeInk.2}' } },
-      3: { value: { base: '{colors.lightModeInk.3}', _dark: '{colors.darkModeInk.3}' } },
-      4: { value: { base: '{colors.lightModeInk.4}', _dark: '{colors.darkModeInk.4}' } },
-      5: { value: { base: '{colors.lightModeInk.5}', _dark: '{colors.darkModeInk.5}' } },
-      6: { value: { base: '{colors.lightModeInk.6}', _dark: '{colors.darkModeInk.6}' } },
-      7: { value: { base: '{colors.lightModeInk.7}', _dark: '{colors.darkModeInk.7}' } },
-      8: { value: { base: '{colors.lightModeInk.8}', _dark: '{colors.darkModeInk.8}' } },
-      9: { value: { base: '{colors.lightModeInk.9}', _dark: '{colors.darkModeInk.9}' } },
-      10: { value: { base: '{colors.lightModeInk.10}', _dark: '{colors.darkModeInk.10}' } },
-      11: { value: { base: '{colors.lightModeInk.11}', _dark: '{colors.darkModeInk.11}' } },
-      12: { value: { base: '{colors.lightModeInk.12}', _dark: '{colors.darkModeInk.12}' } },
-    },
-    accent: {
-      'text-primary': {
-        value: { base: '{colors.lightModeBrown.12}', _dark: '{colors.darkModeBrown.12}' },
-      },
-      'text-subdued': {
-        value: { base: '{colors.lightModeBrown.8}', _dark: '{colors.darkModeBrown.8}' },
-      },
-      'action-primary-hover': {
-        value: { base: '{colors.lightModeBrown.10}', _dark: '{colors.darkModeBrown.10}' },
-      },
-      'action-primary-default': {
-        value: { base: '{colors.lightModeBrown.9}', _dark: '{colors.darkModeBrown.9}' },
-      },
-      'border-hover': {
-        value: { base: '{colors.lightModeBrown.5}', _dark: '{colors.darkModeBrown.8}' },
-      },
-      'border-default': {
-        value: { base: '{colors.lightModeBrown.4}', _dark: '{colors.darkModeBrown.7}' },
-      },
-      'non-interactive': {
-        value: { base: '{colors.lightModeBrown.7}', _dark: '{colors.darkModeBrown.6}' },
-      },
-      'component-background-pressed': {
-        value: { base: '{colors.lightModeBrown.4}', _dark: '{colors.darkModeBrown.5}' },
-      },
-      'component-background-hover': {
-        value: { base: '{colors.lightModeBrown.2}', _dark: '{colors.darkModeBrown.4}' },
-      },
-      'component-background-default': {
-        value: { base: '{colors.lightModeBrown.3}', _dark: '{colors.darkModeBrown.3}' },
-      },
-      'background-secondary': {
-        value: { base: '{colors.lightModeBrown.2}', _dark: '{colors.darkModeBrown.2}' },
-      },
-      'background-primary': {
-        value: { base: '{colors.lightModeBrown.1}', _dark: '{colors.darkModeBrown.1}' },
-      },
-      'notification-text': {
-        value: { base: '{colors.lightModeBrown.12}', _dark: '{colors.darkModeBrown.12}' },
-      },
-    },
-    disabled: {
-      value: { base: '{colors.lightModeBlue.100}', _dark: '{colors.darkModeBlue.100}' },
-    },
-    error: {
-      background: {
-        value: { base: '{colors.lightModeRed.100}', _dark: '{colors.darkModeRed.100}' },
-      },
-      label: {
-        value: { base: '{colors.lightModeRed.600}', _dark: '{colors.darkModeRed.600}' },
-      },
-    },
-    invert: {
-      value: { base: '{colors.darkModeBrown.1}', _dark: '{colors.lightModeBrown.1}' },
-    },
-    stacks: {
-      value: { base: '{colors.lightModeStacks}', _dark: '{colors.darkModeStacks}' },
-    },
-    success: {
-      background: {
-        value: { base: '{colors.lightModeGreen.100}', _dark: '{colors.darkModeGreen.100}' },
-      },
-      label: {
-        value: { base: '{colors.lightModeGreen.600}', _dark: '{colors.darkModeGreen.600}' },
-      },
-    },
-    warning: {
-      background: {
-        value: { base: '{colors.lightModeYellow.100}', _dark: '{colors.darkModeYellow.100}' },
-      },
-      label: {
-        value: { base: '{colors.lightModeYellow.600}', _dark: '{colors.darkModeYellow.600}' },
-      },
-    },
-  },
+  ...leatherSemanticTokens,
 });
diff --git a/theme/tokens.ts b/theme/tokens.ts
index d378bb359da..e5165203b52 100644
--- a/theme/tokens.ts
+++ b/theme/tokens.ts
@@ -1,60 +1,7 @@
+import { tokens as leatherTokens } from '@leather-wallet/tokens';
 import { defineTokens } from '@pandacss/dev';
 
-import { colors } from './colors';
-
 // ts-unused-exports:disable-next-line
 export const tokens = defineTokens({
-  animations: {
-    spin: {
-      value: 'spin 1s linear infinite',
-    },
-  },
-  sizes: {
-    centeredPageFullWidth: { value: '500px' },
-    desktopViewportMinWidth: { value: '480px' },
-    xs: { value: '12px' },
-    sm: { value: '16px' },
-    md: { value: '24px' },
-    lg: { value: '30px' },
-    xl: { value: '36px' },
-  },
-  radii: {
-    xs: { value: '8px' },
-    sm: { value: '10px' },
-    md: { value: '12px' },
-    lg: { value: '16px' },
-    xl: { value: '20px' },
-    xxl: { value: '24px' },
-  },
-  spacing: {
-    // Numbers are padded with 0 to ensure they are sorted correctly in TS
-    // autocomplete. When typing, mt="04" + enter key, will jump straight to the
-    // spacing value you need.
-    'space.00': { value: '0' },
-    'space.01': { value: '4px', description: '4px' },
-    'space.02': { value: '8px', description: '8px' },
-    'space.03': { value: '12px', description: '12px' },
-    'space.04': { value: '16px', description: '16px' },
-    'space.05': { value: '24px', description: '24px' },
-    'space.06': { value: '32px', description: '32px' },
-    'space.07': { value: '40px', description: '40px' },
-    'space.08': { value: '48px', description: '48px' },
-    'space.09': { value: '64px', description: '64px' },
-    'space.10': { value: '72px', description: '72px' },
-    'space.11': { value: '128px', description: '128px' },
-  },
-  colors,
-  borders: {
-    action: { value: '1px solid {colors.accent.action-primary-default}' },
-    active: { value: '2px solid {colors.accent.border-default}' },
-    background: { value: '2px solid {colors.accent.background-primary}' },
-    dashed: { value: '2px dashed {colors.accent.component-background-default}' },
-    default: { value: '1px solid {colors.accent.border-default}' },
-    error: { value: '1px solid {colors.error.label}' },
-    focus: { value: '2px solid {colors.accent.action-primary-default}' },
-    invert: { value: '1px solid {colors.invert}' },
-    subdued: { value: '1px solid {colors.accent.text-subdued}' },
-    warning: { value: '1px solid {colors.warning.label}' },
-  },
-  transition: { value: 'all 0.2s cubic-bezier(0.23, 1, 0.32, 1)' },
+  ...leatherTokens,
 });
diff --git a/theme/typography.ts b/theme/typography.ts
index 0c01d54946e..60189901e4f 100644
--- a/theme/typography.ts
+++ b/theme/typography.ts
@@ -1,109 +1,5 @@
+import { textStyles as leatherTextStyles } from '@leather-wallet/tokens';
 import { defineTextStyles } from '@pandacss/dev';
 
-const marchePro = 'Marche';
-
-const commonMarcheProStyles = {
-  fontFamily: marchePro,
-  textTransform: 'uppercase',
-};
-
-const diatype = 'Diatype';
-
-const commonDiatypeStyles = {
-  fontFamily: diatype,
-};
-
-const firaCode = 'Fira Code';
-
 // ts-unused-exports:disable-next-line
-export const textStyles = defineTextStyles({
-  'display.01': {
-    description: 'display.01',
-    value: { ...commonMarcheProStyles, fontSize: '9.375rem', lineHeight: '7.5rem' },
-  },
-  'display.02': {
-    description: 'display.02',
-    value: { ...commonMarcheProStyles, fontSize: '4rem', lineHeight: '3.5rem' },
-  },
-
-  'heading.01': {
-    description: 'heading.01',
-    value: { ...commonDiatypeStyles, fontSize: '3.3125rem', lineHeight: '3.75rem' },
-  },
-  'heading.02': {
-    description: 'heading.02',
-    value: { ...commonMarcheProStyles, fontSize: '2.75rem', lineHeight: '2.75rem' },
-  },
-  'heading.03': {
-    description: 'heading.03',
-    value: { ...commonMarcheProStyles, fontSize: '2rem', lineHeight: '2.1875rem' },
-  },
-  'heading.04': {
-    description: 'heading.04',
-    value: {
-      ...commonDiatypeStyles,
-      fontSize: '1.625rem',
-      lineHeight: '2.25rem',
-      fontWeight: '500',
-    },
-  },
-  'heading.05': {
-    description: 'heading.05',
-    value: {
-      ...commonDiatypeStyles,
-      fontSize: '1.3125rem',
-      lineHeight: '1.75rem',
-      fontWeight: '500',
-    },
-  },
-
-  'label.01': {
-    description: 'label.01',
-    value: {
-      ...commonDiatypeStyles,
-      fontSize: '1.0625rem',
-      lineHeight: '1.5rem',
-      fontWeight: '500',
-    },
-  },
-  'label.02': {
-    description: 'label.02',
-    value: { ...commonDiatypeStyles, fontSize: '0.9375rem', lineHeight: '1.25rem' },
-  },
-  'label.03': {
-    description: 'label.03',
-    value: { ...commonDiatypeStyles, fontSize: '0.8125rem', lineHeight: '1rem' },
-  },
-
-  'body.01': {
-    description: 'body.01',
-    value: { ...commonDiatypeStyles, fontSize: '1.0625rem', lineHeight: '1.5rem' },
-  },
-  'body.02': {
-    description: 'body.02',
-    value: { ...commonDiatypeStyles, fontSize: '0.9375rem', lineHeight: '1.25rem' },
-  },
-
-  'caption.01': {
-    description: 'caption.01',
-    value: { ...commonDiatypeStyles, fontSize: '0.9375rem', lineHeight: '1.25rem' },
-  },
-  'caption.02': {
-    description: 'caption.02',
-    value: { ...commonDiatypeStyles, fontSize: '0.8125rem', lineHeight: '1rem' },
-  },
-
-  'mono.01': {
-    description: 'mono.01',
-    value: {
-      fontFamily: firaCode,
-      fontSize: '1rem',
-      lineHeight: '1.5rem',
-      letterSpacing: '.08rem',
-    },
-  },
-  'mono.02': {
-    description: 'mono.02',
-    value: { fontFamily: firaCode, fontSize: '0.6rem', lineHeight: '1rem' },
-  },
-});
+export const textStyles = defineTextStyles({ ...leatherTextStyles });
diff --git a/yarn.lock b/yarn.lock
index b63d244cf94..091155a8428 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1743,6 +1743,11 @@
     "@trivago/prettier-plugin-sort-imports" "^4.2.0"
     prettier "^3.0.3"
 
+"@leather-wallet/tokens@0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@leather-wallet/tokens/-/tokens-0.0.2.tgz#6e93cb34be0f63562e4031db0e06b721fa48b2de"
+  integrity sha512-y4kISkpHirC+1OonyIHhLbu8eBMS8GkASE09Ay330RMjdCnkprhuVVHYCzEZgzKN0+szyCzFzrz1foYf9Tpe6A==
+
 "@ledgerhq/devices@^8.0.7", "@ledgerhq/devices@^8.0.8":
   version "8.0.8"
   resolved "https://registry.yarnpkg.com/@ledgerhq/devices/-/devices-8.0.8.tgz#cd233eb54a044913160c9183be9fb22adae4e071"