snapshot of https://github.com/twentyhq/twenty.git (main, 2026-09-17; blobs > 131072B omitted)

packages/twenty-ui/design-tokens/color/amber.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const AMBER_COLOR_TOKENS = {
+  scale: {
+    amber1: token({
+      light: 'color(display-p3 0.995 0.992 0.985)',
+      dark: 'color(display-p3 0.082 0.07 0.05)',
+    }),
+    amber2: token({
+      light: 'color(display-p3 0.994 0.986 0.921)',
+      dark: 'color(display-p3 0.111 0.094 0.064)',
+    }),
+    amber3: token({
+      light: 'color(display-p3 0.994 0.969 0.782)',
+      dark: 'color(display-p3 0.178 0.128 0.049)',
+    }),
+    amber4: token({
+      light: 'color(display-p3 0.989 0.937 0.65)',
+      dark: 'color(display-p3 0.239 0.156 0)',
+    }),
+    amber5: token({
+      light: 'color(display-p3 0.97 0.902 0.527)',
+      dark: 'color(display-p3 0.29 0.193 0)',
+    }),
+    amber6: token({
+      light: 'color(display-p3 0.936 0.844 0.506)',
+      dark: 'color(display-p3 0.344 0.245 0.076)',
+    }),
+    amber7: token({
+      light: 'color(display-p3 0.89 0.762 0.443)',
+      dark: 'color(display-p3 0.422 0.314 0.141)',
+    }),
+    amber8: token({
+      light: 'color(display-p3 0.85 0.65 0.3)',
+      dark: 'color(display-p3 0.535 0.399 0.189)',
+    }),
+    amber9: token('color(display-p3 1 0.77 0.26)'),
+    amber10: token({
+      light: 'color(display-p3 0.959 0.741 0.274)',
+      dark: 'color(display-p3 1 0.87 0.15)',
+    }),
+    amber11: token({
+      light: 'color(display-p3 0.64 0.4 0)',
+      dark: 'color(display-p3 1 0.8 0.29)',
+    }),
+    amber12: token({
+      light: 'color(display-p3 0.294 0.208 0.145)',
+      dark: 'color(display-p3 0.984 0.909 0.726)',
+    }),
+  },
+  transparent: {
+    amber1: token({ light: '#c0800004', dark: '#e63c0006' }),
+    amber2: token({ light: '#f4d10016', dark: '#fd9b000d' }),
+    amber3: token({ light: '#ffde003d', dark: '#fa820022' }),
+    amber4: token({ light: '#ffd40063', dark: '#fc820032' }),
+    amber5: token({ light: '#f8cf0088', dark: '#fd8b0041' }),
+    amber6: token({ light: '#eab5008c', dark: '#fd9b0051' }),
+    amber7: token({ light: '#dc9b009d', dark: '#ffab2567' }),
+    amber8: token({ light: '#da8a00c9', dark: '#ffae3587' }),
+    amber9: token({ light: '#ffb300c2', dark: '#ffc53d' }),
+    amber10: token({ light: '#ffb300e7', dark: '#ffd60a' }),
+    amber11: token({ light: '#ab6400', dark: '#ffca16' }),
+    amber12: token({ light: '#341500dd', dark: '#ffe7b3' }),
+  },
+};

packages/twenty-ui/design-tokens/color/blue.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const BLUE_COLOR_TOKENS = {
+  scale: {
+    blue1: token({
+      light: 'color(display-p3 0.992 0.992 0.996)',
+      dark: 'color(display-p3 0.068 0.074 0.118)',
+    }),
+    blue2: token({
+      light: 'color(display-p3 0.971 0.977 0.998)',
+      dark: 'color(display-p3 0.081 0.089 0.144)',
+    }),
+    blue3: token({
+      light: 'color(display-p3 0.933 0.948 0.992)',
+      dark: 'color(display-p3 0.105 0.141 0.275)',
+    }),
+    blue4: token({
+      light: 'color(display-p3 0.885 0.914 1)',
+      dark: 'color(display-p3 0.129 0.18 0.369)',
+    }),
+    blue5: token({
+      light: 'color(display-p3 0.831 0.87 1)',
+      dark: 'color(display-p3 0.163 0.22 0.439)',
+    }),
+    blue6: token({
+      light: 'color(display-p3 0.767 0.814 0.995)',
+      dark: 'color(display-p3 0.203 0.262 0.5)',
+    }),
+    blue7: token({
+      light: 'color(display-p3 0.685 0.74 0.957)',
+      dark: 'color(display-p3 0.245 0.309 0.575)',
+    }),
+    blue8: token({
+      light: 'color(display-p3 0.569 0.639 0.916)',
+      dark: 'color(display-p3 0.285 0.362 0.674)',
+    }),
+    blue9: token('color(display-p3 0.276 0.384 0.837)'),
+    blue10: token({
+      light: 'color(display-p3 0.234 0.343 0.801)',
+      dark: 'color(display-p3 0.354 0.445 0.866)',
+    }),
+    blue11: token({
+      light: 'color(display-p3 0.256 0.354 0.755)',
+      dark: 'color(display-p3 0.63 0.69 1)',
+    }),
+    blue12: token({
+      light: 'color(display-p3 0.133 0.175 0.348)',
+      dark: 'color(display-p3 0.848 0.881 0.99)',
+    }),
+  },
+  transparent: {
+    blue1: token({ light: '#00008002', dark: '#1133ff0f' }),
+    blue2: token({ light: '#0040ff08', dark: '#3354fa17' }),
+    blue3: token({ light: '#0047f112', dark: '#2f62ff3c' }),
+    blue4: token({ light: '#0044ff1e', dark: '#3566ff57' }),
+    blue5: token({ light: '#0044ff2d', dark: '#4171fd6b' }),
+    blue6: token({ light: '#003eff3e', dark: '#5178fd7c' }),
+    blue7: token({ light: '#0037ed54', dark: '#5a7fff90' }),
+    blue8: token({ light: '#0034dc72', dark: '#5b81feac' }),
+    blue9: token({ light: '#0031d2c1', dark: '#4671ffdb' }),
+    blue10: token({ light: '#002ec9cc', dark: '#5c7efee3' }),
+    blue11: token({ light: '#002bb7c5', dark: '#9eb1ff' }),
+    blue12: token({ light: '#001046e0', dark: '#d6e1ff' }),
+  },
+};

packages/twenty-ui/design-tokens/color/bronze.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const BRONZE_COLOR_TOKENS = {
+  scale: {
+    bronze1: token({
+      light: 'color(display-p3 0.991 0.988 0.988)',
+      dark: 'color(display-p3 0.076 0.067 0.063)',
+    }),
+    bronze2: token({
+      light: 'color(display-p3 0.989 0.97 0.961)',
+      dark: 'color(display-p3 0.106 0.097 0.093)',
+    }),
+    bronze3: token({
+      light: 'color(display-p3 0.958 0.932 0.919)',
+      dark: 'color(display-p3 0.147 0.132 0.125)',
+    }),
+    bronze4: token({
+      light: 'color(display-p3 0.929 0.894 0.877)',
+      dark: 'color(display-p3 0.185 0.166 0.156)',
+    }),
+    bronze5: token({
+      light: 'color(display-p3 0.898 0.853 0.832)',
+      dark: 'color(display-p3 0.227 0.202 0.19)',
+    }),
+    bronze6: token({
+      light: 'color(display-p3 0.861 0.805 0.778)',
+      dark: 'color(display-p3 0.278 0.246 0.23)',
+    }),
+    bronze7: token({
+      light: 'color(display-p3 0.812 0.739 0.706)',
+      dark: 'color(display-p3 0.343 0.302 0.281)',
+    }),
+    bronze8: token({
+      light: 'color(display-p3 0.741 0.647 0.606)',
+      dark: 'color(display-p3 0.426 0.374 0.347)',
+    }),
+    bronze9: token('color(display-p3 0.611 0.507 0.455)'),
+    bronze10: token({
+      light: 'color(display-p3 0.563 0.461 0.414)',
+      dark: 'color(display-p3 0.66 0.556 0.504)',
+    }),
+    bronze11: token({
+      light: 'color(display-p3 0.471 0.373 0.336)',
+      dark: 'color(display-p3 0.81 0.707 0.655)',
+    }),
+    bronze12: token({
+      light: 'color(display-p3 0.251 0.191 0.172)',
+      dark: 'color(display-p3 0.921 0.88 0.854)',
+    }),
+  },
+  transparent: {
+    bronze1: token({ light: '#55000003', dark: '#d1110004' }),
+    bronze2: token({ light: '#cc33000a', dark: '#fbbc910c' }),
+    bronze3: token({ light: '#92250015', dark: '#faceb817' }),
+    bronze4: token({ light: '#80280020', dark: '#facdb622' }),
+    bronze5: token({ light: '#7423002c', dark: '#ffd2c12d' }),
+    bronze6: token({ light: '#7324003a', dark: '#ffd1c03c' }),
+    bronze7: token({ light: '#6c1f004c', dark: '#fdd0c04f' }),
+    bronze8: token({ light: '#671c0066', dark: '#ffd6c565' }),
+    bronze9: token({ light: '#551a008d', dark: '#fec7b09b' }),
+    bronze10: token({ light: '#4c150097', dark: '#fecab5a9' }),
+    bronze11: token({ light: '#3d0f00ab', dark: '#ffd7c6d1' }),
+    bronze12: token({ light: '#1d0600d4', dark: '#fff1e9ec' }),
+  },
+};

packages/twenty-ui/design-tokens/color/brown.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const BROWN_COLOR_TOKENS = {
+  scale: {
+    brown1: token({
+      light: 'color(display-p3 0.995 0.992 0.989)',
+      dark: 'color(display-p3 0.071 0.067 0.059)',
+    }),
+    brown2: token({
+      light: 'color(display-p3 0.987 0.976 0.964)',
+      dark: 'color(display-p3 0.107 0.095 0.087)',
+    }),
+    brown3: token({
+      light: 'color(display-p3 0.959 0.936 0.909)',
+      dark: 'color(display-p3 0.151 0.13 0.115)',
+    }),
+    brown4: token({
+      light: 'color(display-p3 0.934 0.897 0.855)',
+      dark: 'color(display-p3 0.191 0.161 0.138)',
+    }),
+    brown5: token({
+      light: 'color(display-p3 0.909 0.856 0.798)',
+      dark: 'color(display-p3 0.235 0.194 0.162)',
+    }),
+    brown6: token({
+      light: 'color(display-p3 0.88 0.808 0.73)',
+      dark: 'color(display-p3 0.291 0.237 0.192)',
+    }),
+    brown7: token({
+      light: 'color(display-p3 0.841 0.742 0.639)',
+      dark: 'color(display-p3 0.365 0.295 0.232)',
+    }),
+    brown8: token({
+      light: 'color(display-p3 0.782 0.647 0.514)',
+      dark: 'color(display-p3 0.469 0.377 0.287)',
+    }),
+    brown9: token('color(display-p3 0.651 0.505 0.368)'),
+    brown10: token({
+      light: 'color(display-p3 0.601 0.465 0.344)',
+      dark: 'color(display-p3 0.697 0.557 0.423)',
+    }),
+    brown11: token({
+      light: 'color(display-p3 0.485 0.374 0.288)',
+      dark: 'color(display-p3 0.835 0.715 0.597)',
+    }),
+    brown12: token({
+      light: 'color(display-p3 0.236 0.202 0.183)',
+      dark: 'color(display-p3 0.938 0.885 0.802)',
+    }),
+  },
+  transparent: {
+    brown1: token({ light: '#aa550003', dark: '#91110002' }),
+    brown2: token({ light: '#aa550009', dark: '#fba67c0c' }),
+    brown3: token({ light: '#a04b0018', dark: '#fcb58c19' }),
+    brown4: token({ light: '#9b4a0026', dark: '#fbbb8a24' }),
+    brown5: token({ light: '#9f4d0035', dark: '#fcb88931' }),
+    brown6: token({ light: '#a04e0048', dark: '#fdba8741' }),
+    brown7: token({ light: '#a34e0060', dark: '#ffbb8856' }),
+    brown8: token({ light: '#9f4a0081', dark: '#ffbe8773' }),
+    brown9: token({ light: '#823c00a7', dark: '#feb87da8' }),
+    brown10: token({ light: '#723300ac', dark: '#ffc18cb3' }),
+    brown11: token({ light: '#522100b9', dark: '#fed1aad9' }),
+    brown12: token({ light: '#140600d1', dark: '#feecd4f2' }),
+  },
+};

