design: add color system

Author: DevDAN09

tailwind.config.ts

@@ -8,12 +8,36 @@ export default {
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
+    screens: {
+      'sm': {'max': '640px'},
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+    },
     extend: {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
-        'primary-blue': COLORS.primary.blue,
-        'primary-red': COLORS.primary.red,
+        'primary':{
+          'yellow': COLORS.primary.yellow,
+          'green': COLORS.primary.green,
+          'blue': COLORS.primary.blue,
+          'red': COLORS.primary.red,
+        },
+        'grayscale':{
+          'white': COLORS.grayscale.white,
+          'gray1': COLORS.grayscale.gray1,
+          'gray2': COLORS.grayscale.gray2,
+          'gray3': COLORS.grayscale.gray3,
+          'gray4': COLORS.grayscale.gray4,
+          'gray5': COLORS.grayscale.gray5,
+          'gray6': COLORS.grayscale.gray6,
+          'gray7': COLORS.grayscale.gray7,
+          'gray8': COLORS.grayscale.gray8,
+          'gray9': COLORS.grayscale.gray9,
+          'black': COLORS.grayscale.black,
+        },
       },
       keyframes: {
         'slide-90': {