diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..5bbbf7f
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,4 @@
+* text=auto eol=lf
+
+deno.lock -diff
+index.css linguist-generated=true
diff --git a/README.md b/README.md
index 5e14bb2..d53599c 100644
--- a/README.md
+++ b/README.md
@@ -82,6 +82,7 @@ The the element classes this is managed with colour classes: `.red`, `.orange`,
 Each has numbered `accent` properties and sets the `accent-color` property as well, so you can apply a colour class to parent component or directly on an element to give it that accent, or make your own you just need to add `accent-1` - `accent-9` to a class:
 ```css
 .colour {
+	--accent: var(--colour);
 	--accent-1: var(--colour-1);
 	--accent-2: var(--colour-2);
 	--accent-3: var(--colour-3);
diff --git a/index.css b/index.css
index abdb85f..a36c6be 100644
--- a/index.css
+++ b/index.css
@@ -1,6 +1,737 @@
 /*! Tundra.css - https: //github.com/joshdales/tundra-css - MIT License */
+@property --neutral {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(20% 0 0deg);
+}
+@property --neutral-1 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(20% 0 0deg);
+}
+@property --neutral-2 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(30% 0 0deg);
+}
+@property --neutral-3 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(40% 0 0deg);
+}
+@property --neutral-4 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(50% 0 0deg);
+}
+@property --neutral-5 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(60% 0 0deg);
+}
+@property --neutral-6 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(70% 0 0deg);
+}
+@property --neutral-7 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(80% 0 0deg);
+}
+@property --neutral-8 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(90% 0 0deg);
+}
+@property --neutral-9 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(97% 0 0deg);
+}
+@property --red {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(60% 0.24 25deg);
+}
+@property --red-1 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(20% 0.24 25deg);
+}
+@property --red-2 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(30% 0.24 25deg);
+}
+@property --red-3 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(40% 0.24 25deg);
+}
+@property --red-4 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(50% 0.24 25deg);
+}
+@property --red-5 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(60% 0.24 25deg);
+}
+@property --red-6 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(70% 0.24 25deg);
+}
+@property --red-7 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(80% 0.24 25deg);
+}
+@property --red-8 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(90% 0.0669 25deg);
+}
+@property --red-9 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(97% 0.019 25deg);
+}
+@property --orange {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(70% 0.2 45deg);
+}
+@property --orange-1 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(20% 0.2 45deg);
+}
+@property --orange-2 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(30% 0.2 45deg);
+}
+@property --orange-3 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(40% 0.2 45deg);
+}
+@property --orange-4 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(50% 0.2 45deg);
+}
+@property --orange-5 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(60% 0.2 45deg);
+}
+@property --orange-6 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(70% 0.2 45deg);
+}
+@property --orange-7 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(80% 0.2 45deg);
+}
+@property --orange-8 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(90% 0.0718 45deg);
+}
+@property --orange-9 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(97% 0.0201 45deg);
+}
+@property --yellow {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(80% 0.15 80deg);
+}
+@property --yellow-1 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(20% 0.15 80deg);
+}
+@property --yellow-2 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(30% 0.15 80deg);
+}
+@property --yellow-3 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(40% 0.15 80deg);
+}
+@property --yellow-4 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(50% 0.15 80deg);
+}
+@property --yellow-5 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(60% 0.15 80deg);
+}
+@property --yellow-6 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(70% 0.15 80deg);
+}
+@property --yellow-7 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(80% 0.15 80deg);
+}
+@property --yellow-8 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(90% 0.1164 80deg);
+}
+@property --yellow-9 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(97% 0.0337 80deg);
+}
+@property --green {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(60% 0.15 165deg);
+}
+@property --green-1 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(20% 0.15 165deg);
+}
+@property --green-2 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(30% 0.15 165deg);
+}
+@property --green-3 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(40% 0.15 165deg);
+}
+@property --green-4 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(50% 0.15 165deg);
+}
+@property --green-5 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(60% 0.15 165deg);
+}
+@property --green-6 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(70% 0.15 165deg);
+}
+@property --green-7 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(80% 0.15 165deg);
+}
+@property --green-8 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(90% 0.15 165deg);
+}
+@property --green-9 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(97% 0.0484 165deg);
+}
+@property --cyan {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(60% 0.15 190deg);
+}
+@property --cyan-1 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(20% 0.15 190deg);
+}
+@property --cyan-2 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(30% 0.15 190deg);
+}
+@property --cyan-3 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(40% 0.15 190deg);
+}
+@property --cyan-4 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(50% 0.15 190deg);
+}
+@property --cyan-5 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(60% 0.15 190deg);
+}
+@property --cyan-6 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(70% 0.15 190deg);
+}
+@property --cyan-7 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(80% 0.15 190deg);
+}
+@property --cyan-8 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(90% 0.15 190deg);
+}
+@property --cyan-9 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(97% 0.0484 190deg);
+}
+@property --blue {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(60% 0.15 255deg);
+}
+@property --blue-1 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(20% 0.15 255deg);
+}
+@property --blue-2 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(30% 0.15 255deg);
+}
+@property --blue-3 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(40% 0.15 255deg);
+}
+@property --blue-4 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(50% 0.15 255deg);
+}
+@property --blue-5 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(60% 0.15 255deg);
+}
+@property --blue-6 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(70% 0.15 255deg);
+}
+@property --blue-7 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(80% 0.15 255deg);
+}
+@property --blue-8 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(90% 0.0538 255deg);
+}
+@property --blue-9 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(95% 0.0261 255deg);
+}
+@property --purple {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(60% 0.15 300deg);
+}
+@property --purple-1 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(20% 0.15 300deg);
+}
+@property --purple-2 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(30% 0.15 300deg);
+}
+@property --purple-3 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(40% 0.15 300deg);
+}
+@property --purple-4 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(50% 0.15 300deg);
+}
+@property --purple-5 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(60% 0.15 300deg);
+}
+@property --purple-6 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(70% 0.15 300deg);
+}
+@property --purple-7 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(80% 0.15 300deg);
+}
+@property --purple-8 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(90% 0.0625 300deg);
+}
+@property --purple-9 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(97% 0.0179 300deg);
+}
+@property --pink {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(80% 0.17 350deg);
+}
+@property --pink-1 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(20% 0.17 350deg);
+}
+@property --pink-2 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(30% 0.17 350deg);
+}
+@property --pink-3 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(40% 0.17 350deg);
+}
+@property --pink-4 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(50% 0.17 350deg);
+}
+@property --pink-5 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(60% 0.17 350deg);
+}
+@property --pink-6 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(70% 0.17 350deg);
+}
+@property --pink-7 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(80% 0.17 350deg);
+}
+@property --pink-8 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(90% 0.0816 350deg);
+}
+@property --pink-9 {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: oklch(97% 0.0228 350deg);
+}
+@property --accent {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(20% 0 0deg);
+}
+@property --accent-1 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(20% 0 0deg);
+}
+@property --accent-2 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(30% 0 0deg);
+}
+@property --accent-3 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(40% 0 0deg);
+}
+@property --accent-4 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(50% 0 0deg);
+}
+@property --accent-5 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(60% 0 0deg);
+}
+@property --accent-6 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(70% 0 0deg);
+}
+@property --accent-7 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(80% 0 0deg);
+}
+@property --accent-8 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(90% 0 0deg);
+}
+@property --accent-9 {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: oklch(97% 0 0deg);
+}
+@property --radius-1 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 4px;
+}
+@property --radius-2 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 8px;
+}
+@property --radius-3 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 16px;
+}
+@property --radius-4 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 32px;
+}
+@property --radius-5 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 64px;
+}
+@property --space-1 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 4px;
+}
+@property --space-2 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 8px;
+}
+@property --space-3 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 12px;
+}
+@property --space-4 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 14px;
+}
+@property --space-5 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 16px;
+}
+@property --space-6 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 18px;
+}
+@property --space-7 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 20px;
+}
+@property --space-8 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 24px;
+}
+@property --space-9 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 28px;
+}
+@property --space-10 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 32px;
+}
+@property --space-11 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 40px;
+}
+@property --space-12 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 48px;
+}
+@property --space-13 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 64px;
+}
+@property --space-14 {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 128px;
+}
+@property --font-size {
+  syntax: "*";
+  inherits: true;
+  initial-value: 1rem;
+}
+@property --font-size-1 {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0.75rem;
+}
+@property --font-size-2 {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0.875rem;
+}
+@property --font-size-3 {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1rem;
+}
+@property --font-size-4 {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1.125rem;
+}
+@property --font-size-5 {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1.25rem;
+}
+@property --font-size-6 {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1.5rem;
+}
+@property --font-size-7 {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1.75rem;
+}
+@property --font-size-8 {
+  syntax: "*";
+  inherits: false;
+  initial-value: 2rem;
+}
+@property --font-size-9 {
+  syntax: "*";
+  inherits: false;
+  initial-value: 3rem;
+}
+@property --font-weight {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 500;
+}
+@property --font-weight-1 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 400;
+}
+@property --font-weight-2 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 500;
+}
+@property --font-weight-3 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 600;
+}
+@property --font-weight-4 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 700;
+}
+@property --letter-spacing {
+  syntax: "*";
+  inherits: true;
+  initial-value: 0em;
+}
+@property --letter-spacing-1 {
+  syntax: "*";
+  inherits: false;
+  initial-value: -0.04em;
+}
+@property --letter-spacing-2 {
+  syntax: "*";
+  inherits: false;
+  initial-value: -0.02em;
+}
+@property --letter-spacing-3 {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0em;
+}
+@property --letter-spacing-4 {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0.02em;
+}
+@property --letter-spacing-5 {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0.04em;
+}
+@property --letter-spacing {
+  syntax: "*";
+  inherits: true;
+  initial-value: 1;
+}
+@property --line-height-1 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1;
+}
+@property --line-height-2 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1.05;
+}
+@property --line-height-3 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1.15;
+}
+@property --line-height-4 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1.25;
+}
+@property --line-height-5 {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 1.5;
+}
 :root {
-  /* Neutral */
+  /* neutral */
+  --neutral: var(--neutral-1);
   --neutral-1: oklch(20% 0 0deg);
   --neutral-2: oklch(30% 0 0deg);
   --neutral-3: oklch(40% 0 0deg);
@@ -10,8 +741,8 @@
   --neutral-7: oklch(80% 0 0deg);
   --neutral-8: oklch(90% 0 0deg);
   --neutral-9: oklch(97% 0 0deg);
-  --neutral: var(--neutral-1);
-  /* Red */
+  /* red */
+  --red: var(--red-5);
   --red-1: oklch(20% 0.24 25deg);
   --red-2: oklch(30% 0.24 25deg);
   --red-3: oklch(40% 0.24 25deg);
@@ -21,8 +752,8 @@
   --red-7: oklch(80% 0.24 25deg);
   --red-8: oklch(90% 0.0669 25deg);
   --red-9: oklch(97% 0.019 25deg);
-  --red: var(--red-5);
-  /* Orange */
+  /* orange */
+  --orange: var(--orange-6);
   --orange-1: oklch(20% 0.2 45deg);
   --orange-2: oklch(30% 0.2 45deg);
   --orange-3: oklch(40% 0.2 45deg);
@@ -32,8 +763,8 @@
   --orange-7: oklch(80% 0.2 45deg);
   --orange-8: oklch(90% 0.0718 45deg);
   --orange-9: oklch(97% 0.0201 45deg);
-  --orange: var(--orange-5);
-  /* Yellow */
+  /* yellow */
+  --yellow: var(--yellow-7);
   --yellow-1: oklch(20% 0.15 80deg);
   --yellow-2: oklch(30% 0.15 80deg);
   --yellow-3: oklch(40% 0.15 80deg);
@@ -43,8 +774,8 @@
   --yellow-7: oklch(80% 0.15 80deg);
   --yellow-8: oklch(90% 0.1164 80deg);
   --yellow-9: oklch(97% 0.0337 80deg);
-  --yellow: var(--yellow-5);
-  /* Green */
+  /* green */
+  --green: var(--green-5);
   --green-1: oklch(20% 0.15 165deg);
   --green-2: oklch(30% 0.15 165deg);
   --green-3: oklch(40% 0.15 165deg);
@@ -54,8 +785,8 @@
   --green-7: oklch(80% 0.15 165deg);
   --green-8: oklch(90% 0.15 165deg);
   --green-9: oklch(97% 0.0484 165deg);
-  --green: var(--green-5);
-  /* Cyan */
+  /* cyan */
+  --cyan: var(--cyan-5);
   --cyan-1: oklch(20% 0.15 190deg);
   --cyan-2: oklch(30% 0.15 190deg);
   --cyan-3: oklch(40% 0.15 190deg);
@@ -65,8 +796,8 @@
   --cyan-7: oklch(80% 0.15 190deg);
   --cyan-8: oklch(90% 0.15 190deg);
   --cyan-9: oklch(97% 0.0484 190deg);
-  --cyan: var(--cyan-5);
-  /* Blue */
+  /* blue */
+  --blue: var(--blue-5);
   --blue-1: oklch(20% 0.15 255deg);
   --blue-2: oklch(30% 0.15 255deg);
   --blue-3: oklch(40% 0.15 255deg);
@@ -76,8 +807,8 @@
   --blue-7: oklch(80% 0.15 255deg);
   --blue-8: oklch(90% 0.0538 255deg);
   --blue-9: oklch(95% 0.0261 255deg);
-  --blue: var(--blue-5);
-  /* Purple */
+  /* purple */
+  --purple: var(--purple-5);
   --purple-1: oklch(20% 0.15 300deg);
   --purple-2: oklch(30% 0.15 300deg);
   --purple-3: oklch(40% 0.15 300deg);
@@ -87,8 +818,8 @@
   --purple-7: oklch(80% 0.15 300deg);
   --purple-8: oklch(90% 0.0625 300deg);
   --purple-9: oklch(97% 0.0179 300deg);
-  --purple: var(--purple-5);
-  /* Pink */
+  /* pink */
+  --pink: var(--pink-7);
   --pink-1: oklch(20% 0.17 350deg);
   --pink-2: oklch(30% 0.17 350deg);
   --pink-3: oklch(40% 0.17 350deg);
@@ -98,7 +829,6 @@
   --pink-7: oklch(80% 0.17 350deg);
   --pink-8: oklch(90% 0.0816 350deg);
   --pink-9: oklch(97% 0.0228 350deg);
-  --pink: var(--pink-5);
   /* Radius */
   --radius-1: 4px;
   --radius-2: 8px;
@@ -1340,7 +2070,7 @@ input[type=radio].radio-4:checked::after {
 }
 
 .red {
-  accent-color: var(--colour);
+  --accent: var(--red);
   --accent-1: var(--red-1);
   --accent-2: var(--red-2);
   --accent-3: var(--red-3);
@@ -1350,10 +2080,11 @@ input[type=radio].radio-4:checked::after {
   --accent-7: var(--red-7);
   --accent-8: var(--red-8);
   --accent-9: var(--red-9);
+  accent-color: var(--accent);
 }
 
 .orange {
-  accent-color: var(--colour);
+  --accent: var(--orange);
   --accent-1: var(--orange-1);
   --accent-2: var(--orange-2);
   --accent-3: var(--orange-3);
@@ -1363,10 +2094,11 @@ input[type=radio].radio-4:checked::after {
   --accent-7: var(--orange-7);
   --accent-8: var(--orange-8);
   --accent-9: var(--orange-9);
+  accent-color: var(--accent);
 }
 
 .yellow {
-  accent-color: var(--colour);
+  --accent: var(--yellow);
   --accent-1: var(--yellow-1);
   --accent-2: var(--yellow-2);
   --accent-3: var(--yellow-3);
@@ -1376,10 +2108,11 @@ input[type=radio].radio-4:checked::after {
   --accent-7: var(--yellow-7);
   --accent-8: var(--yellow-8);
   --accent-9: var(--yellow-9);
+  accent-color: var(--accent);
 }
 
 .green {
-  accent-color: var(--colour);
+  --accent: var(--green);
   --accent-1: var(--green-1);
   --accent-2: var(--green-2);
   --accent-3: var(--green-3);
@@ -1389,10 +2122,11 @@ input[type=radio].radio-4:checked::after {
   --accent-7: var(--green-7);
   --accent-8: var(--green-8);
   --accent-9: var(--green-9);
+  accent-color: var(--accent);
 }
 
 .cyan {
-  accent-color: var(--colour);
+  --accent: var(--cyan);
   --accent-1: var(--cyan-1);
   --accent-2: var(--cyan-2);
   --accent-3: var(--cyan-3);
@@ -1402,10 +2136,11 @@ input[type=radio].radio-4:checked::after {
   --accent-7: var(--cyan-7);
   --accent-8: var(--cyan-8);
   --accent-9: var(--cyan-9);
+  accent-color: var(--accent);
 }
 
 .blue {
-  accent-color: var(--colour);
+  --accent: var(--blue);
   --accent-1: var(--blue-1);
   --accent-2: var(--blue-2);
   --accent-3: var(--blue-3);
@@ -1415,10 +2150,11 @@ input[type=radio].radio-4:checked::after {
   --accent-7: var(--blue-7);
   --accent-8: var(--blue-8);
   --accent-9: var(--blue-9);
+  accent-color: var(--accent);
 }
 
 .purple {
-  accent-color: var(--colour);
+  --accent: var(--purple);
   --accent-1: var(--purple-1);
   --accent-2: var(--purple-2);
   --accent-3: var(--purple-3);
@@ -1428,10 +2164,11 @@ input[type=radio].radio-4:checked::after {
   --accent-7: var(--purple-7);
   --accent-8: var(--purple-8);
   --accent-9: var(--purple-9);
+  accent-color: var(--accent);
 }
 
 .pink {
-  accent-color: var(--colour);
+  --accent: var(--pink);
   --accent-1: var(--pink-1);
   --accent-2: var(--pink-2);
   --accent-3: var(--pink-3);
@@ -1441,6 +2178,7 @@ input[type=radio].radio-4:checked::after {
   --accent-7: var(--pink-7);
   --accent-8: var(--pink-8);
   --accent-9: var(--pink-9);
+  accent-color: var(--accent);
 }
 
 @supports not (color: oklch(60% 0.15 165deg)) {
diff --git a/index.scss b/index.scss
index 61a6d8b..622607d 100644
--- a/index.scss
+++ b/index.scss
@@ -1,120 +1,55 @@
 /*! Tundra.css - https: //github.com/joshdales/tundra-css - MIT License */
+@use "sass:list";
+@use "sass:map";
 @use 'styles' as *;
+@use 'styles/properties.scss';
 
 :root {
-
-	/* Neutral */
-	@each $level, $colour in $neutrals {
-		--neutral-#{$level}: #{$colour};
-	}
-
-	--neutral: var(--neutral-1);
-
-	/* Red */
-	@each $level, $colour in $reds {
-		--red-#{$level}: #{$colour};
-	}
-
-	--red: var(--red-5);
-
-	/* Orange */
-	@each $level, $colour in $oranges {
-		--orange-#{$level}: #{$colour};
-	}
-
-	--orange: var(--orange-5);
-
-	/* Yellow */
-	@each $level, $colour in $yellows {
-		--yellow-#{$level}: #{$colour};
+	@each $colour, $values in $colours {
+
+		/* #{$colour} */
+		@each $level, $value in $values {
+			@if ($level > 0) {
+				--#{$colour}-#{$level}: #{$value};
+			}
+
+			@else {
+				$_values: map.remove($values, 0);
+				$key: list.index(map.values($_values), map.get($values, 0));
+				--#{$colour}: var(--#{$colour}-#{$key});
+			}
+		}
 	}
 
-	--yellow: var(--yellow-5);
-
-	/* Green */
-	@each $level, $colour in $greens {
-		--green-#{$level}: #{$colour};
+	/* Radius */
+	@each $level, $value in $radius {
+		--radius-#{$level}: #{$value};
 	}
 
-	--green: var(--green-5);
-
-	/* Cyan */
-	@each $level, $colour in $cyans {
-		--cyan-#{$level}: #{$colour};
+	/* Space */
+	@each $level, $value in $space {
+		--space-#{$level}: #{$value};
 	}
 
-	--cyan: var(--cyan-5);
-
-	/* Blue */
-	@each $level, $colour in $blues {
-		--blue-#{$level}: #{$colour};
+	/* Font Weight */
+	@each $level, $value in $font-weight {
+		--font-weight-#{$level}: #{$value};
 	}
 
-	--blue: var(--blue-5);
-
-	/* Purple */
-	@each $level, $colour in $purples {
-		--purple-#{$level}: #{$colour};
+	/* Font Size */
+	@each $level, $value in $font-size {
+		--font-size-#{$level}: #{$value};
 	}
 
-	--purple: var(--purple-5);
-
-	/* Pink */
-	@each $level, $colour in $pinks {
-		--pink-#{$level}: #{$colour};
+	/* Line Height */
+	@each $level, $value in $line-height {
+		--line-height-#{$level}: #{$value};
 	}
 
-	--pink: var(--pink-5);
-
-	/* Radius */
-	--radius-1: #{$radius-1};
-	--radius-2: #{$radius-2};
-	--radius-3: #{$radius-3};
-	--radius-4: #{$radius-4};
-	--radius-5: #{$radius-5};
-	/* Space */
-	--space-1: #{$space-1};
-	--space-2: #{$space-2};
-	--space-3: #{$space-3};
-	--space-4: #{$space-4};
-	--space-5: #{$space-5};
-	--space-6: #{$space-6};
-	--space-7: #{$space-7};
-	--space-8: #{$space-8};
-	--space-9: #{$space-9};
-	--space-10: #{$space-10};
-	--space-11: #{$space-11};
-	--space-12: #{$space-12};
-	--space-13: #{$space-13};
-	--space-14: #{$space-14};
-	/* Font Weight */
-	--font-weight-1: #{$font-weight-1};
-	--font-weight-2: #{$font-weight-2};
-	--font-weight-3: #{$font-weight-3};
-	--font-weight-4: #{$font-weight-4};
-	/* Font Size */
-	--font-size-1: #{$font-size-1};
-	--font-size-2: #{$font-size-2};
-	--font-size-3: #{$font-size-3};
-	--font-size-4: #{$font-size-4};
-	--font-size-5: #{$font-size-5};
-	--font-size-6: #{$font-size-6};
-	--font-size-7: #{$font-size-7};
-	--font-size-8: #{$font-size-8};
-	--font-size-9: #{$font-size-9};
-	/* Line Height */
-	--line-height-1: #{$line-height-1};
-	--line-height-2: #{$line-height-2};
-	--line-height-3: #{$line-height-3};
-	--line-height-4: #{$line-height-4};
-	--line-height-5: #{$line-height-5};
 	/* Letter Spacing */
-	--letter-spacing-1: #{$letter-spacing-1};
-	--letter-spacing-2: #{$letter-spacing-2};
-	--letter-spacing-3: #{$letter-spacing-3};
-	--letter-spacing-4: #{$letter-spacing-4};
-	--letter-spacing-5: #{$letter-spacing-5};
-
+	@each $level, $value in $letter-spacing {
+		--letter-spacing-#{$level}: #{$value};
+	}
 }
 
 /* Text */
@@ -215,13 +150,17 @@ input[type="radio"] {
 	}
 }
 
-@each $colour in $colours {
+$_colours: map.remove($colours, "neutral");
+
+@each $colour, $_ in $_colours {
 	.#{$colour} {
-		accent-color: var(--#{colour});
+		--accent: var(--#{$colour});
 
 		@for $level from 1 through 9 {
 			--accent-#{$level}: var(--#{$colour}-#{$level});
 		}
+
+		accent-color: var(--accent);
 	}
 }
 
diff --git a/styles/_radius.scss b/styles/_radius.scss
index 624ed7f..9b3e4cd 100644
--- a/styles/_radius.scss
+++ b/styles/_radius.scss
@@ -5,3 +5,11 @@ $radius-2: spacing.$space-2;
 $radius-3: spacing.$space-5;
 $radius-4: spacing.$space-10;
 $radius-5: spacing.$space-13;
+
+$radius: (
+	1: $radius-1,
+	2: $radius-2,
+	3: $radius-3,
+	4: $radius-4,
+	5: $radius-5,
+);
diff --git a/styles/_spacing.scss b/styles/_spacing.scss
index 6b9f2bb..8fc0816 100644
--- a/styles/_spacing.scss
+++ b/styles/_spacing.scss
@@ -12,3 +12,20 @@ $space-11: 40px;
 $space-12: 48px;
 $space-13: 64px;
 $space-14: 128px;
+
+$space: (
+	1: $space-1,
+	2: $space-2,
+	3: $space-3,
+	4: $space-4,
+	5: $space-5,
+	6: $space-6,
+	7: $space-7,
+	8: $space-8,
+	9: $space-9,
+	10: $space-10,
+	11: $space-11,
+	12: $space-12,
+	13: $space-13,
+	14: $space-14,
+);
diff --git a/styles/colours/_blue.scss b/styles/colours/_blue.scss
index ec20792..81d735b 100644
--- a/styles/colours/_blue.scss
+++ b/styles/colours/_blue.scss
@@ -9,13 +9,14 @@ $blue-8: oklch(90% 0.0538 255);
 $blue-9: oklch(95% 0.0261 255);
 
 $blues: (
-	"1": $blue-1,
-	"2": $blue-2,
-	"3": $blue-3,
-	"4": $blue-4,
-	"5": $blue-5,
-	"6": $blue-6,
-	"7": $blue-7,
-	"8": $blue-8,
-	"9": $blue-9,
-	)
+	0: $blue-5,
+	1: $blue-1,
+	2: $blue-2,
+	3: $blue-3,
+	4: $blue-4,
+	5: $blue-5,
+	6: $blue-6,
+	7: $blue-7,
+	8: $blue-8,
+	9: $blue-9,
+);
diff --git a/styles/colours/_cyan.scss b/styles/colours/_cyan.scss
index e0d76a4..011c9cb 100644
--- a/styles/colours/_cyan.scss
+++ b/styles/colours/_cyan.scss
@@ -9,13 +9,14 @@ $cyan-8: oklch(90% 0.15 190);
 $cyan-9: oklch(97% 0.0484 190);
 
 $cyans: (
-	"1": $cyan-1,
-	"2": $cyan-2,
-	"3": $cyan-3,
-	"4": $cyan-4,
-	"5": $cyan-5,
-	"6": $cyan-6,
-	"7": $cyan-7,
-	"8": $cyan-8,
-	"9": $cyan-9,
-	)
+	0: $cyan-5,
+	1: $cyan-1,
+	2: $cyan-2,
+	3: $cyan-3,
+	4: $cyan-4,
+	5: $cyan-5,
+	6: $cyan-6,
+	7: $cyan-7,
+	8: $cyan-8,
+	9: $cyan-9,
+);
diff --git a/styles/colours/_green.scss b/styles/colours/_green.scss
index cb4ecfa..b423f59 100644
--- a/styles/colours/_green.scss
+++ b/styles/colours/_green.scss
@@ -9,13 +9,14 @@ $green-8: oklch(90% 0.15 165);
 $green-9: oklch(97% 0.0484 165);
 
 $greens: (
-	"1": $green-1,
-	"2": $green-2,
-	"3": $green-3,
-	"4": $green-4,
-	"5": $green-5,
-	"6": $green-6,
-	"7": $green-7,
-	"8": $green-8,
-	"9": $green-9,
+	0: $green-5,
+	1: $green-1,
+	2: $green-2,
+	3: $green-3,
+	4: $green-4,
+	5: $green-5,
+	6: $green-6,
+	7: $green-7,
+	8: $green-8,
+	9: $green-9,
 	)
diff --git a/styles/colours/_neutral.scss b/styles/colours/_neutral.scss
index 3a7b6a4..878bbeb 100644
--- a/styles/colours/_neutral.scss
+++ b/styles/colours/_neutral.scss
@@ -9,13 +9,14 @@ $neutral-8: oklch(90% 0 0);
 $neutral-9: oklch(97% 0 0);
 
 $neutrals: (
-	"1": $neutral-1,
-	"2": $neutral-2,
-	"3": $neutral-3,
-	"4": $neutral-4,
-	"5": $neutral-5,
-	"6": $neutral-6,
-	"7": $neutral-7,
-	"8": $neutral-8,
-	"9": $neutral-9,
-	)
+	0: $neutral-1,
+	1: $neutral-1,
+	2: $neutral-2,
+	3: $neutral-3,
+	4: $neutral-4,
+	5: $neutral-5,
+	6: $neutral-6,
+	7: $neutral-7,
+	8: $neutral-8,
+	9: $neutral-9,
+);
diff --git a/styles/colours/_orange.scss b/styles/colours/_orange.scss
index 222a6f7..2f342d5 100644
--- a/styles/colours/_orange.scss
+++ b/styles/colours/_orange.scss
@@ -9,13 +9,14 @@ $orange-8: oklch(90% 0.0718 45);
 $orange-9: oklch(97% 0.0201 45);
 
 $oranges: (
-	"1": $orange-1,
-	"2": $orange-2,
-	"3": $orange-3,
-	"4": $orange-4,
-	"5": $orange-5,
-	"6": $orange-6,
-	"7": $orange-7,
-	"8": $orange-8,
-	"9": $orange-9,
-	)
+	0: $orange-6,
+	1: $orange-1,
+	2: $orange-2,
+	3: $orange-3,
+	4: $orange-4,
+	5: $orange-5,
+	6: $orange-6,
+	7: $orange-7,
+	8: $orange-8,
+	9: $orange-9,
+);
diff --git a/styles/colours/_pink.scss b/styles/colours/_pink.scss
index 9712244..db1d6f3 100644
--- a/styles/colours/_pink.scss
+++ b/styles/colours/_pink.scss
@@ -9,13 +9,14 @@ $pink-8: oklch(90% 0.0816 350);
 $pink-9: oklch(97% 0.0228 350);
 
 $pinks: (
-	"1": $pink-1,
-	"2": $pink-2,
-	"3": $pink-3,
-	"4": $pink-4,
-	"5": $pink-5,
-	"6": $pink-6,
-	"7": $pink-7,
-	"8": $pink-8,
-	"9": $pink-9,
-	)
+	0: $pink-7,
+	1: $pink-1,
+	2: $pink-2,
+	3: $pink-3,
+	4: $pink-4,
+	5: $pink-5,
+	6: $pink-6,
+	7: $pink-7,
+	8: $pink-8,
+	9: $pink-9,
+);
diff --git a/styles/colours/_purple.scss b/styles/colours/_purple.scss
index 861041a..b91dc97 100644
--- a/styles/colours/_purple.scss
+++ b/styles/colours/_purple.scss
@@ -9,13 +9,14 @@ $purple-8: oklch(90% 0.0625 300);
 $purple-9: oklch(97% 0.0179 300);
 
 $purples: (
-	"1": $purple-1,
-	"2": $purple-2,
-	"3": $purple-3,
-	"4": $purple-4,
-	"5": $purple-5,
-	"6": $purple-6,
-	"7": $purple-7,
-	"8": $purple-8,
-	"9": $purple-9,
-	)
+	0: $purple-5,
+	1: $purple-1,
+	2: $purple-2,
+	3: $purple-3,
+	4: $purple-4,
+	5: $purple-5,
+	6: $purple-6,
+	7: $purple-7,
+	8: $purple-8,
+	9: $purple-9,
+);
diff --git a/styles/colours/_red.scss b/styles/colours/_red.scss
index 013082c..a72e0e4 100644
--- a/styles/colours/_red.scss
+++ b/styles/colours/_red.scss
@@ -9,13 +9,14 @@ $red-8: oklch(90% 0.0669 25);
 $red-9: oklch(97% 0.019 25);
 
 $reds: (
-	"1": $red-1,
-	"2": $red-2,
-	"3": $red-3,
-	"4": $red-4,
-	"5": $red-5,
-	"6": $red-6,
-	"7": $red-7,
-	"8": $red-8,
-	"9": $red-9,
-	)
+	0: $red-5,
+	1: $red-1,
+	2: $red-2,
+	3: $red-3,
+	4: $red-4,
+	5: $red-5,
+	6: $red-6,
+	7: $red-7,
+	8: $red-8,
+	9: $red-9,
+);
diff --git a/styles/colours/_yellow.scss b/styles/colours/_yellow.scss
index ed5de1f..26abad0 100644
--- a/styles/colours/_yellow.scss
+++ b/styles/colours/_yellow.scss
@@ -9,13 +9,14 @@ $yellow-8: oklch(90% 0.1164 80);
 $yellow-9: oklch(97% 0.0337 80);
 
 $yellows: (
-	"1": $yellow-1,
-	"2": $yellow-2,
-	"3": $yellow-3,
-	"4": $yellow-4,
-	"5": $yellow-5,
-	"6": $yellow-6,
-	"7": $yellow-7,
-	"8": $yellow-8,
-	"9": $yellow-9,
-	)
+	0: $yellow-7,
+	1: $yellow-1,
+	2: $yellow-2,
+	3: $yellow-3,
+	4: $yellow-4,
+	5: $yellow-5,
+	6: $yellow-6,
+	7: $yellow-7,
+	8: $yellow-8,
+	9: $yellow-9,
+);
diff --git a/styles/colours/index.scss b/styles/colours/index.scss
index 39cc186..b3f49e6 100644
--- a/styles/colours/index.scss
+++ b/styles/colours/index.scss
@@ -8,13 +8,24 @@
 @forward 'red';
 @forward 'yellow';
 
+@use 'blue' as *;
+@use 'cyan' as *;
+@use 'green' as *;
+@use 'neutral' as *;
+@use 'orange' as *;
+@use 'pink' as *;
+@use 'purple' as *;
+@use 'red' as *;
+@use 'yellow' as *;
+
 $colours: (
-	"red",
-	"orange",
-	"yellow",
-	"green",
-	"cyan",
-	"blue",
-	"purple",
-	"pink"
+	"neutral": $neutrals,
+	"red": $reds,
+	"orange": $oranges,
+	"yellow": $yellows,
+	"green": $greens,
+	"cyan": $cyans,
+	"blue": $blues,
+	"purple": $purples,
+	"pink": $pinks,
 );
diff --git a/styles/properties.scss b/styles/properties.scss
new file mode 100644
index 0000000..ab59391
--- /dev/null
+++ b/styles/properties.scss
@@ -0,0 +1,66 @@
+@use 'sass:map';
+@use './colours';
+@use './radius';
+@use './spacing';
+@use './typography';
+
+@mixin create_prop($name, $syntax: "*", $value, $inherits: false) {
+	@if $syntax !="*" {
+		$syntax: "<#{$syntax}>";
+	}
+
+	@property --#{$name} {
+		syntax: $syntax;
+		inherits: $inherits;
+		initial-value: $value
+	}
+}
+
+$_colours: (
+	"accent": colours.$neutrals
+);
+$_colours: map.merge(colours.$colours, $_colours);
+
+@each $colour, $values in $_colours {
+	@each $level, $value in $values {
+		@if ($level ==0) {
+			@include create_prop($colour, "color", $value, $colour =="accent");
+		}
+
+		@else {
+			@include create_prop("#{$colour}-#{$level}", "color", $value, $colour =="accent");
+		}
+	}
+}
+
+@each $level, $value in radius.$radius {
+	@include create_prop("radius-#{$level}", "length", $value);
+}
+
+@each $level, $value in spacing.$space {
+	@include create_prop("space-#{$level}", "length", $value);
+}
+
+@include create_prop("font-size", "*", typography.$font-size-3, true);
+
+@each $level, $value in typography.$font-size {
+	@include create_prop("font-size-#{$level}", "*", $value);
+}
+
+@include create_prop("font-weight", "number", typography.$font-weight-2, true);
+
+@each $level, $value in typography.$font-weight {
+	@include create_prop("font-weight-#{$level}", "number", $value);
+}
+
+@include create_prop("letter-spacing", "*", typography.$letter-spacing-3, true);
+
+@each $level, $value in typography.$letter-spacing {
+	@include create_prop("letter-spacing-#{$level}", "*", $value);
+}
+
+@include create_prop("letter-spacing", "*", typography.$line-height-1, true);
+
+@each $level, $value in typography.$line-height {
+	@include create_prop("line-height-#{$level}", "number", $value);
+}
diff --git a/styles/typography/_font-size.scss b/styles/typography/_font-size.scss
index 758a04b..47cb63b 100644
--- a/styles/typography/_font-size.scss
+++ b/styles/typography/_font-size.scss
@@ -10,3 +10,15 @@ $font-size-6: utils.convert_px_to_rem($space-8);
 $font-size-7: utils.convert_px_to_rem($space-9);
 $font-size-8: utils.convert_px_to_rem($space-10);
 $font-size-9: utils.convert_px_to_rem($space-12);
+
+$font-size: (
+	1: $font-size-1,
+	2: $font-size-2,
+	3: $font-size-3,
+	4: $font-size-4,
+	5: $font-size-5,
+	6: $font-size-6,
+	7: $font-size-7,
+	8: $font-size-8,
+	9: $font-size-9,
+);
diff --git a/styles/typography/_font-weight.scss b/styles/typography/_font-weight.scss
index 9d122e4..e282edc 100644
--- a/styles/typography/_font-weight.scss
+++ b/styles/typography/_font-weight.scss
@@ -2,3 +2,10 @@ $font-weight-1: 400;
 $font-weight-2: 500;
 $font-weight-3: 600;
 $font-weight-4: 700;
+
+$font-weight: (
+	1: $font-weight-1,
+	2: $font-weight-2,
+	3: $font-weight-3,
+	4: $font-weight-4,
+);
diff --git a/styles/typography/_letter-spacing.scss b/styles/typography/_letter-spacing.scss
index 15c0fdf..325708e 100644
--- a/styles/typography/_letter-spacing.scss
+++ b/styles/typography/_letter-spacing.scss
@@ -3,3 +3,11 @@ $letter-spacing-2: -0.02em;
 $letter-spacing-3: 0em;
 $letter-spacing-4: 0.02em;
 $letter-spacing-5: 0.04em;
+
+$letter-spacing: (
+	1: $letter-spacing-1,
+	2: $letter-spacing-2,
+	3: $letter-spacing-3,
+	4: $letter-spacing-4,
+	5: $letter-spacing-5,
+);
diff --git a/styles/typography/_line-height.scss b/styles/typography/_line-height.scss
index 240ef4a..ead0983 100644
--- a/styles/typography/_line-height.scss
+++ b/styles/typography/_line-height.scss
@@ -3,3 +3,11 @@ $line-height-2: 1.05;
 $line-height-3: 1.15;
 $line-height-4: 1.25;
 $line-height-5: 1.5;
+
+$line-height: (
+	1: $line-height-1,
+	2: $line-height-2,
+	3: $line-height-3,
+	4: $line-height-4,
+	5: $line-height-5,
+);