packages/twenty-ui/design-tokens/color/crimson.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const CRIMSON_COLOR_TOKENS = {
+  scale: {
+    crimson1: token({
+      light: 'color(display-p3 0.998 0.989 0.992)',
+      dark: 'color(display-p3 0.093 0.068 0.078)',
+    }),
+    crimson2: token({
+      light: 'color(display-p3 0.991 0.969 0.976)',
+      dark: 'color(display-p3 0.117 0.078 0.095)',
+    }),
+    crimson3: token({
+      light: 'color(display-p3 0.987 0.917 0.941)',
+      dark: 'color(display-p3 0.203 0.091 0.143)',
+    }),
+    crimson4: token({
+      light: 'color(display-p3 0.975 0.866 0.904)',
+      dark: 'color(display-p3 0.277 0.087 0.182)',
+    }),
+    crimson5: token({
+      light: 'color(display-p3 0.953 0.813 0.864)',
+      dark: 'color(display-p3 0.332 0.115 0.22)',
+    }),
+    crimson6: token({
+      light: 'color(display-p3 0.921 0.755 0.817)',
+      dark: 'color(display-p3 0.394 0.162 0.268)',
+    }),
+    crimson7: token({
+      light: 'color(display-p3 0.88 0.683 0.761)',
+      dark: 'color(display-p3 0.489 0.222 0.336)',
+    }),
+    crimson8: token({
+      light: 'color(display-p3 0.834 0.592 0.694)',
+      dark: 'color(display-p3 0.638 0.289 0.429)',
+    }),
+    crimson9: token('color(display-p3 0.843 0.298 0.507)'),
+    crimson10: token({
+      light: 'color(display-p3 0.807 0.266 0.468)',
+      dark: 'color(display-p3 0.864 0.364 0.539)',
+    }),
+    crimson11: token({
+      light: 'color(display-p3 0.731 0.195 0.388)',
+      dark: 'color(display-p3 1 0.56 0.66)',
+    }),
+    crimson12: token({
+      light: 'color(display-p3 0.352 0.111 0.221)',
+      dark: 'color(display-p3 0.966 0.834 0.906)',
+    }),
+  },
+  transparent: {
+    crimson1: token({ light: '#ff005503', dark: '#f4126709' }),
+    crimson2: token({ light: '#e0004008', dark: '#f22f7a11' }),
+    crimson3: token({ light: '#ff005216', dark: '#fe2a8b2a' }),
+    crimson4: token({ light: '#f8005123', dark: '#fd158741' }),
+    crimson5: token({ light: '#e5004f31', dark: '#fd278f51' }),
+    crimson6: token({ light: '#d0004b41', dark: '#fe459763' }),
+    crimson7: token({ light: '#bf004753', dark: '#fd559b7f' }),
+    crimson8: token({ light: '#b6004a6c', dark: '#fe5b9bab' }),
+    crimson9: token({ light: '#e2005bc2', dark: '#fe418de8' }),
+    crimson10: token({ light: '#d70056cb', dark: '#ff5693ed' }),
+    crimson11: token({ light: '#c4004fe2', dark: '#ff92ad' }),
+    crimson12: token({ light: '#530026e9', dark: '#ffd5eafd' }),
+  },
+};

packages/twenty-ui/design-tokens/color/cyan.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const CYAN_COLOR_TOKENS = {
+  scale: {
+    cyan1: token({
+      light: 'color(display-p3 0.982 0.992 0.996)',
+      dark: 'color(display-p3 0.053 0.085 0.098)',
+    }),
+    cyan2: token({
+      light: 'color(display-p3 0.955 0.981 0.984)',
+      dark: 'color(display-p3 0.072 0.105 0.122)',
+    }),
+    cyan3: token({
+      light: 'color(display-p3 0.888 0.965 0.975)',
+      dark: 'color(display-p3 0.073 0.168 0.209)',
+    }),
+    cyan4: token({
+      light: 'color(display-p3 0.821 0.941 0.959)',
+      dark: 'color(display-p3 0.063 0.216 0.277)',
+    }),
+    cyan5: token({
+      light: 'color(display-p3 0.751 0.907 0.935)',
+      dark: 'color(display-p3 0.091 0.267 0.336)',
+    }),
+    cyan6: token({
+      light: 'color(display-p3 0.671 0.862 0.9)',
+      dark: 'color(display-p3 0.137 0.324 0.4)',
+    }),
+    cyan7: token({
+      light: 'color(display-p3 0.564 0.8 0.854)',
+      dark: 'color(display-p3 0.186 0.398 0.484)',
+    }),
+    cyan8: token({
+      light: 'color(display-p3 0.388 0.715 0.798)',
+      dark: 'color(display-p3 0.23 0.496 0.6)',
+    }),
+    cyan9: token('color(display-p3 0.282 0.627 0.765)'),
+    cyan10: token({
+      light: 'color(display-p3 0.264 0.583 0.71)',
+      dark: 'color(display-p3 0.331 0.675 0.801)',
+    }),
+    cyan11: token({
+      light: 'color(display-p3 0.08 0.48 0.63)',
+      dark: 'color(display-p3 0.446 0.79 0.887)',
+    }),
+    cyan12: token({
+      light: 'color(display-p3 0.108 0.232 0.277)',
+      dark: 'color(display-p3 0.757 0.919 0.962)',
+    }),
+  },
+  transparent: {
+    cyan1: token({ light: '#0099cc05', dark: '#0091f70a' }),
+    cyan2: token({ light: '#009db10d', dark: '#02a7f211' }),
+    cyan3: token({ light: '#00c2d121', dark: '#00befd28' }),
+    cyan4: token({ light: '#00bcd435', dark: '#00baff3b' }),
+    cyan5: token({ light: '#01b4cc4a', dark: '#00befd4d' }),
+    cyan6: token({ light: '#00a7c162', dark: '#00c7fd5e' }),
+    cyan7: token({ light: '#009fbb82', dark: '#14cdff75' }),
+    cyan8: token({ light: '#00a3c0c2', dark: '#11cfff95' }),
+    cyan9: token({ light: '#00a2c7', dark: '#00cfffc3' }),
+    cyan10: token({ light: '#0094b7f8', dark: '#28d6ffcd' }),
+    cyan11: token({ light: '#007491ef', dark: '#52e1fee5' }),
+    cyan12: token({ light: '#00323ef2', dark: '#bbf3fef7' }),
+  },
+};

packages/twenty-ui/design-tokens/color/gold.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const GOLD_COLOR_TOKENS = {
+  scale: {
+    gold1: token({
+      light: 'color(display-p3 0.992 0.992 0.989)',
+      dark: 'color(display-p3 0.071 0.071 0.067)',
+    }),
+    gold2: token({
+      light: 'color(display-p3 0.98 0.976 0.953)',
+      dark: 'color(display-p3 0.104 0.101 0.09)',
+    }),
+    gold3: token({
+      light: 'color(display-p3 0.947 0.94 0.909)',
+      dark: 'color(display-p3 0.141 0.136 0.122)',
+    }),
+    gold4: token({
+      light: 'color(display-p3 0.914 0.904 0.865)',
+      dark: 'color(display-p3 0.177 0.17 0.152)',
+    }),
+    gold5: token({
+      light: 'color(display-p3 0.88 0.865 0.816)',
+      dark: 'color(display-p3 0.217 0.207 0.185)',
+    }),
+    gold6: token({
+      light: 'color(display-p3 0.84 0.818 0.756)',
+      dark: 'color(display-p3 0.265 0.252 0.225)',
+    }),
+    gold7: token({
+      light: 'color(display-p3 0.788 0.753 0.677)',
+      dark: 'color(display-p3 0.327 0.31 0.277)',
+    }),
+    gold8: token({
+      light: 'color(display-p3 0.715 0.66 0.565)',
+      dark: 'color(display-p3 0.407 0.384 0.342)',
+    }),
+    gold9: token('color(display-p3 0.579 0.517 0.41)'),
+    gold10: token({
+      light: 'color(display-p3 0.538 0.479 0.38)',
+      dark: 'color(display-p3 0.628 0.566 0.463)',
+    }),
+    gold11: token({
+      light: 'color(display-p3 0.433 0.386 0.305)',
+      dark: 'color(display-p3 0.784 0.728 0.635)',
+    }),
+    gold12: token({
+      light: 'color(display-p3 0.227 0.209 0.173)',
+      dark: 'color(display-p3 0.906 0.887 0.855)',
+    }),
+  },
+  transparent: {
+    gold1: token({ light: '#55550003', dark: '#91911102' }),
+    gold2: token({ light: '#9d8a000d', dark: '#f9e29d0b' }),
+    gold3: token({ light: '#75600018', dark: '#f8ecbb15' }),
+    gold4: token({ light: '#6b4e0024', dark: '#ffeec41e' }),
+    gold5: token({ light: '#60460030', dark: '#feecc22a' }),
+    gold6: token({ light: '#64440040', dark: '#feebcb37' }),
+    gold7: token({ light: '#63420055', dark: '#ffedcd48' }),
+    gold8: token({ light: '#633d0072', dark: '#fdeaca5f' }),
+    gold9: token({ light: '#5332009a', dark: '#ffdba690' }),
+    gold10: token({ light: '#492d00a1', dark: '#fedfb09d' }),
+    gold11: token({ light: '#362100b4', dark: '#fee7c6c8' }),
+    gold12: token({ light: '#130c00d4', dark: '#fef7ede7' }),
+  },
+};

packages/twenty-ui/design-tokens/color/grass.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const GRASS_COLOR_TOKENS = {
+  scale: {
+    grass1: token({
+      light: 'color(display-p3 0.986 0.996 0.985)',
+      dark: 'color(display-p3 0.062 0.083 0.067)',
+    }),
+    grass2: token({
+      light: 'color(display-p3 0.966 0.983 0.964)',
+      dark: 'color(display-p3 0.083 0.103 0.085)',
+    }),
+    grass3: token({
+      light: 'color(display-p3 0.923 0.965 0.917)',
+      dark: 'color(display-p3 0.118 0.163 0.122)',
+    }),
+    grass4: token({
+      light: 'color(display-p3 0.872 0.94 0.865)',
+      dark: 'color(display-p3 0.142 0.225 0.15)',
+    }),
+    grass5: token({
+      light: 'color(display-p3 0.811 0.908 0.802)',
+      dark: 'color(display-p3 0.178 0.279 0.186)',
+    }),
+    grass6: token({
+      light: 'color(display-p3 0.733 0.864 0.724)',
+      dark: 'color(display-p3 0.217 0.337 0.224)',
+    }),
+    grass7: token({
+      light: 'color(display-p3 0.628 0.803 0.622)',
+      dark: 'color(display-p3 0.258 0.4 0.264)',
+    }),
+    grass8: token({
+      light: 'color(display-p3 0.477 0.72 0.482)',
+      dark: 'color(display-p3 0.302 0.47 0.305)',
+    }),
+    grass9: token('color(display-p3 0.38 0.647 0.378)'),
+    grass10: token({
+      light: 'color(display-p3 0.344 0.598 0.342)',
+      dark: 'color(display-p3 0.426 0.694 0.426)',
+    }),
+    grass11: token({
+      light: 'color(display-p3 0.263 0.488 0.261)',
+      dark: 'color(display-p3 0.535 0.807 0.542)',
+    }),
+    grass12: token({
+      light: 'color(display-p3 0.151 0.233 0.153)',
+      dark: 'color(display-p3 0.797 0.936 0.776)',
+    }),
+  },
+  transparent: {
+    grass1: token({ light: '#00c00004', dark: '#00de1205' }),
+    grass2: token({ light: '#0099000a', dark: '#5ef7780a' }),
+    grass3: token({ light: '#00970016', dark: '#70fe8c1b' }),
+    grass4: token({ light: '#009f0725', dark: '#57ff802c' }),
+    grass5: token({ light: '#00930536', dark: '#68ff8b3b' }),
+    grass6: token({ light: '#008f0a4d', dark: '#71ff8f4b' }),
+    grass7: token({ light: '#018b0f6b', dark: '#77fd925d' }),
+    grass8: token({ light: '#008d199a', dark: '#77fd9070' }),
+    grass9: token({ light: '#008619b9', dark: '#65ff82a1' }),
+    grass10: token({ light: '#007b17c1', dark: '#72ff8dae' }),
+    grass11: token({ light: '#006514d5', dark: '#89ff9fcd' }),
+    grass12: token({ light: '#002006df', dark: '#ceffceef' }),
+  },
+};

packages/twenty-ui/design-tokens/color/gray.ts

