diff --git a/animations.ts b/animations.ts
new file mode 100644
index 00000000..d489ff4a
--- /dev/null
+++ b/animations.ts
@@ -0,0 +1,7 @@
+import { createAnimations } from '@tamagui/animations-css'
+
+export const animations = createAnimations({
+  fast: 'ease-in 150ms',
+  medium: 'ease-in 300ms',
+  slow: 'ease-in 450ms',
+})
diff --git a/package.json b/package.json
index 6dc94f4b..2b9a633a 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@nivo/pie": "^0.83.0",
+    "@status-im/colors": "^0.2.0",
     "@status-im/components": "^0.2.6",
     "@tamagui/config": "1.36.4",
     "@tamagui/react-17-patch": "1.36.4",
diff --git a/tamagui.config.ts b/tamagui.config.ts
index 5a50e0dc..4f38942f 100644
--- a/tamagui.config.ts
+++ b/tamagui.config.ts
@@ -1,13 +1,81 @@
+import { createFont, createTamagui, setupReactNative } from '@tamagui/core'
 import { config } from '@tamagui/config'
+import { createInterFont } from '@tamagui/font-inter'
+import { createMedia } from '@tamagui/react-native-media-driver'
+import { shorthands } from '@tamagui/shorthands'
 import { Text, View } from 'react-native'
-
-import { createTamagui, setupReactNative } from '@tamagui/core'
+import { animations } from './animations'
+import { themes } from './themes'
+import { tokens } from './tokens'
+import type { ColorTokens, GetStyledVariants, TamaguiComponent } from '@tamagui/core'
 
 setupReactNative({ Text, View })
 
-const appConfig = createTamagui(config)
+// const appConfig = createTamagui(config)
+export const appConfig = createTamagui({
+  fonts: {
+    sans: createInterFont({
+      size: {},
+      weight: {},
+      letterSpacing: {},
+      face: {
+        400: { normal: 'Inter' },
+        500: { normal: 'Inter' },
+        600: { normal: 'InterBold' },
+      },
+    }),
+    mono: createFont({
+      family:
+        'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;',
+      weight: {},
+      letterSpacing: {},
+      size: {},
+      lineHeight: {},
+    }),
+    // Tamagui requires this... weird
+    body: createInterFont({}),
+  },
+  themes,
+  tokens: {
+    colors: {
+      ...tokens.color,
+    },
+    ...tokens,
+  },
+  shouldAddPrefersColorThemes: true,
+  media: createMedia({
+    xs: { maxWidth: 660 },
+    sm: { maxWidth: 800 },
+    md: { maxWidth: 1020 },
+    lg: { maxWidth: 1280 },
+    xl: { maxWidth: 1420 },
+    xxl: { maxWidth: 1600 },
+    gtXs: { minWidth: 660 + 1 },
+    gtSm: { minWidth: 800 + 1 },
+    gtMd: { minWidth: 1020 + 1 },
+    gtLg: { minWidth: 1280 + 1 },
+    short: { maxHeight: 820 },
+    tall: { minHeight: 820 },
+    hoverNone: { hover: 'none' },
+    pointerCoarse: { pointer: 'coarse' },
+  }),
+  shorthands,
+  animations,
+})
 export type AppConfig = typeof appConfig
 declare module 'tamagui' {
   interface TamaguiCustomConfig extends AppConfig {}
 }
+declare module '@tamagui/core' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface TamaguiCustomConfig extends AppConfig {}
+}
 export default appConfig
