diff --git a/nuxt4-app/app.config.ts b/nuxt4-app/app.config.ts
new file mode 100644
index 0000000..57f4245
--- /dev/null
+++ b/nuxt4-app/app.config.ts
@@ -0,0 +1,8 @@
+export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'coffee',
+      neutral: 'coffee'
+    }
+  }
+})
diff --git a/nuxt4-app/app/assets/css/main.css b/nuxt4-app/app/assets/css/main.css
index b22756a..3349a2c 100644
--- a/nuxt4-app/app/assets/css/main.css
+++ b/nuxt4-app/app/assets/css/main.css
@@ -1,6 +1,21 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
 
+@theme {
+  /* Definir color café personalizado con todos los shades */
+  --color-coffee-50: #fef9f0;
+  --color-coffee-100: #fef3e0;
+  --color-coffee-200: #fde5c0;
+  --color-coffee-300: #fbd4a0;
+  --color-coffee-400: #f0c080;
+  --color-coffee-500: #c08040;
+  --color-coffee-600: #a06830;
+  --color-coffee-700: #805020;
+  --color-coffee-800: #5a3a18;
+  --color-coffee-900: #3a2a16;
+  --color-coffee-950: #1b1209;
+}
+
 :root {
   --brand-bg: #14100b;
   --brand-surface: #1f180f;