@@ -0,0 +1,104 @@
+import { token } from '../token';
+
+export const GRAY_COLOR_TOKENS = {
+  scale: {
+    gray1: token({
+      light: 'color(display-p3 1 1 1)',
+      dark: 'color(display-p3 0.09 0.09 0.09)',
+    }),
+    gray2: token({
+      light: 'color(display-p3 0.988 0.988 0.988)',
+      dark: 'color(display-p3 0.106 0.106 0.106)',
+    }),
+    gray3: token({
+      light: 'color(display-p3 0.976 0.976 0.976)',
+      dark: 'color(display-p3 0.098 0.098 0.098)',
+    }),
+    gray4: token({
+      light: 'color(display-p3 0.945 0.945 0.945)',
+      dark: 'color(display-p3 0.114 0.114 0.114)',
+    }),
+    gray5: token({
+      light: 'color(display-p3 0.922 0.922 0.922)',
+      dark: 'color(display-p3 0.133 0.133 0.133)',
+    }),
+    gray6: token({
+      light: 'color(display-p3 0.839 0.839 0.839)',
+      dark: 'color(display-p3 0.282 0.282 0.282)',
+    }),
+    gray7: token({
+      light: 'color(display-p3 0.8 0.8 0.8)',
+      dark: 'color(display-p3 0.298 0.298 0.298)',
+    }),
+    gray8: token({
+      light: 'color(display-p3 0.702 0.702 0.702)',
+      dark: 'color(display-p3 0.4 0.4 0.4)',
+    }),
+    gray9: token({
+      light: 'color(display-p3 0.6 0.6 0.6)',
+      dark: 'color(display-p3 0.506 0.506 0.506)',
+    }),
+    gray10: token({
+      light: 'color(display-p3 0.514 0.514 0.514)',
+      dark: 'color(display-p3 0.482 0.482 0.482)',
+    }),
+    gray11: token({
+      light: 'color(display-p3 0.4 0.4 0.4)',
+      dark: 'color(display-p3 0.702 0.702 0.702)',
+    }),
+    gray12: token({
+      light: 'color(display-p3 0.2 0.2 0.2)',
+      dark: 'color(display-p3 0.922 0.922 0.922)',
+    }),
+  },
+  transparent: {
+    gray1: token({
+      light: 'color(display-p3 0 0 0 / 0.02)',
+      dark: 'color(display-p3 1 1 1 / 0.031)',
+    }),
+    gray2: token({
+      light: 'color(display-p3 0 0 0 / 0.039)',
+      dark: 'color(display-p3 1 1 1 / 0.059)',
+    }),
+    gray3: token({
+      light: 'color(display-p3 0 0 0 / 0.047)',
+      dark: 'color(display-p3 1 1 1 / 0.047)',
+    }),
+    gray4: token({
+      light: 'color(display-p3 0 0 0 / 0.071)',
+      dark: 'color(display-p3 1 1 1 / 0.071)',
+    }),
+    gray5: token({
+      light: 'color(display-p3 0 0 0 / 0.078)',
+      dark: 'color(display-p3 1 1 1 / 0.102)',
+    }),
+    gray6: token({
+      light: 'color(display-p3 0 0 0 / 0.114)',
+      dark: 'color(display-p3 1 1 1 / 0.114)',
+    }),
+    gray7: token({
+      light: 'color(display-p3 0 0 0 / 0.161)',
+      dark: 'color(display-p3 1 1 1 / 0.141)',
+    }),
+    gray8: token({
+      light: 'color(display-p3 0 0 0 / 0.22)',
+      dark: 'color(display-p3 1 1 1 / 0.22)',
+    }),
+    gray9: token({
+      light: 'color(display-p3 0 0 0 / 0.361)',
+      dark: 'color(display-p3 1 1 1 / 0.427)',
+    }),
+    gray10: token({
+      light: 'color(display-p3 0 0 0 / 0.478)',
+      dark: 'color(display-p3 1 1 1 / 0.478)',
+    }),
+    gray11: token({
+      light: 'color(display-p3 0 0 0 / 0.722)',
+      dark: 'color(display-p3 1 1 1 / 0.565)',
+    }),
+    gray12: token({
+      light: 'color(display-p3 0 0 0 / 0.91)',
+      dark: 'color(display-p3 1 1 1 / 0.91)',
+    }),
+  },
+};

packages/twenty-ui/design-tokens/color/green.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const GREEN_COLOR_TOKENS = {
+  scale: {
+    green1: token({
+      light: 'color(display-p3 0.986 0.996 0.989)',
+      dark: 'color(display-p3 0.062 0.083 0.071)',
+    }),
+    green2: token({
+      light: 'color(display-p3 0.963 0.983 0.967)',
+      dark: 'color(display-p3 0.079 0.106 0.09)',
+    }),
+    green3: token({
+      light: 'color(display-p3 0.913 0.964 0.925)',
+      dark: 'color(display-p3 0.1 0.173 0.133)',
+    }),
+    green4: token({
+      light: 'color(display-p3 0.859 0.94 0.879)',
+      dark: 'color(display-p3 0.115 0.229 0.166)',
+    }),
+    green5: token({
+      light: 'color(display-p3 0.796 0.907 0.826)',
+      dark: 'color(display-p3 0.147 0.282 0.206)',
+    }),
+    green6: token({
+      light: 'color(display-p3 0.718 0.863 0.761)',
+      dark: 'color(display-p3 0.185 0.338 0.25)',
+    }),
+    green7: token({
+      light: 'color(display-p3 0.61 0.801 0.675)',
+      dark: 'color(display-p3 0.227 0.403 0.298)',
+    }),
+    green8: token({
+      light: 'color(display-p3 0.451 0.715 0.559)',
+      dark: 'color(display-p3 0.27 0.479 0.351)',
+    }),
+    green9: token('color(display-p3 0.332 0.634 0.442)'),
+    green10: token({
+      light: 'color(display-p3 0.308 0.595 0.417)',
+      dark: 'color(display-p3 0.357 0.682 0.474)',
+    }),
+    green11: token({
+      light: 'color(display-p3 0.19 0.5 0.32)',
+      dark: 'color(display-p3 0.434 0.828 0.573)',
+    }),
+    green12: token({
+      light: 'color(display-p3 0.132 0.228 0.18)',
+      dark: 'color(display-p3 0.747 0.938 0.807)',
+    }),
+  },
+  transparent: {
+    green1: token({ light: '#00c04004', dark: '#00de4505' }),
+    green2: token({ light: '#00a32f0b', dark: '#29f99d0b' }),
+    green3: token({ light: '#00a43319', dark: '#22ff991e' }),
+    green4: token({ light: '#00a83829', dark: '#11ff992d' }),
+    green5: token({ light: '#019c393b', dark: '#2bffa23c' }),
+    green6: token({ light: '#00963c52', dark: '#44ffaa4b' }),
+    green7: token({ light: '#00914071', dark: '#50fdac5e' }),
+    green8: token({ light: '#00924ba4', dark: '#54ffad73' }),
+    green9: token({ light: '#008f4acf', dark: '#44ffa49e' }),
+    green10: token({ light: '#008647d4', dark: '#43fea4ab' }),
+    green11: token({ light: '#00713fde', dark: '#46fea5d4' }),
+    green12: token({ light: '#002616e6', dark: '#bbffd7f0' }),
+  },
+};

packages/twenty-ui/design-tokens/color/index.ts

@@ -0,0 +1,97 @@
+import { AMBER_COLOR_TOKENS } from './amber';
+import { BLUE_COLOR_TOKENS } from './blue';
+import { BRONZE_COLOR_TOKENS } from './bronze';
+import { BROWN_COLOR_TOKENS } from './brown';
+import { CRIMSON_COLOR_TOKENS } from './crimson';
+import { CYAN_COLOR_TOKENS } from './cyan';
+import { GOLD_COLOR_TOKENS } from './gold';
+import { GRASS_COLOR_TOKENS } from './grass';
+import { GRAY_COLOR_TOKENS } from './gray';
+import { GREEN_COLOR_TOKENS } from './green';
+import { IRIS_COLOR_TOKENS } from './iris';
+import { JADE_COLOR_TOKENS } from './jade';
+import { LIME_COLOR_TOKENS } from './lime';
+import { MAUVE_COLOR_TOKENS } from './mauve';
+import { MINT_COLOR_TOKENS } from './mint';
+import { OLIVE_COLOR_TOKENS } from './olive';
+import { ORANGE_COLOR_TOKENS } from './orange';
+import { PINK_COLOR_TOKENS } from './pink';
+import { PLUM_COLOR_TOKENS } from './plum';
+import { PURPLE_COLOR_TOKENS } from './purple';
+import { RED_COLOR_TOKENS } from './red';
+import { RUBY_COLOR_TOKENS } from './ruby';
+import { SAGE_COLOR_TOKENS } from './sage';
+import { SAND_COLOR_TOKENS } from './sand';
+import { SKY_COLOR_TOKENS } from './sky';
+import { SLATE_COLOR_TOKENS } from './slate';
+import { TOMATO_COLOR_TOKENS } from './tomato';
+import { TURQUOISE_COLOR_TOKENS } from './turquoise';
+import { VIOLET_COLOR_TOKENS } from './violet';
+import { YELLOW_COLOR_TOKENS } from './yellow';
+import { MAIN_COLOR_TOKENS } from './mainColors';
+
+export const COLOR_TOKENS = {
+  ...MAIN_COLOR_TOKENS,
+  ...YELLOW_COLOR_TOKENS.scale,
+  ...GREEN_COLOR_TOKENS.scale,
+  ...TURQUOISE_COLOR_TOKENS.scale,
+  ...SKY_COLOR_TOKENS.scale,
+  ...BLUE_COLOR_TOKENS.scale,
+  ...PURPLE_COLOR_TOKENS.scale,
+  ...PINK_COLOR_TOKENS.scale,
+  ...RED_COLOR_TOKENS.scale,
+  ...ORANGE_COLOR_TOKENS.scale,
+  ...GRAY_COLOR_TOKENS.scale,
+  ...MAUVE_COLOR_TOKENS.scale,
+  ...SLATE_COLOR_TOKENS.scale,
+  ...SAGE_COLOR_TOKENS.scale,
+  ...OLIVE_COLOR_TOKENS.scale,
+  ...SAND_COLOR_TOKENS.scale,
+  ...TOMATO_COLOR_TOKENS.scale,
+  ...RUBY_COLOR_TOKENS.scale,
+  ...CRIMSON_COLOR_TOKENS.scale,
+  ...PLUM_COLOR_TOKENS.scale,
+  ...VIOLET_COLOR_TOKENS.scale,
+  ...IRIS_COLOR_TOKENS.scale,
+  ...CYAN_COLOR_TOKENS.scale,
+  ...JADE_COLOR_TOKENS.scale,
+  ...GRASS_COLOR_TOKENS.scale,
+  ...MINT_COLOR_TOKENS.scale,
+  ...LIME_COLOR_TOKENS.scale,
+  ...BRONZE_COLOR_TOKENS.scale,
+  ...GOLD_COLOR_TOKENS.scale,
+  ...BROWN_COLOR_TOKENS.scale,
+  ...AMBER_COLOR_TOKENS.scale,
+  transparent: {
+    ...GREEN_COLOR_TOKENS.transparent,
+    ...TURQUOISE_COLOR_TOKENS.transparent,
+    ...SKY_COLOR_TOKENS.transparent,
+    ...BLUE_COLOR_TOKENS.transparent,
+    ...PURPLE_COLOR_TOKENS.transparent,
+    ...PINK_COLOR_TOKENS.transparent,
+    ...RED_COLOR_TOKENS.transparent,
+    ...ORANGE_COLOR_TOKENS.transparent,
+    ...YELLOW_COLOR_TOKENS.transparent,
+    ...GRAY_COLOR_TOKENS.transparent,
+    ...MAUVE_COLOR_TOKENS.transparent,
+    ...SLATE_COLOR_TOKENS.transparent,
+    ...SAGE_COLOR_TOKENS.transparent,
+    ...OLIVE_COLOR_TOKENS.transparent,
+    ...SAND_COLOR_TOKENS.transparent,
+    ...TOMATO_COLOR_TOKENS.transparent,
+    ...RUBY_COLOR_TOKENS.transparent,
+    ...CRIMSON_COLOR_TOKENS.transparent,
+    ...PLUM_COLOR_TOKENS.transparent,
+    ...VIOLET_COLOR_TOKENS.transparent,
+    ...IRIS_COLOR_TOKENS.transparent,
+    ...CYAN_COLOR_TOKENS.transparent,
+    ...JADE_COLOR_TOKENS.transparent,
+    ...GRASS_COLOR_TOKENS.transparent,
+    ...MINT_COLOR_TOKENS.transparent,
+    ...LIME_COLOR_TOKENS.transparent,
+    ...BRONZE_COLOR_TOKENS.transparent,
+    ...GOLD_COLOR_TOKENS.transparent,
+    ...BROWN_COLOR_TOKENS.transparent,
+    ...AMBER_COLOR_TOKENS.transparent,
+  },
+};

