diff --git a/src/main.scss b/src/main.scss
new file mode 100644
index 0000000..34434c8
--- /dev/null
+++ b/src/main.scss
@@ -0,0 +1,10 @@
+@use 'tokens/breakpoint';
+@use 'tokens/button';
+@use 'tokens/color';
+@use 'tokens/container-color';
+@use 'tokens/font';
+@use 'tokens/input';
+@use 'tokens/radius';
+@use 'tokens/skin';
+@use 'tokens/spacing';
+@use 'tokens/transition';
diff --git a/src/tokens/breakpoint.scss b/src/tokens/breakpoint.scss
new file mode 100644
index 0000000..0036132
--- /dev/null
+++ b/src/tokens/breakpoint.scss
@@ -0,0 +1,14 @@
+// Not sure if these can actually be used - don't think you can use CSS variables in media queries. TODO
+
+:root {
+  --mobius-breakpoint-xs: 0;
+  --mobius-breakpoint-sm: 30rem; // 480px
+  --mobius-breakpoint-md: 37.5rem; // 600px
+  --mobius-breakpoint-lg: 48rem; // 768px
+  --mobius-breakpoint-xl: 64rem; // 1024px
+  --mobius-breakpoint-xxl: 80rem; // 1280px
+  --mobius-breakpoint-xxxl: 90rem; // 1440px
+  --mobius-breakpoint-tablet: var(--mobius-breakpoint-lg);
+  --mobius-breakpoint-desktop: var(--mobius-breakpoint-xl);
+  --mobius-breakpoint-max: var(--mobius-breakpoint-xxl);
+}
diff --git a/src/tokens/button.scss b/src/tokens/button.scss
new file mode 100644
index 0000000..3377b28
--- /dev/null
+++ b/src/tokens/button.scss
@@ -0,0 +1,120 @@
+:root {
+  --mobius-button-border-radius: calc(var(--mobius-spacing-thumb) / 2);
+  --mobius-button-border-width: 1px;
+
+  // DEFAULT
+  --mobius-button-background-default: var(--mobius-color-cloud);
+  --mobius-button-border-color-default: var(--mobius-color-forest-50);
+  --mobius-button-color-default: var(--mobius-color-forest);
+
+  --mobius-button-background-hover-default: var(--mobius-color-cloud-75);
+  --mobius-button-border-color-hover-default: var(--mobius-color-forest-50);
+  --mobius-button-color-hover-default: var(--mobius-color-forest-50);
+
+  --mobius-button-background-focus-default: var(--mobius-color-cloud);
+  --mobius-button-border-color-focus-default: var(--mobius-color-forest);
+  --mobius-button-color-focus-default: var(--mobius-color-forest);
+
+  --mobius-button-background-disabled-default: var(--mobius-color-cloud-75);
+  --mobius-button-border-color-disabled-default: var(--mobius-color-forest-25);
+  --mobius-button-color-disabled-default: var(--mobius-color-forest-50);
+
+  // PRIMARY
+  --mobius-button-background-primary: var(--mobius-color-lime);
+  --mobius-button-border-color-primary: var(--mobius-color-lime);
+  --mobius-button-color-primary: var(--mobius-color-forest);
+
+  --mobius-button-background-hover-primary: var(--mobius-color-lime-75);
+  --mobius-button-border-color-hover-primary: var(--mobius-color-lime-75);
+  --mobius-button-color-hover-primary: var(--mobius-color-forest-75);
+
+  --mobius-button-background-focus-primary: var(--mobius-color-lime);
+  --mobius-button-border-color-focus-primary: var(--mobius-color-forest);
+  --mobius-button-color-focus-primary: var(--mobius-color-forest);
+
+  --mobius-button-background-disabled-primary: var(--mobius-color-lime-25);
+  --mobius-button-border-color-disabled-primary: var(--mobius-color-lime-25);
+  --mobius-button-color-disabled-primary: var(--mobius-color-forest-50);
+
+  // SECONDARY
+  --mobius-button-background-secondary: var(--mobius-color-forest-75);
+  --mobius-button-border-color-secondary: var(--mobius-color-forest-75);
+  --mobius-button-color-secondary: var(--mobius-color-cloud);
+
+  --mobius-button-background-hover-secondary: var(--mobius-color-forest);
+  --mobius-button-border-color-hover-secondary: var(--mobius-color-forest);
+  --mobius-button-color-hover-secondary: var(--mobius-color-cloud);
+
+  --mobius-button-background-focus-secondary: var(--mobius-color-forest-75);
+  --mobius-button-border-color-focus-secondary: var(--mobius-color-forest);
+  --mobius-button-color-focus-secondary: var(--mobius-color-cloud);
+
+  --mobius-button-background-disabled-secondary: var(--mobius-color-forest-50);
+  --mobius-button-border-color-disabled-secondary: var(
+    --mobius-color-forest-50
+  );
+  --mobius-button-color-disabled-secondary: var(--mobius-color-cloud);
+
+  // POSITIVE
+  --mobius-button-background-positive: var(--mobius-color-lime);
+  --mobius-button-border-color-positive: var(--mobius-color-lime);
+  --mobius-button-color-positive: var(--mobius-color-forest);
+
+  --mobius-button-background-hover-positive: var(--mobius-color-lime-75);
+  --mobius-button-border-color-hover-positive: var(--mobius-color-lime-75);
+  --mobius-button-color-hover-positive: var(--mobius-color-forest-75);
+
+  --mobius-button-background-focus-positive: var(--mobius-color-lime);
+  --mobius-button-border-color-focus-positive: var(--mobius-color-forest);
+  --mobius-button-color-focus-positive: var(--mobius-color-forest);
+
+  --mobius-button-background-disabled-positive: var(--mobius-color-lime-25);
+  --mobius-button-border-color-disabled-positive: var(--mobius-color-lime-25);
+  --mobius-button-color-disabled-positive: var(--mobius-color-forest-50);
+
+  // NEGATIVE
+  --mobius-button-background-negative: var(--mobius-color-rose-75);
+  --mobius-button-border-color-negative: var(--mobius-color-rose-75);
+  --mobius-button-color-negative: var(--mobius-color-forest);
+
+  --mobius-button-background-hover-negative: var(--mobius-color-rose-50);
+  --mobius-button-border-color-hover-negative: var(--mobius-color-rose-50);
+  --mobius-button-color-hover-negative: var(--mobius-color-forest-75);
+
+  --mobius-button-background-focus-negative: var(--mobius-color-rose-75);
+  --mobius-button-border-color-focus-negative: var(--mobius-color-forest);
+  --mobius-button-color-focus-negative: var(--mobius-color-forest);
+
+  --mobius-button-background-disabled-negative: var(--mobius-color-rose-25);
+  --mobius-button-border-color-disabled-negative: var(--mobius-color-rose-25);
+  --mobius-button-color-disabled-negative: var(--mobius-color-forest-50);
+
+  // SET FALLBACK VALUES
+  --mobius-button-background: var(--mobius-button-background-default);
+  --mobius-button-border-color: var(--mobius-button-border-color-default);
+  --mobius-button-color: var(--mobius-button-color-default);
+
+  --mobius-button-background-hover: var(
+    --mobius-button-background-hover-default
+  );
+  --mobius-button-border-color-hover: var(
+    --mobius-button-border-color-hover-default
+  );
+  --mobius-button-color-hover: var(--mobius-button-color-hover-default);
+
+  --mobius-button-background-focus: var(
+    --mobius-button-background-focus-default
+  );
+  --mobius-button-border-color-focus: var(
+    --mobius-button-border-color-focus-default
+  );
+  --mobius-button-color-focus: var(--mobius-button-color-focus-default);
+
+  --mobius-button-background-disabled: var(
+    --mobius-button-background-disabled-default
+  );
+  --mobius-button-border-color-disabled: var(
+    --mobius-button-border-color-disabled-default
+  );
+  --mobius-button-color-disabled: var(--mobius-button-color-disabled-default);
+}
diff --git a/src/tokens/color.scss b/src/tokens/color.scss
new file mode 100644
index 0000000..f2dfecb
--- /dev/null
+++ b/src/tokens/color.scss
@@ -0,0 +1,67 @@
+:root {
+  --mobius-color-forest: #0b301a;
+  --mobius-color-forest-75: #486453;
+  --mobius-color-forest-50: #85978c;
+  --mobius-color-forest-25: #c2cbc6;
+
+  --mobius-color-earth: #a9ad94;
+  --mobius-color-earth-75: #bfc1ae;
+  --mobius-color-earth-50: #d4d6c9;
+  --mobius-color-earth-25: #e9ebe5;
+
+  --mobius-color-sand: #e8e0d6;
+  --mobius-color-sand-75: #eee8e0;
+  --mobius-color-sand-50: #f3efeb;
+  --mobius-color-sand-25: #f9f7f5;
+
+  --mobius-color-lime: #cbff89;
+  --mobius-color-lime-75: #d7ffa6;
+  --mobius-color-lime-50: #e5ffc3;
+  --mobius-color-lime-25: #f1ffdf;
+
+  --mobius-color-sky: #94b9fa;
+  --mobius-color-sky-75: #afccf9;
+  --mobius-color-sky-50: #c7ddff;
+  --mobius-color-sky-25: #e4edff;
+
+  --mobius-color-rose: #f33;
+  --mobius-color-rose-75: #ed706b;
+  --mobius-color-rose-50: #f19e9c;
+  --mobius-color-rose-25: #f7cecd;
+
+  --mobius-color-cloud: #fff;
+  --mobius-color-cloud-75: #ffffff75;
+  --mobius-color-coal: #000;
+  --mobius-color-steel: #7d8796;
+
+  --mobius-color-lemon: #ffe861;
+  --mobius-color-orange: #ffa345;
+  --mobius-color-lilac: #d1bdf5;
+  --mobius-color-violet: #6347e3;
+
+  // Aliases
+  --mobius-color-white: var(--mobius-color-cloud);
+  --mobius-color-black: var(--mobius-color-coal);
+
+  --mobius-color-body: var(--mobius-color-forest);
+  --mobius-color-body-muted: var(--mobius-color-forest-75);
+
+  --mobius-color-background: var(--mobius-color-earth-25);
+  --mobius-color-background-muted: var(--mobius-color-earth-50);
+
+  --mobius-color-accent: var(--mobius-color-lime);
+  --mobius-color-link: var(--mobius-color-forest-75);
+
+  --mobius-color-neutral: var(--mobius-color-sky);
+  --mobius-color-neutral-light: var(--mobius-color-sky-25);
+  --mobius-color-positive: var(--mobius-color-lime);
+  --mobius-color-positive-light: var(--mobius-color-lime-25);
+  --mobius-color-negative: var(--mobius-color-rose);
+  --mobius-color-negative-light: var(--mobius-color-rose-25);
+
+  --mobius-color-no-stream: var(--mobius-color-steel);
+  --mobius-color-dry-stream: var(--mobius-color-violet);
+  --mobius-color-residual-stream: var(--mobius-color-rose);
+  --mobius-color-food-stream: var(--mobius-color-lilac);
+  --mobius-color-garden-stream: var(--mobius-color-orange);
+}
diff --git a/src/tokens/container-color.scss b/src/tokens/container-color.scss
new file mode 100644
index 0000000..a6dd7cb
--- /dev/null
+++ b/src/tokens/container-color.scss
@@ -0,0 +1,25 @@
+:root {
+  --mobius-container-color-grey: #828282;
+  --mobius-container-color-black: #4f4f4f;
+  --mobius-container-color-grey-light: #bdbdbd;
+  --mobius-container-color-blue: #2d9cdb;
+  --mobius-container-color-blue-mid: #1579c6;
+  --mobius-container-color-blue-dark: #2262b9;
+  --mobius-container-color-blue-light: #56ccf2;
+  --mobius-container-color-blue-muted: #d7e7f5;
+  --mobius-container-color-green: #3cb848;
+  --mobius-container-color-green-dark: #219653;
+  --mobius-container-color-green-light: #6fcf97;
+  --mobius-container-color-cream: #e1d9c0;
+  --mobius-container-color-yellow: #f2c94c;
+  --mobius-container-color-white: #f4f7f9;
+  --mobius-container-color-red: #f24545;
+  --mobius-container-color-brown: #ad7849;
+  --mobius-container-color-orange: #f2994a;
+  --mobius-container-color-pink: #ff649e;
+  --mobius-container-color-magenta: #d12767;
+  --mobius-container-color-maroon: #a62f5a;
+  --mobius-container-color-purple: #9946db;
+  --mobius-container-color-duck-egg: #89c1ab;
+  --mobius-container-color-transparent: #fff0;
+}
diff --git a/src/tokens/font.scss b/src/tokens/font.scss
new file mode 100644
index 0000000..02db4dd
--- /dev/null
+++ b/src/tokens/font.scss
@@ -0,0 +1,33 @@
+// Need to get new fonts working and put in new default values. TODO
+:root {
+  --mobius-font-family: 'Open Sans', -apple-system, system-ui,
+    BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
+  --mobius-font-family-roboto: Roboto, Lato, -apple-system, system-ui,
+    BlinkMacSystemFont, Helvetica, Arial, sans-serif;
+  // What to use for fallback? TODO
+  --mobius-font-family-heading: 'Marr Sans Cond Web', 'Roboto Condensed', Impact,
+    sans-serif;
+
+  --mobius-font-line-height: 1.25;
+  --mobius-font-line-height-sm: 1.125;
+  --mobius-font-line-height-lg: 1.5;
+
+  --mobius-font-size-base: 1rem;
+  --mobius-font-size-xs: 0.75em;
+  --mobius-font-size-sm: 0.875em;
+  --mobius-font-size-md: 1.125em;
+  --mobius-font-size-lg: 1.25em;
+  --mobius-font-size-xl: 1.5em;
+
+  --mobius-font-size-h1: 2.25em;
+  --mobius-font-size-h2: var(--mobius-font-size-lg);
+  --mobius-font-size-h3: var(--mobius-font-size-md);
+  --mobius-font-size-h4: var(--mobius-font-size-base);
+  --mobius-font-size-h5: var(--mobius-font-size-sm);
+  --mobius-font-size-h6: var(--mobius-font-size-xs);
+
+  --mobius-font-weight-base: 400;
+  --mobius-font-weight-light: 300;
+  --mobius-font-weight-bold: 700;
+  --mobius-font-weight-black: 800;
+}
diff --git a/src/tokens/input.scss b/src/tokens/input.scss
new file mode 100644
index 0000000..8d7ccf6
--- /dev/null
+++ b/src/tokens/input.scss
@@ -0,0 +1,21 @@
+:root {
+  --mobius-input-background: var(--mobius-color-cloud);
+  --mobius-input-background-focus: var(--mobius-color-cloud);
+  --mobius-input-background-disabled: var(--mobius-color-earth-25);
+
+  --mobius-input-border: var(--mobius-color-forest-25);
+  --mobius-input-border-hover: var(--mobius-color-forest-50);
+  --mobius-input-border-focus: var(--mobius-color-forest-75);
+  --mobius-input-border-radius: var(--mobius-radius-sm);
+
+  --mobius-input-color: var(--mobius-color-forest);
+  --mobius-input-color-disabled: var(--mobius-color-forest-75);
+
+  --mobius-input-checked: var(--mobius-color-forest);
+  --mobius-input-checkradio-border-radius: var(--mobius-radius-sm);
+
+  --mobius-input-padding-vertical: var(--mobius-spacing-sm);
+  --mobius-input-padding-horizontal: var(--mobius-spacing-md);
+  --mobius-input-padding: var(--mobius-input-padding-vertical)
+    var(--mobius-input-padding-horizontal);
+}
diff --git a/src/tokens/radius.scss b/src/tokens/radius.scss
new file mode 100644
index 0000000..619b999
--- /dev/null
+++ b/src/tokens/radius.scss
@@ -0,0 +1,6 @@
+:root {
+  --mobius-radius-none: 0;
+  --mobius-radius-sm: 0.25rem;
+  --mobius-radius-md: 0.5rem;
+  --mobius-radius-lg: 1rem;
+}
diff --git a/src/tokens/skin.scss b/src/tokens/skin.scss
new file mode 100644
index 0000000..9d34502
--- /dev/null
+++ b/src/tokens/skin.scss
@@ -0,0 +1,91 @@
+:root {
+  // Have improvised the muted colours for now. Come back to. TODO
+  // Also link styles. ATM they are mostly all the same as text style
+  --mobius-skin-background-light: var(--mobius-color-cloud);
+  --mobius-skin-background-muted-light: var(--mobius-color-earth-25);
+  --mobius-skin-border-color-light: var(--mobius-color-forest-25);
+  --mobius-skin-color-light: var(--mobius-color-forest);
+  --mobius-skin-color-muted-light: var(--mobius-color-forest-75);
+  --mobius-skin-heading-color-light: var(--mobius-color-forest);
+  --mobius-skin-link-color-light: var(--mobius-color-forest);
+  --mobius-skin-link-color-hover-light: var(--mobius-color-forest-75);
+  --mobius-skin-link-color-focus-light: var(--mobius-color-forest);
+  --mobius-skin-link-text-decoration-light: none;
+  --mobius-skin-link-text-decoration-hover-light: underline;
+
+  --mobius-skin-background-dark: var(--mobius-color-forest);
+  --mobius-skin-background-muted-dark: var(--mobius-color-forest-75);
+  --mobius-skin-border-color-dark: var(--mobius-color-forest-75);
+  --mobius-skin-color-dark: var(--mobius-color-cloud);
+  --mobius-skin-color-muted-dark: var(--mobius-color-cloud);
+  --mobius-skin-heading-color-dark: var(--mobius-color-cloud);
+  --mobius-skin-link-color-dark: var(--mobius-color-cloud);
+  --mobius-skin-link-text-decoration-dark: underline;
+  --mobius-skin-link-text-decoration-hover-dark: underline;
+
+  --mobius-skin-background-info: var(--mobius-color-sky-25);
+  --mobius-skin-background-muted-info: var(--mobius-color-sky-25);
+  --mobius-skin-border-color-info: var(--mobius-color-sky-25);
+  --mobius-skin-color-info: var(--mobius-color-forest);
+  --mobius-skin-color-muted-info: var(--mobius-color-forest-75);
+  --mobius-skin-heading-color-info: var(--mobius-color-forest);
+  --mobius-skin-link-color-info: var(--mobius-color-forest);
+  --mobius-skin-link-text-decoration-info: none;
+  --mobius-skin-link-text-decoration-hover-info: underline;
+
+  --mobius-skin-background-neutral: var(--mobius-color-sky);
+  --mobius-skin-background-muted-neutral: var(--mobius-color-sky);
+  --mobius-skin-border-color-neutral: var(--mobius-color-sky);
+  --mobius-skin-color-neutral: var(--mobius-color-forest);
+  --mobius-skin-color-muted-neutral: var(--mobius-color-forest-75);
+  --mobius-skin-heading-color-neutral: var(--mobius-color-forest);
+  --mobius-skin-link-color-neutral: var(--mobius-color-forest);
+  --mobius-skin-link-text-decoration-neutral: underline;
+  --mobius-skin-link-text-decoration-hover-neutral: underline;
+
+  --mobius-skin-background-positive: var(--mobius-color-lime);
+  --mobius-skin-background-muted-positive: var(--mobius-color-lime-75);
+  --mobius-skin-border-color-positive: var(--mobius-color-lime);
+  --mobius-skin-color-positive: var(--mobius-color-forest);
+  --mobius-skin-color-muted-positive: var(--mobius-color-forest);
+  --mobius-skin-heading-color-positive: var(--mobius-color-forest);
+  --mobius-skin-link-color-positive: var(--mobius-color-forest);
+  --mobius-skin-link-text-decoration-positive: underline;
+  --mobius-skin-link-text-decoration-hover-positive: underline;
+
+  --mobius-skin-background-negative: var(--mobius-color-rose-75);
+  --mobius-skin-background-muted-negative: var(--mobius-color-rose-75);
+  --mobius-skin-border-color-negative: var(--mobius-color-rose-75);
+  --mobius-skin-color-negative: var(--mobius-color-forest);
+  --mobius-skin-color-muted-negative: var(--mobius-color-forest-75);
+  --mobius-skin-heading-color-negative: var(--mobius-color-forest);
+  --mobius-skin-link-color-negative: var(--mobius-color-forest);
+  --mobius-skin-link-text-decoration-negative: underline;
+  --mobius-skin-link-text-decoration-hover-negative: underline;
+
+  --mobius-skin-background-attention: var(--mobius-color-lime-25);
+  --mobius-skin-background-muted-attention: var(--mobius-color-lime-25);
+  --mobius-skin-border-color-attention: var(--mobius-color-lime-25);
+  --mobius-skin-color-attention: var(--mobius-color-forest);
+  --mobius-skin-color-muted-attention: var(--mobius-color-forest-75);
+  --mobius-skin-heading-color-attention: var(--mobius-color-forest);
+  --mobius-skin-link-color-attention: var(--mobius-color-forest);
+  --mobius-skin-linktext-decoration-attention: underline;
+  --mobius-skin-linktext-decoration-hover-attention: underline;
+
+  --mobius-skin-background: var(--mobius-skin-background-light);
+  --mobius-skin-background-muted: var(--mobius-skin-background-muted-light);
+  --mobius-skin-border-color: var(--mobius-skin-border-color-light);
+  --mobius-skin-color: var(--mobius-skin-color-light);
+  --mobius-skin-color-muted: var(--mobius-skin-color-muted-light);
+  --mobius-skin-heading-color: var(--mobius-skin-heading-color-light);
+  --mobius-skin-link-color: var(--mobius-skin-link-color-light);
+  --mobius-skin-link-color-hover: var(--mobius-skin-link-color-hover-light);
+  --mobius-skin-link-color-focus: var(--mobius-skin-link-color-focus-light);
+  --mobius-skin-link-text-decoration: var(
+    --mobius-skin-link-text-decoration-light
+  );
+  --mobius-skin-link-text-decoration-hover: var(
+    --mobius-skin-link-text-decoration-hover-light
+  );
+}
diff --git a/src/tokens/spacing.scss b/src/tokens/spacing.scss
new file mode 100644
index 0000000..9c36c9e
--- /dev/null
+++ b/src/tokens/spacing.scss
@@ -0,0 +1,32 @@
+:root {
+  --mobius-spacing-thumb: 2.75rem;
+
+  --mobius-spacing: 1rem;
+
+  // Should these be calced from --mobius-spacing? TODO
+  --mobius-spacing-4: 0.25rem;
+  --mobius-spacing-8: 0.5rem;
+  --mobius-spacing-12: 0.75rem;
+  --mobius-spacing-16: 1rem;
+  --mobius-spacing-24: 1.5rem;
+  --mobius-spacing-32: 2rem;
+  --mobius-spacing-48: 3rem;
+  --mobius-spacing-64: 4rem;
+  --mobius-spacing-96: 6rem;
+  --mobius-spacing-128: 8rem;
+
+  --mobius-spacing-md: var(--mobius-spacing-16);
+  --mobius-spacing-lg: var(--mobius-spacing-32);
+  --mobius-spacing-sm: var(--mobius-spacing-8);
+  --mobius-spacing-xl: var(--mobius-spacing-64);
+  --mobius-spacing-xs: var(--mobius-spacing-4);
+
+  --mobius-spacing-fluid: 5%;
+  --mobius-spacing-fluid-lg: calc(var(--mobius-spacing-fluid) * 1.5);
+  --mobius-spacing-fluid-sm: calc(var(--mobius-spacing-fluid) * 0.5);
+
+  --mobius-spacing-root: 5vw;
+  --mobius-spacing-root-lg: calc(var(--mobius-spacing-root) * 1.5);
+  --mobius-spacing-root-sm: calc(var(--mobius-spacing-root) * 0.5);
+  --mobius-spacing-root-xl: calc(var(--mobius-spacing-root) * 2.25);
+}
diff --git a/src/tokens/transition.scss b/src/tokens/transition.scss
new file mode 100644
index 0000000..6d69ba8
--- /dev/null
+++ b/src/tokens/transition.scss
@@ -0,0 +1,10 @@
+:root {
+  --mobius-transition-duration: 0.2s;
+  --mobius-transition-timing: ease-in-out;
+
+  --mobius-transition: var(--mobius-transition-duration)
+    var(--mobius-transition-timing);
+
+  --mobius-transition-duration-boing: 0.3s;
+  --mobius-transition-timing-boing: cubic-bezier(0.84, 0.05, 0.46, 1.78);
+}