diff --git a/playground/assets/main.scss b/playground/assets/main.scss
index 783b4c85..cd55063c 100644
--- a/playground/assets/main.scss
+++ b/playground/assets/main.scss
@@ -1,4 +1,9 @@
+/* Any variables in the sass files in this folder - https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/ */
+
+// $font-family: 'Inter var', 'Inter', 'Roboto', 'Helvetica Neue', sans-serif;
 @use 'vuetify' with (
   $utilities: false,
+  // $reset: false,
   $color-pack: false,
+  // $body-font-family: $font-family
 );
diff --git a/playground/assets/settings.scss b/playground/assets/settings.scss
index 112c1132..6422406d 100644
--- a/playground/assets/settings.scss
+++ b/playground/assets/settings.scss
@@ -1,5 +1,5 @@
-/* DON'T USE @use here */
+/* Any sass variables of individual V[Component] components */
+/* used in index.vue page's style block, do not change @forward to @use */
 @forward 'vuetify/settings' with (
-  $utilities: false,
   $button-height: 40px,
 );
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index 87e1ca87..b1575d71 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -118,5 +118,16 @@ watch(current, () => {
         <v-date-picker />
       </v-locale-provider> -->
     </div>
+    <button class="mb-2 ml-2 px-2 my-button text-white bg-primary rounded-lg">
+      Reserve
+    </button>
   </div>
 </template>
+
+<style lang="scss">
+  @use '../assets/settings';
+
+  .my-button {
+    height: settings.$button-height;
+  }
+</style>