diff --git a/playground/app/app.config.ts b/playground/app/app.config.ts
index 7d70ca73..334a5535 100644
--- a/playground/app/app.config.ts
+++ b/playground/app/app.config.ts
@@ -6,8 +6,8 @@ export default defineAppConfig({
   },
   ui: {
     colors: {
-      primary: 'sky',
-      gray: 'cool'
+      primary: 'green',
+      gray: 'slate'
     }
   }
 })
diff --git a/playground/app/app.vue b/playground/app/app.vue
index c6d00c19..21aa4cd7 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -84,4 +84,20 @@ defineShortcuts({
 <style>
 @import "tailwindcss";
 @import "@nuxt/ui";
+
+@theme {
+  --font-family-sans: 'Inter', sans-serif;
+
+  --color-green-50: #EFFDF5;
+  --color-green-100: #D9FBE8;
+  --color-green-200: #B3F5D1;
+  --color-green-300: #75EDAE;
+  --color-green-400: #00DC82;
+  --color-green-500: #00C16A;
+  --color-green-600: #00A155;
+  --color-green-700: #007F45;
+  --color-green-800: #016538;
+  --color-green-900: #0A5331;
+  --color-green-950: #052E16;
+}
 </style>