packages/twenty-ui/design-tokens/color/iris.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const IRIS_COLOR_TOKENS = {
+  scale: {
+    iris1: token({
+      light: 'color(display-p3 0.992 0.992 0.999)',
+      dark: 'color(display-p3 0.075 0.075 0.114)',
+    }),
+    iris2: token({
+      light: 'color(display-p3 0.972 0.973 0.998)',
+      dark: 'color(display-p3 0.089 0.086 0.14)',
+    }),
+    iris3: token({
+      light: 'color(display-p3 0.943 0.945 0.992)',
+      dark: 'color(display-p3 0.128 0.134 0.272)',
+    }),
+    iris4: token({
+      light: 'color(display-p3 0.902 0.906 1)',
+      dark: 'color(display-p3 0.153 0.165 0.382)',
+    }),
+    iris5: token({
+      light: 'color(display-p3 0.857 0.861 1)',
+      dark: 'color(display-p3 0.192 0.201 0.44)',
+    }),
+    iris6: token({
+      light: 'color(display-p3 0.799 0.805 0.987)',
+      dark: 'color(display-p3 0.239 0.241 0.491)',
+    }),
+    iris7: token({
+      light: 'color(display-p3 0.721 0.727 0.955)',
+      dark: 'color(display-p3 0.291 0.289 0.565)',
+    }),
+    iris8: token({
+      light: 'color(display-p3 0.61 0.619 0.918)',
+      dark: 'color(display-p3 0.35 0.345 0.673)',
+    }),
+    iris9: token('color(display-p3 0.357 0.357 0.81)'),
+    iris10: token({
+      light: 'color(display-p3 0.318 0.318 0.774)',
+      dark: 'color(display-p3 0.428 0.416 0.843)',
+    }),
+    iris11: token({
+      light: 'color(display-p3 0.337 0.326 0.748)',
+      dark: 'color(display-p3 0.685 0.662 1)',
+    }),
+    iris12: token({
+      light: 'color(display-p3 0.154 0.161 0.371)',
+      dark: 'color(display-p3 0.878 0.875 0.986)',
+    }),
+  },
+  transparent: {
+    iris1: token({ light: '#0000ff02', dark: '#3636fe0e' }),
+    iris2: token({ light: '#0000ff07', dark: '#564bf916' }),
+    iris3: token({ light: '#0011ee0f', dark: '#525bff3b' }),
+    iris4: token({ light: '#000bff19', dark: '#4d58ff5a' }),
+    iris5: token({ light: '#000eff25', dark: '#5b62fd6b' }),
+    iris6: token({ light: '#000aff34', dark: '#6d6ffd7a' }),
+    iris7: token({ light: '#0008e647', dark: '#7777fe8e' }),
+    iris8: token({ light: '#0008d964', dark: '#7b7afeac' }),
+    iris9: token({ light: '#0000c0a4', dark: '#6a6afed4' }),
+    iris10: token({ light: '#0000b6ae', dark: '#7d79ffdc' }),
+    iris11: token({ light: '#0600abac', dark: '#b1a9ff' }),
+    iris12: token({ light: '#000246d8', dark: '#e1e0fffe' }),
+  },
+};

packages/twenty-ui/design-tokens/color/jade.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const JADE_COLOR_TOKENS = {
+  scale: {
+    jade1: token({
+      light: 'color(display-p3 0.986 0.996 0.992)',
+      dark: 'color(display-p3 0.059 0.083 0.071)',
+    }),
+    jade2: token({
+      light: 'color(display-p3 0.962 0.983 0.969)',
+      dark: 'color(display-p3 0.078 0.11 0.094)',
+    }),
+    jade3: token({
+      light: 'color(display-p3 0.912 0.965 0.932)',
+      dark: 'color(display-p3 0.091 0.176 0.138)',
+    }),
+    jade4: token({
+      light: 'color(display-p3 0.858 0.941 0.893)',
+      dark: 'color(display-p3 0.102 0.228 0.177)',
+    }),
+    jade5: token({
+      light: 'color(display-p3 0.795 0.909 0.847)',
+      dark: 'color(display-p3 0.133 0.279 0.221)',
+    }),
+    jade6: token({
+      light: 'color(display-p3 0.715 0.864 0.791)',
+      dark: 'color(display-p3 0.174 0.334 0.273)',
+    }),
+    jade7: token({
+      light: 'color(display-p3 0.603 0.802 0.718)',
+      dark: 'color(display-p3 0.219 0.402 0.335)',
+    }),
+    jade8: token({
+      light: 'color(display-p3 0.44 0.72 0.629)',
+      dark: 'color(display-p3 0.263 0.488 0.411)',
+    }),
+    jade9: token('color(display-p3 0.319 0.63 0.521)'),
+    jade10: token({
+      light: 'color(display-p3 0.299 0.592 0.488)',
+      dark: 'color(display-p3 0.338 0.68 0.555)',
+    }),
+    jade11: token({
+      light: 'color(display-p3 0.15 0.5 0.37)',
+      dark: 'color(display-p3 0.4 0.835 0.656)',
+    }),
+    jade12: token({
+      light: 'color(display-p3 0.142 0.229 0.194)',
+      dark: 'color(display-p3 0.734 0.934 0.838)',
+    }),
+  },
+  transparent: {
+    jade1: token({ light: '#00c08004', dark: '#00de4505' }),
+    jade2: token({ light: '#00a3460b', dark: '#27fba60c' }),
+    jade3: token({ light: '#00ae4819', dark: '#02f99920' }),
+    jade4: token({ light: '#00a85129', dark: '#00ffaa2d' }),
+    jade5: token({ light: '#00a2553c', dark: '#11ffb63b' }),
+    jade6: token({ light: '#009a5753', dark: '#34ffc24b' }),
+    jade7: token({ light: '#00945f74', dark: '#45fdc75e' }),
+    jade8: token({ light: '#00976ea9', dark: '#48ffcf75' }),
+    jade9: token({ light: '#00916bd6', dark: '#38feca9d' }),
+    jade10: token({ light: '#008764d9', dark: '#31fec7ab' }),
+    jade11: token({ light: '#007152df', dark: '#21fec0d6' }),
+    jade12: token({ light: '#002217e2', dark: '#b8ffe1ef' }),
+  },
+};

packages/twenty-ui/design-tokens/color/lime.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const LIME_COLOR_TOKENS = {
+  scale: {
+    lime1: token({
+      light: 'color(display-p3 0.989 0.992 0.981)',
+      dark: 'color(display-p3 0.067 0.073 0.048)',
+    }),
+    lime2: token({
+      light: 'color(display-p3 0.975 0.98 0.954)',
+      dark: 'color(display-p3 0.086 0.1 0.067)',
+    }),
+    lime3: token({
+      light: 'color(display-p3 0.939 0.965 0.851)',
+      dark: 'color(display-p3 0.13 0.16 0.099)',
+    }),
+    lime4: token({
+      light: 'color(display-p3 0.896 0.94 0.76)',
+      dark: 'color(display-p3 0.172 0.214 0.126)',
+    }),
+    lime5: token({
+      light: 'color(display-p3 0.843 0.903 0.678)',
+      dark: 'color(display-p3 0.213 0.266 0.153)',
+    }),
+    lime6: token({
+      light: 'color(display-p3 0.778 0.852 0.599)',
+      dark: 'color(display-p3 0.257 0.321 0.182)',
+    }),
+    lime7: token({
+      light: 'color(display-p3 0.694 0.784 0.508)',
+      dark: 'color(display-p3 0.307 0.383 0.215)',
+    }),
+    lime8: token({
+      light: 'color(display-p3 0.585 0.707 0.378)',
+      dark: 'color(display-p3 0.365 0.456 0.25)',
+    }),
+    lime9: token('color(display-p3 0.78 0.928 0.466)'),
+    lime10: token({
+      light: 'color(display-p3 0.734 0.896 0.397)',
+      dark: 'color(display-p3 0.865 0.995 0.519)',
+    }),
+    lime11: token({
+      light: 'color(display-p3 0.386 0.482 0.227)',
+      dark: 'color(display-p3 0.771 0.893 0.485)',
+    }),
+    lime12: token({
+      light: 'color(display-p3 0.222 0.25 0.128)',
+      dark: 'color(display-p3 0.905 0.966 0.753)',
+    }),
+  },
+  transparent: {
+    lime1: token({ light: '#66990005', dark: '#11bb0003' }),
+    lime2: token({ light: '#6b95000c', dark: '#78f7000a' }),
+    lime3: token({ light: '#96c80029', dark: '#9bfd4c1a' }),
+    lime4: token({ light: '#8fc60042', dark: '#a7fe5c29' }),
+    lime5: token({ light: '#81bb0059', dark: '#affe6537' }),
+    lime6: token({ light: '#72aa006e', dark: '#b2fe6d46' }),
+    lime7: token({ light: '#61990087', dark: '#b6ff6f57' }),
+    lime8: token({ light: '#559200ab', dark: '#b6fd6d6c' }),
+    lime9: token({ light: '#93e4009c', dark: '#caff69ed' }),
+    lime10: token({ light: '#8fdc00b3', dark: '#d4ff70' }),
+    lime11: token({ light: '#375f00d0', dark: '#d1fe77e4' }),
+    lime12: token({ light: '#1e2900e3', dark: '#e9febff7' }),
+  },
+};

packages/twenty-ui/design-tokens/color/mainColors.ts

@@ -0,0 +1,57 @@
+import { AMBER_COLOR_TOKENS } from './amber';
+import { BLUE_COLOR_TOKENS } from './blue';
+import { BRONZE_COLOR_TOKENS } from './bronze';
+import { BROWN_COLOR_TOKENS } from './brown';
+import { CRIMSON_COLOR_TOKENS } from './crimson';
+import { CYAN_COLOR_TOKENS } from './cyan';
+import { GOLD_COLOR_TOKENS } from './gold';
+import { GRASS_COLOR_TOKENS } from './grass';
+import { GRAY_COLOR_TOKENS } from './gray';
+import { GREEN_COLOR_TOKENS } from './green';
+import { IRIS_COLOR_TOKENS } from './iris';
+import { JADE_COLOR_TOKENS } from './jade';
+import { LIME_COLOR_TOKENS } from './lime';
+import { MINT_COLOR_TOKENS } from './mint';
+import { ORANGE_COLOR_TOKENS } from './orange';
+import { PINK_COLOR_TOKENS } from './pink';
+import { PLUM_COLOR_TOKENS } from './plum';
+import { PURPLE_COLOR_TOKENS } from './purple';
+import { RED_COLOR_TOKENS } from './red';
+import { RUBY_COLOR_TOKENS } from './ruby';
+import { SKY_COLOR_TOKENS } from './sky';
+import { TOMATO_COLOR_TOKENS } from './tomato';
+import { TURQUOISE_COLOR_TOKENS } from './turquoise';
+import { VIOLET_COLOR_TOKENS } from './violet';
+import { YELLOW_COLOR_TOKENS } from './yellow';
+import { token } from '../token';
+
+export const MAIN_COLOR_TOKENS = {
+  red: RED_COLOR_TOKENS.scale.red9,
+  ruby: RUBY_COLOR_TOKENS.scale.ruby9,
+  crimson: CRIMSON_COLOR_TOKENS.scale.crimson9,
+  tomato: TOMATO_COLOR_TOKENS.scale.tomato9,
+  orange: ORANGE_COLOR_TOKENS.scale.orange9,
+  amber: AMBER_COLOR_TOKENS.scale.amber9,
+  yellow: YELLOW_COLOR_TOKENS.scale.yellow9,
+  lime: LIME_COLOR_TOKENS.scale.lime9,
+  grass: GRASS_COLOR_TOKENS.scale.grass9,
+  green: GREEN_COLOR_TOKENS.scale.green9,
+  jade: JADE_COLOR_TOKENS.scale.jade9,
+  mint: MINT_COLOR_TOKENS.scale.mint9,
+  turquoise: TURQUOISE_COLOR_TOKENS.scale.turquoise9,
+  cyan: CYAN_COLOR_TOKENS.scale.cyan9,
+  sky: SKY_COLOR_TOKENS.scale.sky9,
+  blue: BLUE_COLOR_TOKENS.scale.blue9,
+  iris: IRIS_COLOR_TOKENS.scale.iris9,
+  violet: VIOLET_COLOR_TOKENS.scale.violet9,
+  purple: PURPLE_COLOR_TOKENS.scale.purple9,
+  plum: PLUM_COLOR_TOKENS.scale.plum9,
+  pink: PINK_COLOR_TOKENS.scale.pink9,
+  bronze: BRONZE_COLOR_TOKENS.scale.bronze9,
+  gold: GOLD_COLOR_TOKENS.scale.gold9,
+  brown: BROWN_COLOR_TOKENS.scale.brown9,
+  gray: token({
+    light: GRAY_COLOR_TOKENS.scale.gray9.light,
+    dark: GRAY_COLOR_TOKENS.scale.gray7.dark,
+  }),
+};

packages/twenty-ui/design-tokens/color/mauve.ts

