diff --git a/template/ui/dev/src/css/quasar.variables.sass b/template/ui/dev/src/css/quasar.variables.sass
new file mode 100644
index 0000000..66d4965
--- /dev/null
+++ b/template/ui/dev/src/css/quasar.variables.sass
@@ -0,0 +1,22 @@
+// Quasar Sass (& SCSS) Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Stylus variables found in Quasar's source Stylus files.
+
+// Check documentation for full list of Quasar variables
+
+// Your own variables (that are declared here) and Quasar's own
+// ones will be available out of the box in your .vue/.scss/.sass files
+
+// It's highly recommended to change the default colors
+// to match your app's branding.
+// Tip: Use the "Theme Builder" on Quasar's documentation website.
+
+$primary   : #027BE3
+$secondary : #26A69A
+$accent    : #9C27B0
+
+$positive  : #21BA45
+$negative  : #C10015
+$info      : #31CCEC
+$warning   : #F2C037