+
+export type TextColor<
+  C extends TamaguiComponent,
+  K extends keyof V,
+  V extends GetStyledVariants<C> = GetStyledVariants<C>,
+> = {
+  [P in V[K] & string]: ColorTokens
+}
diff --git a/themes.ts b/themes.ts
new file mode 100644
index 00000000..71d46ee3
--- /dev/null
+++ b/themes.ts
@@ -0,0 +1,135 @@
+import { createTheme } from '@tamagui/core'
+
+import { tokens } from './tokens'
+
+const light = createTheme({
+  background: tokens.color['white-100'],
+  textPrimary: tokens.color['neutral-100'],
+  primary: tokens.color['primary-50'],
+  primaryHover: tokens.color['primary-60'],
+  success: tokens.color['success-50'],
+  successHover: tokens.color['success-60'],
+  danger: tokens.color['danger-50'],
+  dangerHover: tokens.color['danger-60'],
+  purple: tokens.color['purple-50'],
+  purpleHover: tokens.color['purple-60'],
+  indigo: tokens.color['indigo-50'],
+  indigoHover: tokens.color['indigo-60'],
+  turquoise: tokens.color['turquoise-50'],
+  turquoiseHover: tokens.color['turquoise-60'],
+  blue: tokens.color['blue-50'],
+  blueHover: tokens.color['blue-60'],
+  green: tokens.color['green-50'],
+  greenHover: tokens.color['green-60'],
+  yellow: tokens.color['yellow-50'],
+  yellowHover: tokens.color['yellow-60'],
+  orange: tokens.color['orange-50'],
+  orangeHover: tokens.color['orange-60'],
+  red: tokens.color['red-50'],
+  redHover: tokens.color['red-60'],
+  pink: tokens.color['pink-50'],
+  pinkHover: tokens.color['pink-60'],
+  brown: tokens.color['brown-50'],
+  brownHover: tokens.color['brown-60'],
+  beige: tokens.color['beige-50'],
+  beigeHover: tokens.color['beige-60'],
+  placeHolderColor: tokens.color['neutral-40'],
+  placeHolderColorBlurred: tokens.color['neutral-80-opa-40'],
+  iconButtonBackground: tokens.color['neutral-10'],
+  iconButtonBackgroundHover: tokens.color['neutral-20'],
+  iconButtonBackgroundSelected: tokens.color['neutral-20'],
+  iconButtonBorderSelected: tokens.color['neutral-30'],
+  iconButtonBackgroundBlurred: tokens.color['neutral-80-opa-5'],
+  iconButtonBackgroundBlurredHover: tokens.color['neutral-80-opa-10'],
+  iconButtonBackgroundBlurredSelected: tokens.color['neutral-80-opa-10'],
+  iconButtonBorderBlurredSelected: tokens.color['neutral-80-opa-5'],
+  iconButtonOutlineBackgroundSelected: tokens.color['neutral-10'],
+  iconButtonOutlineBorder: tokens.color['neutral-20'],
+  iconButtonOutlineBorderHover: tokens.color['neutral-30'],
+  iconButtonOutlineBorderSelected: tokens.color['neutral-20'],
+  iconButtonOutBackgroundBlurredSelected: tokens.color['neutral-10'],
+  iconButtonOutlineBorderBlurred: tokens.color['neutral-80-opa-10'],
+  iconButtonOutlineBorderBlurredHover: tokens.color['neutral-80-opa-20'],
+  iconButtonOutlineBorderBlurredSelected: tokens.color['neutral-80-opa-10'],
+  iconButtonColor: tokens.color['neutral-50'],
+  iconButtonColorSelected: tokens.color['neutral-100'],
+  iconButtonColorBlurred: tokens.color['neutral-100'],
+  iconButtonColorOutline: tokens.color['neutral-50'],
+  iconButtonColorOutlineSelected: tokens.color['neutral-100'],
+  iconButtonColorOutlineBlurred: tokens.color['neutral-80-opa-70'],
+  blurBackground: tokens.color['white-70'],
+})
+
+// note: we set up a single consistent base type to validate the rest:
+type BaseTheme = typeof light
+
+const dark: BaseTheme = createTheme({
+  background: tokens.color['neutral-95'],
+  textPrimary: tokens.color['white-100'],
+  primary: tokens.color['primary-60'],
+  primaryHover: tokens.color['primary-50'],
+  success: tokens.color['success-60'],
+  successHover: tokens.color['success-50'],
+  danger: tokens.color['danger-60'],
+  dangerHover: tokens.color['danger-50'],
+  purple: tokens.color['purple-60'],
+  purpleHover: tokens.color['purple-50'],
+  indigo: tokens.color['indigo-60'],
+  indigoHover: tokens.color['indigo-50'],
+  turquoise: tokens.color['turquoise-60'],
+  turquoiseHover: tokens.color['turquoise-50'],
+  blue: tokens.color['blue-60'],
+  blueHover: tokens.color['blue-50'],
+  green: tokens.color['green-60'],
+  greenHover: tokens.color['green-50'],
+  yellow: tokens.color['yellow-60'],
+  yellowHover: tokens.color['yellow-50'],
+  orange: tokens.color['orange-60'],
+  orangeHover: tokens.color['orange-50'],
+  red: tokens.color['red-60'],
+  redHover: tokens.color['red-50'],
+  pink: tokens.color['pink-60'],
+  pinkHover: tokens.color['pink-50'],
+  brown: tokens.color['brown-60'],
+  brownHover: tokens.color['brown-50'],
+  beige: tokens.color['beige-60'],
+  beigeHover: tokens.color['beige-50'],
+  placeHolderColor: tokens.color['neutral-50'],
+  placeHolderColorBlurred: tokens.color['white-30'],
+  iconButtonBackground: tokens.color['neutral-90'],
+  iconButtonBackgroundHover: tokens.color['neutral-80'],
+  iconButtonBackgroundSelected: tokens.color['neutral-80'],
+  iconButtonBorderSelected: tokens.color['neutral-60'],
+  iconButtonBackgroundBlurred: tokens.color['white-5'],
+  iconButtonBackgroundBlurredHover: tokens.color['white-10'],
+  iconButtonBackgroundBlurredSelected: tokens.color['white-10'],
+  iconButtonBorderBlurredSelected: tokens.color['white-5'],
+  iconButtonOutlineBackgroundSelected: tokens.color['neutral-80-opa-70'],
+  iconButtonOutlineBorder: tokens.color['neutral-80'],
+  iconButtonOutlineBorderHover: tokens.color['neutral-70'],
+  iconButtonOutlineBorderSelected: tokens.color['neutral-70'],
+  iconButtonOutBackgroundBlurredSelected: tokens.color['white-5'],
+  iconButtonOutlineBorderBlurred: tokens.color['white-10'],
+  iconButtonOutlineBorderBlurredHover: tokens.color['white-20'],
+  iconButtonOutlineBorderBlurredSelected: tokens.color['white-10'],
+  iconButtonColor: tokens.color['neutral-40'],
+  iconButtonColorSelected: tokens.color['white-100'],
+  iconButtonColorBlurred: tokens.color['white-100'],
+  iconButtonColorOutline: tokens.color['neutral-40'],
+  iconButtonColorOutlineSelected: tokens.color['white-100'],
+  iconButtonColorOutlineBlurred: tokens.color['white-100'],
+  blurBackground: tokens.color['neutral-80-opa-70'],
+})
+
+const allThemes = {
+  light,
+  dark,
+}
+
+type ThemeName = keyof typeof allThemes
+
+type Themes = {
+  [key in ThemeName]: BaseTheme
+}
+
+export const themes: Themes = allThemes
diff --git a/tokens.ts b/tokens.ts
new file mode 100644
index 00000000..e60923b0
--- /dev/null
+++ b/tokens.ts
@@ -0,0 +1,206 @@
+import { customisation } from '@status-im/colors'
+import { createTokens } from '@tamagui/core'
+import { size, space, zIndex } from '@tamagui/theme-base'
+
+export const tokens = createTokens({
+  color: {
+    ...customisation,
+    'neutral-5': 'hsla(220, 18%, 97%, 1)',
+    'neutral-10': 'hsla(216, 20%, 95%, 1)',
+    'neutral-20': 'hsla(214, 17%, 92%, 1)',
+    'neutral-30': 'hsla(213, 15%, 88%, 1)',
+    'neutral-40': 'hsla(219, 17%, 69%, 1)',
+    'neutral-50': 'hsla(218, 14%, 45%, 1)',
+    'neutral-60': 'hsla(219, 28%, 26%, 1)',
+    'neutral-70': 'hsla(219, 35%, 19%, 1)',
+    'neutral-80': 'hsla(219, 38%, 17%, 1)',
+    'neutral-90': 'hsla(219, 42%, 13%, 1)',
+    'neutral-95': 'hsla(218, 48%, 10%, 1)',
+    'neutral-100': 'hsla(218, 51%, 7%, 1)',
+    'neutral-5-opa-70': 'hsla(220, 18%, 97%, 0.7)',
+    'neutral-90-opa-70': 'hsla(219, 42%, 13%, 0.7)',
+    'neutral-95-opa-70': 'hsla(218, 48%, 10%, 0.7)',
+    'neutral-80-opa-5': 'hsla(219, 38%, 17%, 0.05)',
+    'neutral-80-opa-10': 'hsla(219, 38%, 17%, 0.1)',
+    'neutral-80-opa-20': 'hsla(219, 38%, 17%, 0.2)',
+    'neutral-80-opa-30': 'hsla(219, 38%, 17%, 0.3)',
+    'neutral-80-opa-40': 'hsla(219, 38%, 17%, 0.4)',
+    'neutral-80-opa-50': 'hsla(219, 38%, 17%, 0.5)',
+    'neutral-80-opa-60': 'hsla(219, 38%, 17%, 0.6)',
+    'neutral-80-opa-70': 'hsla(219, 38%, 17%, 0.7)',
+    'neutral-80-opa-80': 'hsla(219, 38%, 17%, 0.8)',
+    'neutral-80-opa-90': 'hsla(219, 38%, 17%, 0.9)',
+    'neutral-80-opa-95': 'hsla(219, 38%, 17%, 0.95)',
+    'neutral-80-opa-100': 'hsla(219, 38%, 17%, 1)',
+    'white-5': 'hsla(0, 0%, 100%, 0.05)',
+    'white-10': 'hsla(0, 0%, 100%, 0.1)',
+    'white-20': 'hsla(0, 0%, 100%, 0.2)',
+    'white-30': 'hsla(0, 0%, 100%, 0.3)',
+    'white-40': 'hsla(0, 0%, 100%, 0.4)',
+    'white-50': 'hsla(0, 0%, 100%, 0.5)',
+    'white-60': 'hsla(0, 0%, 100%, 0.6)',
+    'white-70': 'hsla(0, 0%, 100%, 0.7)',
+    'white-80': 'hsla(0, 0%, 100%, 0.8)',
+    'white-90': 'hsla(0, 0%, 100%, 0.9)',
+    'white-95': 'hsla(0, 0%, 100%, 0.95)',
+    'white-100': 'hsla(0, 0%, 100%, 1)',
+    'primary-50': 'hsla(229, 71%, 57%, 1)',
+    'primary-60': 'hsla(229, 54%, 45%, 1)',
+    'primary-50-opa-5': 'hsla(229, 71%, 57%, 0.05)',
+    'primary-50-opa-10': 'hsla(229, 71%, 57%, 0.1)',
+    'primary-50-opa-20': 'hsla(229, 71%, 57%, 0.2)',
+    'primary-50-opa-30': 'hsla(229, 71%, 57%, 0.3)',
+    'primary-50-opa-40': 'hsla(229, 71%, 57%, 0.4)',
+    'success-50': 'hsla(174, 63%, 40%, 1)',
+    'success-60': 'hsla(174, 63%, 34%, 1)',
+    'success-50-opa-5': 'hsla(174, 63%, 40%, 0.05)',
+    'success-50-opa-10': 'hsla(174, 63%, 40%, 0.1)',
+    'success-50-opa-20': 'hsla(174, 63%, 40%, 0.2)',
+    'success-50-opa-30': 'hsla(174, 63%, 40%, 0.3)',
+    'success-50-opa-40': 'hsla(174, 63%, 40%, 0.4)',
+    'danger-50': 'hsla(1, 73%, 63%, 1)',
+    'danger-60': 'hsla(2, 48%, 53%, 1)',
+    'danger-50-opa-5': 'hsla(1, 73%, 63%, 0.05)',
+    'danger-50-opa-10': 'hsla(1, 73%, 63%, 0.1)',
+    'danger-50-opa-20': 'hsla(1, 73%, 63%, 0.2)',
+    'danger-50-opa-30': 'hsla(1, 73%, 63%, 0.3)',
+    'danger-50-opa-40': 'hsla(1, 73%, 63%, 0.4)',
+    'purple-50': 'hsla(263, 44%, 57%, 1)',
+    'purple-60': 'hsla(260, 33%, 41%, 1)',
+    'purple-50-opa-5': 'hsla(263, 44%, 57%, 0.05)',
+    'purple-50-opa-10': 'hsla(263, 44%, 57%, 0.1)',
+    'purple-50-opa-20': 'hsla(263, 44%, 57%, 0.2)',
+    'purple-50-opa-30': 'hsla(263, 44%, 57%, 0.3)',
+    'purple-50-opa-40': 'hsla(263, 44%, 57%, 0.4)',
+    'indigo-50': 'hsla(217, 30%, 41%, 1)',
+    'indigo-60': 'hsla(217, 31%, 35%, 1)',
+    'indigo-50-opa-5': 'hsla(217, 30%, 41%, 0.05)',
+    'indigo-50-opa-10': 'hsla(217, 30%, 41%, 0.1)',
+    'indigo-50-opa-20': 'hsla(217, 30%, 41%, 0.2)',
+    'indigo-50-opa-30': 'hsla(217, 30%, 41%, 0.3)',
+    'indigo-50-opa-40': 'hsla(217, 30%, 41%, 0.4)',
+    'turquoise-50': 'hsla(193, 41%, 45%, 1)',
+    'turquoise-60': 'hsla(193, 41%, 38%, 1)',
+    'turquoise-50-opa-5': 'hsla(193, 41%, 45%, 0.05)',
+    'turquoise-50-opa-10': 'hsla(193, 41%, 45%, 0.1)',
+    'turquoise-50-opa-20': 'hsla(193, 41%, 45%, 0.2)',
+    'turquoise-50-opa-30': 'hsla(193, 41%, 45%, 0.3)',
+    'turquoise-50-opa-40': 'hsla(193, 41%, 45%, 0.4)',
+    'blue-50': 'hsla(231, 91%, 56%, 1)',
+    'blue-60': 'hsla(231, 70%, 45%, 1)',
+    'blue-50-opa-5': 'hsla(231, 91%, 56%, 0.05)',
+    'blue-50-opa-10': 'hsla(231, 91%, 56%, 0.1)',
+    'blue-50-opa-20': 'hsla(231, 91%, 56%, 0.2)',
+    'blue-50-opa-30': 'hsla(231, 91%, 56%, 0.3)',
+    'blue-50-opa-40': 'hsla(231, 91%, 56%, 0.4)',
+    'green-50': 'hsla(151, 53%, 58%, 1)',
+    'green-60': 'hsla(151, 38%, 48%, 1)',
+    'green-50-opa-5': 'hsla(151, 53%, 58%, 0.05)',
+    'green-50-opa-10': 'hsla(151, 53%, 58%, 0.1)',
+    'green-50-opa-20': 'hsla(151, 53%, 58%, 0.2)',
+    'green-50-opa-30': 'hsla(151, 53%, 58%, 0.3)',
+    'green-50-opa-40': 'hsla(151, 53%, 58%, 0.4)',
+    'yellow-50': 'hsla(42, 100%, 66%, 1)',
+    'yellow-60': 'hsla(42, 64%, 56%, 1)',
+    'yellow-50-opa-5': 'hsla(42, 100%, 66%, 0.05)',
+    'yellow-50-opa-10': 'hsla(42, 100%, 66%, 0.1)',
+    'yellow-50-opa-20': 'hsla(42, 100%, 66%, 0.2)',
+    'yellow-50-opa-30': 'hsla(42, 100%, 66%, 0.3)',
+    'yellow-50-opa-40': 'hsla(42, 100%, 66%, 0.4)',
+    'orange-50': 'hsla(18, 95%, 68%, 1)',
+    'orange-60': 'hsla(18, 60%, 57%, 1)',
+    'orange-50-opa-5': 'hsla(18, 95%, 68%, 0.05)',
+    'orange-50-opa-10': 'hsla(18, 95%, 68%, 0.1)',
+    'orange-50-opa-20': 'hsla(18, 95%, 68%, 0.2)',
+    'orange-50-opa-30': 'hsla(18, 95%, 68%, 0.3)',
+    'orange-50-opa-40': 'hsla(18, 95%, 68%, 0.4)',
+    'red-50': 'hsla(0, 87%, 68%, 1)',
+    'red-60': 'hsla(0, 54%, 57%, 1)',
+    'red-50-opa-5': 'hsla(0, 87%, 68%, 0.05)',
+    'red-50-opa-10': 'hsla(0, 87%, 68%, 0.1)',
+    'red-50-opa-20': 'hsla(0, 87%, 68%, 0.2)',
+    'red-50-opa-30': 'hsla(0, 87%, 68%, 0.3)',
+    'red-50-opa-40': 'hsla(0, 87%, 68%, 0.4)',
+    'pink-50': 'hsla(338, 96%, 74%, 1)',
+    'pink-60': 'hsla(337, 56%, 62%, 1)',
+    'pink-50-opa-5': 'hsla(338, 96%, 74%, 0.05)',
+    'pink-50-opa-10': 'hsla(338, 96%, 74%, 0.1)',
+    'pink-50-opa-20': 'hsla(338, 96%, 74%, 0.2)',
+    'pink-50-opa-30': 'hsla(338, 96%, 74%, 0.3)',
+    'pink-50-opa-40': 'hsla(338, 96%, 74%, 0.4)',
+    'brown-50': 'hsla(15, 33%, 45%, 1)',
+    'brown-60': 'hsla(15, 33%, 38%, 1)',
+    'brown-50-opa-5': 'hsla(15, 33%, 45%, 0.05)',
+    'brown-50-opa-10': 'hsla(15, 33%, 45%, 0.1)',
+    'brown-50-opa-20': 'hsla(15, 33%, 45%, 0.2)',
+    'brown-50-opa-30': 'hsla(15, 33%, 45%, 0.3)',
+    'brown-50-opa-40': 'hsla(15, 33%, 45%, 0.4)',
+    'beige-50': 'hsla(29, 34%, 68%, 1)',
+    'beige-60': 'hsla(29, 21%, 58%, 1)',
+    'beige-50-opa-5': 'hsla(29, 34%, 68%, 0.05)',
+    'beige-50-opa-10': 'hsla(29, 34%, 68%, 0.1)',
+    'beige-50-opa-20': 'hsla(29, 34%, 68%, 0.2)',
+    'beige-50-opa-30': 'hsla(29, 34%, 68%, 0.3)',
+    'beige-50-opa-40': 'hsla(29, 34%, 68%, 0.4)',
+    'identifier-1': 'hsla(0, 0%, 0%, 1)',
+    'identifier-2': 'hsla(120, 100%, 50%, 1)',
+    'identifier-3': 'hsla(60, 100%, 50%, 1)',
+    'identifier-4': 'hsla(0, 100%, 50%, 1)',
+    'identifier-5': 'hsla(300, 100%, 50%, 1)',
+    'identifier-6': 'hsla(240, 100%, 50%, 1)',
+    'identifier-7': 'hsla(180, 100%, 50%, 1)',
+    'identifier-8': 'hsla(0, 1%, 44%, 1)',
+    'identifier-9': 'hsla(120, 100%, 30%, 1)',
+    'identifier-10': 'hsla(61, 100%, 34%, 1)',
+    'identifier-11': 'hsla(0, 100%, 30%, 1)',
+    'identifier-12': 'hsla(300, 100%, 28%, 1)',
+    'identifier-13': 'hsla(240, 100%, 26%, 1)',
+    'identifier-14': 'hsla(186, 100%, 29%, 1)',
+    'identifier-15': 'hsla(0, 0%, 77%, 1)',
+    'identifier-16': 'hsla(123, 100%, 86%, 1)',
+    'identifier-17': 'hsla(60, 100%, 85%, 1)',
+    'identifier-18': 'hsla(0, 100%, 81%, 1)',
+    'identifier-19': 'hsla(300, 100%, 85%, 1)',
+    'identifier-20': 'hsla(252, 100%, 75%, 1)',
+    'identifier-21': 'hsla(180, 100%, 88%, 1)',
+    'identifier-22': 'hsla(0, 0%, 91%, 1)',
+    'identifier-23': 'hsla(45, 100%, 54%, 1)',
+    'identifier-24': 'hsla(11, 100%, 60%, 1)',
+    'identifier-25': 'hsla(324, 100%, 50%, 1)',
+    'identifier-26': 'hsla(277, 100%, 50%, 1)',
+    'identifier-27': 'hsla(204, 94%, 61%, 1)',
+    'identifier-28': 'hsla(165, 100%, 47%, 1)',
+    'identifier-29': 'hsla(0, 0%, 100%, 1)',
+    'identifier-30': 'hsla(12, 38%, 45%, 1)',
+    'identifier-31': 'hsla(324, 100%, 39%, 1)',
+    'identifier-32': 'hsla(40, 100%, 30%, 1)',
+    ethereum: 'hsla(227, 75%, 69%, 1)',
+    optimism: 'hsla(0, 72%, 67%, 1)',
+    arbitrum: 'hsla(192, 82%, 68%, 1)',
+    zksync: 'hsla(239, 98%, 81%, 1)',
+    hermez: 'hsla(15, 77%, 65%, 1)',
+    xdai: 'hsla(179, 51%, 50%, 1)',
+    polygon: 'hsla(268, 84%, 70%, 1)',
+    unknown: 'hsla(206, 26%, 95%, 1)',
+    transparent: 'hsla(0, 0%, 0%, 0)',
+  },
+  size,
+  space,
+  zIndex,
+  radius: {
+    0: 0,
+    4: 4,
+    6: 6,
+    8: 8,
+    10: 10,
+    12: 12,
+    16: 16,
+    20: 20,
+    full: 1000,
+  },
+})
+
+type GetTokenString<A> = A extends string | number ? `$${A}` : `$${string}`
+type RadiusTokens = GetTokenString<keyof typeof tokens.radius> | number
+
+export { type RadiusTokens }
diff --git a/yarn.lock b/yarn.lock
index cab22ca7..10573f13 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4110,7 +4110,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@status-im/colors@npm:*":
+"@status-im/colors@npm:*, @status-im/colors@npm:^0.2.0":
   version: 0.2.0
   resolution: "@status-im/colors@npm:0.2.0"
   checksum: 06390b83897193489f14b0e4fe371e87f30056b1c1d6ef9a14b0fe8dc068453e6b532a767077537eebc39f8fcedb832eb047c7f5e6f479683394152f115be3db
@@ -13549,6 +13549,7 @@ __metadata:
   dependencies:
     "@fsouza/prettierd": ^0.24.2
     "@nivo/pie": ^0.83.0
+    "@status-im/colors": ^0.2.0
     "@status-im/components": ^0.2.6
     "@storybook/addon-essentials": ^7.2.0
     "@storybook/addon-interactions": ^7.2.0