@@ -0,0 +1,68 @@
+import { token } from '../token';
+
+export const MAUVE_COLOR_TOKENS = {
+  scale: {
+    mauve1: token({
+      light: 'color(display-p3 0.991 0.988 0.992)',
+      dark: 'color(display-p3 0.07 0.067 0.074)',
+    }),
+    mauve2: token({
+      light: 'color(display-p3 0.98 0.976 0.984)',
+      dark: 'color(display-p3 0.101 0.098 0.105)',
+    }),
+    mauve3: token({
+      light: 'color(display-p3 0.946 0.938 0.952)',
+      dark: 'color(display-p3 0.138 0.134 0.144)',
+    }),
+    mauve4: token({
+      light: 'color(display-p3 0.915 0.906 0.925)',
+      dark: 'color(display-p3 0.167 0.161 0.175)',
+    }),
+    mauve5: token({
+      light: 'color(display-p3 0.886 0.876 0.901)',
+      dark: 'color(display-p3 0.196 0.189 0.206)',
+    }),
+    mauve6: token({
+      light: 'color(display-p3 0.856 0.846 0.875)',
+      dark: 'color(display-p3 0.232 0.225 0.245)',
+    }),
+    mauve7: token({
+      light: 'color(display-p3 0.814 0.804 0.84)',
+      dark: 'color(display-p3 0.286 0.277 0.302)',
+    }),
+    mauve8: token({
+      light: 'color(display-p3 0.735 0.728 0.777)',
+      dark: 'color(display-p3 0.383 0.373 0.408)',
+    }),
+    mauve9: token({
+      light: 'color(display-p3 0.555 0.549 0.596)',
+      dark: 'color(display-p3 0.434 0.428 0.467)',
+    }),
+    mauve10: token({
+      light: 'color(display-p3 0.514 0.508 0.552)',
+      dark: 'color(display-p3 0.487 0.48 0.519)',
+    }),
+    mauve11: token({
+      light: 'color(display-p3 0.395 0.388 0.424)',
+      dark: 'color(display-p3 0.707 0.7 0.735)',
+    }),
+    mauve12: token({
+      light: 'color(display-p3 0.128 0.122 0.147)',
+      dark: 'color(display-p3 0.933 0.933 0.94)',
+    }),
+  },
+  transparent: {
+    mauve1: token({ light: '#55005503', dark: '#00000000' }),
+    mauve2: token({ light: '#2b005506', dark: '#f5f4f609' }),
+    mauve3: token({ light: '#30004010', dark: '#ebeaf814' }),
+    mauve4: token({ light: '#20003618', dark: '#eee5f81d' }),
+    mauve5: token({ light: '#20003820', dark: '#efe6fe25' }),
+    mauve6: token({ light: '#14003527', dark: '#f1e6fd30' }),
+    mauve7: token({ light: '#10003332', dark: '#eee9ff40' }),
+    mauve8: token({ light: '#08003145', dark: '#eee7ff5d' }),
+    mauve9: token({ light: '#05001d73', dark: '#eae6fd6e' }),
+    mauve10: token({ light: '#0500197d', dark: '#ece9fd7c' }),
+    mauve11: token({ light: '#0400119c', dark: '#f5f1ffb7' }),
+    mauve12: token({ light: '#020008e0', dark: '#fdfdffef' }),
+  },
+};

packages/twenty-ui/design-tokens/color/mint.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const MINT_COLOR_TOKENS = {
+  scale: {
+    mint1: token({
+      light: 'color(display-p3 0.98 0.995 0.992)',
+      dark: 'color(display-p3 0.059 0.082 0.081)',
+    }),
+    mint2: token({
+      light: 'color(display-p3 0.957 0.985 0.977)',
+      dark: 'color(display-p3 0.068 0.104 0.105)',
+    }),
+    mint3: token({
+      light: 'color(display-p3 0.888 0.972 0.95)',
+      dark: 'color(display-p3 0.077 0.17 0.168)',
+    }),
+    mint4: token({
+      light: 'color(display-p3 0.819 0.951 0.916)',
+      dark: 'color(display-p3 0.068 0.224 0.22)',
+    }),
+    mint5: token({
+      light: 'color(display-p3 0.747 0.918 0.873)',
+      dark: 'color(display-p3 0.104 0.275 0.264)',
+    }),
+    mint6: token({
+      light: 'color(display-p3 0.668 0.87 0.818)',
+      dark: 'color(display-p3 0.154 0.332 0.313)',
+    }),
+    mint7: token({
+      light: 'color(display-p3 0.567 0.805 0.744)',
+      dark: 'color(display-p3 0.207 0.403 0.373)',
+    }),
+    mint8: token({
+      light: 'color(display-p3 0.42 0.724 0.649)',
+      dark: 'color(display-p3 0.258 0.49 0.441)',
+    }),
+    mint9: token('color(display-p3 0.62 0.908 0.834)'),
+    mint10: token({
+      light: 'color(display-p3 0.585 0.871 0.797)',
+      dark: 'color(display-p3 0.725 0.954 0.898)',
+    }),
+    mint11: token({
+      light: 'color(display-p3 0.203 0.463 0.397)',
+      dark: 'color(display-p3 0.482 0.825 0.733)',
+    }),
+    mint12: token({
+      light: 'color(display-p3 0.136 0.259 0.236)',
+      dark: 'color(display-p3 0.807 0.955 0.887)',
+    }),
+  },
+  transparent: {
+    mint1: token({ light: '#00d5aa06', dark: '#00dede05' }),
+    mint2: token({ light: '#00b18a0d', dark: '#00f9f90b' }),
+    mint3: token({ light: '#00d29e22', dark: '#00fff61d' }),
+    mint4: token({ light: '#00cc9937', dark: '#00fff42c' }),
+    mint5: token({ light: '#00c0914c', dark: '#00fff23a' }),
+    mint6: token({ light: '#00b08663', dark: '#0effeb4a' }),
+    mint7: token({ light: '#00a17d81', dark: '#34fde55e' }),
+    mint8: token({ light: '#009e7fb3', dark: '#41ffdf76' }),
+    mint9: token({ light: '#00d3a579', dark: '#92ffe7e9' }),
+    mint10: token({ light: '#00c39982', dark: '#aefeedf5' }),
+    mint11: token({ light: '#007763fd', dark: '#67ffded2' }),
+    mint12: token({ light: '#00312ae9', dark: '#cbfee9f5' }),
+  },
+};

packages/twenty-ui/design-tokens/color/olive.ts

@@ -0,0 +1,68 @@
+import { token } from '../token';
+
+export const OLIVE_COLOR_TOKENS = {
+  scale: {
+    olive1: token({
+      light: 'color(display-p3 0.989 0.992 0.989)',
+      dark: 'color(display-p3 0.067 0.07 0.063)',
+    }),
+    olive2: token({
+      light: 'color(display-p3 0.974 0.98 0.973)',
+      dark: 'color(display-p3 0.095 0.098 0.091)',
+    }),
+    olive3: token({
+      light: 'color(display-p3 0.939 0.945 0.937)',
+      dark: 'color(display-p3 0.131 0.135 0.126)',
+    }),
+    olive4: token({
+      light: 'color(display-p3 0.907 0.914 0.905)',
+      dark: 'color(display-p3 0.158 0.163 0.153)',
+    }),
+    olive5: token({
+      light: 'color(display-p3 0.878 0.885 0.875)',
+      dark: 'color(display-p3 0.186 0.192 0.18)',
+    }),
+    olive6: token({
+      light: 'color(display-p3 0.846 0.855 0.843)',
+      dark: 'color(display-p3 0.221 0.229 0.215)',
+    }),
+    olive7: token({
+      light: 'color(display-p3 0.803 0.812 0.8)',
+      dark: 'color(display-p3 0.273 0.284 0.266)',
+    }),
+    olive8: token({
+      light: 'color(display-p3 0.727 0.738 0.723)',
+      dark: 'color(display-p3 0.365 0.382 0.359)',
+    }),
+    olive9: token({
+      light: 'color(display-p3 0.541 0.556 0.532)',
+      dark: 'color(display-p3 0.414 0.438 0.404)',
+    }),
+    olive10: token({
+      light: 'color(display-p3 0.5 0.515 0.491)',
+      dark: 'color(display-p3 0.467 0.49 0.458)',
+    }),
+    olive11: token({
+      light: 'color(display-p3 0.38 0.395 0.374)',
+      dark: 'color(display-p3 0.69 0.709 0.682)',
+    }),
+    olive12: token({
+      light: 'color(display-p3 0.117 0.129 0.111)',
+      dark: 'color(display-p3 0.927 0.933 0.926)',
+    }),
+  },
+  transparent: {
+    olive1: token({ light: '#00550003', dark: '#00000000' }),
+    olive2: token({ light: '#00490007', dark: '#f1f2f008' }),
+    olive3: token({ light: '#00200010', dark: '#f4f5f312' }),
+    olive4: token({ light: '#00160018', dark: '#f3fef21a' }),
+    olive5: token({ light: '#00180020', dark: '#f2fbf122' }),
+    olive6: token({ light: '#00140028', dark: '#f4faed2c' }),
+    olive7: token({ light: '#000f0033', dark: '#f2fced3b' }),
+    olive8: token({ light: '#040f0047', dark: '#edfdeb57' }),
+    olive9: token({ light: '#050f0078', dark: '#ebfde766' }),
+    olive10: token({ light: '#040e0082', dark: '#f0fdec74' }),
+    olive11: token({ light: '#020a00a0', dark: '#f6fef4b0' }),
+    olive12: token({ light: '#010600e3', dark: '#fdfffded' }),
+  },
+};

packages/twenty-ui/design-tokens/color/orange.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const ORANGE_COLOR_TOKENS = {
+  scale: {
+    orange1: token({
+      light: 'color(display-p3 0.995 0.988 0.985)',
+      dark: 'color(display-p3 0.088 0.07 0.057)',
+    }),
+    orange2: token({
+      light: 'color(display-p3 0.994 0.968 0.934)',
+      dark: 'color(display-p3 0.113 0.089 0.061)',
+    }),
+    orange3: token({
+      light: 'color(display-p3 0.989 0.938 0.85)',
+      dark: 'color(display-p3 0.189 0.12 0.056)',
+    }),
+    orange4: token({
+      light: 'color(display-p3 1 0.874 0.687)',
+      dark: 'color(display-p3 0.262 0.132 0)',
+    }),
+    orange5: token({
+      light: 'color(display-p3 1 0.821 0.583)',
+      dark: 'color(display-p3 0.315 0.168 0.016)',
+    }),
+    orange6: token({
+      light: 'color(display-p3 0.975 0.767 0.545)',
+      dark: 'color(display-p3 0.376 0.219 0.088)',
+    }),
+    orange7: token({
+      light: 'color(display-p3 0.919 0.693 0.486)',
+      dark: 'color(display-p3 0.465 0.283 0.147)',
+    }),
+    orange8: token({
+      light: 'color(display-p3 0.877 0.597 0.379)',
+      dark: 'color(display-p3 0.601 0.359 0.201)',
+    }),
+    orange9: token('color(display-p3 0.9 0.45 0.2)'),
+    orange10: token({
+      light: 'color(display-p3 0.87 0.409 0.164)',
+      dark: 'color(display-p3 0.98 0.51 0.23)',
+    }),
+    orange11: token({
+      light: 'color(display-p3 0.76 0.34 0)',
+      dark: 'color(display-p3 1 0.63 0.38)',
+    }),
+    orange12: token({
+      light: 'color(display-p3 0.323 0.185 0.127)',
+      dark: 'color(display-p3 0.98 0.883 0.775)',
+    }),
+  },
+  transparent: {
+    orange1: token({ light: '#c0400004', dark: '#ec360007' }),
+    orange2: token({ light: '#ff8e0012', dark: '#fe6d000e' }),
+    orange3: token({ light: '#ff9c0029', dark: '#fb6a0025' }),
+    orange4: token({ light: '#ff91014a', dark: '#ff590039' }),
+    orange5: token({ light: '#ff8b0065', dark: '#ff61004a' }),
+    orange6: token({ light: '#ff81007d', dark: '#fd75045c' }),
+    orange7: token({ light: '#ed6c008c', dark: '#ff832c75' }),
+    orange8: token({ light: '#e35f00aa', dark: '#fe84389d' }),
+    orange9: token({ light: '#f65e00ea', dark: '#fe6d15f7' }),
+    orange10: token({ light: '#ef5f00', dark: '#ff801f' }),
+    orange11: token({ light: '#cc4e00', dark: '#ffa057' }),
+    orange12: token({ light: '#431200e2', dark: '#ffe0c2' }),
+  },
+};

packages/twenty-ui/design-tokens/color/pink.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const PINK_COLOR_TOKENS = {
+  scale: {
+    pink1: token({
+      light: 'color(display-p3 0.998 0.989 0.996)',
+      dark: 'color(display-p3 0.093 0.068 0.089)',
+    }),
+    pink2: token({
+      light: 'color(display-p3 0.992 0.97 0.985)',
+      dark: 'color(display-p3 0.121 0.073 0.11)',
+    }),
+    pink3: token({
+      light: 'color(display-p3 0.981 0.917 0.96)',
+      dark: 'color(display-p3 0.198 0.098 0.179)',
+    }),
+    pink4: token({
+      light: 'color(display-p3 0.963 0.867 0.932)',
+      dark: 'color(display-p3 0.271 0.095 0.231)',
+    }),
+    pink5: token({
+      light: 'color(display-p3 0.939 0.815 0.899)',
+      dark: 'color(display-p3 0.32 0.127 0.273)',
+    }),
+    pink6: token({
+      light: 'color(display-p3 0.907 0.756 0.859)',
+      dark: 'color(display-p3 0.382 0.177 0.326)',
+    }),
+    pink7: token({
+      light: 'color(display-p3 0.869 0.683 0.81)',
+      dark: 'color(display-p3 0.477 0.238 0.405)',
+    }),
+    pink8: token({
+      light: 'color(display-p3 0.825 0.59 0.751)',
+      dark: 'color(display-p3 0.612 0.304 0.51)',
+    }),
+    pink9: token('color(display-p3 0.775 0.297 0.61)'),
+    pink10: token({
+      light: 'color(display-p3 0.748 0.27 0.581)',
+      dark: 'color(display-p3 0.808 0.356 0.645)',
+    }),
+    pink11: token({
+      light: 'color(display-p3 0.698 0.219 0.528)',
+      dark: 'color(display-p3 1 0.535 0.78)',
+    }),
+    pink12: token({
+      light: 'color(display-p3 0.363 0.101 0.279)',
+      dark: 'color(display-p3 0.964 0.826 0.912)',
+    }),
+  },
+  transparent: {
+    pink1: token({ light: '#ff00aa03', dark: '#f412bc09' }),
+    pink2: token({ light: '#e0008008', dark: '#f420bb12' }),
+    pink3: token({ light: '#f4008c16', dark: '#fe37cc29' }),
+    pink4: token({ light: '#e2008b23', dark: '#fc1ec43f' }),
+    pink5: token({ light: '#d1008331', dark: '#fd35c24e' }),
+    pink6: token({ light: '#c0007840', dark: '#fd51c75f' }),
+    pink7: token({ light: '#b6006f53', dark: '#fd62c87b' }),
+    pink8: token({ light: '#af006f6c', dark: '#ff68c8a2' }),
+    pink9: token({ light: '#c8007fbf', dark: '#fe49bcd4' }),
+    pink10: token({ light: '#c2007ac7', dark: '#ff5cc0dc' }),
+    pink11: token({ light: '#b60074d6', dark: '#ff8dcc' }),
+    pink12: token({ light: '#59003bed', dark: '#ffd3ecfd' }),
+  },
+};

packages/twenty-ui/design-tokens/color/plum.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const PLUM_COLOR_TOKENS = {
+  scale: {
+    plum1: token({
+      light: 'color(display-p3 0.995 0.988 0.999)',
+      dark: 'color(display-p3 0.09 0.068 0.092)',
+    }),
+    plum2: token({
+      light: 'color(display-p3 0.988 0.971 0.99)',
+      dark: 'color(display-p3 0.118 0.077 0.121)',
+    }),
+    plum3: token({
+      light: 'color(display-p3 0.973 0.923 0.98)',
+      dark: 'color(display-p3 0.192 0.105 0.202)',
+    }),
+    plum4: token({
+      light: 'color(display-p3 0.953 0.875 0.966)',
+      dark: 'color(display-p3 0.25 0.121 0.271)',
+    }),
+    plum5: token({
+      light: 'color(display-p3 0.926 0.825 0.945)',
+      dark: 'color(display-p3 0.293 0.152 0.319)',
+    }),
+    plum6: token({
+      light: 'color(display-p3 0.89 0.765 0.916)',
+      dark: 'color(display-p3 0.343 0.198 0.372)',
+    }),
+    plum7: token({
+      light: 'color(display-p3 0.84 0.686 0.877)',
+      dark: 'color(display-p3 0.424 0.262 0.461)',
+    }),
+    plum8: token({
+      light: 'color(display-p3 0.775 0.58 0.832)',
+      dark: 'color(display-p3 0.54 0.341 0.595)',
+    }),
+    plum9: token('color(display-p3 0.624 0.313 0.708)'),
+    plum10: token({
+      light: 'color(display-p3 0.587 0.29 0.667)',
+      dark: 'color(display-p3 0.666 0.365 0.748)',
+    }),
+    plum11: token({
+      light: 'color(display-p3 0.543 0.263 0.619)',
+      dark: 'color(display-p3 0.86 0.602 0.933)',
+    }),
+    plum12: token({
+      light: 'color(display-p3 0.299 0.114 0.352)',
+      dark: 'color(display-p3 0.936 0.836 0.949)',
+    }),
+  },
+  transparent: {
+    plum1: token({ light: '#aa00ff03', dark: '#f112f108' }),
+    plum2: token({ light: '#c000c008', dark: '#f22ff211' }),
+    plum3: token({ light: '#cc00cc14', dark: '#fd4cfd27' }),
+    plum4: token({ light: '#c200c921', dark: '#f646ff3a' }),
+    plum5: token({ light: '#b700bd2e', dark: '#f455ff48' }),
+    plum6: token({ light: '#a400b03d', dark: '#f66dff56' }),
+    plum7: token({ light: '#9900a852', dark: '#f07cfd70' }),
+    plum8: token({ light: '#9000a56e', dark: '#ee84ff95' }),
+    plum9: token({ light: '#89009eb5', dark: '#e961feb6' }),
+    plum10: token({ light: '#7f0092bb', dark: '#ed70ffc0' }),
+    plum11: token({ light: '#730086c1', dark: '#f19cfef3' }),
+    plum12: token({ light: '#40004be6', dark: '#feddfef4' }),
+  },
+};

packages/twenty-ui/design-tokens/color/purple.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const PURPLE_COLOR_TOKENS = {
+  scale: {
+    purple1: token({
+      light: 'color(display-p3 0.995 0.988 0.996)',
+      dark: 'color(display-p3 0.09 0.068 0.103)',
+    }),
+    purple2: token({
+      light: 'color(display-p3 0.983 0.971 0.993)',
+      dark: 'color(display-p3 0.113 0.082 0.134)',
+    }),
+    purple3: token({
+      light: 'color(display-p3 0.963 0.931 0.989)',
+      dark: 'color(display-p3 0.175 0.112 0.224)',
+    }),
+    purple4: token({
+      light: 'color(display-p3 0.937 0.888 0.981)',
+      dark: 'color(display-p3 0.224 0.137 0.297)',
+    }),
+    purple5: token({
+      light: 'color(display-p3 0.904 0.837 0.966)',
+      dark: 'color(display-p3 0.264 0.167 0.349)',
+    }),
+    purple6: token({
+      light: 'color(display-p3 0.86 0.774 0.942)',
+      dark: 'color(display-p3 0.311 0.208 0.406)',
+    }),
+    purple7: token({
+      light: 'color(display-p3 0.799 0.69 0.91)',
+      dark: 'color(display-p3 0.381 0.266 0.496)',
+    }),
+    purple8: token({
+      light: 'color(display-p3 0.719 0.583 0.874)',
+      dark: 'color(display-p3 0.49 0.349 0.649)',
+    }),
+    purple9: token('color(display-p3 0.523 0.318 0.751)'),
+    purple10: token({
+      light: 'color(display-p3 0.483 0.289 0.7)',
+      dark: 'color(display-p3 0.57 0.373 0.791)',
+    }),
+    purple11: token({
+      light: 'color(display-p3 0.473 0.281 0.687)',
+      dark: 'color(display-p3 0.8 0.62 1)',
+    }),
+    purple12: token({
+      light: 'color(display-p3 0.234 0.132 0.363)',
+      dark: 'color(display-p3 0.913 0.854 0.971)',
+    }),
+  },
+  transparent: {
+    purple1: token({ light: '#aa00aa03', dark: '#b412f90b' }),
+    purple2: token({ light: '#8000e008', dark: '#b744f714' }),
+    purple3: token({ light: '#8e00f112', dark: '#c150ff2d' }),
+    purple4: token({ light: '#8d00e51d', dark: '#bb53fd42' }),
+    purple5: token({ light: '#8000db2a', dark: '#be5cfd51' }),
+    purple6: token({ light: '#7a01d03b', dark: '#c16dfd61' }),
+    purple7: token({ light: '#6d00c350', dark: '#c378fd7a' }),
+    purple8: token({ light: '#6600c06c', dark: '#c47effa4' }),
+    purple9: token({ light: '#5c00adb1', dark: '#b661ffc2' }),
+    purple10: token({ light: '#53009eb8', dark: '#bc6fffcd' }),
+    purple11: token({ light: '#52009aba', dark: '#d19dff' }),
+    purple12: token({ light: '#250049df', dark: '#f1ddfffa' }),
+  },
+};

packages/twenty-ui/design-tokens/color/red.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const RED_COLOR_TOKENS = {
+  scale: {
+    red1: token({
+      light: 'color(display-p3 0.998 0.989 0.988)',
+      dark: 'color(display-p3 0.093 0.068 0.067)',
+    }),
+    red2: token({
+      light: 'color(display-p3 0.995 0.971 0.971)',
+      dark: 'color(display-p3 0.118 0.077 0.079)',
+    }),
+    red3: token({
+      light: 'color(display-p3 0.985 0.925 0.925)',
+      dark: 'color(display-p3 0.211 0.081 0.099)',
+    }),
+    red4: token({
+      light: 'color(display-p3 0.999 0.866 0.866)',
+      dark: 'color(display-p3 0.287 0.079 0.113)',
+    }),
+    red5: token({
+      light: 'color(display-p3 0.984 0.812 0.811)',
+      dark: 'color(display-p3 0.348 0.11 0.142)',
+    }),
+    red6: token({
+      light: 'color(display-p3 0.955 0.751 0.749)',
+      dark: 'color(display-p3 0.414 0.16 0.183)',
+    }),
+    red7: token({
+      light: 'color(display-p3 0.915 0.675 0.672)',
+      dark: 'color(display-p3 0.508 0.224 0.236)',
+    }),
+    red8: token({
+      light: 'color(display-p3 0.872 0.575 0.572)',
+      dark: 'color(display-p3 0.659 0.298 0.297)',
+    }),
+    red9: token('color(display-p3 0.83 0.329 0.324)'),
+    red10: token({
+      light: 'color(display-p3 0.798 0.294 0.285)',
+      dark: 'color(display-p3 0.861 0.403 0.387)',
+    }),
+    red11: token({
+      light: 'color(display-p3 0.744 0.234 0.222)',
+      dark: 'color(display-p3 1 0.57 0.55)',
+    }),
+    red12: token({
+      light: 'color(display-p3 0.36 0.115 0.143)',
+      dark: 'color(display-p3 0.971 0.826 0.852)',
+    }),
+  },
+  transparent: {
+    red1: token({ light: '#ff000003', dark: '#f4121209' }),
+    red2: token({ light: '#ff000008', dark: '#f22f3e11' }),
+    red3: token({ light: '#f3000d14', dark: '#ff173f2d' }),
+    red4: token({ light: '#ff000824', dark: '#fe0a3b44' }),
+    red5: token({ light: '#ff000632', dark: '#ff204756' }),
+    red6: token({ light: '#f8000442', dark: '#ff3e5668' }),
+    red7: token({ light: '#df000356', dark: '#ff536184' }),
+    red8: token({ light: '#d2000571', dark: '#ff5d61b0' }),
+    red9: token({ light: '#db0007b7', dark: '#fe4e54e4' }),
+    red10: token({ light: '#d10005c1', dark: '#ff6465eb' }),
+    red11: token({ light: '#c40006d3', dark: '#ff9592' }),
+    red12: token({ light: '#55000de8', dark: '#ffd1d9' }),
+  },
+};

packages/twenty-ui/design-tokens/color/ruby.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const RUBY_COLOR_TOKENS = {
+  scale: {
+    ruby1: token({
+      light: 'color(display-p3 0.998 0.989 0.992)',
+      dark: 'color(display-p3 0.093 0.068 0.074)',
+    }),
+    ruby2: token({
+      light: 'color(display-p3 0.995 0.971 0.974)',
+      dark: 'color(display-p3 0.113 0.083 0.089)',
+    }),
+    ruby3: token({
+      light: 'color(display-p3 0.983 0.92 0.928)',
+      dark: 'color(display-p3 0.208 0.088 0.117)',
+    }),
+    ruby4: token({
+      light: 'color(display-p3 0.987 0.869 0.885)',
+      dark: 'color(display-p3 0.279 0.092 0.147)',
+    }),
+    ruby5: token({
+      light: 'color(display-p3 0.968 0.817 0.839)',
+      dark: 'color(display-p3 0.337 0.12 0.18)',
+    }),
+    ruby6: token({
+      light: 'color(display-p3 0.937 0.758 0.786)',
+      dark: 'color(display-p3 0.401 0.166 0.223)',
+    }),
+    ruby7: token({
+      light: 'color(display-p3 0.897 0.685 0.721)',
+      dark: 'color(display-p3 0.495 0.224 0.281)',
+    }),
+    ruby8: token({
+      light: 'color(display-p3 0.851 0.588 0.639)',
+      dark: 'color(display-p3 0.652 0.295 0.359)',
+    }),
+    ruby9: token('color(display-p3 0.83 0.323 0.408)'),
+    ruby10: token({
+      light: 'color(display-p3 0.795 0.286 0.375)',
+      dark: 'color(display-p3 0.857 0.392 0.455)',
+    }),
+    ruby11: token({
+      light: 'color(display-p3 0.728 0.211 0.311)',
+      dark: 'color(display-p3 1 0.57 0.59)',
+    }),
+    ruby12: token({
+      light: 'color(display-p3 0.36 0.115 0.171)',
+      dark: 'color(display-p3 0.968 0.83 0.88)',
+    }),
+  },
+  transparent: {
+    ruby1: token({ light: '#ff005503', dark: '#f4124a09' }),
+    ruby2: token({ light: '#ff002008', dark: '#fe5a7f0e' }),
+    ruby3: token({ light: '#f3002515', dark: '#ff235d2c' }),
+    ruby4: token({ light: '#ff002523', dark: '#fd195e42' }),
+    ruby5: token({ light: '#ff002a31', dark: '#fe2d6b53' }),
+    ruby6: token({ light: '#e4002440', dark: '#ff447665' }),
+    ruby7: token({ light: '#ce002553', dark: '#ff577d80' }),
+    ruby8: token({ light: '#c300286d', dark: '#ff5c7cae' }),
+    ruby9: token({ light: '#db002cb9', dark: '#fe4c70e4' }),
+    ruby10: token({ light: '#d2002cc4', dark: '#ff617beb' }),
+    ruby11: token({ light: '#c10030db', dark: '#ff949d' }),
+    ruby12: token({ light: '#550016e8', dark: '#ffd3e2fe' }),
+  },
+};

packages/twenty-ui/design-tokens/color/sage.ts

@@ -0,0 +1,68 @@
+import { token } from '../token';
+
+export const SAGE_COLOR_TOKENS = {
+  scale: {
+    sage1: token({
+      light: 'color(display-p3 0.986 0.992 0.988)',
+      dark: 'color(display-p3 0.064 0.07 0.067)',
+    }),
+    sage2: token({
+      light: 'color(display-p3 0.97 0.977 0.974)',
+      dark: 'color(display-p3 0.092 0.098 0.094)',
+    }),
+    sage3: token({
+      light: 'color(display-p3 0.935 0.944 0.94)',
+      dark: 'color(display-p3 0.128 0.135 0.131)',
+    }),
+    sage4: token({
+      light: 'color(display-p3 0.904 0.913 0.909)',
+      dark: 'color(display-p3 0.155 0.164 0.159)',
+    }),
+    sage5: token({
+      light: 'color(display-p3 0.875 0.885 0.88)',
+      dark: 'color(display-p3 0.183 0.193 0.188)',
+    }),
+    sage6: token({
+      light: 'color(display-p3 0.844 0.854 0.849)',
+      dark: 'color(display-p3 0.218 0.23 0.224)',
+    }),
+    sage7: token({
+      light: 'color(display-p3 0.8 0.811 0.806)',
+      dark: 'color(display-p3 0.269 0.285 0.277)',
+    }),
+    sage8: token({
+      light: 'color(display-p3 0.725 0.738 0.732)',
+      dark: 'color(display-p3 0.362 0.382 0.373)',
+    }),
+    sage9: token({
+      light: 'color(display-p3 0.531 0.556 0.546)',
+      dark: 'color(display-p3 0.398 0.438 0.421)',
+    }),
+    sage10: token({
+      light: 'color(display-p3 0.492 0.515 0.506)',
+      dark: 'color(display-p3 0.453 0.49 0.474)',
+    }),
+    sage11: token({
+      light: 'color(display-p3 0.377 0.395 0.389)',
+      dark: 'color(display-p3 0.685 0.709 0.697)',
+    }),
+    sage12: token({
+      light: 'color(display-p3 0.107 0.129 0.118)',
+      dark: 'color(display-p3 0.927 0.933 0.93)',
+    }),
+  },
+  transparent: {
+    sage1: token({ light: '#00804004', dark: '#00000000' }),
+    sage2: token({ light: '#00402008', dark: '#f0f2f108' }),
+    sage3: token({ light: '#002d1e11', dark: '#f3f5f412' }),
+    sage4: token({ light: '#001f1519', dark: '#f2fefd1a' }),
+    sage5: token({ light: '#00180820', dark: '#f1fbfa22' }),
+    sage6: token({ light: '#00140d28', dark: '#edfbf42d' }),
+    sage7: token({ light: '#00140a34', dark: '#edfcf73c' }),
+    sage8: token({ light: '#000f0847', dark: '#ebfdf657' }),
+    sage9: token({ light: '#00110b79', dark: '#dffdf266' }),
+    sage10: token({ light: '#00100a83', dark: '#e5fdf674' }),
+    sage11: token({ light: '#000a07a0', dark: '#f4fefbb0' }),
+    sage12: token({ light: '#000805e5', dark: '#fdfffeed' }),
+  },
+};

packages/twenty-ui/design-tokens/color/sand.ts

@@ -0,0 +1,68 @@
+import { token } from '../token';
+
+export const SAND_COLOR_TOKENS = {
+  scale: {
+    sand1: token({
+      light: 'color(display-p3 0.992 0.992 0.989)',
+      dark: 'color(display-p3 0.067 0.067 0.063)',
+    }),
+    sand2: token({
+      light: 'color(display-p3 0.977 0.977 0.973)',
+      dark: 'color(display-p3 0.098 0.098 0.094)',
+    }),
+    sand3: token({
+      light: 'color(display-p3 0.943 0.942 0.936)',
+      dark: 'color(display-p3 0.135 0.135 0.129)',
+    }),
+    sand4: token({
+      light: 'color(display-p3 0.913 0.912 0.903)',
+      dark: 'color(display-p3 0.164 0.163 0.156)',
+    }),
+    sand5: token({
+      light: 'color(display-p3 0.885 0.883 0.873)',
+      dark: 'color(display-p3 0.193 0.192 0.183)',
+    }),
+    sand6: token({
+      light: 'color(display-p3 0.854 0.852 0.839)',
+      dark: 'color(display-p3 0.23 0.229 0.217)',
+    }),
+    sand7: token({
+      light: 'color(display-p3 0.813 0.81 0.794)',
+      dark: 'color(display-p3 0.285 0.282 0.267)',
+    }),
+    sand8: token({
+      light: 'color(display-p3 0.738 0.734 0.713)',
+      dark: 'color(display-p3 0.384 0.378 0.357)',
+    }),
+    sand9: token({
+      light: 'color(display-p3 0.553 0.553 0.528)',
+      dark: 'color(display-p3 0.434 0.428 0.403)',
+    }),
+    sand10: token({
+      light: 'color(display-p3 0.511 0.511 0.488)',
+      dark: 'color(display-p3 0.487 0.481 0.456)',
+    }),
+    sand11: token({
+      light: 'color(display-p3 0.388 0.388 0.37)',
+      dark: 'color(display-p3 0.707 0.703 0.68)',
+    }),
+    sand12: token({
+      light: 'color(display-p3 0.129 0.126 0.111)',
+      dark: 'color(display-p3 0.933 0.933 0.926)',
+    }),
+  },
+  transparent: {
+    sand1: token({ light: '#55550003', dark: '#00000000' }),
+    sand2: token({ light: '#25250007', dark: '#f4f4f309' }),
+    sand3: token({ light: '#20100010', dark: '#f6f6f513' }),
+    sand4: token({ light: '#1f150019', dark: '#fefef31b' }),
+    sand5: token({ light: '#1f180021', dark: '#fbfbeb23' }),
+    sand6: token({ light: '#19130029', dark: '#fffaed2d' }),
+    sand7: token({ light: '#19140035', dark: '#fffbed3c' }),
+    sand8: token({ light: '#1915014a', dark: '#fff9eb57' }),
+    sand9: token({ light: '#0f0f0079', dark: '#fffae965' }),
+    sand10: token({ light: '#0c0c0083', dark: '#fffdee73' }),
+    sand11: token({ light: '#080800a1', dark: '#fffcf4b0' }),
+    sand12: token({ light: '#060500e3', dark: '#fffffded' }),
+  },
+};

packages/twenty-ui/design-tokens/color/sky.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const SKY_COLOR_TOKENS = {
+  scale: {
+    sky1: token({
+      light: 'color(display-p3 0.98 0.995 0.999)',
+      dark: 'color(display-p3 0.056 0.078 0.116)',
+    }),
+    sky2: token({
+      light: 'color(display-p3 0.953 0.98 0.99)',
+      dark: 'color(display-p3 0.075 0.101 0.149)',
+    }),
+    sky3: token({
+      light: 'color(display-p3 0.899 0.963 0.989)',
+      dark: 'color(display-p3 0.089 0.154 0.244)',
+    }),
+    sky4: token({
+      light: 'color(display-p3 0.842 0.937 0.977)',
+      dark: 'color(display-p3 0.106 0.207 0.323)',
+    }),
+    sky5: token({
+      light: 'color(display-p3 0.777 0.9 0.954)',
+      dark: 'color(display-p3 0.135 0.261 0.394)',
+    }),
+    sky6: token({
+      light: 'color(display-p3 0.701 0.851 0.921)',
+      dark: 'color(display-p3 0.17 0.322 0.469)',
+    }),
+    sky7: token({
+      light: 'color(display-p3 0.604 0.785 0.879)',
+      dark: 'color(display-p3 0.205 0.394 0.557)',
+    }),
+    sky8: token({
+      light: 'color(display-p3 0.457 0.696 0.829)',
+      dark: 'color(display-p3 0.232 0.48 0.665)',
+    }),
+    sky9: token('color(display-p3 0.585 0.877 0.983)'),
+    sky10: token({
+      light: 'color(display-p3 0.555 0.845 0.959)',
+      dark: 'color(display-p3 0.718 0.925 0.991)',
+    }),
+    sky11: token({
+      light: 'color(display-p3 0.193 0.448 0.605)',
+      dark: 'color(display-p3 0.536 0.772 0.924)',
+    }),
+    sky12: token({
+      light: 'color(display-p3 0.145 0.241 0.329)',
+      dark: 'color(display-p3 0.799 0.947 0.993)',
+    }),
+  },
+  transparent: {
+    sky1: token({ light: '#00d5ff06', dark: '#0044ff0f' }),
+    sky2: token({ light: '#00a4db0e', dark: '#1171fb18' }),
+    sky3: token({ light: '#00b3ee1e', dark: '#1184fc33' }),
+    sky4: token({ light: '#00ace42e', dark: '#128fff49' }),
+    sky5: token({ light: '#00a1d841', dark: '#1c9dfd5d' }),
+    sky6: token({ light: '#0092ca56', dark: '#28a5ff72' }),
+    sky7: token({ light: '#0089c172', dark: '#2badfe8b' }),
+    sky8: token({ light: '#0085bf9f', dark: '#1db2fea9' }),
+    sky9: token({ light: '#00c7fe83', dark: '#7ce3fffe' }),
+    sky10: token({ light: '#00bcf38b', dark: '#a8eeff' }),
+    sky11: token({ light: '#00749e', dark: '#7cd3ffef' }),
+    sky12: token({ light: '#002540e2', dark: '#c2f3ff' }),
+  },
+};

packages/twenty-ui/design-tokens/color/slate.ts

@@ -0,0 +1,68 @@
+import { token } from '../token';
+
+export const SLATE_COLOR_TOKENS = {
+  scale: {
+    slate1: token({
+      light: 'color(display-p3 0.988 0.988 0.992)',
+      dark: 'color(display-p3 0.067 0.067 0.074)',
+    }),
+    slate2: token({
+      light: 'color(display-p3 0.976 0.976 0.984)',
+      dark: 'color(display-p3 0.095 0.098 0.105)',
+    }),
+    slate3: token({
+      light: 'color(display-p3 0.94 0.941 0.953)',
+      dark: 'color(display-p3 0.13 0.135 0.145)',
+    }),
+    slate4: token({
+      light: 'color(display-p3 0.908 0.909 0.925)',
+      dark: 'color(display-p3 0.156 0.163 0.176)',
+    }),
+    slate5: token({
+      light: 'color(display-p3 0.88 0.881 0.901)',
+      dark: 'color(display-p3 0.183 0.191 0.206)',
+    }),
+    slate6: token({
+      light: 'color(display-p3 0.85 0.852 0.876)',
+      dark: 'color(display-p3 0.215 0.226 0.244)',
+    }),
+    slate7: token({
+      light: 'color(display-p3 0.805 0.808 0.838)',
+      dark: 'color(display-p3 0.265 0.28 0.302)',
+    }),
+    slate8: token({
+      light: 'color(display-p3 0.727 0.733 0.773)',
+      dark: 'color(display-p3 0.357 0.381 0.409)',
+    }),
+    slate9: token({
+      light: 'color(display-p3 0.547 0.553 0.592)',
+      dark: 'color(display-p3 0.415 0.431 0.463)',
+    }),
+    slate10: token({
+      light: 'color(display-p3 0.503 0.512 0.549)',
+      dark: 'color(display-p3 0.469 0.483 0.514)',
+    }),
+    slate11: token({
+      light: 'color(display-p3 0.379 0.392 0.421)',
+      dark: 'color(display-p3 0.692 0.704 0.728)',
+    }),
+    slate12: token({
+      light: 'color(display-p3 0.113 0.125 0.14)',
+      dark: 'color(display-p3 0.93 0.933 0.94)',
+    }),
+  },
+  transparent: {
+    slate1: token({ light: '#00005503', dark: '#00000000' }),
+    slate2: token({ light: '#00005506', dark: '#d8f4f609' }),
+    slate3: token({ light: '#0000330f', dark: '#ddeaf814' }),
+    slate4: token({ light: '#00002d17', dark: '#d3edf81d' }),
+    slate5: token({ light: '#0009321f', dark: '#d9edfe25' }),
+    slate6: token({ light: '#00002f26', dark: '#d6ebfd30' }),
+    slate7: token({ light: '#00062e32', dark: '#d9edff40' }),
+    slate8: token({ light: '#00083046', dark: '#d9edff5d' }),
+    slate9: token({ light: '#00051d74', dark: '#dfebfd6d' }),
+    slate10: token({ light: '#00071b7f', dark: '#e5edfd7b' }),
+    slate11: token({ light: '#0007149f', dark: '#f1f7feb5' }),
+    slate12: token({ light: '#000509e3', dark: '#fcfdffef' }),
+  },
+};

