diff --git a/src/components/Badge.vue b/src/components/Badge.vue
index 90ea4654..1bddce32 100644
--- a/src/components/Badge.vue
+++ b/src/components/Badge.vue
@@ -41,37 +41,35 @@ const props = withDefaults(defineProps<BadgeProps>(), {
 
 const classes = computed(() => {
   let solidClasses = {
-    gray: 'text-text-icons-white bg-surface-gray-7',
-    blue: 'text-text-icons-blue-1 bg-surface-blue-2',
-    green: 'text-text-icons-green-1 bg-surface-green-3',
-    orange: 'text-text-icons-amber-1 bg-surface-amber-2',
-    red: 'text-text-icons-red-1 bg-surface-red-4',
+    gray: 'text-ink-white bg-surface-gray-7',
+    blue: 'text-ink-blue-1 bg-surface-blue-2',
+    green: 'text-ink-green-1 bg-surface-green-3',
+    orange: 'text-ink-amber-1 bg-surface-amber-2',
+    red: 'text-ink-red-1 bg-surface-red-4',
   }[props.theme]
 
   let subtleClasses = {
-    gray: 'text-text-icons-gray-6 bg-surface-gray-2',
-    blue: 'text-text-icons-blue-2 bg-surface-blue-1',
-    green: 'text-text-icons-green-3 bg-surface-green-2',
-    orange: 'text-text-icons-amber-3 bg-surface-amber-1',
-    red: 'text-text-icons-red-4 bg-surface-red-1',
+    gray: 'text-ink-gray-6 bg-surface-gray-2',
+    blue: 'text-ink-blue-2 bg-surface-blue-1',
+    green: 'text-ink-green-3 bg-surface-green-2',
+    orange: 'text-ink-amber-3 bg-surface-amber-1',
+    red: 'text-ink-red-4 bg-surface-red-1',
   }[props.theme]
 
   let outlineClasses = {
-    gray: 'text-text-icons-gray-6 bg-transparent border border-outline-gray-1',
-    blue: 'text-text-icons-blue-2 bg-transparent border border-outline-blue-1',
-    green:
-      'text-text-icons-green-3 bg-transparent border border-outline-green-2',
-    orange:
-      'text-text-icons-amber-3 bg-transparent border border-outline-amber-2',
-    red: 'text-text-icons-red-4 bg-transparent border border-outline-red-2',
+    gray: 'text-ink-gray-6 bg-transparent border border-outline-gray-1',
+    blue: 'text-ink-blue-2 bg-transparent border border-outline-blue-1',
+    green: 'text-ink-green-3 bg-transparent border border-outline-green-2',
+    orange: 'text-ink-amber-3 bg-transparent border border-outline-amber-2',
+    red: 'text-ink-red-4 bg-transparent border border-outline-red-2',
   }[props.theme]
 
   let ghostClasses = {
-    gray: 'text-text-icons-gray-6 bg-transparent',
-    blue: 'text-text-icons-blue-2 bg-transparent',
-    green: 'text-text-icons-green-3 bg-transparent',
-    orange: 'text-text-icons-amber-3 bg-transparent',
-    red: 'text-text-icons-red-4 bg-transparent',
+    gray: 'text-ink-gray-6 bg-transparent',
+    blue: 'text-ink-blue-2 bg-transparent',
+    green: 'text-ink-green-3 bg-transparent',
+    orange: 'text-ink-amber-3 bg-transparent',
+    red: 'text-ink-red-4 bg-transparent',
   }[props.theme]
 
   let variantClasses = {
diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index 93379ca2..82cbbdf5 100644
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -26,7 +26,7 @@
           <div v-for="group in groups" :key="group.key" class="p-1.5">
             <div
               v-if="group.group && !group.hideLabel"
-              class="flex h-7 items-center px-2 text-sm font-medium text-text-icons-gray-6"
+              class="flex h-7 items-center px-2 text-sm font-medium text-ink-gray-6"
             >
               {{ group.group }}
             </div>
@@ -43,7 +43,7 @@
               <button
                 v-else
                 :class="[
-                  active ? 'bg-gray-100' : 'text-text-icons-gray-6',
+                  active ? 'bg-gray-100' : 'text-ink-gray-6',
                   'group flex h-7 w-full items-center rounded px-2 text-base',
                 ]"
                 @click="item.onClick"
@@ -51,11 +51,11 @@
                 <FeatherIcon
                   v-if="item.icon && typeof item.icon === 'string'"
                   :name="item.icon"
-                  class="mr-2 h-4 w-4 flex-shrink-0 text-text-icons-gray-6"
+                  class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6"
                   aria-hidden="true"
                 />
                 <component
-                  class="mr-2 h-4 w-4 flex-shrink-0 text-text-icons-gray-6"
+                  class="mr-2 h-4 w-4 flex-shrink-0 text-ink-gray-6"
                   v-else-if="item.icon"
                   :is="item.icon"
                 />
diff --git a/src/components/Rating/Rating.vue b/src/components/Rating/Rating.vue
index 236647a0..00fa3c33 100644
--- a/src/components/Rating/Rating.vue
+++ b/src/components/Rating/Rating.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="space-y-1">
-    <label class="block text-xs text-text-icons-gray-5" v-if="label">
+    <label class="block text-xs text-ink-gray-5" v-if="label">
       {{ label }}
     </label>
     <div class="flex text-center">
@@ -12,7 +12,7 @@
       >
         <FeatherIcon
           name="star"
-          class="fill-gray-400 text-text-icons-gray-1 stroke-1 mr-1"
+          class="fill-gray-400 text-ink-gray-1 stroke-1 mr-1"
           :class="iconClasses(index)"
           @click="markRating(index)"
         />
diff --git a/src/espressoColors.css b/src/espressoColors.css
deleted file mode 100644
index 3d9088a5..00000000
--- a/src/espressoColors.css
+++ /dev/null
@@ -1,152 +0,0 @@
-@layer base {
-  :root {
-    --outline-amber-1: rgb(254 237 169);
-    --outline-amber-2: rgb(251 204 85);
-    --outline-blue-1: rgb(167 215 253);
-    --outline-blue-2: rgb(2 137 247);
-    --outline-gray-1: rgb(237 237 237);
-    --outline-gray-2: rgb(226 226 226);
-    --outline-gray-3: rgb(199 199 199);
-    --outline-gray-4: rgb(153 153 153);
-    --outline-gray-5: rgb(56 56 56);
-    --outline-gray-modals: rgb(237 237 237);
-    --outline-green-1: rgb(185 238 204);
-    --outline-green-2: rgb(155 228 182);
-    --outline-orange-1: rgb(244 176 127);
-    --outline-red-1: rgb(255 216 216);
-    --outline-red-2: rgb(253 194 194);
-    --outline-red-3: rgb(247 149 150);
-    --outline-red-4: rgb(224 54 54);
-    --outline-white: rgb(255 255 255);
-    --surface-amber-1: rgb(255 247 211);
-    --surface-amber-2: rgb(219 119 6);
-    --surface-blue-1: rgb(230 244 255);
-    --surface-blue-2: rgb(2 137 247);
-    --surface-cards: rgb(255 255 255);
-    --surface-cyan-1: rgb(221 247 255);
-    --surface-gray-1: rgb(248 248 248);
-    --surface-gray-2: rgb(243 243 243);
-    --surface-gray-3: rgb(237 237 237);
-    --surface-gray-4: rgb(226 226 226);
-    --surface-gray-5: rgb(82 82 82);
-    --surface-gray-6: rgb(56 56 56);
-    --surface-gray-7: rgb(23 23 23);
-    --surface-green-1: rgb(242 253 244);
-    --surface-green-2: rgb(228 250 235);
-    --surface-green-3: rgb(48 166 109);
-    --surface-menu-bar: rgb(248 248 248);
-    --surface-modal: rgb(255 255 255);
-    --surface-orange-1: rgb(255 239 228);
-    --surface-pink-1: rgb(253 232 245);
-    --surface-red-1: rgb(255 231 231);
-    --surface-red-2: rgb(255 216 216);
-    --surface-red-3: rgb(253 194 194);
-    --surface-red-4: rgb(204 41 41);
-    --surface-red-5: rgb(181 42 42);
-    --surface-red-6: rgb(148 31 31);
-    --surface-selected: rgb(255 255 255);
-    --surface-violet-1: rgb(240 235 255);
-    --surface-white: rgb(255 255 255);
-    --text-icons-amber-1: rgb(255 247 211);
-    --text-icons-amber-2: rgb(231 153 19);
-    --text-icons-amber-3: rgb(219 119 6);
-    --text-icons-blue-1: rgb(230 244 255);
-    --text-icons-blue-2: rgb(0 123 224);
-    --text-icons-blue-3: rgb(0 92 163);
-    --text-icons-cyan-1: rgb(59 189 229);
-    --text-icons-gray-1: rgb(237 237 237);
-    --text-icons-gray-2: rgb(226 226 226);
-    --text-icons-gray-3: rgb(199 199 199);
-    --text-icons-gray-4: rgb(153 153 153);
-    --text-icons-gray-5: rgb(124 124 124);
-    --text-icons-gray-6: rgb(82 82 82);
-    --text-icons-gray-7: rgb(82 82 82);
-    --text-icons-gray-8: rgb(56 56 56);
-    --text-icons-gray-9: rgb(23 23 23);
-    --text-icons-green-1: rgb(242 253 244);
-    --text-icons-green-2: rgb(48 166 109);
-    --text-icons-green-3: rgb(22 121 76);
-    --text-icons-pink-1: rgb(227 74 166);
-    --text-icons-red-1: rgb(255 247 247);
-    --text-icons-red-2: rgb(247 149 150);
-    --text-icons-red-3: rgb(224 54 54);
-    --text-icons-red-4: rgb(204 41 41);
-    --text-icons-violet-1: rgb(104 70 227);
-    --text-icons-white: rgb(255 255 255);
-  }
-  [data-theme='dark'] {
-    --outline-amber-1: rgb(130 65 8);
-    --outline-amber-2: rgb(130 65 8);
-    --outline-blue-1: rgb(21 89 153);
-    --outline-blue-2: rgb(21 89 153);
-    --outline-gray-1: rgb(35 35 35);
-    --outline-gray-2: rgb(52 52 52);
-    --outline-gray-3: rgb(66 66 66);
-    --outline-gray-4: rgb(128 128 128);
-    --outline-gray-5: rgb(237 237 237);
-    --outline-gray-modals: rgb(52 52 52);
-    --outline-green-1: rgb(11 97 57);
-    --outline-green-2: rgb(10 63 39);
-    --outline-orange-1: rgb(130 57 6);
-    --outline-red-1: rgb(98 27 24);
-    --outline-red-2: rgb(76 24 24);
-    --outline-red-3: rgb(98 27 24);
-    --outline-red-4: rgb(156 32 32);
-    --outline-white: rgb(28 28 28);
-    --surface-amber-1: rgb(55 30 6);
-    --surface-amber-2: rgb(197 116 17);
-    --surface-blue-1: rgb(14 32 55);
-    --surface-blue-2: rgb(21 128 216);
-    --surface-cards: rgb(28 28 28);
-    --surface-cyan-1: rgb(11 37 45);
-    --surface-gray-1: rgb(35 35 35);
-    --surface-gray-2: rgb(255 255 255 / 0.1);
-    --surface-gray-3: rgb(255 255 255 / 0.18);
-    --surface-gray-4: rgb(66 66 66);
-    --surface-gray-5: rgb(212 212 212);
-    --surface-gray-6: rgb(175 175 175);
-    --surface-gray-7: rgb(212 212 212);
-    --surface-green-1: rgb(11 46 28);
-    --surface-green-2: rgb(10 63 39);
-    --surface-green-3: rgb(31 157 96);
-    --surface-menu-bar: rgb(15 15 15);
-    --surface-modal: rgb(35 35 35);
-    --surface-orange-1: rgb(64 31 7 / 0.8);
-    --surface-pink-1: rgb(71 20 50 / 0.8);
-    --surface-red-1: rgb(54 21 21 / 0.8);
-    --surface-red-2: rgb(76 24 24 / 0.9);
-    --surface-red-3: rgb(98 27 24);
-    --surface-red-4: rgb(228 56 56);
-    --surface-red-5: rgb(156 32 32);
-    --surface-red-6: rgb(98 27 24);
-    --surface-selected: rgb(255 255 255 / 0.1);
-    --surface-violet-1: rgb(34 28 66);
-    --surface-white: rgb(15 15 15);
-    --text-icons-amber-1: rgb(255 255 255);
-    --text-icons-amber-2: rgb(231 153 19);
-    --text-icons-amber-3: rgb(231 153 19);
-    --text-icons-blue-1: rgb(255 255 255);
-    --text-icons-blue-2: rgb(90 174 242);
-    --text-icons-blue-3: rgb(140 193 236);
-    --text-icons-cyan-1: rgb(60 184 220);
-    --text-icons-gray-1: rgb(35 35 35);
-    --text-icons-gray-2: rgb(66 66 66);
-    --text-icons-gray-3: rgb(113 113 113);
-    --text-icons-gray-4: rgb(113 113 113);
-    --text-icons-gray-5: rgb(128 128 128);
-    --text-icons-gray-6: rgb(153 153 153);
-    --text-icons-gray-7: rgb(175 175 175);
-    --text-icons-gray-8: rgb(212 212 212);
-    --text-icons-gray-9: rgb(248 248 248);
-    --text-icons-green-1: rgb(255 255 255);
-    --text-icons-green-2: rgb(53 174 116);
-    --text-icons-green-3: rgb(120 215 169);
-    --text-icons-pink-1: rgb(227 89 171);
-    --text-icons-red-1: rgb(255 255 255);
-    --text-icons-red-2: rgb(98 27 24);
-    --text-icons-red-3: rgb(235 77 82);
-    --text-icons-red-4: rgb(252 116 116);
-    --text-icons-violet-1: rgb(157 124 234);
-    --text-icons-white: rgb(15 15 15);
-  }
-}
diff --git a/src/style.css b/src/style.css
index d2a72dc5..be0d357d 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,37 +1,5 @@
 @import './fonts/Inter/inter.css';
-@import './espressoColors.css';
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  html,
-  body,
-  button,
-  p,
-  span,
-  div {
-    font-variation-settings: 'opsz' 24;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  select {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%237C7C7C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" aria-hidden="true" viewBox="0 0 24 24" ><path d="m6 9 6 6 6-6" /></svg>');
-    background-size: 1.13em;
-    background-position: right 0.44rem center;
-  }
-}
-
-@layer components {
-  .form-input,
-  .form-textarea,
-  .form-select {
-    @apply h-7 rounded border border-gray-100 bg-gray-100 py-1.5 pl-2 pr-2 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400;
-  }
-
-  .form-checkbox {
-    @apply rounded-md bg-gray-100 text-blue-500 focus:ring-0 focus-visible:ring-1;
-  }
-}
diff --git a/src/tailwind/colors.js b/src/tailwind/colors.js
new file mode 100644
index 00000000..9bd22937
--- /dev/null
+++ b/src/tailwind/colors.js
@@ -0,0 +1,642 @@
+let lightModeColors = {
+  gray: {
+    50: '238 238 238',
+    100: '243 243 243',
+    200: '237 237 237',
+    300: '226 226 226',
+    400: '199 199 199',
+    500: '153 153 153',
+    600: '124 124 124',
+    700: '82 82 82',
+    800: '56 56 56',
+    900: '23 23 23',
+  },
+  blue: {
+    50: '242 249 255',
+    100: '230 244 255',
+    200: '200 230 255',
+    300: '167 215 253',
+    400: '115 187 246',
+    500: '2 137 247',
+    600: '0 123 224',
+    700: '0 112 204',
+    800: '0 92 163',
+    900: '0 72 128',
+  },
+  amber: {
+    50: '253 250 237',
+    100: '255 247 211',
+    200: '254 237 169',
+    300: '251 219 115',
+    400: '251 204 85',
+    500: '231 153 19',
+    600: '219 119 6',
+    700: '179 83 9',
+    800: '145 64 13',
+    900: '118 56 19',
+  },
+  cyan: {
+    50: '245 251 252',
+    100: '221 247 255',
+    200: '179 232 247',
+    300: '153 226 248',
+    400: '114 213 243',
+    500: '59 189 229',
+    600: '50 164 199',
+    700: '38 122 148',
+    800: '18 92 115',
+    900: '22 71 89',
+  },
+  green: {
+    50: '242 253 244',
+    100: '228 250 235',
+    200: '212 246 222',
+    300: '185 238 204',
+    400: '155 228 182',
+    500: '89 186 139',
+    600: '48 166 109',
+    700: '39 143 94',
+    800: '22 121 76',
+    900: '23 59 44',
+  },
+  orange: {
+    50: '255 249 245',
+    100: '255 239 228',
+    200: '255 222 197',
+    300: '255 203 163',
+    400: '244 176 127',
+    500: '232 108 19',
+    600: '212 90 8',
+    700: '189 62 12',
+    800: '158 53 19',
+    900: '107 39 17',
+  },
+  pink: {
+    50: '255 247 252',
+    100: '253 232 245',
+    200: '255 213 240',
+    300: '249 185 224',
+    400: '246 167 214',
+    500: '227 74 166',
+    600: '207 58 150',
+    700: '156 38 113',
+    800: '128 20 88',
+    900: '87 15 62',
+  },
+  purple: {
+    50: '253 250 255',
+    100: '246 233 255',
+    200: '236 211 255',
+    300: '226 185 252',
+    400: '207 161 242',
+    500: '156 69 227',
+    600: '134 66 194',
+    700: '110 57 157',
+    800: '92 47 131',
+    900: '64 24 99',
+  },
+  red: {
+    50: '255 247 247',
+    100: '255 231 231',
+    200: '255 216 216',
+    300: '253 194 194',
+    400: '247 149 150',
+    500: '224 54 54',
+    600: '204 41 41',
+    700: '181 42 42',
+    800: '148 31 31',
+    900: '107 21 21',
+  },
+  teal: {
+    50: '240 253 250',
+    100: '230 247 244',
+    200: '186 232 225',
+    300: '151 222 212',
+    400: '115 209 196',
+    500: '54 186 173',
+    600: '11 158 146',
+    700: '15 115 107',
+    800: '17 92 87',
+    900: '17 69 65',
+  },
+  violet: {
+    50: '251 250 255',
+    100: '240 235 255',
+    200: '219 213 255',
+    300: '201 186 251',
+    400: '179 161 245',
+    500: '104 70 227',
+    600: '95 70 199',
+    700: '79 61 161',
+    800: '57 41 128',
+    900: '37 25 89',
+  },
+  yellow: {
+    50: '255 252 239',
+    100: '255 247 211',
+    200: '247 233 168',
+    300: '245 225 113',
+    400: '242 209 75',
+    500: '237 186 19',
+    600: '209 147 13',
+    700: '171 110 5',
+    800: '140 86 0',
+    900: '115 63 18',
+  },
+}
+
+let darkModeColors = {
+  gray: {
+    50: '248 248 248',
+    100: '212 212 212',
+    200: '175 175 175',
+    250: '153 153 153',
+    300: '128 128 128',
+    400: '113 113 113',
+    500: '66 66 66',
+    600: '52 52 52',
+    650: '43 43 43',
+    700: '35 35 35',
+    800: '28 28 28',
+    900: '15 15 15',
+  },
+  blue: {
+    50: '201 224 245',
+    100: '173 210 245',
+    200: '140 193 236',
+    300: '90 174 242',
+    400: '50 148 227',
+    500: '21 128 216',
+    600: '21 89 153',
+    700: '6 61 113',
+    800: '5 43 83',
+    900: '14 32 55',
+  },
+  amber: {
+    50: '249 232 165',
+    100: '248 209 110',
+    200: '240 186 49',
+    300: '231 153 19',
+    400: '197 116 17',
+    500: '168 88 9',
+    600: '130 65 8',
+    700: '96 48 7',
+    800: '75 38 6',
+    900: '55 30 6',
+  },
+  cyan: {
+    50: '208 240 250',
+    100: '160 230 247',
+    200: '104 211 243',
+    300: '60 184 220',
+    400: '43 141 171',
+    500: '35 114 139',
+    600: '21 82 102',
+    700: '14 59 73',
+    800: '13 43 54',
+    900: '11 37 45',
+  },
+  green: {
+    50: '200 243 222',
+    100: '155 230 193',
+    200: '120 215 169',
+    300: '88 192 142',
+    400: '53 174 116',
+    500: '31 157 96',
+    600: '24 132 80',
+    700: '11 97 57',
+    800: '10 63 39',
+    900: '11 46 28',
+  },
+  orange: {
+    50: '255 205 173',
+    100: '255 168 115',
+    200: '250 138 64',
+    300: '222 109 27',
+    400: '196 90 14',
+    500: '152 69 9',
+    600: '130 57 6',
+    700: '104 49 8',
+    800: '83 39 7',
+    900: '64 31 7',
+  },
+  pink: {
+    50: '246 197 222',
+    100: '246 154 209',
+    200: '237 119 190',
+    300: '227 89 171',
+    400: '203 67 148',
+    500: '172 55 125',
+    600: '130 42 95',
+    700: '104 32 75',
+    800: '96 29 70',
+    900: '71 20 50',
+  },
+  purple: {
+    50: '229 198 251',
+    100: '217 175 245',
+    200: '201 147 239',
+    300: '177 104 232',
+    400: '152 75 216',
+    500: '122 45 185',
+    600: '89 31 137',
+    700: '71 23 110',
+    800: '57 20 87',
+    900: '46 17 70',
+  },
+  red: {
+    50: '255 193 193',
+    100: '255 149 149',
+    200: '252 116 116',
+    300: '235 77 82',
+    400: '228 56 56',
+    500: '200 40 40',
+    600: '156 32 32',
+    700: '98 27 24',
+    800: '76 24 24',
+    900: '54 21 21',
+  },
+  teal: {
+    50: '147 242 232',
+    100: '110 231 219',
+    200: '82 218 204',
+    300: '61 198 184',
+    400: '33 156 143',
+    500: '27 113 105',
+    600: '19 86 79',
+    700: '12 66 60',
+    800: '11 58 53',
+    900: '10 45 41',
+  },
+  violet: {
+    50: '218 203 247',
+    100: '196 175 238',
+    200: '179 152 239',
+    300: '157 124 234',
+    400: '136 103 232',
+    500: '92 63 194',
+    600: '70 57 166',
+    700: '51 41 120',
+    800: '40 30 93',
+    900: '34 28 66',
+  },
+  yellow: {
+    50: '255 232 157',
+    100: '248 215 106',
+    200: '236 192 46',
+    300: '218 174 21',
+    400: '198 156 18',
+    500: '156 122 10',
+    600: '112 86 6',
+    700: '91 70 5',
+    800: '63 48 4',
+    900: '50 38 4',
+  },
+}
+
+const neutralColors = {
+  black: '0 0 0',
+  white: '255 255 255',
+}
+
+const whiteOverlay = {
+  50: '255 255 255 / 0.1',
+  100: '255 255 255 / 0.18',
+  200: '255 255 255 / 0.27',
+  300: '255 255 255 / 0.36',
+  400: '255 255 255 / 0.45',
+  500: '255 255 255 / 0.54',
+  600: '255 255 255 / 0.63',
+  700: '255 255 255 / 0.72',
+  800: '255 255 255 / 0.81',
+  900: '255 255 255 / 0.90',
+}
+
+const blackOverlay = {
+  50: '0 0 0 / 0.09',
+  100: '0 0 0 / 0.18',
+  200: '0 0 0 / 0.27',
+  300: '0 0 0 / 0.36',
+  400: '0 0 0 / 0.45',
+  500: '0 0 0 / 0.54',
+  600: '0 0 0 / 0.63',
+  700: '0 0 0 / 0.72',
+  800: '0 0 0 / 0.81',
+  900: '0 0 0 / 0.90',
+}
+
+function withOpacity(color) {
+  return ({ opacityValue }) => {
+    if (opacityValue !== undefined && !color.includes('/')) {
+      return `rgb(${color} / ${opacityValue})`
+    }
+    return `rgb(${color})`
+  }
+}
+
+function getDefaultColorMap(color) {
+  let defaultColors = lightModeColors
+  let obj = {}
+  let keys = [
+    '50',
+    '100',
+    '200',
+    '300',
+    '400',
+    '500',
+    '600',
+    '700',
+    '800',
+    '900',
+  ]
+  keys.forEach((key) => {
+    let rgbString = defaultColors[color][key]
+    if (color) {
+      obj[key] = withOpacity(rgbString)
+    }
+  })
+  return obj
+}
+
+function themedCssVariables() {
+  return {
+    ':root': {
+      '--outline-amber-1': lightModeColors.amber[200],
+      '--outline-amber-2': lightModeColors.amber[400],
+      '--outline-blue-1': lightModeColors.blue[300],
+      '--outline-blue-2': lightModeColors.blue[500],
+      '--outline-gray-1': lightModeColors.gray[200],
+      '--outline-gray-2': lightModeColors.gray[300],
+      '--outline-gray-3': lightModeColors.gray[400],
+      '--outline-gray-4': lightModeColors.gray[500],
+      '--outline-gray-5': lightModeColors.gray[800],
+      '--outline-gray-modals': lightModeColors.gray[200],
+      '--outline-green-1': lightModeColors.green[300],
+      '--outline-green-2': lightModeColors.green[400],
+      '--outline-orange-1': lightModeColors.orange[400],
+      '--outline-red-1': lightModeColors.red[200],
+      '--outline-red-2': lightModeColors.red[300],
+      '--outline-red-3': lightModeColors.red[400],
+      '--outline-red-4': lightModeColors.red[500],
+      '--outline-white': neutralColors.white,
+      '--surface-amber-1': lightModeColors.amber[100],
+      '--surface-amber-2': lightModeColors.amber[600],
+      '--surface-blue-1': lightModeColors.blue[100],
+      '--surface-blue-2': lightModeColors.blue[500],
+      '--surface-cards': neutralColors.white,
+      '--surface-cyan-1': lightModeColors.cyan[100],
+      '--surface-gray-1': lightModeColors.gray[50],
+      '--surface-gray-2': lightModeColors.gray[100],
+      '--surface-gray-3': lightModeColors.gray[200],
+      '--surface-gray-4': lightModeColors.gray[300],
+      '--surface-gray-5': lightModeColors.gray[700],
+      '--surface-gray-6': lightModeColors.gray[800],
+      '--surface-gray-7': lightModeColors.gray[900],
+      '--surface-green-1': lightModeColors.green[50],
+      '--surface-green-2': lightModeColors.green[100],
+      '--surface-green-3': lightModeColors.green[600],
+      '--surface-menu-bar': lightModeColors.gray[50],
+      '--surface-modal': neutralColors.white,
+      '--surface-orange-1': lightModeColors.orange[100],
+      '--surface-pink-1': lightModeColors.pink[100],
+      '--surface-red-1': lightModeColors.red[100],
+      '--surface-red-2': lightModeColors.red[200],
+      '--surface-red-3': lightModeColors.red[300],
+      '--surface-red-4': lightModeColors.red[600],
+      '--surface-red-5': lightModeColors.red[700],
+      '--surface-red-6': lightModeColors.red[800],
+      '--surface-selected': neutralColors.white,
+      '--surface-violet-1': lightModeColors.violet[100],
+      '--surface-white': neutralColors.white,
+      '--text-ink-amber-1': lightModeColors.amber[100],
+      '--text-ink-amber-2': lightModeColors.amber[500],
+      '--text-ink-amber-3': lightModeColors.amber[600],
+      '--text-ink-blue-1': lightModeColors.blue[100],
+      '--text-ink-blue-2': lightModeColors.blue[400],
+      '--text-ink-blue-3': lightModeColors.blue[600],
+      '--text-ink-blue-4': lightModeColors.blue[800],
+      '--text-ink-cyan-1': lightModeColors.cyan[500],
+      '--text-ink-gray-1': lightModeColors.gray[200],
+      '--text-ink-gray-2': lightModeColors.gray[300],
+      '--text-ink-gray-3': lightModeColors.gray[400],
+      '--text-ink-gray-4': lightModeColors.gray[500],
+      '--text-ink-gray-5': lightModeColors.gray[600],
+      '--text-ink-gray-6': lightModeColors.gray[700],
+      '--text-ink-gray-7': lightModeColors.gray[700],
+      '--text-ink-gray-8': lightModeColors.gray[800],
+      '--text-ink-gray-9': lightModeColors.gray[900],
+      '--text-ink-green-1': lightModeColors.green[50],
+      '--text-ink-green-2': lightModeColors.green[600],
+      '--text-ink-green-3': lightModeColors.green[800],
+      '--text-ink-pink-1': lightModeColors.pink[500],
+      '--text-ink-red-1': lightModeColors.red[50],
+      '--text-ink-red-2': lightModeColors.red[400],
+      '--text-ink-red-3': lightModeColors.red[500],
+      '--text-ink-red-4': lightModeColors.red[600],
+      '--text-ink-violet-1': lightModeColors.violet[500],
+      '--text-ink-white': neutralColors.white,
+    },
+    "[data-theme='dark']": {
+      '--outline-amber-1': darkModeColors.amber[700],
+      '--outline-amber-2': darkModeColors.amber[600],
+      '--outline-blue-1': darkModeColors.blue[600],
+      '--outline-blue-2': darkModeColors.blue[600],
+      '--outline-gray-1': darkModeColors.gray[700],
+      '--outline-gray-2': darkModeColors.gray[600],
+      '--outline-gray-3': darkModeColors.gray[500],
+      '--outline-gray-4': darkModeColors.gray[300],
+      '--outline-gray-5': darkModeColors.gray[200],
+      '--outline-gray-modals': darkModeColors.gray[600],
+      '--outline-green-1': darkModeColors.green[700],
+      '--outline-green-2': darkModeColors.green[800],
+      '--outline-orange-1': darkModeColors.orange[600],
+      '--outline-red-1': darkModeColors.red[700],
+      '--outline-red-2': darkModeColors.red[800],
+      '--outline-red-3': darkModeColors.red[700],
+      '--outline-red-4': darkModeColors.red[600],
+      '--outline-white': darkModeColors.gray[800],
+      '--surface-amber-1': darkModeColors.amber[900],
+      '--surface-amber-2': darkModeColors.amber[400],
+      '--surface-blue-1': darkModeColors.blue[900],
+      '--surface-blue-2': darkModeColors.blue[500],
+      '--surface-cards': darkModeColors.gray[800],
+      '--surface-cyan-1': darkModeColors.cyan[900],
+      '--surface-gray-1': darkModeColors.gray[700],
+      '--surface-gray-2': whiteOverlay[50],
+      '--surface-gray-3': whiteOverlay[100],
+      '--surface-gray-4': darkModeColors.gray[500],
+      '--surface-gray-5': darkModeColors.gray[100],
+      '--surface-gray-6': darkModeColors.gray[200],
+      '--surface-gray-7': darkModeColors.gray[100],
+      '--surface-green-1': darkModeColors.green[900],
+      '--surface-green-2': darkModeColors.green[800],
+      '--surface-green-3': darkModeColors.green[500],
+      '--surface-menu-bar': darkModeColors.gray[900],
+      '--surface-modal': darkModeColors.gray[700],
+      '--surface-orange-1': `${darkModeColors.orange[900]} / 0.8`,
+      '--surface-pink-1': `${darkModeColors.pink[900]} / 0.8`,
+      '--surface-red-1': `${darkModeColors.red[900]} / 0.8`,
+      '--surface-red-2': `${darkModeColors.red[800]} / 0.9`,
+      '--surface-red-3': darkModeColors.red[700],
+      '--surface-red-4': darkModeColors.red[400],
+      '--surface-red-5': darkModeColors.red[600],
+      '--surface-red-6': darkModeColors.red[700],
+      '--surface-selected': whiteOverlay[50],
+      '--surface-violet-1': darkModeColors.violet[900],
+      '--surface-white': darkModeColors.gray[900],
+      '--text-ink-amber-1': neutralColors.white,
+      '--text-ink-amber-2': darkModeColors.amber[300],
+      '--text-ink-amber-3': darkModeColors.amber[400],
+      '--text-ink-blue-1': neutralColors.white,
+      '--text-ink-blue-2': darkModeColors.blue[500],
+      '--text-ink-blue-3': darkModeColors.blue[300],
+      '--text-ink-cyan-1': darkModeColors.cyan[300],
+      '--text-ink-gray-1': darkModeColors.gray[700],
+      '--text-ink-gray-2': darkModeColors.gray[500],
+      '--text-ink-gray-3': darkModeColors.gray[400],
+      '--text-ink-gray-4': darkModeColors.gray[400],
+      '--text-ink-gray-5': darkModeColors.gray[300],
+      '--text-ink-gray-6': darkModeColors.gray[250],
+      '--text-ink-gray-7': darkModeColors.gray[200],
+      '--text-ink-gray-8': darkModeColors.gray[100],
+      '--text-ink-gray-9': darkModeColors.gray[50],
+      '--text-ink-green-1': neutralColors.white,
+      '--text-ink-green-2': darkModeColors.green[400],
+      '--text-ink-green-3': darkModeColors.green[200],
+      '--text-ink-pink-1': darkModeColors.pink[100],
+      '--text-ink-red-1': neutralColors.white,
+      '--text-ink-red-2': darkModeColors.red[700],
+      '--text-ink-red-3': darkModeColors.red[300],
+      '--text-ink-red-4': darkModeColors.red[200],
+      '--text-ink-violet-1': darkModeColors.violet[300],
+      '--text-ink-white': darkModeColors.gray[900],
+    },
+  }
+}
+
+let semanticColors = {
+  // for border color
+  outline: {
+    'amber-1': withOpacity('var(--outline-amber-1)'),
+    'amber-2': withOpacity('var(--outline-amber-2)'),
+    'blue-1': withOpacity('var(--outline-blue-1)'),
+    'blue-2': withOpacity('var(--outline-blue-2)'),
+    'gray-1': withOpacity('var(--outline-gray-1)'),
+    'gray-2': withOpacity('var(--outline-gray-2)'),
+    'gray-3': withOpacity('var(--outline-gray-3)'),
+    'gray-4': withOpacity('var(--outline-gray-4)'),
+    'gray-5': withOpacity('var(--outline-gray-5)'),
+    'gray-modals': withOpacity('var(--outline-gray-modals)'),
+    'green-1': withOpacity('var(--outline-green-1)'),
+    'green-2': withOpacity('var(--outline-green-2)'),
+    'orange-1': withOpacity('var(--outline-orange-1)'),
+    'red-1': withOpacity('var(--outline-red-1)'),
+    'red-2': withOpacity('var(--outline-red-2)'),
+    'red-3': withOpacity('var(--outline-red-3)'),
+    'red-4': withOpacity('var(--outline-red-4)'),
+    white: withOpacity('var(--outline-white)'),
+  },
+  // for background color
+  surface: {
+    'amber-1': withOpacity('var(--surface-amber-1)'),
+    'amber-2': withOpacity('var(--surface-amber-2)'),
+    'blue-1': withOpacity('var(--surface-blue-1)'),
+    'blue-2': withOpacity('var(--surface-blue-2)'),
+    cards: withOpacity('var(--surface-cards)'),
+    'cyan-1': withOpacity('var(--surface-cyan-1)'),
+    'gray-1': withOpacity('var(--surface-gray-1)'),
+    'gray-2': withOpacity('var(--surface-gray-2)'),
+    'gray-3': withOpacity('var(--surface-gray-3)'),
+    'gray-4': withOpacity('var(--surface-gray-4)'),
+    'gray-5': withOpacity('var(--surface-gray-5)'),
+    'gray-6': withOpacity('var(--surface-gray-6)'),
+    'gray-7': withOpacity('var(--surface-gray-7)'),
+    'green-1': withOpacity('var(--surface-green-1)'),
+    'green-2': withOpacity('var(--surface-green-2)'),
+    'green-3': withOpacity('var(--surface-green-3)'),
+    'menu-bar': withOpacity('var(--surface-menu-bar)'),
+    modal: withOpacity('var(--surface-modal)'),
+    'orange-1': withOpacity('var(--surface-orange-1)'),
+    'pink-1': withOpacity('var(--surface-pink-1)'),
+    'red-1': withOpacity('var(--surface-red-1)'),
+    'red-2': withOpacity('var(--surface-red-2)'),
+    'red-3': withOpacity('var(--surface-red-3)'),
+    'red-4': withOpacity('var(--surface-red-4)'),
+    'red-5': withOpacity('var(--surface-red-5)'),
+    'red-6': withOpacity('var(--surface-red-6)'),
+    selected: withOpacity('var(--surface-selected)'),
+    'violet-1': withOpacity('var(--surface-violet-1)'),
+    white: withOpacity('var(--surface-white)'),
+  },
+  // for text color and svg stroke/fill
+  ink: {
+    'amber-1': withOpacity('var(--text-ink-amber-1)'),
+    'amber-2': withOpacity('var(--text-ink-amber-2)'),
+    'amber-3': withOpacity('var(--text-ink-amber-3)'),
+    'blue-1': withOpacity('var(--text-ink-blue-1)'),
+    'blue-2': withOpacity('var(--text-ink-blue-2)'),
+    'blue-3': withOpacity('var(--text-ink-blue-3)'),
+    'cyan-1': withOpacity('var(--text-ink-cyan-1)'),
+    'gray-1': withOpacity('var(--text-ink-gray-1)'),
+    'gray-2': withOpacity('var(--text-ink-gray-2)'),
+    'gray-3': withOpacity('var(--text-ink-gray-3)'),
+    'gray-4': withOpacity('var(--text-ink-gray-4)'),
+    'gray-5': withOpacity('var(--text-ink-gray-5)'),
+    'gray-6': withOpacity('var(--text-ink-gray-6)'),
+    'gray-7': withOpacity('var(--text-ink-gray-7)'),
+    'gray-8': withOpacity('var(--text-ink-gray-8)'),
+    'gray-9': withOpacity('var(--text-ink-gray-9)'),
+    'green-1': withOpacity('var(--text-ink-green-1)'),
+    'green-2': withOpacity('var(--text-ink-green-2)'),
+    'green-3': withOpacity('var(--text-ink-green-3)'),
+    'pink-1': withOpacity('var(--text-ink-pink-1)'),
+    'red-1': withOpacity('var(--text-ink-red-1)'),
+    'red-2': withOpacity('var(--text-ink-red-2)'),
+    'red-3': withOpacity('var(--text-ink-red-3)'),
+    'red-4': withOpacity('var(--text-ink-red-4)'),
+    'violet-1': withOpacity('var(--text-ink-violet-1)'),
+    white: withOpacity('var(--text-ink-white)'),
+  },
+}
+
+function colorPalette({ colors }) {
+  return {
+    inherit: colors.inherit,
+    current: colors.current,
+    transparent: colors.transparent,
+    black: colors.black,
+    white: colors.white,
+    gray: getDefaultColorMap('gray'),
+    blue: getDefaultColorMap('blue'),
+    green: getDefaultColorMap('green'),
+    red: getDefaultColorMap('red'),
+    orange: getDefaultColorMap('orange'),
+    yellow: getDefaultColorMap('yellow'),
+    teal: getDefaultColorMap('teal'),
+    violet: getDefaultColorMap('violet'),
+    cyan: getDefaultColorMap('cyan'),
+    amber: getDefaultColorMap('amber'),
+    pink: getDefaultColorMap('pink'),
+    purple: getDefaultColorMap('purple'),
+    'white-overlay': (() => {
+      let obj = {}
+      for (let shade in whiteOverlay) {
+        obj[shade] = `rgb(${whiteOverlay[shade]})`
+      }
+      return obj
+    })(),
+    'black-overlay': (() => {
+      let obj = {}
+      for (let shade in blackOverlay) {
+        obj[shade] = `rgb(${blackOverlay[shade]})`
+      }
+      return obj
+    })(),
+  }
+}
+
+module.exports = {
+  colorPalette,
+  themedCssVariables,
+  semanticColors,
+}
diff --git a/src/tailwind/plugin.js b/src/tailwind/plugin.js
new file mode 100644
index 00000000..3d0132d6
--- /dev/null
+++ b/src/tailwind/plugin.js
@@ -0,0 +1,301 @@
+const plugin = require('tailwindcss/plugin')
+const { themedCssVariables, colorPalette, semanticColors } = require('./colors')
+
+let globalStyles = (theme) => ({
+  html: {
+    'font-family': `Inter, ${theme('fontFamily.sans')}`,
+  },
+  '@supports (font-variation-settings: normal)': {
+    html: {
+      'font-family': `InterVar, ${theme('fontFamily.sans')}`,
+      'font-optical-sizing': 'auto',
+    },
+  },
+  'html, body, button, p, span, div': {
+    fontVariationSettings: "'opsz' 24",
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
+  },
+  select: {
+    backgroundImage:
+      'url(\'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%237C7C7C" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" aria-hidden="true" viewBox="0 0 24 24" ><path d="m6 9 6 6 6-6" /></svg>\')',
+    backgroundSize: '1.13em',
+    backgroundPosition: 'right 0.44rem center',
+  },
+})
+
+let componentStyles = {
+  '.form-input, .form-textarea, .form-select': {
+    '@apply h-7 rounded border border-gray-100 bg-gray-100 py-1.5 pl-2 pr-2 text-base text-gray-800 placeholder-gray-500 transition-colors hover:border-gray-200 hover:bg-gray-200 focus:border-gray-500 focus:bg-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400':
+      {},
+  },
+  '.form-checkbox': {
+    '@apply rounded-md bg-gray-100 text-blue-500 focus:ring-0 focus-visible:ring-1':
+      {},
+  },
+}
+
+module.exports = plugin(
+  function ({ addBase, addComponents, theme }) {
+    addBase({ ...globalStyles(theme), ...themedCssVariables() })
+    addComponents(componentStyles)
+  },
+  {
+    theme: {
+      colors: colorPalette,
+      borderRadius: {
+        none: '0px', // 0
+        sm: '0.25rem', // 4px
+        DEFAULT: '0.5rem', // 8px
+        md: '0.625rem', // 10px
+        lg: '0.75rem', // 12px
+        xl: '1rem', // 16px
+        '2xl': '1.25rem', // 20px
+        full: '9999px', // 9999px
+      },
+      boxShadow: {
+        sm: '0px 1px 2px rgba(0, 0, 0, 0.1)',
+        DEFAULT:
+          '0px 0px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px rgba(0, 0, 0, 0.1)',
+        md: '0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0.5px 2px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.16)',
+        lg: '0px 0px 1px rgba(0, 0, 0, 0.35), 0px 6px 8px -4px rgba(0, 0, 0, 0.1)',
+        xl: '0px 0px 1px rgba(0, 0, 0, 0.19), 0px 1px 2px rgba(0, 0, 0, 0.07), 0px 6px 15px -5px rgba(0, 0, 0, 0.11)',
+        '2xl':
+          '0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 10px 24px -3px rgba(0, 0, 0, 0.1)',
+        none: 'none',
+      },
+      container: {
+        padding: {
+          xl: '5rem',
+        },
+      },
+      fontSize: {
+        '2xs': [
+          '11px',
+          {
+            lineHeight: '1.15',
+            letterSpacing: '0.01em',
+            fontWeight: '420',
+          },
+        ],
+        xs: [
+          '12px',
+          {
+            lineHeight: '1.15',
+            letterSpacing: '0.02em',
+            fontWeight: '420',
+          },
+        ],
+        sm: [
+          '13px',
+          {
+            lineHeight: '1.15',
+            letterSpacing: '0.02em',
+            fontWeight: '420',
+          },
+        ],
+        base: [
+          '14px',
+          {
+            lineHeight: '1.15',
+            letterSpacing: '0.02em',
+            fontWeight: '420',
+          },
+        ],
+        lg: [
+          '16px',
+          {
+            lineHeight: '1.15',
+            letterSpacing: '0.02em',
+            fontWeight: '400',
+          },
+        ],
+        xl: [
+          '18px',
+          {
+            lineHeight: '1.15',
+            letterSpacing: '0.01em',
+            fontWeight: '400',
+          },
+        ],
+        '2xl': [
+          '20px',
+          {
+            lineHeight: '1.15',
+            letterSpacing: '0.01em',
+            fontWeight: '400',
+          },
+        ],
+        '3xl': [
+          '24px',
+          {
+            lineHeight: '1.15',
+            fontWeight: 400,
+            letterSpacing: '0.005em',
+          },
+        ],
+        // font size for paragraphs
+        'p-2xs': [
+          '11px',
+          {
+            lineHeight: '1.6',
+            letterSpacing: '0.01em',
+            fontWeight: '420',
+          },
+        ],
+        'p-xs': [
+          '12px',
+          {
+            lineHeight: '1.6',
+            letterSpacing: '0.02em',
+            fontWeight: '420',
+          },
+        ],
+        'p-sm': [
+          '13px',
+          {
+            lineHeight: '1.5',
+            letterSpacing: '0.02em',
+            fontWeight: '420',
+          },
+        ],
+        'p-base': [
+          '14px',
+          {
+            lineHeight: '1.5',
+            letterSpacing: '0.02em',
+            fontWeight: '420',
+          },
+        ],
+        'p-lg': [
+          '16px',
+          {
+            lineHeight: '1.5',
+            letterSpacing: '0.02em',
+            fontWeight: '400',
+          },
+        ],
+        'p-xl': [
+          '18px',
+          {
+            lineHeight: '1.42',
+            letterSpacing: '0.01em',
+            fontWeight: '400',
+          },
+        ],
+        'p-2xl': [
+          '20px',
+          {
+            lineHeight: '1.38',
+            letterSpacing: '0.01em',
+            fontWeight: '400',
+          },
+        ],
+        'p-3xl': [
+          '24px',
+          {
+            lineHeight: '1.2',
+            fontWeight: 400,
+            letterSpacing: '0.005em',
+          },
+        ],
+      },
+      screens: {
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px',
+      },
+      extend: {
+        textColor: {
+          ink: semanticColors.ink,
+        },
+        borderColor: {
+          outline: semanticColors.outline,
+        },
+        backgroundColor: {
+          surface: semanticColors.surface,
+        },
+        fill: {
+          ink: semanticColors.ink,
+        },
+        stroke: {
+          ink: semanticColors.ink,
+        },
+        spacing: {
+          4.5: '1.125rem',
+          5.5: '1.375rem',
+          6.5: '1.625rem',
+          7.5: '1.875rem',
+          8.5: '2.125rem',
+          9.5: '2.375rem',
+          10.5: '2.625rem',
+          11.5: '2.875rem',
+          12.5: '3.125rem',
+          13: '3.25rem',
+          13.5: '3.375rem',
+          14.5: '3.625rem',
+          15: '3.75rem',
+          15.5: '3.875rem',
+        },
+        width: {
+          3.5: '0.875rem',
+          112: '28rem',
+          wizard: '650px',
+        },
+        height: {
+          3.5: '0.875rem',
+        },
+        minWidth: {
+          40: '10rem',
+          50: '18rem',
+        },
+        maxHeight: {
+          52: '13rem',
+        },
+        borderColor: (theme) => ({
+          DEFAULT: theme('colors.gray.200'),
+        }),
+        typography: (theme) => ({
+          DEFAULT: {
+            css: {
+              '--tw-prose-body': theme('colors.gray.800'),
+            },
+          },
+          sm: {
+            css: {
+              fontSize: '14px',
+              fontWeight: 420,
+              lineHeight: 1.6,
+              letterSpacing: '0.02em',
+              p: {
+                marginTop: '0.5rem',
+                marginBottom: '1rem',
+              },
+              '> ul > li p': {
+                marginTop: '0.5rem',
+                marginBottom: '0.5rem',
+              },
+              '> ul > li > *:first-child': {
+                marginTop: '0.5rem',
+              },
+              '> ul > li > *:last-child': {
+                marginBottom: '0.5rem',
+              },
+              '> ol > li p': {
+                marginTop: '0.5rem',
+                marginBottom: '0.5rem',
+              },
+              '> ol > li > *:first-child': {
+                marginTop: '0.5rem',
+              },
+              '> ol > li > *:last-child': {
+                marginBottom: '0.5rem',
+              },
+            },
+          },
+        }),
+      },
+    },
+  },
+)
diff --git a/src/tailwind/preset.js b/src/tailwind/preset.js
new file mode 100644
index 00000000..7f46298b
--- /dev/null
+++ b/src/tailwind/preset.js
@@ -0,0 +1,10 @@
+const themePlugin = require('./plugin')
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['selector', '[data-theme="dark"]'],
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    themePlugin,
+  ],
+}
diff --git a/src/utils/espressoVariables.js b/src/utils/espressoVariables.js
deleted file mode 100644
index f4b10c56..00000000
--- a/src/utils/espressoVariables.js
+++ /dev/null
@@ -1,83 +0,0 @@
-const espressoColors = {
-  outline: {
-    'amber-1': 'var(--outline-amber-1)',
-    'amber-2': 'var(--outline-amber-2)',
-    'blue-1': 'var(--outline-blue-1)',
-    'blue-2': 'var(--outline-blue-2)',
-    'gray-1': 'var(--outline-gray-1)',
-    'gray-2': 'var(--outline-gray-2)',
-    'gray-3': 'var(--outline-gray-3)',
-    'gray-4': 'var(--outline-gray-4)',
-    'gray-5': 'var(--outline-gray-5)',
-    'gray-modals': 'var(--outline-gray-modals)',
-    'green-1': 'var(--outline-green-1)',
-    'green-2': 'var(--outline-green-2)',
-    'orange-1': 'var(--outline-orange-1)',
-    'red-1': 'var(--outline-red-1)',
-    'red-2': 'var(--outline-red-2)',
-    'red-3': 'var(--outline-red-3)',
-    'red-4': 'var(--outline-red-4)',
-    white: 'var(--outline-white)',
-  },
-  surface: {
-    'amber-1': 'var(--surface-amber-1)',
-    'amber-2': 'var(--surface-amber-2)',
-    'blue-1': 'var(--surface-blue-1)',
-    'blue-2': 'var(--surface-blue-2)',
-    cards: 'var(--surface-cards)',
-    'cyan-1': 'var(--surface-cyan-1)',
-    'gray-1': 'var(--surface-gray-1)',
-    'gray-2': 'var(--surface-gray-2)',
-    'gray-3': 'var(--surface-gray-3)',
-    'gray-4': 'var(--surface-gray-4)',
-    'gray-5': 'var(--surface-gray-5)',
-    'gray-6': 'var(--surface-gray-6)',
-    'gray-7': 'var(--surface-gray-7)',
-    'green-1': 'var(--surface-green-1)',
-    'green-2': 'var(--surface-green-2)',
-    'green-3': 'var(--surface-green-3)',
-    'menu-bar': 'var(--surface-menu-bar)',
-    modal: 'var(--surface-modal)',
-    'orange-1': 'var(--surface-orange-1)',
-    'pink-1': 'var(--surface-pink-1)',
-    'red-1': 'var(--surface-red-1)',
-    'red-2': 'var(--surface-red-2)',
-    'red-3': 'var(--surface-red-3)',
-    'red-4': 'var(--surface-red-4)',
-    'red-5': 'var(--surface-red-5)',
-    'red-6': 'var(--surface-red-6)',
-    selected: 'var(--surface-selected)',
-    'violet-1': 'var(--surface-violet-1)',
-    white: 'var(--surface-white)',
-  },
-  'text-icons': {
-    'amber-1': 'var(--text-icons-amber-1)',
-    'amber-2': 'var(--text-icons-amber-2)',
-    'amber-3': 'var(--text-icons-amber-3)',
-    'blue-1': 'var(--text-icons-blue-1)',
-    'blue-2': 'var(--text-icons-blue-2)',
-    'blue-3': 'var(--text-icons-blue-3)',
-    'cyan-1': 'var(--text-icons-cyan-1)',
-    'gray-1': 'var(--text-icons-gray-1)',
-    'gray-2': 'var(--text-icons-gray-2)',
-    'gray-3': 'var(--text-icons-gray-3)',
-    'gray-4': 'var(--text-icons-gray-4)',
-    'gray-5': 'var(--text-icons-gray-5)',
-    'gray-6': 'var(--text-icons-gray-6)',
-    'gray-7': 'var(--text-icons-gray-7)',
-    'gray-8': 'var(--text-icons-gray-8)',
-    'gray-9': 'var(--text-icons-gray-9)',
-    'green-1': 'var(--text-icons-green-1)',
-    'green-2': 'var(--text-icons-green-2)',
-    'green-3': 'var(--text-icons-green-3)',
-    'pink-1': 'var(--text-icons-pink-1)',
-    'red-1': 'var(--text-icons-red-1)',
-    'red-2': 'var(--text-icons-red-2)',
-    'red-3': 'var(--text-icons-red-3)',
-    'red-4': 'var(--text-icons-red-4)',
-    'violet-1': 'var(--text-icons-violet-1)',
-    white: 'var(--text-icons-white)',
-  },
-}
-
-module.exports = espressoColors
diff --git a/src/utils/tailwind.config.js b/src/utils/tailwind.config.js
index 87708146..b06aa8ad 100644
--- a/src/utils/tailwind.config.js
+++ b/src/utils/tailwind.config.js
@@ -1,439 +1,6 @@
-const plugin = require('tailwindcss/plugin')
-const espressoVariables = require('./espressoVariables.js')
-
-module.exports = {
-  darkMode: ['selector', '[data-theme="dark"]'],
-  theme: {
-    extend: {
-      spacing: {
-        4.5: '1.125rem',
-        5.5: '1.375rem',
-        6.5: '1.625rem',
-        7.5: '1.875rem',
-        8.5: '2.125rem',
-        9.5: '2.375rem',
-        10.5: '2.625rem',
-        11.5: '2.875rem',
-        12.5: '3.125rem',
-        13: '3.25rem',
-        13.5: '3.375rem',
-        14.5: '3.625rem',
-        15: '3.75rem',
-        15.5: '3.875rem',
-      },
-      width: {
-        3.5: '0.875rem',
-        112: '28rem',
-        wizard: '650px',
-      },
-      height: {
-        3.5: '0.875rem',
-      },
-      minWidth: {
-        40: '10rem',
-        50: '18rem',
-      },
-      maxHeight: {
-        52: '13rem',
-      },
-      borderColor: (theme) => ({
-        DEFAULT: theme('colors.gray.200'),
-      }),
-      typography: (theme) => ({
-        DEFAULT: {
-          css: {
-            '--tw-prose-body': theme('colors.gray.800'),
-          },
-        },
-        sm: {
-          css: {
-            fontSize: '14px',
-            fontWeight: 420,
-            lineHeight: 1.6,
-            letterSpacing: '0.02em',
-            p: {
-              marginTop: '0.5rem',
-              marginBottom: '1rem',
-            },
-            '> ul > li p': {
-              marginTop: '0.5rem',
-              marginBottom: '0.5rem',
-            },
-            '> ul > li > *:first-child': {
-              marginTop: '0.5rem',
-            },
-            '> ul > li > *:last-child': {
-              marginBottom: '0.5rem',
-            },
-            '> ol > li p': {
-              marginTop: '0.5rem',
-              marginBottom: '0.5rem',
-            },
-            '> ol > li > *:first-child': {
-              marginTop: '0.5rem',
-            },
-            '> ol > li > *:last-child': {
-              marginBottom: '0.5rem',
-            },
-          },
-        },
-      }),
-    },
-    colors: ({ colors }) => ({
-      inherit: colors.inherit,
-      current: colors.current,
-      transparent: colors.transparent,
-      black: colors.black,
-      white: colors.white,
-      gray: {
-        50: '#F8F8F8',
-        100: '#F3F3F3',
-        200: '#EDEDED',
-        300: '#E2E2E2',
-        400: '#C7C7C7',
-        500: '#999999',
-        600: '#7C7C7C',
-        700: '#525252',
-        800: '#383838',
-        900: '#171717',
-      },
-      blue: {
-        50: '#F7FBFD',
-        100: '#EDF6FD',
-        200: '#E3F1FD',
-        300: '#C9E7FC',
-        400: '#70B6F0',
-        500: '#0289F7',
-        600: '#007BE0',
-        700: '#0070CC',
-        800: '#005CA3',
-        900: '#004880',
-      },
-      green: {
-        50: '#F3FCF5',
-        100: '#E4F5E9',
-        200: '#DAF0E1',
-        300: '#CAE5D4',
-        400: '#B6DEC5',
-        500: '#59BA8B',
-        600: '#30A66D',
-        700: '#278F5E',
-        800: '#16794C',
-        900: '#173B2C',
-      },
-      red: {
-        50: '#FFF7F7',
-        100: '#FFF0F0',
-        200: '#FCD7D7',
-        300: '#F9C6C6',
-        400: '#EB9091',
-        500: '#E03636',
-        600: '#CC2929',
-        700: '#B52A2A',
-        800: '#941F1F',
-        900: '#6B1515',
-      },
-      orange: {
-        50: '#FFF9F5',
-        100: '#FFF1E7',
-        200: '#FCE6D5',
-        300: '#F7D6BD',
-        400: '#F0B58B',
-        500: '#E86C13',
-        600: '#D45A08',
-        700: '#BD3E0C',
-        800: '#9E3513',
-        900: '#6B2711',
-      },
-      yellow: {
-        50: '#FFFCEF',
-        100: '#FFF7D3',
-        200: '#F7E9A8',
-        300: '#F5E171',
-        400: '#F2D14B',
-        500: '#EDBA13',
-        600: '#D1930D',
-        700: '#AB6E05',
-        800: '#8C5600',
-        900: '#733F12',
-      },
-      teal: {
-        50: '#F0FDFA',
-        100: '#E6F7F4',
-        200: '#BAE8E1',
-        300: '#97DED4',
-        400: '#73D1C4',
-        500: '#36BAAD',
-        600: '#0B9E92',
-        700: '#0F736B',
-        800: '#115C57',
-        900: '#114541',
-      },
-      violet: {
-        50: '#FBFAFF',
-        100: '#F5F2FF',
-        200: '#E5E1FA',
-        300: '#DAD2F7',
-        400: '#BDB1F0',
-        500: '#6846E3',
-        600: '#5F46C7',
-        700: '#4F3DA1',
-        800: '#392980',
-        900: '#251959',
-      },
-      cyan: {
-        50: '#F5FBFC',
-        100: '#E0F8FF',
-        200: '#B3ECFC',
-        300: '#94E6FF',
-        400: '#6BD3F2',
-        500: '#34BAE3',
-        600: '#32A4C7',
-        700: '#267A94',
-        800: '#125C73',
-        900: '#164759',
-      },
-      amber: {
-        50: '#FDFAED',
-        100: '#FCF3CF',
-        200: '#F7E28D',
-        300: '#F5D261',
-        400: '#F2BE3A',
-        500: '#E79913',
-        600: '#DB7706',
-        700: '#B35309',
-        800: '#91400D',
-        900: '#763813',
-      },
-      pink: {
-        50: '#FFF7FC',
-        100: '#FEEEF8',
-        200: '#F8E2F0',
-        300: '#F2D4E6',
-        400: '#E9C4DA',
-        500: '#E34AA6',
-        600: '#CF3A96',
-        700: '#9C2671',
-        800: '#801458',
-        900: '#570F3E',
-      },
-      purple: {
-        50: '#FDFAFF',
-        100: '#F9F0FF',
-        200: '#F1E5FA',
-        300: '#E9D6F5',
-        400: '#D6C1E6',
-        500: '#9C45E3',
-        600: '#8642C2',
-        700: '#6E399D',
-        800: '#5C2F83',
-        900: '#401863',
-      },
-      'white-overlay': {
-        50: 'rgba(255, 255, 255, 0.09)',
-        100: 'rgba(255, 255, 255, 0.18)',
-        200: 'rgba(255, 255, 255, 0.27)',
-        300: 'rgba(255, 255, 255, 0.36)',
-        400: 'rgba(255, 255, 255, 0.45)',
-        500: 'rgba(255, 255, 255, 0.54)',
-        600: 'rgba(255, 255, 255, 0.63)',
-        700: 'rgba(255, 255, 255, 0.72)',
-        800: 'rgba(255, 255, 255, 0.81)',
-        900: 'rgba(255, 255, 255, 0.90)',
-      },
-      'black-overlay': {
-        50: 'rgba(0, 0, 0, 0.09)',
-        100: 'rgba(0, 0, 0, 0.18)',
-        200: 'rgba(0, 0, 0, 0.27)',
-        300: 'rgba(0, 0, 0, 0.36)',
-        400: 'rgba(0, 0, 0, 0.45)',
-        500: 'rgba(0, 0, 0, 0.54)',
-        600: 'rgba(0, 0, 0, 0.63)',
-        700: 'rgba(0, 0, 0, 0.72)',
-        800: 'rgba(0, 0, 0, 0.81)',
-        900: 'rgba(0, 0, 0, 0.90)',
-      },
-      ...espressoVariables,
-    }),
-    borderRadius: {
-      none: '0px', // 0
-      sm: '0.25rem', // 4px
-      DEFAULT: '0.5rem', // 8px
-      md: '0.625rem', // 10px
-      lg: '0.75rem', // 12px
-      xl: '1rem', // 16px
-      '2xl': '1.25rem', // 20px
-      full: '9999px', // 9999px
-    },
-    boxShadow: {
-      sm: '0px 1px 2px rgba(0, 0, 0, 0.1)',
-      DEFAULT:
-        '0px 0px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px rgba(0, 0, 0, 0.1)',
-      md: '0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0.5px 2px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.16)',
-      lg: '0px 0px 1px rgba(0, 0, 0, 0.35), 0px 6px 8px -4px rgba(0, 0, 0, 0.1)',
-      xl: '0px 0px 1px rgba(0, 0, 0, 0.19), 0px 1px 2px rgba(0, 0, 0, 0.07), 0px 6px 15px -5px rgba(0, 0, 0, 0.11)',
-      '2xl':
-        '0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 10px 24px -3px rgba(0, 0, 0, 0.1)',
-      none: 'none',
-    },
-    container: {
-      padding: {
-        xl: '5rem',
-      },
-    },
-    fontSize: {
-      '2xs': [
-        '11px',
-        {
-          lineHeight: '1.15',
-          letterSpacing: '0.01em',
-          fontWeight: '420',
-        },
-      ],
-      xs: [
-        '12px',
-        {
-          lineHeight: '1.15',
-          letterSpacing: '0.02em',
-          fontWeight: '420',
-        },
-      ],
-      sm: [
-        '13px',
-        {
-          lineHeight: '1.15',
-          letterSpacing: '0.02em',
-          fontWeight: '420',
-        },
-      ],
-      base: [
-        '14px',
-        {
-          lineHeight: '1.15',
-          letterSpacing: '0.02em',
-          fontWeight: '420',
-        },
-      ],
-      lg: [
-        '16px',
-        {
-          lineHeight: '1.15',
-          letterSpacing: '0.02em',
-          fontWeight: '400',
-        },
-      ],
-      xl: [
-        '18px',
-        {
-          lineHeight: '1.15',
-          letterSpacing: '0.01em',
-          fontWeight: '400',
-        },
-      ],
-      '2xl': [
-        '20px',
-        {
-          lineHeight: '1.15',
-          letterSpacing: '0.01em',
-          fontWeight: '400',
-        },
-      ],
-      '3xl': [
-        '24px',
-        {
-          lineHeight: '1.15',
-          fontWeight: 400,
-          letterSpacing: '0.005em',
-        },
-      ],
-      // font size for paragraphs
-      'p-2xs': [
-        '11px',
-        {
-          lineHeight: '1.6',
-          letterSpacing: '0.01em',
-          fontWeight: '420',
-        },
-      ],
-      'p-xs': [
-        '12px',
-        {
-          lineHeight: '1.6',
-          letterSpacing: '0.02em',
-          fontWeight: '420',
-        },
-      ],
-      'p-sm': [
-        '13px',
-        {
-          lineHeight: '1.5',
-          letterSpacing: '0.02em',
-          fontWeight: '420',
-        },
-      ],
-      'p-base': [
-        '14px',
-        {
-          lineHeight: '1.5',
-          letterSpacing: '0.02em',
-          fontWeight: '420',
-        },
-      ],
-      'p-lg': [
-        '16px',
-        {
-          lineHeight: '1.5',
-          letterSpacing: '0.02em',
-          fontWeight: '400',
-        },
-      ],
-      'p-xl': [
-        '18px',
-        {
-          lineHeight: '1.42',
-          letterSpacing: '0.01em',
-          fontWeight: '400',
-        },
-      ],
-      'p-2xl': [
-        '20px',
-        {
-          lineHeight: '1.38',
-          letterSpacing: '0.01em',
-          fontWeight: '400',
-        },
-      ],
-      'p-3xl': [
-        '24px',
-        {
-          lineHeight: '1.2',
-          fontWeight: 400,
-          letterSpacing: '0.005em',
-        },
-      ],
-    },
-    screens: {
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px',
-    },
-  },
-  plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-    plugin(function ({ addBase, theme }) {
-      addBase({
-        html: {
-          'font-family': `Inter, ${theme('fontFamily.sans')}`,
-        },
-        '@supports (font-variation-settings: normal)': {
-          html: {
-            'font-family': `InterVar, ${theme('fontFamily.sans')}`,
-            'font-optical-sizing': 'auto',
-          },
-        },
-      })
-    }),
-  ],
-}
+const preset = require('../tailwind/preset')
+console.warn(
+  '`frappe-ui/src/utils/tailwind.config.js` is deprecated. Use `frappe-ui/tailwind/preset.js` instead.',
+)
+// keep backwards compatible for now
+module.exports = preset
diff --git a/tailwind.config.js b/tailwind.config.js
index 042f5e7f..1db78250 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  presets: [require('./src/utils/tailwind.config')],
+  presets: [require('./src/tailwind/preset')],
   content: ['./index.html', './App.vue', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {},