diff --git a/apps/demo/.eslintignore b/apps/demo/.eslintignore
index 76add87..7dba084 100644
--- a/apps/demo/.eslintignore
+++ b/apps/demo/.eslintignore
@@ -1,2 +1,3 @@
 node_modules
-dist
\ No newline at end of file
+dist
+src/cunningham-tokens.ts
\ No newline at end of file
diff --git a/apps/demo/.eslintrc.json b/apps/demo/.eslintrc.json
index 9f51ce7..96c1160 100644
--- a/apps/demo/.eslintrc.json
+++ b/apps/demo/.eslintrc.json
@@ -4,9 +4,6 @@
     "custom"
   ],
   "parserOptions": {
-    "project": [
-      "./tsconfig.json",
-      "./tsconfig.node.json"
-    ]
+    "project": "./tsconfig.eslint.json"
   }
 }
\ No newline at end of file
diff --git a/apps/demo/cunningham.cjs b/apps/demo/cunningham.cjs
deleted file mode 100644
index 3474d17..0000000
--- a/apps/demo/cunningham.cjs
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
-  theme: {
-    colors: {
-      primary: 'purple'
-    },
-  },
-};
diff --git a/apps/demo/cunningham.ts b/apps/demo/cunningham.ts
new file mode 100644
index 0000000..6247801
--- /dev/null
+++ b/apps/demo/cunningham.ts
@@ -0,0 +1,12 @@
+export default {
+  theme: {
+    colors: {
+      primary: "purple",
+    },
+  },
+  components: {
+    button: {
+      "border-radius": "30px",
+    },
+  },
+};
diff --git a/apps/demo/package.json b/apps/demo/package.json
index 44d48f1..baf213e 100644
--- a/apps/demo/package.json
+++ b/apps/demo/package.json
@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "lint": "eslint . 'src/**/*.{ts,tsx}'",
-    "dev": "vite",
+    "dev": "vite & nodemon --watch cunningham.ts --exec yarn build-theme",
     "build-theme": "cunningham -o src -g css,ts",
     "build": "tsc && vite build",
     "preview": "vite preview"
diff --git a/apps/demo/src/cunningham-tokens.css b/apps/demo/src/cunningham-tokens.css
index a561176..a73c5d5 100644
--- a/apps/demo/src/cunningham-tokens.css
+++ b/apps/demo/src/cunningham-tokens.css
@@ -1,4 +1,6 @@
 :root {
-	--c--colors--primary: purple;
-	--c--colors--secondary: #DA0000;
+	--c--theme--colors--primary: purple;
+	--c--theme--colors--primary-gradient: linear-gradient(90deg,#002d7f,#0069b3);
+	--c--theme--colors--secondary: #DA0000;
+	--c--components--button--border-radius: 30px;
 }
\ No newline at end of file
diff --git a/apps/demo/src/cunningham-tokens.ts b/apps/demo/src/cunningham-tokens.ts
index 049983b..ccd3adc 100644
--- a/apps/demo/src/cunningham-tokens.ts
+++ b/apps/demo/src/cunningham-tokens.ts
@@ -1 +1 @@
-export const tokens = {"colors":{"primary":"purple","secondary":"#DA0000"}};
\ No newline at end of file
+export const tokens = {"theme":{"colors":{"primary":"purple","primary-gradient":"linear-gradient(90deg,#002d7f,#0069b3)","secondary":"#DA0000"}},"components":{"button":{"border-radius":"30px"}}};
\ No newline at end of file
diff --git a/apps/demo/src/index.scss b/apps/demo/src/index.scss
index da02991..4b5426d 100644
--- a/apps/demo/src/index.scss
+++ b/apps/demo/src/index.scss
@@ -6,7 +6,6 @@
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
-  color: var(--c--colors--primary);
   background-color: #242424;
   height: 100vh;
   display: flex;
diff --git a/apps/demo/src/main.tsx b/apps/demo/src/main.tsx
index 9d6c78e..03d9698 100644
--- a/apps/demo/src/main.tsx
+++ b/apps/demo/src/main.tsx
@@ -8,8 +8,8 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <div className="center">
       <h1 className="test">Cunningham Demo.</h1>
-      <Button />
-      <h3>Primary color is {tokens.colors.primary}</h3>
+      <Button>World best button.</Button>
+      <h3>Primary color is {tokens.theme.colors.primary}</h3>
     </div>
   </React.StrictMode>
 );
diff --git a/apps/demo/tsconfig.eslint.json b/apps/demo/tsconfig.eslint.json
new file mode 100644
index 0000000..824f560
--- /dev/null
+++ b/apps/demo/tsconfig.eslint.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": [],
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ]
+}
\ No newline at end of file