packages/twenty-ui/design-tokens/color/tomato.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const TOMATO_COLOR_TOKENS = {
+  scale: {
+    tomato1: token({
+      light: 'color(display-p3 0.998 0.989 0.988)',
+      dark: 'color(display-p3 0.09 0.068 0.067)',
+    }),
+    tomato2: token({
+      light: 'color(display-p3 0.994 0.974 0.969)',
+      dark: 'color(display-p3 0.115 0.084 0.076)',
+    }),
+    tomato3: token({
+      light: 'color(display-p3 0.985 0.924 0.909)',
+      dark: 'color(display-p3 0.205 0.097 0.083)',
+    }),
+    tomato4: token({
+      light: 'color(display-p3 0.996 0.868 0.835)',
+      dark: 'color(display-p3 0.282 0.099 0.077)',
+    }),
+    tomato5: token({
+      light: 'color(display-p3 0.98 0.812 0.77)',
+      dark: 'color(display-p3 0.339 0.129 0.101)',
+    }),
+    tomato6: token({
+      light: 'color(display-p3 0.953 0.75 0.698)',
+      dark: 'color(display-p3 0.398 0.179 0.141)',
+    }),
+    tomato7: token({
+      light: 'color(display-p3 0.917 0.673 0.611)',
+      dark: 'color(display-p3 0.487 0.245 0.194)',
+    }),
+    tomato8: token({
+      light: 'color(display-p3 0.875 0.575 0.502)',
+      dark: 'color(display-p3 0.629 0.322 0.248)',
+    }),
+    tomato9: token('color(display-p3 0.831 0.345 0.231)'),
+    tomato10: token({
+      light: 'color(display-p3 0.802 0.313 0.2)',
+      dark: 'color(display-p3 0.862 0.415 0.298)',
+    }),
+    tomato11: token({
+      light: 'color(display-p3 0.755 0.259 0.152)',
+      dark: 'color(display-p3 1 0.585 0.455)',
+    }),
+    tomato12: token({
+      light: 'color(display-p3 0.335 0.165 0.132)',
+      dark: 'color(display-p3 0.959 0.833 0.802)',
+    }),
+  },
+  transparent: {
+    tomato1: token({ light: '#ff000003', dark: '#f1121208' }),
+    tomato2: token({ light: '#ff200008', dark: '#ff55330f' }),
+    tomato3: token({ light: '#f52b0018', dark: '#ff35232b' }),
+    tomato4: token({ light: '#ff35002c', dark: '#fd201142' }),
+    tomato5: token({ light: '#ff2e003d', dark: '#fe332153' }),
+    tomato6: token({ light: '#f92d0050', dark: '#ff4f3864' }),
+    tomato7: token({ light: '#e7280067', dark: '#fd644a7d' }),
+    tomato8: token({ light: '#db250084', dark: '#fe6d4ea7' }),
+    tomato9: token({ light: '#df2600d1', dark: '#fe5431e4' }),
+    tomato10: token({ light: '#d72400da', dark: '#ff6847eb' }),
+    tomato11: token({ light: '#cd2200ea', dark: '#ff977d' }),
+    tomato12: token({ light: '#460900e0', dark: '#ffd6cefb' }),
+  },
+};

packages/twenty-ui/design-tokens/color/turquoise.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const TURQUOISE_COLOR_TOKENS = {
+  scale: {
+    turquoise1: token({
+      light: 'color(display-p3 0.983 0.996 0.992)',
+      dark: 'color(display-p3 0.059 0.083 0.079)',
+    }),
+    turquoise2: token({
+      light: 'color(display-p3 0.958 0.983 0.976)',
+      dark: 'color(display-p3 0.075 0.11 0.107)',
+    }),
+    turquoise3: token({
+      light: 'color(display-p3 0.895 0.971 0.952)',
+      dark: 'color(display-p3 0.087 0.175 0.165)',
+    }),
+    turquoise4: token({
+      light: 'color(display-p3 0.831 0.949 0.92)',
+      dark: 'color(display-p3 0.087 0.227 0.214)',
+    }),
+    turquoise5: token({
+      light: 'color(display-p3 0.761 0.914 0.878)',
+      dark: 'color(display-p3 0.12 0.277 0.261)',
+    }),
+    turquoise6: token({
+      light: 'color(display-p3 0.682 0.864 0.825)',
+      dark: 'color(display-p3 0.162 0.335 0.314)',
+    }),
+    turquoise7: token({
+      light: 'color(display-p3 0.581 0.798 0.756)',
+      dark: 'color(display-p3 0.205 0.406 0.379)',
+    }),
+    turquoise8: token({
+      light: 'color(display-p3 0.433 0.716 0.671)',
+      dark: 'color(display-p3 0.245 0.489 0.453)',
+    }),
+    turquoise9: token('color(display-p3 0.297 0.637 0.581)'),
+    turquoise10: token({
+      light: 'color(display-p3 0.275 0.599 0.542)',
+      dark: 'color(display-p3 0.319 0.69 0.62)',
+    }),
+    turquoise11: token({
+      light: 'color(display-p3 0.08 0.5 0.43)',
+      dark: 'color(display-p3 0.388 0.835 0.719)',
+    }),
+    turquoise12: token({
+      light: 'color(display-p3 0.11 0.235 0.219)',
+      dark: 'color(display-p3 0.734 0.934 0.87)',
+    }),
+  },
+  transparent: {
+    turquoise1: token({ light: '#00cc9905', dark: '#00deab05' }),
+    turquoise2: token({ light: '#00aa800c', dark: '#12fbe60c' }),
+    turquoise3: token({ light: '#00c69d1f', dark: '#00ffe61e' }),
+    turquoise4: token({ light: '#00c39633', dark: '#00ffe92d' }),
+    turquoise5: token({ light: '#00b49047', dark: '#00ffea3b' }),
+    turquoise6: token({ light: '#00a6855e', dark: '#1cffe84b' }),
+    turquoise7: token({ light: '#0099807c', dark: '#2efde85f' }),
+    turquoise8: token({ light: '#009783ac', dark: '#32ffe775' }),
+    turquoise9: token({ light: '#009e8ced', dark: '#13ffe49f' }),
+    turquoise10: token({ light: '#009684f2', dark: '#0dffe0ae' }),
+    turquoise11: token({ light: '#008573', dark: '#0afed5d6' }),
+    turquoise12: token({ light: '#00332df2', dark: '#b8ffebef' }),
+  },
+};

packages/twenty-ui/design-tokens/color/violet.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const VIOLET_COLOR_TOKENS = {
+  scale: {
+    violet1: token({
+      light: 'color(display-p3 0.991 0.988 0.995)',
+      dark: 'color(display-p3 0.077 0.071 0.118)',
+    }),
+    violet2: token({
+      light: 'color(display-p3 0.978 0.974 0.998)',
+      dark: 'color(display-p3 0.101 0.084 0.141)',
+    }),
+    violet3: token({
+      light: 'color(display-p3 0.953 0.943 0.993)',
+      dark: 'color(display-p3 0.154 0.123 0.256)',
+    }),
+    violet4: token({
+      light: 'color(display-p3 0.916 0.897 1)',
+      dark: 'color(display-p3 0.191 0.148 0.345)',
+    }),
+    violet5: token({
+      light: 'color(display-p3 0.876 0.851 1)',
+      dark: 'color(display-p3 0.226 0.182 0.396)',
+    }),
+    violet6: token({
+      light: 'color(display-p3 0.825 0.793 0.981)',
+      dark: 'color(display-p3 0.269 0.223 0.449)',
+    }),
+    violet7: token({
+      light: 'color(display-p3 0.752 0.712 0.943)',
+      dark: 'color(display-p3 0.326 0.277 0.53)',
+    }),
+    violet8: token({
+      light: 'color(display-p3 0.654 0.602 0.902)',
+      dark: 'color(display-p3 0.399 0.346 0.656)',
+    }),
+    violet9: token('color(display-p3 0.417 0.341 0.784)'),
+    violet10: token({
+      light: 'color(display-p3 0.381 0.306 0.741)',
+      dark: 'color(display-p3 0.477 0.402 0.823)',
+    }),
+    violet11: token({
+      light: 'color(display-p3 0.383 0.317 0.702)',
+      dark: 'color(display-p3 0.72 0.65 1)',
+    }),
+    violet12: token({
+      light: 'color(display-p3 0.179 0.15 0.359)',
+      dark: 'color(display-p3 0.883 0.867 0.986)',
+    }),
+  },
+  transparent: {
+    violet1: token({ light: '#5500aa03', dark: '#4422ff0f' }),
+    violet2: token({ light: '#4900ff07', dark: '#853ff916' }),
+    violet3: token({ light: '#4400ee0f', dark: '#8354fe36' }),
+    violet4: token({ light: '#4300ff1b', dark: '#7d51fd50' }),
+    violet5: token({ light: '#3600ff26', dark: '#845ffd5f' }),
+    violet6: token({ light: '#3100fb35', dark: '#8f6cfd6d' }),
+    violet7: token({ light: '#2d01dd4a', dark: '#9879ff83' }),
+    violet8: token({ light: '#2b00d066', dark: '#977dfea8' }),
+    violet9: token({ light: '#2400b7a9', dark: '#8668ffcc' }),
+    violet10: token({ light: '#2300abb2', dark: '#9176fed7' }),
+    violet11: token({ light: '#1f0099af', dark: '#baa7ff' }),
+    violet12: token({ light: '#0b0043d9', dark: '#e3defffe' }),
+  },
+};

packages/twenty-ui/design-tokens/color/yellow.ts

@@ -0,0 +1,65 @@
+import { token } from '../token';
+
+export const YELLOW_COLOR_TOKENS = {
+  scale: {
+    yellow1: token({
+      light: 'color(display-p3 0.992 0.992 0.978)',
+      dark: 'color(display-p3 0.078 0.069 0.047)',
+    }),
+    yellow2: token({
+      light: 'color(display-p3 0.995 0.99 0.922)',
+      dark: 'color(display-p3 0.103 0.094 0.063)',
+    }),
+    yellow3: token({
+      light: 'color(display-p3 0.997 0.982 0.749)',
+      dark: 'color(display-p3 0.168 0.137 0.039)',
+    }),
+    yellow4: token({
+      light: 'color(display-p3 0.992 0.953 0.627)',
+      dark: 'color(display-p3 0.209 0.169 0)',
+    }),
+    yellow5: token({
+      light: 'color(display-p3 0.984 0.91 0.51)',
+      dark: 'color(display-p3 0.255 0.209 0)',
+    }),
+    yellow6: token({
+      light: 'color(display-p3 0.934 0.847 0.474)',
+      dark: 'color(display-p3 0.31 0.261 0.07)',
+    }),
+    yellow7: token({
+      light: 'color(display-p3 0.876 0.785 0.46)',
+      dark: 'color(display-p3 0.389 0.331 0.135)',
+    }),
+    yellow8: token({
+      light: 'color(display-p3 0.811 0.689 0.313)',
+      dark: 'color(display-p3 0.497 0.42 0.182)',
+    }),
+    yellow9: token('color(display-p3 1 0.92 0.22)'),
+    yellow10: token({
+      light: 'color(display-p3 0.977 0.868 0.291)',
+      dark: 'color(display-p3 1 1 0.456)',
+    }),
+    yellow11: token({
+      light: 'color(display-p3 0.6 0.44 0)',
+      dark: 'color(display-p3 0.948 0.885 0.392)',
+    }),
+    yellow12: token({
+      light: 'color(display-p3 0.271 0.233 0.137)',
+      dark: 'color(display-p3 0.959 0.934 0.731)',
+    }),
+  },
+  transparent: {
+    yellow1: token({ light: '#aaaa0006', dark: '#d1510004' }),
+    yellow2: token({ light: '#f4dd0016', dark: '#f9b4000b' }),
+    yellow3: token({ light: '#ffee0047', dark: '#ffaa001e' }),
+    yellow4: token({ light: '#ffe3016b', dark: '#fdb70028' }),
+    yellow5: token({ light: '#ffd5008f', dark: '#febb0036' }),
+    yellow6: token({ light: '#ebbc0097', dark: '#fec40046' }),
+    yellow7: token({ light: '#d2a10098', dark: '#fdcb225c' }),
+    yellow8: token({ light: '#c99700c6', dark: '#fdca327b' }),
+    yellow9: token({ light: '#ffe100d6', dark: '#ffe629' }),
+    yellow10: token({ light: '#ffdc00', dark: '#ffff57' }),
+    yellow11: token({ light: '#9e6c00', dark: '#fee949f5' }),
+    yellow12: token({ light: '#2e2000e0', dark: '#fef6baf6' }),
+  },
+};