configure font and tailwind colors

package.json

@@ -16,6 +16,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.14.0",
+    "@fontsource-variable/outfit": "^5.1.0",
     "@iconify-json/mynaui": "^1.2.7",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/compiler-sfc": "^3.5.13",

pnpm-lock.yaml

@@ -18,6 +18,9 @@ importers:
       '@eslint/js':
         specifier: ^9.14.0
         version: 9.15.0
+      '@fontsource-variable/outfit':
+        specifier: ^5.1.0
+        version: 5.1.0
       '@iconify-json/mynaui':
         specifier: ^1.2.7
         version: 1.2.7
@@ -382,6 +385,9 @@ packages:
     resolution: {integrity: sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@fontsource-variable/outfit@5.1.0':
+    resolution: {integrity: sha512-WUZiMehPerX/sUWC65Ku9hQ741cJtkCiy5T9XSZd1XbyYudNd/qoZSbUyEbiC00+4rGheNcKzaFdMGp5uonQog==}
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -2007,6 +2013,8 @@ snapshots:
     dependencies:
       levn: 0.4.1
 
+  '@fontsource-variable/outfit@5.1.0': {}
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':

src/assets/index.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  font-family: 'Outfit Variable', sans-serif;
+}

src/main.js

@@ -1,4 +1,5 @@
 import './assets/index.css'
+import '@fontsource-variable/outfit'
 
 import { createApp } from 'vue'
 import App from './App.vue'

tailwind.config.js

@@ -2,7 +2,17 @@
 export default {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: '#9D59A8',
+        secondary: '#B59BBA',
+        background: '#FFFCF8',
+        customGray: '#404040',
+      },
+      boxShadow: {
+        button: '0 12px 24px 0 rgba(0, 0, 0, 0.25)',
+      },
+    },
   },
   plugins: [],
 }