diff --git a/packages/base-tailwind/src/index.js b/packages/base-tailwind/src/index.js
index 71a8f2c911..afd2d8b481 100644
--- a/packages/base-tailwind/src/index.js
+++ b/packages/base-tailwind/src/index.js
@@ -1,4 +1,34 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  theme: {},
+  // Place for base semantic tokens
+  theme: {
+    colors: {
+      white: '#FFFFFF',
+      black: '#000000',
+      blue: {
+        100: '#EDF1FD',
+        150: '#D5DEFA',
+      },
+    },
+    blur: {
+      4: '4px',
+      8: '8px',
+      12: '12px',
+      32: '32px',
+    },
+    borderWidth: {
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      4: '4px',
+    },
+    borderRadius: {
+      0: '0px',
+      1: '4px',
+      2: '8px',
+      3: '12px',
+      25: '100px',
+      999: '999px',
+    },
+  },
 }
diff --git a/packages/base/Avatar/src/Avatar/AvatarWrapper/AvatarWrapper.tsx b/packages/base/Avatar/src/Avatar/AvatarWrapper/AvatarWrapper.tsx
index b8f6a6db9a..906adb5e21 100644
--- a/packages/base/Avatar/src/Avatar/AvatarWrapper/AvatarWrapper.tsx
+++ b/packages/base/Avatar/src/Avatar/AvatarWrapper/AvatarWrapper.tsx
@@ -56,6 +56,40 @@ export const AvatarWrapper = (props: Props) => {
       <div
         className={twJoin(`relative`, showLogo(size, showEmblem) && 'bg-white')}
       >
+        <div>
+          <p className='text-xxl text-white'>Test text white</p>
+          <p className='text-xxl text-blue-100'>Test text blue 100</p>
+          <p className='text-xxl text-blue-150'>Test text blue 150</p>
+          <p className='text-xxl text-blue-200'>Test text blue 200</p>
+        </div>
+        <div>
+          <div
+            style={{ width: '100px', height: '100px' }}
+            className='bg-blue-150'
+          >
+            Color from Base preset, should be blue
+          </div>
+          <div
+            style={{ width: '100px', height: '100px' }}
+            className='bg-red-100'
+          >
+            Color from Picasso preset, should be red
+          </div>
+          <div
+            style={{ width: '100px', height: '100px' }}
+            className='bg-custom-9000'
+          >
+            Color from Caliber preset, should be pink
+          </div>
+        </div>
+        <div>
+          <div className='w-[300px] h-[100px] bg-blue-100 opacity-1'>
+            Opacity 1 (from Caliber)
+          </div>
+          <div className='w-[300px] h-[100px] bg-blue-100 opacity-10'>
+            Opacity 10 (from Picasso)
+          </div>
+        </div>
         <div
           style={style}
           data-testid={dataTestId}
diff --git a/packages/caliber-tailwind/CHANGELOG.md b/packages/caliber-tailwind/CHANGELOG.md
new file mode 100644
index 0000000000..b435e8ed08
--- /dev/null
+++ b/packages/caliber-tailwind/CHANGELOG.md
@@ -0,0 +1,125 @@
+# @toptal/picasso-tailwind
+
+## 2.8.0
+
+### Minor Changes
+
+- [#4430](https://github.com/toptal/picasso/pull/4430) [`27d596a`](https://github.com/toptal/picasso/commit/27d596a3bb913923f7d7e577ac3a7b6f9045b42f) Thanks [@sashuk](https://github.com/sashuk)!
+- add snackbar `zIndex` value
+
+## 2.7.0
+
+### Minor Changes
+
+- [#4414](https://github.com/toptal/picasso/pull/4414) [`c06cf2c`](https://github.com/toptal/picasso/commit/c06cf2c21d6cd294ef4903613268e747670f252b) Thanks [@AdrianContiu](https://github.com/AdrianContiu)!
+
+### picasso-tailwind
+
+- add new colors to tailwindCss configuration
+
+### Patch Changes
+
+- [#4345](https://github.com/toptal/picasso/pull/4345) [`6716e0b`](https://github.com/toptal/picasso/commit/6716e0bb3178a7f452f2c79ce56dd524e9bd8685) Thanks [@augustobmoura](https://github.com/augustobmoura)!
+
+### Picasso Tailwind Config
+
+- added animations required to make `Loader` work
+
+## 2.6.1
+
+### Patch Changes
+
+- [#4377](https://github.com/toptal/picasso/pull/4377) [`9bd24fbde266515ac9d4baa98e0b5625616b7e22`](https://github.com/toptal/picasso/commit/9bd24fbde266515ac9d4baa98e0b5625616b7e22) Thanks [@augustobmoura](https://github.com/augustobmoura)!
+- remove `module` entry from `package.json`
+
+## 2.6.0
+
+### Minor Changes
+
+- [#4320](https://github.com/toptal/picasso/pull/4320) [`75540be4ee8bd57c4da93ae725782c39c7cf85b2`](https://github.com/toptal/picasso/commit/75540be4ee8bd57c4da93ae725782c39c7cf85b2) Thanks [@TomasSlama](https://github.com/TomasSlama)!
+- add `currentColor` to tailwindCss configuration
+
+## 2.5.1
+
+### Patch Changes
+
+- [#4321](https://github.com/toptal/picasso/pull/4321) [`d03712b77511528d0139da4b5ef74e797d64446c`](https://github.com/toptal/picasso/commit/d03712b77511528d0139da4b5ef74e797d64446c) Thanks [@ruslan-sed](https://github.com/ruslan-sed)!
+- add index.d.ts
+
+## 2.5.0
+
+### Minor Changes
+
+- [#4294](https://github.com/toptal/picasso/pull/4294) [`0c9807b800ed8a992de72f47bc1263d24a2fd4d8`](https://github.com/toptal/picasso/commit/0c9807b800ed8a992de72f47bc1263d24a2fd4d8) Thanks [@dmaklygin](https://github.com/dmaklygin)!
+- add design tokens for Button component
+
+## 2.4.0
+
+### Minor Changes
+
+- [#4276](https://github.com/toptal/picasso/pull/4276) [`045081fe7fed880890cb16d5defd7859d1e0b147`](https://github.com/toptal/picasso/commit/045081fe7fed880890cb16d5defd7859d1e0b147) Thanks [@sashuk](https://github.com/sashuk)!
+- extend maximum width classes with fractions of 12
+  - extend width, height, and padding classes for inputs
+
+## 2.3.0
+
+### Minor Changes
+
+- [#4200](https://github.com/toptal/picasso/pull/4200) [`4ee1ebdafd9e5830d5ec6007620186d5a61befee`](https://github.com/toptal/picasso/commit/4ee1ebdafd9e5830d5ec6007620186d5a61befee) Thanks [@mkrl](https://github.com/mkrl)!
+- migrate Typography to TailwindCSS
+  - style overrides for Typography have been moved to picasso-provider
+  - added utility classes `font-inherit-weight` and `font-inherit-size` to Picasso Tailwind config
+
+## 2.2.0
+
+### Minor Changes
+
+- [#4173](https://github.com/toptal/picasso/pull/4173) [`d22bf5d913428b586e2813cf530f4e96d46b622e`](https://github.com/toptal/picasso/commit/d22bf5d913428b586e2813cf530f4e96d46b622e) Thanks [@sashuk](https://github.com/sashuk)!
+- add shadows to support elevations in Paper
+
+## 2.1.0
+
+### Minor Changes
+
+- [#4172](https://github.com/toptal/picasso/pull/4172) [`0ccb256c05520b3a21bca08642bdf1cc47be88a2`](https://github.com/toptal/picasso/commit/0ccb256c05520b3a21bca08642bdf1cc47be88a2) Thanks [@TomasSlama](https://github.com/TomasSlama)!
+- extend default z-index util classes with z-modal and z-drawer
+
+## 2.0.1
+
+### Patch Changes
+
+- [#4164](https://github.com/toptal/picasso/pull/4164) [`84d579cee65c88aeb6ba58318c43d8deb5201b30`](https://github.com/toptal/picasso/commit/84d579cee65c88aeb6ba58318c43d8deb5201b30) Thanks [@mkrl](https://github.com/mkrl)!
+- migrate to Picasso by Parts
+  - picasso is now distributed as a set of independent packages with the main package `@toptal/picasso` now being a collection of re-exported packages
+
+## 2.0.0
+
+### Major Changes
+
+- [#4146](https://github.com/toptal/picasso/pull/4146) [`83f24c7fb0f60941fff7388253d5812694ac4eae`](https://github.com/toptal/picasso/commit/83f24c7fb0f60941fff7388253d5812694ac4eae) Thanks [@TomasSlama](https://github.com/TomasSlama)!
+- override default Tailwind spacings with BASE spacings
+
+## 1.0.1
+
+### Patch Changes
+
+- [#4055](https://github.com/toptal/picasso/pull/4055) [`291c8f812`](https://github.com/toptal/picasso/commit/291c8f812a377d0bcf39b490e316b5ec94f93cfe) Thanks [@TomasSlama](https://github.com/TomasSlama)!
+- refactor from typescript to plain javascript
+
+## 1.0.0
+
+### Major Changes
+
+- [#3993](https://github.com/toptal/picasso/pull/3993) [`340319442`](https://github.com/toptal/picasso/commit/34031944299df941dbf42503954ca7f9158f930a) Thanks [@augustobmoura](https://github.com/augustobmoura)!
+
+### Tailwind
+
+- release Tailwind configuration package
+
+### Patch Changes
+
+- [#4008](https://github.com/toptal/picasso/pull/4008) [`29eeced5c`](https://github.com/toptal/picasso/commit/29eeced5caf580a71f072736e03d9388b557b855) Thanks [@augustobmoura](https://github.com/augustobmoura)!
+
+### Tailwind
+
+- add correct prefix to package.json exports
diff --git a/packages/caliber-tailwind/README.md b/packages/caliber-tailwind/README.md
new file mode 100644
index 0000000000..f8b0039014
--- /dev/null
+++ b/packages/caliber-tailwind/README.md
@@ -0,0 +1,3 @@
+# `caliber-tailwind`
+
+DO NOT PUSH TO MASTER
diff --git a/packages/caliber-tailwind/bin/build.sh b/packages/caliber-tailwind/bin/build.sh
new file mode 100644
index 0000000000..b594b6ddb6
--- /dev/null
+++ b/packages/caliber-tailwind/bin/build.sh
@@ -0,0 +1,8 @@
+#!/bin/bash
+
+rm -rf ./dist-package
+mkdir ./dist-package
+cp -R ./src ./dist-package
+cp ./README.md ./dist-package/README.md
+cp ./package.json ./dist-package/package.json
+cp ../../LICENSE ./dist-package/LICENSE
diff --git a/packages/caliber-tailwind/package.json b/packages/caliber-tailwind/package.json
new file mode 100644
index 0000000000..77e4ccafa5
--- /dev/null
+++ b/packages/caliber-tailwind/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@toptal/caliber-tailwind",
+  "version": "0.0.1",
+  "description": "Caliber Tailwind configuration DO NOT PUSH TO MASTER",
+  "author": "Toptal",
+  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-tailwind#readme",
+  "license": "MIT",
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/toptal/picasso.git"
+  },
+  "bugs": {
+    "url": "https://github.com/toptal/picasso/issues"
+  },
+  "scripts": {
+    "build:package": "sh ./bin/build.sh",
+    "prepublishOnly": "yarn build:package"
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.10"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^3.3.5"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist-package/**",
+    "!dist-package/tsconfig.tsbuildinfo",
+    "src"
+  ]
+}
diff --git a/packages/caliber-tailwind/src/index.d.ts b/packages/caliber-tailwind/src/index.d.ts
new file mode 100644
index 0000000000..0a36186998
--- /dev/null
+++ b/packages/caliber-tailwind/src/index.d.ts
@@ -0,0 +1,5 @@
+export const theme: Partial<
+  CustomThemeConfig & {
+    extend: Partial<CustomThemeConfig>
+  }
+>
diff --git a/packages/caliber-tailwind/src/index.js b/packages/caliber-tailwind/src/index.js
new file mode 100644
index 0000000000..39380bfe88
--- /dev/null
+++ b/packages/caliber-tailwind/src/index.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [],
+  theme: {
+    colors: {
+      custom: {
+        9000: 'pink',
+      },
+    },
+  },
+}
diff --git a/packages/caliber-tailwind/tsconfig.json b/packages/caliber-tailwind/tsconfig.json
new file mode 100644
index 0000000000..372e8d6c53
--- /dev/null
+++ b/packages/caliber-tailwind/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": { "outDir": "dist-package" },
+  "include": ["src"],
+  "references": []
+}
diff --git a/packages/picasso-tailwind/src/index.js b/packages/picasso-tailwind/src/index.js
index 9098a8312d..1ae552cf26 100644
--- a/packages/picasso-tailwind/src/index.js
+++ b/packages/picasso-tailwind/src/index.js
@@ -12,160 +12,129 @@ module.exports = {
     }),
   ],
   theme: {
-    screens: {
-      xs: '0px',
-      sm: '480px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1440px',
-    },
-    // https://toptal-core.atlassian.net/wiki/spaces/Base/pages/3217031216/Spacing
-    spacing: {
-      0: '0',
-      1: '0.25rem',
-      2: '0.5rem',
-      3: '0.75rem',
-      4: '1rem',
-      6: '1.5rem',
-      8: '2rem',
-      10: '2.5rem',
-      12: '3rem',
-    },
-    borderRadius: {
-      none: '0px',
-      sm: '4px',
-      md: '8px',
-      // to support fully rounded corners, use the same approach as TailwindCSS proposes
-      full: '9999px',
-    },
-    borderWidth: {
-      DEFAULT: '1px',
-      0: '0px',
-    },
-    fontFamily: {
-      sans: ['proxima-nova', 'Arial', 'sans-serif'],
-      mono: [
-        'ui-monospace',
-        'SFMono-Regular',
-        'Menlo',
-        'Monaco',
-        'Consolas',
-        'Liberation Mono',
-        'Courier New',
-        'monospace',
-      ],
-    },
-    fontWeight: {
-      inherit: 'inherit',
-      thin: '100',
-      light: '300',
-      regular: '400',
-      semibold: '600',
-    },
-    // NOTE: If adding new font sizes, make sure to update @toptal/picasso-tailwind-merge
-    fontSize: {
-      '2xs': ['0.688rem', { lineHeight: '1rem' }],
-      xxs: ['0.75rem', { lineHeight: '1.125rem' }],
-      sm: ['0.8125rem', { lineHeight: '1.25rem' }],
-      md: ['0.875rem', { lineHeight: '1.375rem' }],
-      lg: ['1rem', { lineHeight: '1.5rem' }],
-      xl: ['1.25rem', { lineHeight: '1.875rem' }],
-      '2xl': ['1.75rem', { lineHeight: '2.625rem' }],
-      xxl: ['1.75rem', { lineHeight: '2.625rem' }],
-      'button-small': ['12px', { lineHeight: '15px' }],
-      'button-medium': ['13px', { lineHeight: '16px' }],
-      'button-large': ['15px', { lineHeight: '18px' }],
-    },
-    // TODO: [FX-5003] Deprecate legacy shadow classes
-    // Shadows 0-5 correspond to BASE design https://www.figma.com/file/9xnyixadrhlHe9UuXBMRlT/Foundations?type=design&node-id=22%3A21&mode=design&t=8d8TKUUuHKWosUtX-1
-    // Shadows 6-24 correspond to Material UI v4 shadows @material-ui/core/styles/shadows.js
-    boxShadow: {
-      0: 'none',
-      /** notification center, paper */
-      1: '0 0 8px 0 rgba(0,0,0, 0.08)',
-      /** modal */
-      2: '0 4px 8px 0 rgba(0,0,0, 0.08)',
+    extend: {
+      opacity: {
+        0: '0',
+        10: '0.1',
+        20: '0.2',
+      },
+      screens: {
+        xs: '0px',
+        sm: '480px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1440px',
+      },
+      // https://toptal-core.atlassian.net/wiki/spaces/Base/pages/3217031216/Spacing
+      spacing: {
+        0: '0',
+        1: '0.25rem',
+        2: '0.5rem',
+        3: '0.75rem',
+        4: '1rem',
+        6: '1.5rem',
+        8: '2rem',
+        10: '2.5rem',
+        12: '3rem',
+      },
+      colors: {
+        red: {
+          100: 'red',
+        },
+      },
+      borderRadius: {
+        none: '0px',
+        sm: '4px',
+        md: '8px',
+        // to support fully rounded corners, use the same approach as TailwindCSS proposes
+        full: '9999px',
+      },
+      borderWidth: {
+        DEFAULT: '1px',
+        0: '0px',
+      },
+      fontFamily: {
+        sans: ['proxima-nova', 'Arial', 'sans-serif'],
+        mono: [
+          'ui-monospace',
+          'SFMono-Regular',
+          'Menlo',
+          'Monaco',
+          'Consolas',
+          'Liberation Mono',
+          'Courier New',
+          'monospace',
+        ],
+      },
+      fontWeight: {
+        inherit: 'inherit',
+        thin: '100',
+        light: '300',
+        regular: '400',
+        semibold: '600',
+      },
+      // NOTE: If adding new font sizes, make sure to update @toptal/picasso-tailwind-merge
+      fontSize: {
+        '2xs': ['0.688rem', { lineHeight: '1rem' }],
+        xxs: ['0.75rem', { lineHeight: '1.125rem' }],
+        sm: ['0.8125rem', { lineHeight: '1.25rem' }],
+        md: ['0.875rem', { lineHeight: '1.375rem' }],
+        lg: ['1rem', { lineHeight: '1.5rem' }],
+        xl: ['1.25rem', { lineHeight: '1.875rem' }],
+        '2xl': ['1.75rem', { lineHeight: '2.625rem' }],
+        xxl: ['1.75rem', { lineHeight: '2.625rem' }],
+        'button-small': ['12px', { lineHeight: '15px' }],
+        'button-medium': ['13px', { lineHeight: '16px' }],
+        'button-large': ['15px', { lineHeight: '18px' }],
+      },
+      // TODO: [FX-5003] Deprecate legacy shadow classes
+      // Shadows 0-5 correspond to BASE design https://www.figma.com/file/9xnyixadrhlHe9UuXBMRlT/Foundations?type=design&node-id=22%3A21&mode=design&t=8d8TKUUuHKWosUtX-1
+      // Shadows 6-24 correspond to Material UI v4 shadows @material-ui/core/styles/shadows.js
+      boxShadow: {
+        0: 'none',
+        /** notification center, paper */
+        1: '0 0 8px 0 rgba(0,0,0, 0.08)',
+        /** modal */
+        2: '0 4px 8px 0 rgba(0,0,0, 0.08)',
 
-      /** nofication growl */
-      3: '0 0 0 1px rgba(0, 0, 0, 0.04), 0 0 8px 0 rgba(0, 0, 0, 0.16)',
+        /** nofication growl */
+        3: '0 0 0 1px rgba(0, 0, 0, 0.04), 0 0 8px 0 rgba(0, 0, 0, 0.16)',
 
-      /** tooltip */
-      4: '0 0 4px 0 rgba(0,0,0, 0.24), 0 0 32px 0 rgba(0,0,0, 0.12)',
+        /** tooltip */
+        4: '0 0 4px 0 rgba(0,0,0, 0.24), 0 0 32px 0 rgba(0,0,0, 0.12)',
 
-      /** scroll menu */
-      5: '0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 12px -3px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04)',
+        /** scroll menu */
+        5: '0 0 0 1px rgba(0, 0, 0, 0.04), 0 8px 12px -3px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04)',
 
-      /** elevations for paper */
-      6: '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',
-      7: '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)',
-      8: '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)',
-      9: '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)',
-      10: '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)',
-      11: '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)',
-      12: '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)',
-      13: '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)',
-      14: '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)',
-      15: '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)',
-      16: '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)',
-      17: '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)',
-      18: '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)',
-      19: '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)',
-      20: '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)',
-      21: '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)',
-      22: '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)',
-      23: '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)',
-      24: '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)',
-    },
-    colors: {
-      white: '#FFFFFF',
-      black: '#000000',
-      transparent: 'transparent',
-      current: 'currentColor',
-      blue: {
-        100: '#EDF1FD',
-        150: '#D5DEFA',
-        400: '#25A9EF',
-        500: '#204ECF',
-        600: '#183A9E',
-        700: '#0F256E',
-      },
-      green: {
-        100: '#EAFBF5',
-        150: '#D7F3E9',
-        500: '#00CC83',
-        600: '#03B080',
-        700: '#05947C',
-      },
-      gray: {
-        50: '#FCFCFC',
-        100: '#F3F4F6',
-        200: '#EBECED',
-        300: '#E5E7EA',
-        400: '#D8D9DC',
-        500: '#C4C6CA',
-        600: '#84888E',
-      },
-      graphite: {
-        700: '#455065',
-        800: '#262D3D',
-        900: '#191E28',
-      },
-      red: {
-        100: '#FBEDF1',
-        150: '#F5D8E0',
-        500: '#D42551',
-      },
-      yellow: {
-        100: '#FFF5E3',
-        150: '#F8E7C8',
-        500: '#E59C01',
-      },
-      purple: {
-        500: '#6727CF',
-      },
-      inheritColor: 'inherit',
-    },
-    extend: {
+        /** elevations for paper */
+        6: '0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)',
+        7: '0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)',
+        8: '0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)',
+        9: '0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)',
+        10: '0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)',
+        11: '0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)',
+        12: '0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)',
+        13: '0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)',
+        14: '0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)',
+        15: '0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)',
+        16: '0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)',
+        17: '0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)',
+        18: '0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)',
+        19: '0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)',
+        20: '0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)',
+        21: '0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)',
+        22: '0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)',
+        23: '0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)',
+        24: '0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)',
+      },
+      textColor: ({ theme }) => ({
+        white: theme.colors.white,
+        blue: {
+          100: theme.colors.blue['100'],
+          // To check if it properly assigns the value from the base theme
+          200: theme.colors.black,
+        },
+      }),
       zIndex: {
         drawer: 1200,
         modal: 1300,
diff --git a/tailwind.config.js b/tailwind.config.js
index 58e795b015..cc1935bfbb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,12 +1,10 @@
-// Ignore missing imports as packages are definitely present in the project
-/* eslint-disable import/no-extraneous-dependencies */
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['packages/**/*.{ts,tsx}'],
   presets: [
     require('@toptal/base-tailwind'),
     require('@toptal/picasso-tailwind'),
+    require('@toptal/caliber-tailwind'),
   ],
   corePlugins: {
     preflight: false,
diff --git a/tsconfig.pkgsrc.json b/tsconfig.pkgsrc.json
index ed5302bde9..00b5d1fa7d 100644
--- a/tsconfig.pkgsrc.json
+++ b/tsconfig.pkgsrc.json
@@ -11,6 +11,7 @@
     { "path": "packages/picasso-provider" },
     { "path": "packages/picasso-query-builder" },
     { "path": "packages/picasso-rich-text-editor" },
+    { "path": "packages/caliber-tailwind" },
     { "path": "packages/picasso-tailwind" },
     { "path": "packages/picasso-tailwind-merge" },
     { "path": "packages/shared" },
diff --git a/yarn.lock b/yarn.lock
index 10b1b1adb1..b1e79f7ac8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -23498,9 +23498,9 @@ tailwind-merge@^2.2.2:
     "@babel/runtime" "^7.24.1"
 
 tailwindcss@^3.4.10:
-  version "3.4.10"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.10.tgz#70442d9aeb78758d1f911af29af8255ecdb8ffef"
-  integrity sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==
+  version "3.4.12"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.12.tgz#fd3b67c6d2c04d9d7bfa13e3fc70ccef9fef0455"
+  integrity sha512-Htf/gHj2+soPb9UayUNci/Ja3d8pTmu9ONTfh4QY8r3MATTZOzmv6UYWF7ZwikEIC8okpfqmGqrmDehua8mF8w==
   dependencies:
     "@alloc/quick-lru" "^5.2.0"
     arg "^5.0.2"