diff --git a/design-tokens/_design-tokens.yml b/design-tokens/_design-tokens.yml
new file mode 100644
index 0000000..8ff4eef
--- /dev/null
+++ b/design-tokens/_design-tokens.yml
@@ -0,0 +1,51 @@
+color:
+    white:         '#fff'
+    black:         '#141414'
+    pink:          '#ff4092'
+    purple:        '#7b1173'
+    violet:        '#e000cf'
+
+    grey:          '#41474e'
+    grey-light:    '#8b98a9'
+    grey-dark:     '#303030'
+    grey-lighter:  '#e2e2e2'
+
+    green:         '#5fb359'
+    red:           '#d80606'
+    orange:        '#b35f36'
+    yellow:        '#eac146'
+
+    gradient:       linear-gradient(to right bottom, $brand-purple, $brand-pink)
+
+font:
+    family:
+        base:      "'Sharp Sans Medium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
+        title:     "'Sharp Sans Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
+        button:    "'Sharp Sans Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
+
+    size:
+        root:  15px
+        base:  &font-size-base 1rem
+        large: 1.25rem
+        small: .85rem
+        mini:  .65rem
+        text:  *font-size-base
+        label: *font-size-base
+        title: 1.4rem
+        h1:    3.4rem
+        h2:    2.7rem
+        h3:    2rem
+        h4:    1.5rem
+        h5:    1.125rem
+    
+    weight:
+        base:  500
+
+spacer:       2rem
+page-frame:   .75rem
+
+break-point:
+    small:    640px
+    large:    1140px
+
+brand-border-width:    1px
diff --git a/design-tokens/generate.js b/design-tokens/generate.js
new file mode 100644
index 0000000..994e5de
--- /dev/null
+++ b/design-tokens/generate.js
@@ -0,0 +1,23 @@
+const fs = require('fs')
+const theo = require('theo')
+
+theo
+  .convert({
+    transform: {
+      type: 'web',
+      file: './_design-tokens.yml'
+    },
+    format: {
+      type: 'scss'
+    }
+  })
+  .then(scss => {
+    console.log(scss)
+    // fs.writeFile('./design-tokens.scss', scss, (err) => {
+    //     if(err) {
+    //         return console.log(err)
+    //     }
+    //     console.log('The file was saved!')
+    // })
+  })
+  .catch(error => console.log(`Something went wrong: ${error}`))
diff --git a/package.json b/package.json
index f042225..84f09ed 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   },
   "homepage": "https://oceanprotocol.com",
   "devDependencies": {
-    "release-it": "^7.4.6"
+    "release-it": "^7.4.6",
+    "theo": "^7.0.1"
   }
 }