diff --git a/cypress/integration/tokens.spec.js b/cypress/integration/tokens.spec.js
index 765859d9f..41e27572b 100644
--- a/cypress/integration/tokens.spec.js
+++ b/cypress/integration/tokens.spec.js
@@ -38,26 +38,21 @@ describe('TokenListing', () => {
         cy.receiveTokenValues({
             version: '5',
             values: {
-                options: [
-                    {
-                        name: 'sizing.xs',
-                        value: 4,
-                    },
-                ],
+                options: [],
             },
         });
         cy.receiveStorageTypeLocal();
         cy.get('[data-cy=tokenlisting-sizing] [data-cy=button-add-new-token]').click({timeout: 1000});
         fillTokenForm({
-            name: 'sizing.xs',
+            name: 'sizing.sm',
             value: '4',
         });
         cy.get('@postMessage').should('be.calledTwice');
         receiveRemoteComponents();
         cy.get('[data-cy=tokenlisting-sizing] [data-cy=button-add-new-token]').click({timeout: 1000});
         fillTokenForm({
-            name: 'sizing.sm',
-            value: '$sizing.xs * 2',
+            name: 'sizing.md',
+            value: '$sizing.sm * 2',
         });
     });
 
diff --git a/file.json b/file.json
new file mode 100644
index 000000000..82bf92378
--- /dev/null
+++ b/file.json
@@ -0,0 +1,709 @@
+{
+  "sizing": {
+    "base": {
+      "value": 4,
+      "description": "Alias value",
+      "type": "sizing"
+    },
+    "default": {
+      "value": 8,
+      "description": "Math value",
+      "type": "sizing"
+    }
+  },
+  "Light-Theme-Colorscale": {
+    "Gray": {
+      "00": {
+        "value": "#FAFBFC",
+        "description": "Gray 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#EAEEF2",
+        "description": "Gray 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#D4DAE0",
+        "description": "Gray 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#B7BFC7",
+        "description": "Gray 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#949DA7",
+        "description": "Gray 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#707A84",
+        "description": "Gray 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#57606A",
+        "description": "Gray 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#424A53",
+        "description": "Gray 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#32383F",
+        "description": "Gray 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#24292F",
+        "description": "Gray 09",
+        "type": "color"
+      },
+      "Black": {
+        "value": "#1B1F24",
+        "description": "Gray 10 or Black",
+        "type": "color"
+      }
+    },
+    "Coral": {
+      "00": {
+        "value": "#FFF0EB",
+        "description": "Coral 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#FFD6CC",
+        "description": "Coral 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#FFB4A1",
+        "description": "Coral 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#FD8C73",
+        "description": "Coral 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#EC6547",
+        "description": "Coral 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#C4432B",
+        "description": "Coral 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#9E2F1C",
+        "description": "Coral 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#801F0F",
+        "description": "Coral 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#691105",
+        "description": "Coral 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#510901",
+        "description": "Coral 09",
+        "type": "color"
+      }
+    },
+    "Blue": {
+      "00": {
+        "value": "#E4F6FF",
+        "description": "Blue 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#BCE5FF",
+        "description": "Blue 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#89CDFF",
+        "description": "Blue 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#58B1FF",
+        "description": "Blue 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#298FFF",
+        "description": "Blue 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#096BDE",
+        "description": "Blue 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#0552B2",
+        "description": "Blue 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#033F8F",
+        "description": "Blue 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#0B326D",
+        "description": "Blue 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#052455",
+        "description": "Blue 09",
+        "type": "color"
+      }
+    },
+    "Pink": {
+      "00": {
+        "value": "#FFEFF7",
+        "description": "Pink 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#FFD3EB",
+        "description": "Pink 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#FFADDA",
+        "description": "Pink 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#FF80C8",
+        "description": "Pink 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#E85AAD",
+        "description": "Pink 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#BF3989",
+        "description": "Pink 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#99286E",
+        "description": "Pink 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#772057",
+        "description": "Pink 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#611347",
+        "description": "Pink 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#4D0336",
+        "description": "Pink 09",
+        "type": "color"
+      }
+    },
+    "Orange": {
+      "00": {
+        "value": "#FFF1E5",
+        "description": "Orange 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#FFD8B5",
+        "description": "Orange 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#FFB77C",
+        "description": "Orange 2",
+        "type": "color"
+      },
+      "03": {
+        "value": "#FB8F44",
+        "description": "Orange 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#E16F24",
+        "description": "Orange 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#BC4C00",
+        "description": "Orange 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#953800",
+        "description": "Orange 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#762C00",
+        "description": "Orange 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#5C2200",
+        "description": "Orange 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#471700",
+        "description": "Orange 09",
+        "type": "color"
+      }
+    },
+    "Red": {
+      "00": {
+        "value": "#FFEFEE",
+        "description": "Red 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#FFD5D3",
+        "description": "Red 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#FFB2B0",
+        "description": "Red 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#FF8987",
+        "description": "Red 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#FB5254",
+        "description": "Red 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#D42A32",
+        "description": "Red 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#A81C26",
+        "description": "Red 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#84161F",
+        "description": "Red 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#691019",
+        "description": "Red 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#52040F",
+        "description": "Red 09",
+        "type": "color"
+      }
+    },
+    "Indigo": {
+      "00": {
+        "value": "#EFF2FF",
+        "description": "Indigo 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#D7DDFF",
+        "description": "Indigo 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#B9C2FF",
+        "description": "Indigo 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#9AA4FF",
+        "description": "Indigo 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#7683FF",
+        "description": "Indigo 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#545DF0",
+        "description": "Indigo 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#3C42D0",
+        "description": "Indigo 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#2C33A5",
+        "description": "Indigo 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#22297F",
+        "description": "Indigo 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#191F5C",
+        "description": "Indigo 09",
+        "type": "color"
+      }
+    },
+    "Purple": {
+      "00": {
+        "value": "#FBEFFF",
+        "description": "Purple 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#ECD8FF",
+        "description": "Purple 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#D8B9FF",
+        "description": "Purple 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#C297FF",
+        "description": "Purple 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#A475F9",
+        "description": "Purple 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#8250DF",
+        "description": "Purple 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#6639BA",
+        "description": "Purple 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#512A97",
+        "description": "Purple 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#3E1F79",
+        "description": "Purple 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#2E1461",
+        "description": "Purple 09",
+        "type": "color"
+      }
+    },
+    "Green": {
+      "00": {
+        "value": "#DAFBE1",
+        "description": "Green 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#ACEEBB",
+        "description": "Green 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#6FDD8B",
+        "description": "Green 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#4AC26B",
+        "description": "Green 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#2DA44E",
+        "description": "Green 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#1A7F37",
+        "description": "Green 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#116329",
+        "description": "Green 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#044F1E",
+        "description": "Green 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#003D16",
+        "description": "Green 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#002D11",
+        "description": "Green 09",
+        "type": "color"
+      }
+    },
+    "Yellow": {
+      "00": {
+        "value": "#FCF4CA",
+        "description": "Yellow 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#F6DE7C",
+        "description": "Yellow 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#E6C24A",
+        "description": "Yellow 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#D2A52D",
+        "description": "Yellow 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#BB8400",
+        "description": "Yellow 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#976500",
+        "description": "Yellow 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#7A4C00",
+        "description": "Yellow 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#613B01",
+        "description": "Yellow 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#4D2D00",
+        "description": "Yellow 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#382103",
+        "description": "Yellow 09",
+        "type": "color"
+      }
+    },
+    "Lemon": {
+      "00": {
+        "value": "#FDF5B3",
+        "description": "Lemon 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#F4E162",
+        "description": "Lemon 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#DEC741",
+        "description": "Lemon 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#C5AA20",
+        "description": "Lemon 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#A88D02",
+        "description": "Lemon 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#866D00",
+        "description": "Lemon 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#685400",
+        "description": "Lemon 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#534100",
+        "description": "Lemon 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#413200",
+        "description": "Lemon 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#322400",
+        "description": "Lemon 09",
+        "type": "color"
+      }
+    },
+    "Lime": {
+      "00": {
+        "value": "#EAFABA",
+        "description": "Lime 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#CDEC78",
+        "description": "Lime 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#B1D353",
+        "description": "Lime 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#94B83B",
+        "description": "Lime 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#799A2A",
+        "description": "Lime 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#5A791B",
+        "description": "Lime 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#425E13",
+        "description": "Lime 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#2F4A06",
+        "description": "Lime 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#233B03",
+        "description": "Lime 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#182C01",
+        "description": "Lime 09",
+        "type": "color"
+      }
+    },
+    "Teal": {
+      "00": {
+        "value": "#DAF9F5",
+        "description": "Teal 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#B0EAE3",
+        "description": "Teal 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#6BD6D0",
+        "description": "Teal 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#49BCB7",
+        "description": "Teal 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#339D9B",
+        "description": "Teal 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#197B7B",
+        "description": "Teal 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#136061",
+        "description": "Teal 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#024B4D",
+        "description": "Teal 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#063A3C",
+        "description": "Teal 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#052B2C",
+        "description": "Teal 09",
+        "type": "color"
+      }
+    }
+  },
+  "colors": {
+    "Background": {
+      "value": "#FAFBFC",
+      "description": "Alias value",
+      "type": "color"
+    },
+    "Background50": {
+      "value": "#fafbfc80",
+      "description": "Nested color value",
+      "type": "color"
+    }
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index ea877781c..63e3e47a3 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "figma-tokens",
 	"version": "1.0.0",
-	"plugin_version": "66",
+	"plugin_version": "66.1",
 	"description": "Figma Tokens",
 	"license": "ISC",
 	"scripts": {
@@ -21,7 +21,8 @@
 		"serve": "serve dist"
 	},
 	"dependencies": {
-		"@figma-plugin/helpers": "^0.13.2",
+		"@figma-plugin/helpers": "^0.15.2",
+		"@octokit/rest": "^18.9.0",
 		"@radix-ui/react-checkbox": "^0.0.16",
 		"@radix-ui/react-context-menu": "^0.0.23",
 		"@radix-ui/react-dropdown-menu": "^0.0.19",
@@ -34,6 +35,7 @@
 		"@stitches/react": "^0.1.9",
 		"autoprefixer": "^10.2.5",
 		"axios": "^0.21.2",
+		"color2k": "^1.2.4",
 		"core-js": "^3.9.1",
 		"cypress-react-selector": "^2.3.6",
 		"dnd-core": "^12.0.1",
@@ -43,9 +45,11 @@
 		"figma-plugin-ds": "^0.1.8",
 		"file-loader": "^6.2.0",
 		"ignore-styles": "^5.0.1",
+		"json5": "^2.2.0",
 		"lodash.isequal": "^4.5.0",
 		"mixpanel-figma": "^2.0.1",
 		"object-path": "^0.11.8",
+		"octokit-commit-multiple-files": "^3.2.1",
 		"postcss": "^8.2.10",
 		"react": "17.0.0",
 		"react-dnd": "^13.1.1",
diff --git a/src/app/components/App.tsx b/src/app/components/App.tsx
index 3cfadfb69..61b6804b1 100644
--- a/src/app/components/App.tsx
+++ b/src/app/components/App.tsx
@@ -14,12 +14,14 @@ import Changelog from './Changelog';
 import ImportedTokensDialog from './ImportedTokensDialog';
 import {RootState} from '../store';
 import ConfirmDialog from './ConfirmDialog';
+import PushDialog from './PushDialog';
+import WindowResizer from './WindowResizer';
 
 const App = () => {
     const activeTab = useSelector((state: RootState) => state.uiState.activeTab);
 
     return (
-        <>
+        <div className="content">
             <Initiator />
             <LoadingBar />
             <div className="h-full flex flex-col">
@@ -36,8 +38,10 @@ const App = () => {
                 <Changelog />
                 <ImportedTokensDialog />
                 <ConfirmDialog />
+                <PushDialog />
+                <WindowResizer />
             </div>
-        </>
+        </div>
     );
 };
 
diff --git a/src/app/components/BrokenReferenceIndicator.tsx b/src/app/components/BrokenReferenceIndicator.tsx
new file mode 100644
index 000000000..4e573887c
--- /dev/null
+++ b/src/app/components/BrokenReferenceIndicator.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import {styled} from '@/stitches.config';
+import IconBrokenLink from './icons/IconBrokenLink';
+
+const StyledIndicator = styled('div', {
+    position: 'absolute',
+    top: '3px',
+    right: '3px',
+    borderRadius: '100%',
+    border: '1px solid $white',
+    background: '$dangerFg',
+    width: '6px',
+    height: '6px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+});
+
+export default function BrokenReferenceIndicator({token, resolvedTokens}) {
+    const failedToResolve = React.useMemo(() => {
+        return resolvedTokens.find((t) => t.name === token.name).failedToResolve;
+    }, [token, resolvedTokens]);
+
+    if (failedToResolve) {
+        return (
+            <StyledIndicator>
+                <IconBrokenLink />
+            </StyledIndicator>
+        );
+    }
+    return null;
+}
diff --git a/src/app/components/EditTokenForm.tsx b/src/app/components/EditTokenForm.tsx
index 69b946a0c..ecf062d13 100644
--- a/src/app/components/EditTokenForm.tsx
+++ b/src/app/components/EditTokenForm.tsx
@@ -1,20 +1,35 @@
+import getAliasValue from '@/utils/aliases';
 import {track} from '@/utils/analytics';
+import checkIfContainsAlias from '@/utils/checkIfContainsAlias';
 import * as React from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import {Dispatch, RootState} from '../store';
 import useManageTokens from '../store/useManageTokens';
 import Input from './Input';
 
-const EditTokenForm = () => {
+const EditTokenForm = ({resolvedTokens}) => {
     const {activeTokenSet} = useSelector((state: RootState) => state.tokenState);
     const {editSingleToken, createSingleToken} = useManageTokens();
     const {editToken} = useSelector((state: RootState) => state.uiState);
     const dispatch = useDispatch<Dispatch>();
     const [currentEditToken, setCurrentEditToken] = React.useState(editToken);
+    const [error, setError] = React.useState(null);
 
-    const isValid = currentEditToken.value && currentEditToken.name.match(/^\S*$/);
+    const isValid = currentEditToken.value && currentEditToken.name.match(/^\S*$/) && !error;
+
+    const hasNameThatExistsAlready = resolvedTokens
+        .filter((t) => t.internal__Parent === activeTokenSet)
+        .find((t) => t.name === currentEditToken.name);
+    const nameWasChanged = currentEditToken?.initialName !== currentEditToken.name;
+
+    React.useEffect(() => {
+        if ((currentEditToken.isPristine || nameWasChanged) && hasNameThatExistsAlready) {
+            setError('Token names must be unique');
+        }
+    }, [currentEditToken, hasNameThatExistsAlready, nameWasChanged]);
 
     const handleChange = (e) => {
+        setError(null);
         e.persist();
         setCurrentEditToken({...currentEditToken, [e.target.name]: e.target.value});
     };
@@ -84,6 +99,12 @@ const EditTokenForm = () => {
         }, 50);
     }, []);
 
+    const resolvedValue = React.useMemo(() => {
+        return typeof currentEditToken.value === 'object'
+            ? null
+            : getAliasValue(currentEditToken.value, resolvedTokens);
+    }, [currentEditToken, resolvedTokens]);
+
     return (
         <form onSubmit={handleSubmit} className="space-y-4 flex flex-col justify-start">
             <Input
@@ -95,6 +116,8 @@ const EditTokenForm = () => {
                 type="text"
                 name="name"
                 inputRef={firstInput}
+                error={error}
+                placeholder="Unique name"
             />
             {typeof currentEditToken.schema === 'object' ? (
                 Object.entries(currentEditToken.schema).map(([key, schemaValue]: [string, string]) => (
@@ -111,16 +134,34 @@ const EditTokenForm = () => {
                     />
                 ))
             ) : (
-                <Input
-                    full
-                    label={currentEditToken.property}
-                    value={currentEditToken.value}
-                    onChange={handleChange}
-                    type="text"
-                    name="value"
-                    required
-                    custom={currentEditToken.schema}
-                />
+                <div>
+                    <Input
+                        full
+                        label={currentEditToken.property}
+                        value={currentEditToken.value}
+                        onChange={handleChange}
+                        type="text"
+                        name="value"
+                        required
+                        custom={currentEditToken.schema}
+                        placeholder={
+                            currentEditToken.type === 'color'
+                                ? '#000000, hsla(), rgba() or {alias}'
+                                : 'Value or {alias}'
+                        }
+                    />
+                    {checkIfContainsAlias(currentEditToken.value) && (
+                        <div className="p-2 rounded bg-gray-100 border-gray-300 font-mono text-xxs mt-2 text-gray-700 flex itms-center">
+                            {currentEditToken.type === 'color' ? (
+                                <div
+                                    className="w-4 h-4 rounded border border-gray-200 mr-1"
+                                    style={{background: resolvedValue}}
+                                />
+                            ) : null}
+                            {resolvedValue}
+                        </div>
+                    )}
+                </div>
             )}
             {currentEditToken.explainer && (
                 <div className="mt-1 text-xxs text-gray-600">{currentEditToken.explainer}</div>
@@ -136,6 +177,7 @@ const EditTokenForm = () => {
                           type="text"
                           name={key}
                           custom={schemaValue}
+                          capitalize
                       />
                   ))
                 : null}
diff --git a/src/app/components/EditTokenFormModal.tsx b/src/app/components/EditTokenFormModal.tsx
index 2b98e5655..8d98bfcdf 100644
--- a/src/app/components/EditTokenFormModal.tsx
+++ b/src/app/components/EditTokenFormModal.tsx
@@ -4,7 +4,7 @@ import {Dispatch, RootState} from '../store';
 import EditTokenForm from './EditTokenForm';
 import Modal from './Modal';
 
-const EditTokenFormModal = () => {
+const EditTokenFormModal = ({resolvedTokens}) => {
     const {editToken} = useSelector((state: RootState) => state.uiState);
     const dispatch = useDispatch<Dispatch>();
 
@@ -13,8 +13,14 @@ const EditTokenFormModal = () => {
     };
 
     return (
-        <Modal large isOpen close={handleReset} title={editToken.isPristine ? `New Token` : editToken.initialName}>
-            <EditTokenForm />
+        <Modal
+            compact
+            large
+            isOpen
+            close={handleReset}
+            title={editToken.isPristine ? `New Token` : editToken.initialName}
+        >
+            <EditTokenForm resolvedTokens={resolvedTokens} />
         </Modal>
     );
 };
diff --git a/src/app/components/Input.tsx b/src/app/components/Input.tsx
index fcdfaaca5..98b765407 100644
--- a/src/app/components/Input.tsx
+++ b/src/app/components/Input.tsx
@@ -13,14 +13,16 @@ const Input = ({
     custom = '',
     inputRef = null,
     placeholder = '',
+    capitalize = false,
 }) => {
     return (
         <label htmlFor={name} className="text-xxs font-medium block">
-            <div className="flex items-center justify-between">
-                {label ? <div>{label}</div> : null}
+            <div className="flex items-center justify-between mb-1">
+                {label ? <div className={capitalize ? 'capitalize' : null}>{label}</div> : null}
                 {error ? <div className="text-red-500 font-bold">{error}</div> : null}
             </div>
             <input
+                spellCheck={false}
                 tabIndex={tabindex}
                 type={type}
                 value={value}
diff --git a/src/app/components/JSONEditor.tsx b/src/app/components/JSONEditor.tsx
index 16e2eb90c..93ab04314 100644
--- a/src/app/components/JSONEditor.tsx
+++ b/src/app/components/JSONEditor.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import parseTokenValues from '@/utils/parseTokenValues';
 import {track} from '@/utils/analytics';
+import parseJson from '@/utils/parseJson';
 import Textarea from './Textarea';
 import Button from './Button';
 import TokenSetSelector from './TokenSetSelector';
@@ -18,7 +19,6 @@ const JSONEditor = () => {
     const {getStringTokens} = useTokens();
     const {confirm} = useConfirm();
 
-    const [confirmModalVisible, showConfirmModal] = React.useState('');
     const [exportModalVisible, showExportModal] = React.useState(false);
     const [presetModalVisible, showPresetModal] = React.useState(false);
     const [error, setError] = React.useState(null);
@@ -48,11 +48,10 @@ const JSONEditor = () => {
     const changeTokens = (val) => {
         setError(null);
         try {
-            const parsedTokens = JSON.parse(val);
+            const parsedTokens = parseJson(val);
             parseTokenValues(parsedTokens);
         } catch (e) {
-            console.log('Error parsing tokens', e);
-            setError('Unable to read JSON');
+            setError(`Unable to read JSON: ${JSON.stringify(e)}`);
         }
         setStringTokens(val);
     };
diff --git a/src/app/components/Modal.tsx b/src/app/components/Modal.tsx
index 34f27738c..38828b0d2 100644
--- a/src/app/components/Modal.tsx
+++ b/src/app/components/Modal.tsx
@@ -10,7 +10,7 @@ const customStyles = (large) => ({
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        padding: '2rem',
+        padding: '1rem',
         zIndex: '1',
     },
     content: {
@@ -36,45 +36,65 @@ const Modal = ({
     close,
     children,
     showClose = false,
+    compact = false,
 }: {
     id?: string;
     title?: string;
     full?: boolean;
     large?: boolean;
+    compact?: boolean;
     isOpen: boolean;
     close: Function;
     children: React.ReactNode;
     showClose?: boolean;
-}) => (
-    <ReactModal isOpen={isOpen} onRequestClose={close} style={customStyles(large)} contentLabel={title || null}>
-        {(showClose || title) && (
-            <div className="flex flex-row justify-between items-center">
-                {title && (
-                    <div className="pl-4">
-                        <Heading size="small">{title}</Heading>
-                    </div>
-                )}
-                <button
-                    type="button"
-                    onClick={() => close()}
-                    className="p-4 hover:bg-gray-100 rounded focus:outline-none"
-                >
-                    <svg className="svg" width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-                        <path
-                            d="M6 5.293l4.789-4.79.707.708-4.79 4.79 4.79 4.789-.707.707-4.79-4.79-4.789 4.79-.707-.707L5.293 6 .502 1.211 1.21.504 6 5.294z"
-                            fillRule="nonzero"
-                            fillOpacity="1"
-                            fill="#000"
-                            stroke="none"
-                        />
-                    </svg>
-                </button>
+}) => {
+    const paddingClass = () => {
+        if (compact) {
+            return 'p-4';
+        }
+        if (full) {
+            return 'p-0';
+        }
+        return 'p-8';
+    };
+
+    return (
+        <ReactModal isOpen={isOpen} onRequestClose={close} style={customStyles(large)} contentLabel={title || null}>
+            {(showClose || title) && (
+                <div className="flex flex-row justify-between items-center">
+                    {title && (
+                        <div className="pl-4">
+                            <Heading size="small">{title}</Heading>
+                        </div>
+                    )}
+                    <button
+                        type="button"
+                        onClick={() => close()}
+                        className="p-4 hover:bg-gray-100 rounded focus:outline-none"
+                    >
+                        <svg
+                            className="svg"
+                            width="12"
+                            height="12"
+                            viewBox="0 0 12 12"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                d="M6 5.293l4.789-4.79.707.708-4.79 4.79 4.79 4.789-.707.707-4.79-4.79-4.789 4.79-.707-.707L5.293 6 .502 1.211 1.21.504 6 5.294z"
+                                fillRule="nonzero"
+                                fillOpacity="1"
+                                fill="#000"
+                                stroke="none"
+                            />
+                        </svg>
+                    </button>
+                </div>
+            )}
+            <div data-cy={id} className={`relative ${paddingClass()}`}>
+                {children}
             </div>
-        )}
-        <div data-cy={id} className={`relative ${full ? 'p-0' : 'p-8'}`}>
-            {children}
-        </div>
-    </ReactModal>
-);
+        </ReactModal>
+    );
+};
 
 export default Modal;
diff --git a/src/app/components/MoreButton.tsx b/src/app/components/MoreButton.tsx
index b57e54303..35ae29c83 100644
--- a/src/app/components/MoreButton.tsx
+++ b/src/app/components/MoreButton.tsx
@@ -22,7 +22,7 @@ const RightSlot = styled('div', {
     '[data-disabled] &': {color: '$disabled'},
 });
 
-const MoreButton = ({properties, children, path, value, onClick, onEdit, onDelete}) => {
+const MoreButton = ({properties, children, path, value, onClick, onEdit, onDelete, onDuplicate}) => {
     const {selectionValues} = useSelector((state: RootState) => state.uiState);
     const {editProhibited} = useSelector((state: RootState) => state.tokenState);
 
@@ -52,9 +52,11 @@ const MoreButton = ({properties, children, path, value, onClick, onEdit, onDelet
     const visibleProperties = properties.filter((p) => p.label);
 
     return (
-        <div className="w-full">
+        <>
             <ContextMenu>
-                <ContextMenuTrigger id={`${path}-${value}`}>{children}</ContextMenuTrigger>
+                <ContextMenuTrigger as="div" id={`${path}-${value}`}>
+                    {children}
+                </ContextMenuTrigger>
                 <ContextMenuContent sideOffset={5} align="end" collisionTolerance={30}>
                     {visibleProperties.map((property) => {
                         const isActive = selectionValues[property.name] === value;
@@ -99,12 +101,15 @@ const MoreButton = ({properties, children, path, value, onClick, onEdit, onDelet
                     <ContextMenuItem onSelect={onEdit} disabled={editProhibited}>
                         Edit Token
                     </ContextMenuItem>
+                    <ContextMenuItem onSelect={onDuplicate} disabled={editProhibited}>
+                        Duplicate Token
+                    </ContextMenuItem>
                     <ContextMenuItem onSelect={onDelete} disabled={editProhibited}>
                         Delete Token
                     </ContextMenuItem>
                 </ContextMenuContent>
             </ContextMenu>
-        </div>
+        </>
     );
 };
 
diff --git a/src/app/components/Navbar.tsx b/src/app/components/Navbar.tsx
index d99a75a0a..cdef3ef13 100644
--- a/src/app/components/Navbar.tsx
+++ b/src/app/components/Navbar.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import {track} from '@/utils/analytics';
 import {MagnifyingGlassIcon} from '@radix-ui/react-icons';
+import convertTokensToObject from '@/utils/convertTokensToObject';
 import Icon from './Icon';
 import Tooltip from './Tooltip';
 import useRemoteTokens from '../store/remoteTokens';
@@ -36,8 +37,10 @@ const transformProviderName = (provider) => {
     switch (provider) {
         case StorageProviderType.JSONBIN:
             return 'JSONBin.io';
-        case StorageProviderType.ARCADE:
-            return 'Arcade';
+        case StorageProviderType.GITHUB:
+            return 'GitHub';
+        case StorageProviderType.URL:
+            return 'URL';
         default:
             return provider;
     }
@@ -45,8 +48,15 @@ const transformProviderName = (provider) => {
 
 const Navbar = () => {
     const {projectURL, storageType} = useSelector((state: RootState) => state.uiState);
+    const {lastSyncedState, tokens, editProhibited} = useSelector((state: RootState) => state.tokenState);
     const {toggleFilterVisibility} = useDispatch<Dispatch>().uiState;
-    const {pullTokens} = useRemoteTokens();
+    const {pullTokens, pushTokens} = useRemoteTokens();
+
+    const checkForChanges = () => {
+        if (lastSyncedState !== JSON.stringify(convertTokensToObject(tokens), null, 2)) {
+            return true;
+        }
+    };
 
     return (
         <div className="sticky top-0 navbar bg-white flex items-center justify-between z-1 border-b border-gray-200">
@@ -65,7 +75,7 @@ const Navbar = () => {
                 </Tooltip>
                 {storageType.provider !== StorageProviderType.LOCAL && (
                     <>
-                        {projectURL && (
+                        {storageType.provider === StorageProviderType.JSONBIN && (
                             <Tooltip variant="right" label={`Go to ${transformProviderName(storageType.provider)}`}>
                                 <a
                                     href={projectURL}
@@ -77,6 +87,23 @@ const Navbar = () => {
                                 </a>
                             </Tooltip>
                         )}
+                        {storageType.provider === StorageProviderType.GITHUB && (
+                            <Tooltip variant="right" label={`Push to ${transformProviderName(storageType.provider)}`}>
+                                <button
+                                    onClick={() => pushTokens()}
+                                    type="button"
+                                    className="button button-ghost relative"
+                                    disabled={editProhibited}
+                                >
+                                    {checkForChanges() && (
+                                        <div className="rounded-full w-2 h-2 bg-primary-500 absolute right-0 top-0" />
+                                    )}
+
+                                    <Icon name="library" />
+                                </button>
+                            </Tooltip>
+                        )}
+
                         <Tooltip variant="right" label={`Pull from ${transformProviderName(storageType.provider)}`}>
                             <button onClick={() => pullTokens()} type="button" className="button button-ghost">
                                 <Icon name="refresh" />
diff --git a/src/app/components/NewGroupForm.tsx b/src/app/components/NewGroupForm.tsx
deleted file mode 100644
index 8736391ac..000000000
--- a/src/app/components/NewGroupForm.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import * as React from 'react';
-import {useSelector} from 'react-redux';
-import {RootState} from '../store';
-import {useTokenDispatch} from '../store/TokenContext';
-import useManageTokens from '../store/useManageTokens';
-import Input from './Input';
-import Modal from './Modal';
-
-const NewGroupForm = ({path}) => {
-    const title = 'Create new group';
-    const [name, setName] = React.useState('');
-    const {setShowNewGroupForm} = useTokenDispatch();
-    const {activeTokenSet} = useSelector((state: RootState) => state.tokenState);
-    const {createSingleToken} = useManageTokens();
-
-    const handleChange = (e) => {
-        e.persist();
-        setName(e.target.value);
-    };
-
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        createSingleToken({
-            parent: activeTokenSet,
-            name: [path, name].join('.'),
-            value: {},
-            newGroup: true,
-        });
-
-        setShowNewGroupForm(false);
-    };
-
-    const handleReset = () => {
-        setShowNewGroupForm(false);
-    };
-
-    return (
-        <Modal isOpen close={handleReset} title={title}>
-            <form onSubmit={handleSubmit} className="space-y-4 flex flex-col justify-start">
-                <Input required full label="Name" value={name} onChange={handleChange} type="text" name="name" />
-
-                <div className="flex space-x-2 justify-end">
-                    <button className="button button-link" type="button" onClick={handleReset}>
-                        Cancel
-                    </button>
-                    <button className="button button-primary" type="submit">
-                        Create
-                    </button>
-                </div>
-            </form>
-        </Modal>
-    );
-};
-
-export default NewGroupForm;
diff --git a/src/app/components/PushDialog.tsx b/src/app/components/PushDialog.tsx
new file mode 100644
index 000000000..c62183fe2
--- /dev/null
+++ b/src/app/components/PushDialog.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import {useSelector} from 'react-redux';
+import usePushDialog from '../hooks/usePushDialog';
+import {RootState} from '../store';
+import {getCreatePullRequestUrl} from '../store/providers/github';
+import Button from './Button';
+import Heading from './Heading';
+import Icon from './Icon';
+import Input from './Input';
+import Modal from './Modal';
+
+const ConfirmDialog = () => {
+    const {onConfirm, onCancel, showPushDialog} = usePushDialog();
+    const {api, localApiState} = useSelector((state: RootState) => state.uiState);
+    const [commitMessage, setCommitMessage] = React.useState('');
+    const [branch, setBranch] = React.useState(localApiState.branch);
+
+    React.useEffect(() => {
+        if (showPushDialog === 'initial') {
+            setCommitMessage('');
+            setBranch(localApiState.branch);
+        }
+    }, [showPushDialog, localApiState.branch]);
+
+    switch (showPushDialog) {
+        case 'initial': {
+            return (
+                <Modal large isOpen close={onCancel}>
+                    <form
+                        onSubmit={() => onConfirm(commitMessage, branch)}
+                        className="flex flex-col text-center space-y-4"
+                    >
+                        <div className="space-y-2 text-left flex flex-col">
+                            <Heading>Push changes</Heading>
+                            <p className="text-xs">Push your local changes to your repository.</p>
+                            <div className="text-xxs font-mono bg-gray-100 rounded p-2 text-gray-600">
+                                {localApiState.id}
+                            </div>
+                            <Input
+                                full
+                                label="Commit message"
+                                value={commitMessage}
+                                onChange={(e) => setCommitMessage(e.target.value)}
+                                type="text"
+                                name="commitMessage"
+                                required
+                            />
+                            <Input
+                                full
+                                label="Branch"
+                                value={branch}
+                                onChange={(e) => setBranch(e.target.value)}
+                                type="text"
+                                name="branch"
+                                required
+                            />
+                        </div>
+                        <div className="space-x-4 flex flex-row justify-between">
+                            <Button variant="secondary" onClick={onCancel}>
+                                Cancel
+                            </Button>
+                            <Button type="submit" disabled={!commitMessage} variant="primary">
+                                Push
+                            </Button>
+                        </div>
+                    </form>
+                </Modal>
+            );
+        }
+        case 'loading': {
+            return (
+                <Modal large isOpen close={onCancel}>
+                    <div className="flex flex-col items-center justify-center space-y-4">
+                        <div className="rotate">
+                            <Icon name="loading" />
+                        </div>
+                        <Heading size="large">Pushing to GitHub</Heading>
+                    </div>
+                </Modal>
+            );
+        }
+        case 'success': {
+            return (
+                <Modal large isOpen close={onCancel}>
+                    <div className="text-center">
+                        <div className="mb-8 space-y-4">
+                            <Heading size="large">All done!</Heading>
+                            <div className="text-xs">Changes pushed to GitHub.</div>
+                        </div>
+                        <Button variant="primary" href={getCreatePullRequestUrl(localApiState.id, branch)}>
+                            Create Pull Request
+                        </Button>
+                    </div>
+                </Modal>
+            );
+        }
+        default: {
+            return null;
+        }
+    }
+};
+export default ConfirmDialog;
diff --git a/src/app/components/Settings.tsx b/src/app/components/Settings.tsx
index 39e4e1de4..4baa2da10 100644
--- a/src/app/components/Settings.tsx
+++ b/src/app/components/Settings.tsx
@@ -1,31 +1,14 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import * as React from 'react';
 import {useDispatch, useSelector} from 'react-redux';
-import {useDebouncedCallback} from 'use-debounce';
 import Checkbox from './Checkbox';
 import Heading from './Heading';
 import {RootState, Dispatch} from '../store';
-import Input from './Input';
 
 const SyncSettings = () => {
-    const {uiWindow, ignoreFirstPartForStyles} = useSelector((state: RootState) => state.settings);
+    const {ignoreFirstPartForStyles} = useSelector((state: RootState) => state.settings);
     const dispatch = useDispatch<Dispatch>();
 
-    const debouncedChange = useDebouncedCallback(() => {
-        dispatch.settings.triggerWindowChange();
-    }, 1000);
-
-    const handleSizeChange = (e) => {
-        const value = Number(e.target.value.trim());
-        if (!Number.isNaN(value)) {
-            dispatch.settings.setWindowSize({
-                ...uiWindow,
-                [e.target.name]: value,
-            });
-            debouncedChange();
-        }
-    };
-
     const handleIgnoreChange = (bool) => {
         dispatch.settings.setIgnoreFirstPartForStyles(bool);
     };
@@ -33,29 +16,6 @@ const SyncSettings = () => {
     return (
         <div className="flex flex-col flex-grow">
             <div className="p-4 space-y-4 border-b">
-                <div className="space-y-4">
-                    <Heading>Window size</Heading>
-                    <div className="flex flex-row space-x-2">
-                        <Input
-                            full
-                            label="Width"
-                            value={uiWindow.width}
-                            onChange={handleSizeChange}
-                            type="text"
-                            name="width"
-                            required
-                        />
-                        <Input
-                            full
-                            label="Height"
-                            value={uiWindow.height}
-                            onChange={handleSizeChange}
-                            type="text"
-                            name="height"
-                            required
-                        />
-                    </div>
-                </div>
                 <div className="space-y-4">
                     <Heading>Styles</Heading>
                     <div className="space-y-2">
diff --git a/src/app/components/StorageItem.tsx b/src/app/components/StorageItem.tsx
index 360de18d1..04ed9c0e9 100644
--- a/src/app/components/StorageItem.tsx
+++ b/src/app/components/StorageItem.tsx
@@ -7,7 +7,7 @@ import {RootState} from '../store';
 
 const StorageItem = ({item, onEdit = null}) => {
     const {storageType} = useSelector((state: RootState) => state.uiState);
-    const {provider, id, name} = item;
+    const {provider, id, branch, name} = item;
 
     const {restoreStoredProvider, deleteProvider} = useRemoteTokens();
 
@@ -25,7 +25,9 @@ const StorageItem = ({item, onEdit = null}) => {
         >
             <div className="flex flex-col flex-grow items-start">
                 <div className="text-xs font-bold">{name}</div>
-                <div className="opacity-75 text-xxs">{id}</div>
+                <div className="opacity-75 text-xxs">
+                    {id} {branch && ` (${branch})`}
+                </div>
                 {!isActive() && (
                     <button
                         type="button"
@@ -36,7 +38,7 @@ const StorageItem = ({item, onEdit = null}) => {
                     </button>
                 )}
             </div>
-            <div className="space-x-2">
+            <div className="space-x-2 flex-nowrap">
                 {onEdit && (
                     <Button id="button-storageitem-edit" variant="secondary" onClick={onEdit}>
                         Edit
diff --git a/src/app/components/StorageItemForm.tsx b/src/app/components/StorageItemForm.tsx
index fb09aa152..0dcb7d545 100644
--- a/src/app/components/StorageItemForm.tsx
+++ b/src/app/components/StorageItemForm.tsx
@@ -1,55 +1,48 @@
 import React from 'react';
 import {useSelector} from 'react-redux';
-import {StorageProviderType} from '../../../types/api';
-import Button from './Button';
-import Input from './Input';
+import {StorageProviderType} from 'Types/api';
 import {RootState} from '../store';
+import GitHubForm from './StorageItemForm/GitHubForm';
+import JSONBinForm from './StorageItemForm/JSONBinForm';
+import URLForm from './StorageItemForm/URLForm';
 
-export default function EditStorageItemForm({
-    isNew = false,
-    handleChange,
-    handleSubmit,
-    handleCancel,
-    values,
-    hasErrored,
-}) {
+export default function StorageItemForm({isNew = false, handleChange, handleSubmit, handleCancel, values, hasErrored}) {
     const {localApiState} = useSelector((state: RootState) => state.uiState);
 
-    return (
-        <form onSubmit={handleSubmit} className="space-y-4">
-            <Input full label="Name" value={values.name} onChange={handleChange} type="text" name="name" required />
-            <Input
-                full
-                label="Secret"
-                value={values.secret}
-                onChange={handleChange}
-                type="text"
-                name="secret"
-                required
-            />
-            <Input
-                full
-                label={`ID${localApiState.provider === StorageProviderType.JSONBIN ? ' (optional)' : ''}`}
-                value={values.id}
-                onChange={handleChange}
-                type="text"
-                name="id"
-                required={isNew ? localApiState.provider !== StorageProviderType.JSONBIN : true}
-            />
-            <div className="space-x-4">
-                <Button variant="secondary" size="large" onClick={handleCancel}>
-                    Cancel
-                </Button>
-
-                <Button variant="primary" type="submit" disabled={!values.secret && !values.name}>
-                    Save
-                </Button>
-            </div>
-            {hasErrored && (
-                <div className="bg-red-200 text-red-700 rounded p-4 text-xs font-bold" data-cy="provider-modal-error">
-                    There was an error connecting. Check your credentials.
-                </div>
-            )}
-        </form>
-    );
+    switch (localApiState.provider) {
+        case StorageProviderType.GITHUB: {
+            return (
+                <GitHubForm
+                    handleChange={handleChange}
+                    handleSubmit={handleSubmit}
+                    handleCancel={handleCancel}
+                    values={values}
+                    hasErrored={hasErrored}
+                />
+            );
+        }
+        case StorageProviderType.URL: {
+            return (
+                <URLForm
+                    handleChange={handleChange}
+                    handleSubmit={handleSubmit}
+                    handleCancel={handleCancel}
+                    values={values}
+                    hasErrored={hasErrored}
+                />
+            );
+        }
+        default: {
+            return (
+                <JSONBinForm
+                    isNew={isNew}
+                    handleChange={handleChange}
+                    handleSubmit={handleSubmit}
+                    handleCancel={handleCancel}
+                    values={values}
+                    hasErrored={hasErrored}
+                />
+            );
+        }
+    }
 }
diff --git a/src/app/components/StorageItemForm/GitHubForm.tsx b/src/app/components/StorageItemForm/GitHubForm.tsx
new file mode 100644
index 000000000..a1fa3afbe
--- /dev/null
+++ b/src/app/components/StorageItemForm/GitHubForm.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import Button from '../Button';
+import Input from '../Input';
+
+export default function GitHubForm({handleChange, handleSubmit, handleCancel, values, hasErrored}) {
+    return (
+        <form onSubmit={handleSubmit} className="space-y-4">
+            <Input full label="Name" value={values.name} onChange={handleChange} type="text" name="name" required />
+            <Input
+                full
+                label="Personal Access Token"
+                value={values.secret}
+                onChange={handleChange}
+                type="text"
+                name="secret"
+                required
+            />
+            <Input
+                full
+                label="Repository (username/repo)"
+                value={values.id}
+                onChange={handleChange}
+                type="text"
+                name="id"
+                required
+            />
+            <Input
+                full
+                label="Default Branch"
+                value={values.branch}
+                onChange={handleChange}
+                type="text"
+                name="branch"
+                required
+            />
+            <Input
+                full
+                label="File Path (e.g. data/tokens.json)"
+                value={values.filePath}
+                onChange={handleChange}
+                type="text"
+                name="filePath"
+                required
+            />
+            <div className="space-x-4">
+                <Button variant="secondary" size="large" onClick={handleCancel}>
+                    Cancel
+                </Button>
+
+                <Button variant="primary" type="submit" disabled={!values.secret && !values.name}>
+                    Save
+                </Button>
+            </div>
+            {hasErrored && (
+                <div className="bg-red-200 text-red-700 rounded p-4 text-xs font-bold" data-cy="provider-modal-error">
+                    There was an error connecting. Check your credentials.
+                </div>
+            )}
+        </form>
+    );
+}
diff --git a/src/app/components/StorageItemForm/JSONBinForm.tsx b/src/app/components/StorageItemForm/JSONBinForm.tsx
new file mode 100644
index 000000000..27f63e546
--- /dev/null
+++ b/src/app/components/StorageItemForm/JSONBinForm.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import Button from '../Button';
+import Input from '../Input';
+
+export default function JSONBinForm({isNew = false, handleChange, handleSubmit, handleCancel, values, hasErrored}) {
+    return (
+        <form onSubmit={handleSubmit} className="space-y-4">
+            <Input full label="Name" value={values.name} onChange={handleChange} type="text" name="name" required />
+            <Input
+                full
+                label="Secret"
+                value={values.secret}
+                onChange={handleChange}
+                type="text"
+                name="secret"
+                required
+            />
+            <Input
+                full
+                label={`ID${isNew ? ' (optional)' : ''}`}
+                value={values.id}
+                onChange={handleChange}
+                type="text"
+                name="id"
+                required={!isNew}
+            />
+            <div className="space-x-4">
+                <Button variant="secondary" size="large" onClick={handleCancel}>
+                    Cancel
+                </Button>
+
+                <Button variant="primary" type="submit" disabled={!values.secret && !values.name}>
+                    Save
+                </Button>
+            </div>
+            {hasErrored && (
+                <div className="bg-red-200 text-red-700 rounded p-4 text-xs font-bold" data-cy="provider-modal-error">
+                    There was an error connecting. Check your credentials.
+                </div>
+            )}
+        </form>
+    );
+}
diff --git a/src/app/components/StorageItemForm/URLForm.tsx b/src/app/components/StorageItemForm/URLForm.tsx
new file mode 100644
index 000000000..feb9baed5
--- /dev/null
+++ b/src/app/components/StorageItemForm/URLForm.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Button from '../Button';
+import Input from '../Input';
+
+export default function URLForm({handleChange, handleSubmit, handleCancel, values, hasErrored}) {
+    return (
+        <form onSubmit={handleSubmit} className="space-y-4">
+            <Input full label="Name" value={values.name} onChange={handleChange} type="text" name="name" required />
+            <Input full label="Headers" value={values.secret} onChange={handleChange} type="text" name="secret" />
+            <Input full label="URL" value={values.id} onChange={handleChange} type="text" name="id" required />
+            <div className="space-x-4">
+                <Button variant="secondary" size="large" onClick={handleCancel}>
+                    Cancel
+                </Button>
+
+                <Button variant="primary" type="submit" disabled={!values.secret && !values.name}>
+                    Save
+                </Button>
+            </div>
+            {hasErrored && (
+                <div className="bg-red-200 text-red-700 rounded p-4 text-xs font-bold" data-cy="provider-modal-error">
+                    There was an error connecting. Check your credentials.
+                </div>
+            )}
+        </form>
+    );
+}
diff --git a/src/app/components/SyncSettings.tsx b/src/app/components/SyncSettings.tsx
index 58fe81cb8..771c36970 100644
--- a/src/app/components/SyncSettings.tsx
+++ b/src/app/components/SyncSettings.tsx
@@ -2,7 +2,6 @@
 import * as React from 'react';
 import {track} from '@/utils/analytics';
 import {useDispatch, useSelector} from 'react-redux';
-import {useTokenDispatch, useTokenState} from '../store/TokenContext';
 import {StorageProviderType} from '../../../types/api';
 import Button from './Button';
 import Heading from './Heading';
@@ -18,8 +17,6 @@ const SyncSettings = () => {
     const {api, localApiState, apiProviders, storageType} = useSelector((state: RootState) => state.uiState);
     const dispatch = useDispatch<Dispatch>();
 
-    const {updateAfterApply} = useTokenState();
-    const {toggleUpdateAfterApply} = useTokenDispatch();
     const {setStorageType} = useStorage();
 
     const [confirmModalVisible, showConfirmModal] = React.useState(false);
@@ -33,7 +30,7 @@ const SyncSettings = () => {
     };
 
     const selectedRemoteProvider = () => {
-        return [StorageProviderType.JSONBIN, StorageProviderType.ARCADE].includes(
+        return [StorageProviderType.JSONBIN, StorageProviderType.GITHUB, StorageProviderType.URL].includes(
             localApiState?.provider as StorageProviderType
         );
     };
@@ -63,16 +60,23 @@ const SyncSettings = () => {
                         </a>
                     </div>
                 );
-            case StorageProviderType.ARCADE:
+            case StorageProviderType.GITHUB:
                 return (
                     <div>
-                        <a href="https://usearcade.com" target="_blank" className="underline" rel="noreferrer">
-                            Arcade
-                        </a>{' '}
-                        is currently in Early Access. If you have an Arcade account, use your project ID and your API
-                        key to gain access. For now, just the Read-Only mode is supported.
+                        Sync your tokens with a GitHub repository so your design decisions are up to date with code.{' '}
+                        <a
+                            href="https://docs.tokens.studio/sync/github"
+                            target="_blank"
+                            rel="noreferrer"
+                            className="underline"
+                        >
+                            Read the guide
+                        </a>
+                        .
                     </div>
                 );
+            case StorageProviderType.URL:
+                return <div>Sync with a JSON stored on an external URL. This mode only allows Read Only.</div>;
             default:
                 return null;
         }
@@ -124,6 +128,20 @@ const SyncSettings = () => {
                             text="Local document"
                             id={StorageProviderType.LOCAL}
                         />
+                        <ProviderSelector
+                            isActive={localApiState?.provider === StorageProviderType.URL}
+                            isStored={storageType?.provider === StorageProviderType.URL}
+                            onClick={() => {
+                                dispatch.uiState.setLocalApiState({
+                                    name: '',
+                                    secret: '',
+                                    id: '',
+                                    provider: StorageProviderType.URL,
+                                });
+                            }}
+                            text="URL"
+                            id={StorageProviderType.URL}
+                        />
                         <ProviderSelector
                             isActive={localApiState?.provider === StorageProviderType.JSONBIN}
                             isStored={storageType?.provider === StorageProviderType.JSONBIN}
@@ -138,6 +156,21 @@ const SyncSettings = () => {
                             text="JSONbin"
                             id={StorageProviderType.JSONBIN}
                         />
+                        <ProviderSelector
+                            isActive={localApiState?.provider === StorageProviderType.GITHUB}
+                            isStored={storageType?.provider === StorageProviderType.GITHUB}
+                            onClick={() => {
+                                dispatch.uiState.setLocalApiState({
+                                    name: '',
+                                    secret: '',
+                                    id: '',
+                                    branch: '',
+                                    provider: StorageProviderType.GITHUB,
+                                });
+                            }}
+                            text="GitHub"
+                            id={StorageProviderType.GITHUB}
+                        />
                     </div>
                 </div>
                 {selectedRemoteProvider() && (
@@ -156,43 +189,15 @@ const SyncSettings = () => {
 
                         {storedApiProviders().length > 0 && (
                             <div className="space-y-4">
-                                {api?.provider === localApiState.provider && <StorageItem item={api} />}
-                                {storedApiProviders().length > 0 && (
-                                    <details>
-                                        <summary
-                                            data-cy={`summary-${localApiState.provider}`}
-                                            className="p-2 rounded bg-gray-100 cursor-pointer text-xs focus:outline-none hover:bg-gray-200 focus:bg-gray-200"
-                                        >
-                                            {storedApiProviders().length} providers stored on this device
-                                        </summary>
-                                        <div className="flex flex-row items-center justify-between">
-                                            <Heading size="small">
-                                                Stored providers for {localApiState.provider}
-                                            </Heading>
-                                            <div className="flex items-center switch">
-                                                <input
-                                                    className="switch__toggle"
-                                                    type="checkbox"
-                                                    id="updatemode"
-                                                    checked={updateAfterApply}
-                                                    onChange={() => toggleUpdateAfterApply(!updateAfterApply)}
-                                                />
-                                                <label className="text-xs switch__label" htmlFor="updatemode">
-                                                    Update on apply
-                                                </label>
-                                            </div>
-                                        </div>
-                                        <div className="flex flex-col gap-2">
-                                            {storedApiProviders().map((item) => (
-                                                <StorageItem
-                                                    key={`${item.provider}-${item.id}-${item.secret}`}
-                                                    onEdit={() => handleEditClick(item)}
-                                                    item={item}
-                                                />
-                                            ))}
-                                        </div>
-                                    </details>
-                                )}
+                                <div className="flex flex-col gap-2">
+                                    {storedApiProviders().map((item) => (
+                                        <StorageItem
+                                            key={`${item.provider}-${item.id}-${item.secret}`}
+                                            onEdit={() => handleEditClick(item)}
+                                            item={item}
+                                        />
+                                    ))}
+                                </div>
                             </div>
                         )}
                     </>
diff --git a/src/app/components/Textarea.tsx b/src/app/components/Textarea.tsx
index a9741b629..458422c1c 100644
--- a/src/app/components/Textarea.tsx
+++ b/src/app/components/Textarea.tsx
@@ -19,6 +19,7 @@ const Textarea = ({
     return (
         <>
             <textarea
+                spellCheck={false}
                 rows={rows}
                 className={`textarea ${customClass}`}
                 placeholder={placeholder}
diff --git a/src/app/components/ToggleEmptyButton.tsx b/src/app/components/ToggleEmptyButton.tsx
index 82d27e474..afa7976f5 100644
--- a/src/app/components/ToggleEmptyButton.tsx
+++ b/src/app/components/ToggleEmptyButton.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
-import {useTokenState, useTokenDispatch} from '../store/TokenContext';
+import {useDispatch, useSelector} from 'react-redux';
+import {Dispatch, RootState} from '../store';
 import Button from './Button';
 
 export default function ToggleEmptyButton() {
-    const {showEmptyGroups} = useTokenState();
-    const {toggleShowEmptyGroups} = useTokenDispatch();
+    const {showEmptyGroups} = useSelector((state: RootState) => state.uiState);
+    const dispatch = useDispatch<Dispatch>();
     return (
         <div className="flex items-center justify-center mt-4 mb-4">
-            <Button variant="secondary" size="small" onClick={toggleShowEmptyGroups}>
+            <Button variant="secondary" size="small" onClick={() => dispatch.uiState.toggleShowEmptyGroups()}>
                 {showEmptyGroups ? 'Hide' : 'Show'} empty groups
             </Button>
         </div>
diff --git a/src/app/components/TokenButton.tsx b/src/app/components/TokenButton.tsx
index 3c432ebbe..9ae02fd5c 100644
--- a/src/app/components/TokenButton.tsx
+++ b/src/app/components/TokenButton.tsx
@@ -9,6 +9,7 @@ import useManageTokens from '../store/useManageTokens';
 import {Dispatch, RootState} from '../store';
 import useTokens from '../store/useTokens';
 import TokenTooltip from './TokenTooltip';
+import BrokenReferenceIndicator from './BrokenReferenceIndicator';
 
 export function useGetActiveState(properties, type, name) {
     const uiState = useSelector((state: RootState) => state.uiState);
@@ -35,7 +36,7 @@ const TokenButton = ({
     const uiState = useSelector((state: RootState) => state.uiState);
     const {activeTokenSet} = useSelector((state: RootState) => state.tokenState);
     const {setNodeData, getTokenValue} = useTokens();
-    const {deleteSingleToken} = useManageTokens();
+    const {deleteSingleToken, duplicateSingleToken} = useManageTokens();
     const dispatch = useDispatch<Dispatch>();
     const {isAlias} = useTokens();
 
@@ -57,6 +58,9 @@ const TokenButton = ({
     const handleDeleteClick = () => {
         deleteSingleToken({parent: activeTokenSet, path: name});
     };
+    const handleDuplicateClick = () => {
+        duplicateSingleToken({parent: activeTokenSet, name});
+    };
 
     function setPluginValue(value) {
         dispatch.uiState.setLoading(true);
@@ -169,7 +173,7 @@ const TokenButton = ({
 
     return (
         <div
-            className={`relative mb-1 mr-1 flex button button-property ${buttonClass.join(' ')} ${
+            className={`relative mb-1 mr-1 button button-property ${buttonClass.join(' ')} ${
                 uiState.disabled && 'button-disabled'
             } `}
             style={style}
@@ -178,6 +182,7 @@ const TokenButton = ({
                 properties={properties}
                 onClick={onClick}
                 onDelete={handleDeleteClick}
+                onDuplicate={handleDuplicateClick}
                 onEdit={handleEditClick}
                 value={name}
                 path={name}
@@ -199,7 +204,14 @@ const TokenButton = ({
                         </div>
                     }
                 >
-                    <button className="w-full h-full" type="button" onClick={() => onClick(properties[0])}>
+                    <button
+                        style={style}
+                        className="w-full h-full relativeƒ"
+                        type="button"
+                        onClick={() => onClick(properties[0])}
+                    >
+                        <BrokenReferenceIndicator token={token} resolvedTokens={resolvedTokens} />
+
                         <div className="button-text">{showValue && <span>{visibleName}</span>}</div>
                     </button>
                 </Tooltip>
diff --git a/src/app/components/TokenListing.tsx b/src/app/components/TokenListing.tsx
index b206ab643..848846055 100644
--- a/src/app/components/TokenListing.tsx
+++ b/src/app/components/TokenListing.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import {SingleTokenObject} from 'Types/tokens';
-import {useTokenDispatch, useTokenState} from '../store/TokenContext';
 import Heading from './Heading';
 import Icon from './Icon';
 import TokenTree from './TokenTree';
@@ -31,12 +30,9 @@ const TokenListing = ({
     resolvedTokens: SingleTokenObject[];
 }) => {
     const {editProhibited} = useSelector((state: RootState) => state.tokenState);
-    const {displayType} = useSelector((state: RootState) => state.uiState);
+    const {displayType, showEmptyGroups, collapsed} = useSelector((state: RootState) => state.uiState);
     const dispatch = useDispatch<Dispatch>();
 
-    const {collapsed, showEmptyGroups} = useTokenState();
-    const {setCollapsed} = useTokenDispatch();
-
     const showDisplayToggle = tokenType === 'color';
 
     const [isIntCollapsed, setIntCollapsed] = React.useState(false);
@@ -48,6 +44,7 @@ const TokenListing = ({
             name,
             initialName: name,
             isPristine,
+            type: tokenType,
             explainer,
             property,
             schema: schema?.value,
@@ -72,7 +69,7 @@ const TokenListing = ({
     const handleSetIntCollapsed = (e) => {
         e.stopPropagation();
         if (e.altKey) {
-            setCollapsed(!collapsed);
+            dispatch.uiState.toggleCollapsed();
         } else {
             setIntCollapsed(!isIntCollapsed);
         }
@@ -105,7 +102,7 @@ const TokenListing = ({
                     </Tooltip>
                     <Heading size="small">{label}</Heading>
                 </button>
-                <div className="absolute right-0 mr-2">
+                <div className="flex absolute right-0 mr-2">
                     {showDisplayToggle && (
                         <Tooltip label={displayType === 'GRID' ? 'Show as List' : 'Show as Grid'}>
                             <button
diff --git a/src/app/components/TokenTooltip.tsx b/src/app/components/TokenTooltip.tsx
index d04a1e858..2364dda09 100644
--- a/src/app/components/TokenTooltip.tsx
+++ b/src/app/components/TokenTooltip.tsx
@@ -15,10 +15,10 @@ export default function TokenTooltip({token, resolvedTokens, shouldResolve = fal
             }
             return (
                 <div>
-                    <div>Font: {valueToCheck.fontFamily}</div>
-                    <div>Weight: {valueToCheck.fontWeight}</div>
-                    <div>Leading: {valueToCheck.lineHeight}</div>
-                    <div>Tracking: {valueToCheck.lineHeight}</div>
+                    <div>Font: {valueToCheck.fontFamily?.value || valueToCheck.fontFamily}</div>
+                    <div>Weight: {valueToCheck.fontWeight?.value || valueToCheck.fontWeight}</div>
+                    <div>Leading: {valueToCheck.lineHeight?.value || valueToCheck.lineHeight}</div>
+                    <div>Tracking: {valueToCheck.lineHeight?.value || valueToCheck.lineHeight}</div>
                 </div>
             );
         }
diff --git a/src/app/components/TokenTree.tsx b/src/app/components/TokenTree.tsx
index 5e466ba64..e96c8bf6e 100644
--- a/src/app/components/TokenTree.tsx
+++ b/src/app/components/TokenTree.tsx
@@ -21,21 +21,19 @@ const TokenTree = ({tokenValues, showNewForm, showForm, schema, path = null, typ
                             <div className="property-wrapper w-full" data-cy={`token-group-${stringPath}`}>
                                 <div className="flex items-center justify-between group">
                                     <TokenGroupHeading label={name} path={stringPath} id="listing" />
-                                    <div className="opacity-0 group-hover:opacity-100">
-                                        <Tooltip label="Add a new token" variant="right">
-                                            <button
-                                                disabled={editProhibited}
-                                                data-cy="button-add-new-token-in-group"
-                                                className="button button-ghost"
-                                                type="button"
-                                                onClick={() => {
-                                                    showNewForm({name: `${stringPath}.`});
-                                                }}
-                                            >
-                                                <Icon name="add" />
-                                            </button>
-                                        </Tooltip>
-                                    </div>
+                                    <Tooltip label="Add a new token" variant="right">
+                                        <button
+                                            disabled={editProhibited}
+                                            data-cy="button-add-new-token-in-group"
+                                            className="button button-ghost opacity-0 group-hover:opacity-100 focus:opacity-100"
+                                            type="button"
+                                            onClick={() => {
+                                                showNewForm({name: `${stringPath}.`});
+                                            }}
+                                        >
+                                            <Icon name="add" />
+                                        </button>
+                                    </Tooltip>
                                 </div>
 
                                 <TokenTree
diff --git a/src/app/components/Tokens.tsx b/src/app/components/Tokens.tsx
index ce1e23a3a..c569598db 100644
--- a/src/app/components/Tokens.tsx
+++ b/src/app/components/Tokens.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import * as React from 'react';
 import {useSelector} from 'react-redux';
-import {computeMergedTokens, resolveTokenValues} from '@/plugin/tokenHelpers';
+import {mergeTokenGroups, resolveTokenValues} from '@/plugin/tokenHelpers';
 import TokenListing from './TokenListing';
 import TokensBottomBar from './TokensBottomBar';
 import ToggleEmptyButton from './ToggleEmptyButton';
@@ -29,7 +29,7 @@ const Tokens = ({isActive}) => {
     const {showEditForm, tokenFilter, tokenFilterVisible} = useSelector((state: RootState) => state.uiState);
 
     const resolvedTokens = React.useMemo(() => {
-        return resolveTokenValues(computeMergedTokens(tokens, [...usedTokenSet, activeTokenSet]));
+        return resolveTokenValues(mergeTokenGroups(tokens, [...usedTokenSet, activeTokenSet]));
     }, [tokens, usedTokenSet, activeTokenSet]);
 
     const memoizedTokens = React.useMemo(() => {
@@ -69,7 +69,7 @@ const Tokens = ({isActive}) => {
                     </div>
                 );
             })}
-            {showEditForm && <EditTokenFormModal />}
+            {showEditForm && <EditTokenFormModal resolvedTokens={resolvedTokens} />}
             <ToggleEmptyButton />
             <TokensBottomBar />
         </div>
diff --git a/src/app/components/Tooltip.tsx b/src/app/components/Tooltip.tsx
index 053003cf4..9f9a2201d 100644
--- a/src/app/components/Tooltip.tsx
+++ b/src/app/components/Tooltip.tsx
@@ -33,7 +33,7 @@ export default ({
     side?: 'left' | 'bottom';
 }) => (
     <Tooltip.Root delayDuration={0}>
-        <Tooltip.Trigger as="span">{children}</Tooltip.Trigger>
+        <Tooltip.Trigger as="div">{children}</Tooltip.Trigger>
         <StyledContent side={side}>
             <StyledArrow offset={10} />
             {label}
diff --git a/src/app/components/WindowResizer.tsx b/src/app/components/WindowResizer.tsx
new file mode 100644
index 000000000..03c1d24c9
--- /dev/null
+++ b/src/app/components/WindowResizer.tsx
@@ -0,0 +1,36 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import * as React from 'react';
+import {useDispatch} from 'react-redux';
+import {Dispatch} from '../store';
+import IconResizeWindow from './icons/IconResizeWindow';
+
+export default function WindowResizer() {
+    const dispatch = useDispatch<Dispatch>();
+
+    const cornerRef = React.useRef<HTMLDivElement>(null);
+
+    const handleSizeChange = (e) => {
+        const size = {
+            width: Math.max(300, Math.floor(e.clientX + 5)),
+            height: Math.max(200, Math.floor(e.clientY + 5)),
+        };
+        dispatch.settings.setWindowSize({
+            ...size,
+        });
+    };
+
+    const onDown = (e) => {
+        cornerRef.current.onpointermove = handleSizeChange;
+        cornerRef.current.setPointerCapture(e.pointerId);
+    };
+    const onUp = (e) => {
+        cornerRef.current.onpointermove = null;
+        cornerRef.current.releasePointerCapture(e.pointerId);
+        dispatch.settings.triggerWindowChange();
+    };
+    return (
+        <div id="corner" onPointerDown={onDown} onPointerUp={onUp} ref={cornerRef}>
+            <IconResizeWindow />
+        </div>
+    );
+}
diff --git a/src/app/components/icons/IconBrokenLink.tsx b/src/app/components/icons/IconBrokenLink.tsx
new file mode 100644
index 000000000..db5708874
--- /dev/null
+++ b/src/app/components/icons/IconBrokenLink.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+const IconBrokenLink = () => (
+    <svg fill="currentColor" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
+        <path d="m13.0002 9.00002v2.99998h1v-2.99998z" />
+        <path d="m22.1033 9.89646c-1.1618-1.16177-3.0454-1.16176-4.2072.00001l-2.7499 2.74993.7071.7071 2.7499-2.7499c.7713-.77127 2.0217-.77127 2.793 0 .7712.7712.7712 2.0216 0 2.7928l-2.75 2.75.7071.7071 2.75-2.7499c1.1617-1.1618 1.1617-3.0454 0-4.20714z" />
+        <path d="m9.89632 22.1035c-1.16176-1.1617-1.16176-3.0453 0-4.2071l2.74998-2.75.7071.7071-2.75 2.75c-.77121.7713-.77121 2.0217 0 2.7929.7713.7713 2.0217.7713 2.7929 0l2.75-2.75.7071.7071-2.75 2.75c-1.1617 1.1618-3.0453 1.1618-4.20708 0z" />
+        <path d="m22.9997 19h-3v-1h3z" />
+        <path d="m19.0003 20v3h-1v-3z" />
+        <path d="m11.9997 13h-3.00001v1h3.00001z" />
+    </svg>
+);
+
+export default IconBrokenLink;
diff --git a/src/app/components/icons/IconResizeWindow.tsx b/src/app/components/icons/IconResizeWindow.tsx
new file mode 100644
index 000000000..234fde31f
--- /dev/null
+++ b/src/app/components/icons/IconResizeWindow.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+const IconResizeWindow = () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5.02081 16H3.6066L16 3.6066V5.02081L5.02081 16ZM10.835 16H9.42078L16 9.42078V10.835L10.835 16Z"
+            fill="#8C8C8C"
+        />
+    </svg>
+);
+
+export default IconResizeWindow;
diff --git a/src/app/components/modals/CreateStorageItemModal.tsx b/src/app/components/modals/CreateStorageItemModal.tsx
index 50eb427a2..1c2f903e5 100644
--- a/src/app/components/modals/CreateStorageItemModal.tsx
+++ b/src/app/components/modals/CreateStorageItemModal.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {useSelector} from 'react-redux';
 import {RootState} from '@/app/store';
+import {StorageProviderType} from 'Types/api';
 import Modal from '../Modal';
 import Heading from '../Heading';
 import StorageItemForm from '../StorageItemForm';
@@ -12,6 +13,15 @@ export default function CreateStorageItemModal({isOpen, onClose, onSuccess}) {
     const [hasErrored, setHasErrored] = React.useState(false);
     let defaultFields;
     switch (localApiState.provider) {
+        case StorageProviderType.GITHUB: {
+            defaultFields = {
+                secret: '',
+                id: '',
+                branch: '',
+                filePath: '',
+            };
+            break;
+        }
         default:
             defaultFields = {id: '', name: '', secret: ''};
             break;
diff --git a/src/app/components/utils.test.ts b/src/app/components/utils.test.ts
index 7c9027c95..3c123fc77 100644
--- a/src/app/components/utils.test.ts
+++ b/src/app/components/utils.test.ts
@@ -1,11 +1,17 @@
 import {convertToRgb, isTypographyToken, lightOrDark, slugify, checkAndEvaluateMath, isSingleToken} from './utils';
 
-describe('checkmath', () => {
+describe('checkAndEvaluateMath', () => {
     it('calculates math', () => {
         const input = '25 * 4.5 + 0.175';
         const output = 112.675;
         expect(checkAndEvaluateMath(input)).toEqual(output);
     });
+
+    it('doesnt break if it cannot calculate', () => {
+        const input = '$foobar * 4.5';
+        const output = '$foobar * 4.5';
+        expect(checkAndEvaluateMath(input)).toEqual(output);
+    });
 });
 
 describe('isSingleToken', () => {
diff --git a/src/app/components/utils.tsx b/src/app/components/utils.tsx
index 9a9e203b3..1cb53bb04 100644
--- a/src/app/components/utils.tsx
+++ b/src/app/components/utils.tsx
@@ -104,7 +104,7 @@ export function lightOrDark(color: string) {
             return 'dark';
         }
     } catch (e) {
-        console.error(e);
+        console.error(color, e);
     }
     return 'light';
 }
diff --git a/src/app/hooks/usePushDialog.tsx b/src/app/hooks/usePushDialog.tsx
new file mode 100644
index 000000000..1dbe97c0a
--- /dev/null
+++ b/src/app/hooks/usePushDialog.tsx
@@ -0,0 +1,38 @@
+import {useDispatch, useSelector} from 'react-redux';
+import {Dispatch, RootState} from '../store';
+
+let resolveCallback;
+function usePushDialog() {
+    const {showPushDialog} = useSelector((state: RootState) => state.uiState);
+    const dispatch = useDispatch<Dispatch>();
+
+    const pushDialog = (initialState): Promise<{commitMessage: string; customBranch: string}> => {
+        if (initialState) {
+            dispatch.uiState.setShowPushDialog('success');
+        } else {
+            dispatch.uiState.setShowPushDialog('initial');
+
+            return new Promise((res, rej) => {
+                resolveCallback = res;
+            });
+        }
+    };
+
+    const closeDialog = () => {
+        dispatch.uiState.setShowPushDialog(false);
+    };
+
+    const onCancel = () => {
+        closeDialog();
+        resolveCallback(null);
+    };
+
+    const onConfirm = (commitMessage, customBranch) => {
+        dispatch.uiState.setShowPushDialog('loading');
+        resolveCallback({commitMessage, customBranch});
+    };
+
+    return {pushDialog, onConfirm, onCancel, showPushDialog};
+}
+
+export default usePushDialog;
diff --git a/src/app/index.tsx b/src/app/index.tsx
index f29f1eaac..592f47ce2 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -8,7 +8,6 @@ import {Provider} from 'react-redux';
 import * as Sentry from '@sentry/react';
 import {initializeAnalytics} from '../utils/analytics';
 import App from './components/App';
-import {TokenProvider} from './store/TokenContext';
 import Heading from './components/Heading';
 import {store} from './store';
 import * as pjs from '../../package.json';
@@ -38,9 +37,7 @@ function ErrorFallback({error}) {
 ReactDOM.render(
     <Sentry.ErrorBoundary fallback={ErrorFallback}>
         <Provider store={store}>
-            <TokenProvider>
-                <App />
-            </TokenProvider>
+            <App />
         </Provider>
     </Sentry.ErrorBoundary>,
     document.getElementById('app')
diff --git a/src/app/store/TokenContext.tsx b/src/app/store/TokenContext.tsx
deleted file mode 100644
index 6c122ba4e..000000000
--- a/src/app/store/TokenContext.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from 'react';
-
-export enum ActionType {
-    SetShowNewGroupForm = 'SET_SHOW_NEW_GROUP_FORM',
-    SetShowOptions = 'SET_SHOW_OPTIONS',
-    SetCollapsed = 'SET_COLLAPSED',
-    ToggleShowEmptyGroups = 'TOGGLE_SHOW_EMPTY_GROUPS',
-    ToggleUpdateAfterApply = 'TOGGLE_UPDATE_AFTER_APPLY',
-    CreateTokenGroup = 'CREATE_TOKEN_GROUP',
-    SetSyncEnabled = 'SET_SYNC_ENABLED',
-}
-
-const emptyState = {
-    collapsed: false,
-    showEditForm: false,
-    showNewGroupForm: false,
-    showEmptyGroups: true,
-    showOptions: false,
-    updateAfterApply: true,
-};
-
-const TokenStateContext = React.createContext(emptyState);
-const TokenDispatchContext = React.createContext(null);
-
-function stateReducer(state, action) {
-    switch (action.type) {
-        case ActionType.SetCollapsed:
-            return {
-                ...state,
-                collapsed: !state.collapsed,
-            };
-
-        case ActionType.ToggleShowEmptyGroups:
-            return {
-                ...state,
-                showEmptyGroups: !state.showEmptyGroups,
-            };
-        case ActionType.ToggleUpdateAfterApply:
-            return {
-                ...state,
-                updateAfterApply: action.bool,
-            };
-
-        case ActionType.CreateTokenGroup: {
-            console.log('Not implemented');
-
-            // state.tokenData.createTokenGroup({
-            //     parent: action.data.parent,
-            //     name: action.data.name,
-            // });
-
-            return {
-                ...state,
-                tokenData: state.tokenData,
-            };
-        }
-        default:
-            throw new Error('Context not implemented');
-    }
-}
-
-function TokenProvider({children}) {
-    const [state, dispatch] = React.useReducer(stateReducer, emptyState);
-
-    const updatedAt = new Date().toString();
-
-    const tokenContext = React.useMemo(
-        () => ({
-            setShowNewGroupForm: (bool: boolean) => {
-                dispatch({type: ActionType.SetShowNewGroupForm, bool});
-            },
-
-            setCollapsed: () => {
-                dispatch({type: ActionType.SetCollapsed});
-            },
-            toggleShowEmptyGroups: () => {
-                dispatch({type: ActionType.ToggleShowEmptyGroups});
-            },
-            toggleUpdateAfterApply: (bool: boolean) => {
-                dispatch({type: ActionType.ToggleUpdateAfterApply, bool});
-            },
-            createTokenGroup: (data: {parent: string; name: string; updatedAt: Date}) => {
-                dispatch({type: ActionType.CreateTokenGroup, data});
-            },
-        }),
-        [dispatch, updatedAt]
-    );
-
-    return (
-        <TokenStateContext.Provider value={state}>
-            <TokenDispatchContext.Provider value={tokenContext}>{children}</TokenDispatchContext.Provider>
-        </TokenStateContext.Provider>
-    );
-}
-
-function useTokenState() {
-    const context = React.useContext(TokenStateContext);
-    if (context === undefined) {
-        throw new Error('useTokenState must be used within a TokenProvider');
-    }
-    return context;
-}
-function useTokenDispatch() {
-    const context = React.useContext(TokenDispatchContext);
-    if (context === undefined) {
-        throw new Error('useTokenDispatch must be used within a TokenProvider');
-    }
-    return context;
-}
-
-export {TokenProvider, useTokenState, useTokenDispatch};
diff --git a/src/app/store/models/settings.tsx b/src/app/store/models/settings.tsx
index b63bf46e8..c2a6aadcb 100644
--- a/src/app/store/models/settings.tsx
+++ b/src/app/store/models/settings.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable import/prefer-default-export */
-import {postToFigma} from '@/plugin/notifiers';
+import {postToFigma, postToUI} from '@/plugin/notifiers';
 import {track} from '@/utils/analytics';
 import {createModel} from '@rematch/core';
-import {MessageToPluginTypes} from 'Types/messages';
+import {MessageFromPluginTypes, MessageToPluginTypes} from 'Types/messages';
 import {UpdateMode} from 'Types/state';
 import {RootModel} from '.';
 
@@ -102,6 +102,13 @@ export const settings = createModel<RootModel>()({
         },
     },
     effects: (dispatch) => ({
+        setWindowSize: (payload, rootState) => {
+            postToFigma({
+                type: MessageToPluginTypes.RESIZE_WINDOW,
+                width: payload.width,
+                height: payload.height,
+            });
+        },
         setUpdateStyles: (payload, rootState) => {
             setUI(rootState.settings);
         },
diff --git a/src/app/store/models/tokenState.tsx b/src/app/store/models/tokenState.tsx
index f810b8924..064820242 100644
--- a/src/app/store/models/tokenState.tsx
+++ b/src/app/store/models/tokenState.tsx
@@ -9,6 +9,7 @@ import parseTokenValues from '@/utils/parseTokenValues';
 import {notifyToUI} from '@/plugin/notifiers';
 import {reduceToValues} from '@/plugin/tokenHelpers';
 import {replaceReferences} from '@/utils/findReferences';
+import parseJson from '@/utils/parseJson';
 import {RootModel} from '.';
 import updateTokensOnSources from '../updateSources';
 import * as pjs from '../../../../package.json';
@@ -41,6 +42,7 @@ export interface SelectionValue {
 
 interface TokenState {
     tokens: TokenGroup;
+    lastSyncedState: string;
     importedTokens: {
         newTokens: SingleTokenObject[];
         updatedTokens: SingleTokenObject[];
@@ -55,6 +57,7 @@ export const tokenState = createModel<RootModel>()({
         tokens: {
             global: [],
         },
+        lastSyncedState: '',
         importedTokens: {
             newTokens: [],
             updatedTokens: [],
@@ -64,6 +67,12 @@ export const tokenState = createModel<RootModel>()({
         editProhibited: false,
     } as TokenState,
     reducers: {
+        setEditProhibited(state, payload: boolean) {
+            return {
+                ...state,
+                editProhibited: payload,
+            };
+        },
         toggleUsedTokenSet: (state, data: string) => {
             return {
                 ...state,
@@ -110,6 +119,12 @@ export const tokenState = createModel<RootModel>()({
                 activeTokenSet: state.activeTokenSet === data.oldName ? data.newName : state.activeTokenSet,
             };
         },
+        setLastSyncedState: (state, data: string) => {
+            return {
+                ...state,
+                lastSyncedState: data,
+            };
+        },
         setTokenSetOrder: (state, data: string[]) => {
             const newTokens = {};
             data.map((set) => {
@@ -130,7 +145,6 @@ export const tokenState = createModel<RootModel>()({
             };
         },
         setTokenData: (state, data: {values: SingleTokenObject[]; shouldUpdate: boolean}) => {
-            console.log('Received tokens', data);
             const values = parseTokenValues(data.values);
             return {
                 ...state,
@@ -140,21 +154,16 @@ export const tokenState = createModel<RootModel>()({
             };
         },
         setJSONData(state, payload) {
-            const parsedTokens = JSON.parse(payload);
-            try {
-                parseTokenValues(parsedTokens);
-                const values = parseTokenValues({[state.activeTokenSet]: parsedTokens});
-                return {
-                    ...state,
-                    tokens: {
-                        ...state.tokens,
-                        ...values,
-                    },
-                };
-            } catch (e) {
-                console.log('Error parsing tokens', e);
-            }
-            return state;
+            const parsedTokens = parseJson(payload);
+            parseTokenValues(parsedTokens);
+            const values = parseTokenValues({[state.activeTokenSet]: parsedTokens});
+            return {
+                ...state,
+                tokens: {
+                    ...state.tokens,
+                    ...values,
+                },
+            };
         },
         createToken: (state, data: TokenInput) => {
             let newTokens = {};
@@ -179,6 +188,30 @@ export const tokenState = createModel<RootModel>()({
                 },
             };
         },
+        duplicateToken: (state, data: TokenInput) => {
+            let newTokens = {};
+            const existingToken = state.tokens[data.parent].find((n) => n.name === data.name);
+            if (existingToken) {
+                const newName = `${data.name}-copy`;
+
+                newTokens = {
+                    [data.parent]: [
+                        ...state.tokens[data.parent],
+                        {
+                            ...existingToken,
+                            name: newName,
+                        },
+                    ],
+                };
+            }
+            return {
+                ...state,
+                tokens: {
+                    ...state.tokens,
+                    ...newTokens,
+                },
+            };
+        },
         // Imports received styles as tokens, if needed
         setTokensFromStyles: (state, receivedStyles) => {
             const newTokens = [];
@@ -337,9 +370,15 @@ export const tokenState = createModel<RootModel>()({
                 dispatch.tokenState.updateDocument();
             }
         },
+
         toggleUsedTokenSet(payload, rootState) {
             dispatch.tokenState.updateDocument({updateRemote: false});
         },
+        duplicateToken(payload, rootState) {
+            if (payload.shouldUpdate && rootState.settings.updateOnChange) {
+                dispatch.tokenState.updateDocument();
+            }
+        },
         createToken(payload, rootState) {
             if (payload.shouldUpdate && rootState.settings.updateOnChange) {
                 dispatch.tokenState.updateDocument();
@@ -357,7 +396,7 @@ export const tokenState = createModel<RootModel>()({
                     updatedAt: new Date().toString(),
                     lastUpdatedAt: rootState.uiState.lastUpdatedAt,
                     isLocal: rootState.uiState.storageType.provider === StorageProviderType.LOCAL,
-                    editProhibited: rootState.uiState.editProhibited,
+                    editProhibited: rootState.tokenState.editProhibited,
                     api: rootState.uiState.api,
                     storageType: rootState.uiState.storageType,
                     shouldUpdateRemote: params.updateRemote && rootState.settings.updateRemote,
diff --git a/src/app/store/models/uiState.tsx b/src/app/store/models/uiState.tsx
index 250963865..cf3470f1e 100644
--- a/src/app/store/models/uiState.tsx
+++ b/src/app/store/models/uiState.tsx
@@ -3,6 +3,7 @@ import {track} from '@/utils/analytics';
 import fetchChangelog from '@/utils/storyblok';
 import {createModel} from '@rematch/core';
 import {StorageType, StorageProviderType, ApiDataType} from '@types/api';
+import {TokenType} from 'Types/tokens';
 
 import {RootModel} from '.';
 
@@ -28,6 +29,7 @@ interface EditToken {
     schema: object;
     optionsSchema: object;
     options: object;
+    type: TokenType;
 }
 
 interface UIState {
@@ -37,7 +39,6 @@ interface UIState {
     loading: boolean;
     activeTab: TabNames;
     projectURL: string;
-    editProhibited: boolean;
     storageType: StorageType;
     api: ApiDataType;
     apiProviders: ApiDataType[];
@@ -54,6 +55,9 @@ interface UIState {
         text?: string;
         description?: string;
     };
+    showPushDialog: string | false;
+    showEmptyGroups: boolean;
+    collapsed: boolean;
 }
 
 export const uiState = createModel<RootModel>()({
@@ -64,7 +68,6 @@ export const uiState = createModel<RootModel>()({
         loading: false,
         activeTab: 'start',
         projectURL: '',
-        editProhibited: false,
         storageType: {
             provider: StorageProviderType.LOCAL,
         },
@@ -86,8 +89,17 @@ export const uiState = createModel<RootModel>()({
             text: '',
             description: '',
         },
+        showPushDialog: false,
+        showEmptyGroups: true,
+        collapsed: false,
     } as UIState,
     reducers: {
+        setShowPushDialog: (state, data: string | false) => {
+            return {
+                ...state,
+                showPushDialog: data,
+            };
+        },
         setShowConfirm: (state, data: {text: string; description?: string}) => {
             return {
                 ...state,
@@ -164,17 +176,10 @@ export const uiState = createModel<RootModel>()({
                 projectURL: payload,
             };
         },
-        setEditProhibited(state, payload: boolean) {
-            return {
-                ...state,
-                editProhibited: payload,
-            };
-        },
         setStorage(state, payload: StorageType) {
             return {
                 ...state,
                 storageType: payload,
-                editProhibited: false,
             };
         },
         setApiData(state, payload: ApiDataType) {
@@ -219,6 +224,18 @@ export const uiState = createModel<RootModel>()({
                 tokenFilter: payload,
             };
         },
+        toggleShowEmptyGroups(state) {
+            return {
+                ...state,
+                showEmptyGroups: !state.showEmptyGroups,
+            };
+        },
+        toggleCollapsed(state) {
+            return {
+                ...state,
+                collapsed: !state.collapsed,
+            };
+        },
     },
     effects: (dispatch) => ({
         setLastOpened: (payload) => {
diff --git a/src/app/store/providers/arcade.tsx b/src/app/store/providers/arcade.tsx
deleted file mode 100644
index e74da91f0..000000000
--- a/src/app/store/providers/arcade.tsx
+++ /dev/null
@@ -1,278 +0,0 @@
-import {useDispatch} from 'react-redux';
-import {Dispatch} from '@/app/store';
-import {StorageProviderType} from '@types/api';
-import {MessageToPluginTypes} from '@types/messages';
-import {ArcadeTokenType, TokenProps, TokenType} from '@types/tokens';
-import {notifyToUI, postToFigma} from '@/plugin/notifiers';
-
-type ArcadeResponse = {
-    exports: object;
-    version: string;
-};
-
-function mapTypeToArcade(type: TokenType): ArcadeTokenType {
-    switch (type) {
-        case 'borderRadius':
-            return 'border-radius';
-        case 'borderWidth':
-            return 'border-width';
-        case 'sizing':
-            return 'size';
-        case 'spacing':
-            return 'space';
-        case 'fontWeights':
-            return 'font-weight';
-        case 'lineHeights':
-            return 'line-height';
-        case 'letterSpacing':
-            return 'letter-spacing';
-        case 'paragraphSpacing':
-            return 'paragraph-spacing';
-        case 'fontFamilies':
-            return 'font-family';
-        case 'fontSizes':
-            return 'font-size';
-        default:
-            return type;
-    }
-}
-function mapTypeFromArcade(type: ArcadeTokenType): TokenType {
-    switch (type) {
-        case 'border-radius':
-            return 'borderRadius';
-        case 'border-width':
-            return 'borderWidth';
-        case 'font-weight':
-            return 'fontWeights';
-        case 'line-height':
-            return 'lineHeights';
-        case 'letter-spacing':
-            return 'letterSpacing';
-        case 'paragraph-spacing':
-            return 'paragraphSpacing';
-        case 'font-family':
-            return 'fontFamilies';
-        case 'font-size':
-            return 'fontSizes';
-        case 'size':
-            return 'sizing';
-        case 'space':
-            return 'spacing';
-        default:
-            return type;
-    }
-}
-
-async function readTokensFromArcade({secret, id}): Promise<ArcadeResponse> | null {
-    try {
-        const res = await fetch(
-            `https://api.usearcade.com/api/projects/${id}/tokens/draft/export/figma-tokens-plugin/raw`,
-            {
-                headers: {
-                    authorization: `Bearer ${secret}`,
-                },
-            }
-        ).then(async (r) => {
-            if (!r.ok) {
-                throw await r.json();
-            }
-            return r.json();
-        });
-
-        return res;
-    } catch (err) {
-        notifyToUI('Error fetching from Arcade, check console (F12)');
-        console.log('Error fetching from Arcade: ', err);
-    }
-
-    return null;
-}
-
-async function writeTokensToArcade(): Promise<TokenProps> | null {
-    throw new Error('Not implemented');
-}
-
-export default function useArcade() {
-    const dispatch = useDispatch<Dispatch>();
-
-    async function updateArcadeTokens() {
-        throw new Error('Not implemented');
-    }
-
-    async function createNewArcade() {
-        return null;
-    }
-
-    async function editArcadeToken({id, secret, data}): Promise<boolean> {
-        console.log('Calling edit arcade token', data);
-        const {name, value, options} = data;
-        const {description, type} = options;
-        const tokenName = data.oldName || name;
-        const newToken: {
-            name: string;
-            value: string;
-            description?: string;
-            type?: string;
-        } = {
-            name,
-            value,
-        };
-        if (description) {
-            newToken.description = description;
-        }
-        if (type) {
-            newToken.type = mapTypeToArcade(type);
-        }
-        try {
-            await fetch(`https://api.usearcade.com/api/projects/${id}/tokens/${tokenName}`, {
-                method: 'PATCH',
-                body: JSON.stringify({
-                    newToken,
-                    from: 'figma',
-                    changeComment: 'Edited by Figma Plugin',
-                }),
-                headers: {
-                    'Content-Type': 'application/json',
-                    authorization: `Bearer ${secret}`,
-                },
-            }).then(async (r) => {
-                if (!r.ok) {
-                    throw await r.json();
-                }
-                return r.json();
-            });
-
-            return true;
-        } catch (err) {
-            notifyToUI('Error editing token on Arcade, check console (F12)');
-            console.log('Error editing token on Arcade: ', err);
-            return false;
-        }
-    }
-
-    async function createArcadeToken({id, secret, data}): Promise<boolean> {
-        console.log('Calling create arcade token', data);
-        const {name, value, options = {}} = data;
-        const {description, type} = options;
-        const tokenName = name;
-        const tokenObj: {
-            name: string;
-            value: string;
-            description?: string;
-            type?: ArcadeTokenType;
-        } = {
-            name: tokenName,
-            value,
-        };
-        if (description) {
-            tokenObj.description = description;
-        }
-        if (type) {
-            tokenObj.type = mapTypeToArcade(type);
-        }
-        try {
-            await fetch(`https://api.usearcade.com/api/projects/${id}/tokens`, {
-                method: 'POST',
-                body: JSON.stringify({
-                    ...tokenObj,
-                    from: 'figma',
-                    changeComment: 'Created by Figma Plugin',
-                }),
-                headers: {
-                    'Content-Type': 'application/json',
-                    authorization: `Bearer ${secret}`,
-                },
-            }).then(async (r) => {
-                if (!r.ok) {
-                    throw await r.json();
-                }
-                return r.json();
-            });
-
-            return true;
-        } catch (err) {
-            notifyToUI('Error creating token on Arcade, check console (F12)');
-            console.log('Error creating token on Arcade: ', err);
-            return false;
-        }
-    }
-
-    // Read tokens from Arcade
-    async function fetchDataFromArcade(id, secret, name): Promise<TokenProps> {
-        console.log('Fetching from arcade', id, secret, name);
-        try {
-            let tokenValues;
-
-            if (!id && !secret) return;
-
-            const res = await readTokensFromArcade({id, secret});
-
-            if (res.exports) {
-                dispatch.uiState.setProjectURL(`https://app.usearcade.com/projects/${id}`);
-                postToFigma({
-                    type: MessageToPluginTypes.CREDENTIALS,
-                    id,
-                    name,
-                    secret,
-                    provider: StorageProviderType.ARCADE,
-                });
-                const tokens = res.exports['figma-tokens-plugin'];
-                if (tokens?.output) {
-                    const parsedTokens = JSON.parse(tokens.output);
-                    const mappedTokens = parsedTokens.tokens.map((token) => ({
-                        ...token,
-                        type: mapTypeFromArcade(token.type),
-                    }));
-
-                    const obj = {
-                        version: res.version,
-                        values: mappedTokens,
-                    };
-
-                    tokenValues = obj;
-                } else {
-                    notifyToUI('No tokens stored on remote');
-                }
-
-                return tokenValues;
-            }
-        } catch (e) {
-            console.error('Error parsing tokens', e);
-            return null;
-        }
-    }
-
-    async function deleteArcadeToken({id, secret, data}) {
-        console.log('Calling delete arcade token', data);
-        const {path} = data;
-        const tokenName = path;
-        try {
-            const res = await fetch(`https://api.usearcade.com/api/projects/${id}/tokens/${tokenName}`, {
-                method: 'DELETE',
-                headers: {
-                    authorization: `Bearer ${secret}`,
-                },
-            }).then(async (r) => {
-                if (!r.ok) {
-                    throw await r.json();
-                }
-                return r.json();
-            });
-            if (res) {
-                console.log('Success');
-            }
-        } catch (err) {
-            notifyToUI('Error deleting token on Arcade, check console (F12)');
-            console.log('Error deleting token on Arcade: ', err);
-        }
-    }
-
-    return {
-        fetchDataFromArcade,
-        updateArcadeTokens,
-        createArcadeToken,
-        editArcadeToken,
-        deleteArcadeToken,
-        createNewArcade,
-    };
-}
diff --git a/src/app/store/providers/github.tsx b/src/app/store/providers/github.tsx
new file mode 100644
index 000000000..7f4e9acd6
--- /dev/null
+++ b/src/app/store/providers/github.tsx
@@ -0,0 +1,269 @@
+import {useDispatch, useSelector} from 'react-redux';
+import {Dispatch, RootState} from '@/app/store';
+import {MessageToPluginTypes} from 'Types/messages';
+import {TokenProps} from 'Types/tokens';
+import convertTokensToObject from '@/utils/convertTokensToObject';
+import {Octokit} from '@octokit/rest';
+import useConfirm from '@/app/hooks/useConfirm';
+import usePushDialog from '@/app/hooks/usePushDialog';
+import IsJSONString from '@/utils/isJSONString';
+import {ContextObject} from 'Types/api';
+import {notifyToUI, postToFigma} from '../../../plugin/notifiers';
+
+/** Returns a URL to a page where the user can create a pull request with a given branch */
+export function getCreatePullRequestUrl(id: string, branchName: string) {
+    return `https://github.com/${id}/compare/${branchName}?expand=1`;
+}
+
+function hasSameContent(content, storedContent) {
+    const stringifiedContent = JSON.stringify(content.values, null, 2);
+
+    return stringifiedContent === storedContent;
+}
+
+export const fetchBranches = async ({context, owner, repo}) => {
+    const octokit = new Octokit({auth: context.secret});
+    const branches = await octokit.repos.listBranches({owner, repo}).then((response) => response.data);
+    return branches.map((branch) => branch.name);
+};
+
+export const checkPermissions = async ({context, owner, repo}) => {
+    const octokit = new Octokit({auth: context.secret});
+
+    const currentUser = await octokit.rest.users.getAuthenticated();
+
+    if (!currentUser.data.login) return null;
+
+    const permissions = await octokit.rest.repos.getCollaboratorPermissionLevel({
+        owner,
+        repo,
+        username: currentUser.data.login,
+    });
+
+    return permissions;
+};
+
+export const readContents = async ({context, owner, repo}) => {
+    const octokit = new Octokit({auth: context.secret});
+    let response;
+
+    try {
+        response = await octokit.rest.repos.getContent({
+            owner,
+            repo,
+            path: context.filePath,
+            ref: context.branch,
+        });
+        if (response.data.content) {
+            const data = atob(response.data.content);
+            // If content of file is parseable JSON, parse it
+            if (IsJSONString(data)) {
+                const parsed = JSON.parse(data);
+                return {
+                    values: parsed,
+                };
+            }
+            return null;
+        }
+        // If not, return null as we can't process that file. We should let the user know, though.
+        return null;
+    } catch (e) {
+        // Raise error (usually this is an auth error)
+        console.log('Error', e);
+        return null;
+    }
+};
+
+const commitToNewBranch = async ({context, tokenObj, owner, repo, commitMessage, branch}) => {
+    const OctokitWithPlugin = Octokit.plugin(require('octokit-commit-multiple-files'));
+    const octokit = new OctokitWithPlugin({auth: context.secret});
+
+    return octokit.repos.createOrUpdateFiles({
+        owner,
+        repo,
+        branch,
+        createBranch: true,
+        changes: [{message: commitMessage || 'Commit from Figma', files: {[context.filePath]: tokenObj}}],
+    });
+};
+
+const commitToExistingBranch = async ({context, tokenObj, owner, repo, commitMessage, branch}) => {
+    const OctokitWithPlugin = Octokit.plugin(require('octokit-commit-multiple-files'));
+    const octokit = new OctokitWithPlugin({auth: context.secret});
+    return octokit.repos.createOrUpdateFiles({
+        owner,
+        repo,
+        branch,
+        createBranch: false,
+        changes: [{message: commitMessage || 'Commit from Figma', files: {[context.filePath]: tokenObj}}],
+    });
+};
+
+export function useGitHub() {
+    const {tokens} = useSelector((state: RootState) => state.tokenState);
+    const {localApiState} = useSelector((state: RootState) => state.uiState);
+    const dispatch = useDispatch<Dispatch>();
+
+    const {confirm} = useConfirm();
+    const {pushDialog} = usePushDialog();
+
+    async function askUserIfPull(): Promise<boolean> {
+        const isConfirmed = await confirm({
+            text: 'Pull from GitHub?',
+            description: 'Your repo already contains tokens, do you want to pull these now?',
+        });
+        return isConfirmed;
+    }
+
+    function getTokenObj() {
+        const raw = convertTokensToObject(tokens);
+        const string = JSON.stringify(raw, null, 2);
+        return {raw, string};
+    }
+
+    async function writeTokensToGitHub({
+        context,
+        tokenObj,
+        owner,
+        repo,
+        commitMessage,
+        customBranch,
+    }: {
+        context: ContextObject;
+        tokenObj: string;
+        owner: string;
+        repo: string;
+        commitMessage?: string;
+        customBranch?: string;
+    }): Promise<TokenProps | null> {
+        try {
+            const branches = await fetchBranches({context, owner, repo});
+            const branch = customBranch || context.branch;
+            if (!branches) return null;
+            if (branches.includes(branch)) {
+                await commitToExistingBranch({context, tokenObj, owner, repo, commitMessage, branch});
+            } else {
+                await commitToNewBranch({context, tokenObj, owner, repo, commitMessage, branch});
+            }
+            dispatch.tokenState.setLastSyncedState(tokenObj);
+            notifyToUI('Pushed changes to GitHub');
+        } catch (e) {
+            notifyToUI('Error pushing to GitHub');
+            console.log('Error pushing to GitHub', e);
+            return null;
+        }
+    }
+
+    async function pushTokensToGitHub(context) {
+        const {raw: rawTokenObj, string: tokenObj} = getTokenObj();
+        const [owner, repo] = context.id.split('/');
+
+        const content = await readContents({context, owner, repo});
+        if (content) {
+            if (content && hasSameContent(content, tokenObj)) {
+                notifyToUI('Nothing to commit');
+                return rawTokenObj;
+            }
+        }
+
+        dispatch.uiState.setLocalApiState({...context});
+
+        const pushSettings = await pushDialog();
+        if (pushSettings) {
+            const {commitMessage, customBranch} = pushSettings;
+            await writeTokensToGitHub({context, tokenObj, owner, repo, commitMessage, customBranch});
+            dispatch.uiState.setLocalApiState({...localApiState, branch: customBranch});
+            dispatch.uiState.setApiData({...context, branch: customBranch});
+
+            pushDialog('success');
+        }
+        return rawTokenObj;
+    }
+
+    async function pullTokensFromGitHub(context) {
+        const [owner, repo] = context.id.split('/');
+
+        try {
+            const currentPermissions = await checkPermissions({context, owner, repo});
+            if (currentPermissions) {
+                dispatch.tokenState.setEditProhibited(false);
+            }
+        } catch (e) {
+            dispatch.tokenState.setEditProhibited(true);
+        }
+        try {
+            const content = await readContents({context, owner, repo});
+
+            if (content) {
+                return content;
+            }
+        } catch (e) {
+            console.log('Error', e);
+        }
+        return null;
+    }
+
+    // Function to initially check auth and sync tokens with GitHub
+    async function syncTokensWithGitHub(context): Promise<TokenProps> {
+        try {
+            const [owner, repo] = context.id.split('/');
+            const hasBranches = await fetchBranches({context, owner, repo});
+
+            if (!hasBranches) {
+                return null;
+            }
+            const content = await readContents({context, owner, repo});
+            const {string: tokenObj} = getTokenObj();
+
+            if (content) {
+                if (!hasSameContent(content, tokenObj)) {
+                    const userDecision = await askUserIfPull();
+                    if (userDecision) {
+                        return content;
+                    }
+                }
+            } else {
+                return pushTokensToGitHub(context);
+            }
+            // If repo contains no tokens, return null
+            return null;
+        } catch (e) {
+            console.log('Error', e);
+        }
+    }
+
+    async function addNewGitHubCredentials(context): Promise<TokenProps> {
+        let {raw: rawTokenObj} = getTokenObj();
+
+        try {
+            const data = await syncTokensWithGitHub(context);
+
+            if (data) {
+                postToFigma({
+                    type: MessageToPluginTypes.CREDENTIALS,
+                    ...context,
+                });
+                if (data?.values) {
+                    dispatch.tokenState.setLastSyncedState(JSON.stringify(data.values, null, 2));
+                    dispatch.tokenState.setTokenData(data);
+                    rawTokenObj = data.values;
+                } else {
+                    notifyToUI('No tokens stored on remote');
+                }
+            }
+
+            return {
+                values: rawTokenObj,
+            };
+        } catch (e) {
+            notifyToUI('Error fetching from URL, check console (F12)');
+            console.log('Error:', e);
+        }
+    }
+    return {
+        addNewGitHubCredentials,
+        syncTokensWithGitHub,
+        pullTokensFromGitHub,
+        pushTokensToGitHub,
+    };
+}
diff --git a/src/app/store/providers/jsonbin.tsx b/src/app/store/providers/jsonbin.tsx
index 62dac05bc..e61c1dda6 100644
--- a/src/app/store/providers/jsonbin.tsx
+++ b/src/app/store/providers/jsonbin.tsx
@@ -117,10 +117,6 @@ export function useJSONbin() {
                 secret,
                 provider: StorageProviderType.JSONBIN,
             });
-            setStorageType({
-                provider: {id: jsonBinData.metadata.id, name, provider: StorageProviderType.JSONBIN},
-                bool: true,
-            });
             updateJSONBinTokens({
                 tokens,
                 context: {
@@ -136,7 +132,9 @@ export function useJSONbin() {
                 secret,
                 provider: StorageProviderType.JSONBIN,
             });
-            return tokens;
+            dispatch.uiState.setProjectURL(`https://jsonbin.io/${jsonBinData.metadata.id}`);
+
+            return jsonBinData.metadata.id;
         }
         notifyToUI('Something went wrong. See console for details');
         return null;
@@ -162,6 +160,8 @@ export function useJSONbin() {
                     provider: StorageProviderType.JSONBIN,
                 });
                 if (jsonBinData?.values) {
+                    dispatch.tokenState.setEditProhibited(false);
+
                     return {
                         version: jsonBinData.version,
                         updatedAt: jsonBinData.updatedAt,
@@ -187,6 +187,7 @@ export function useJSONbin() {
                 provider: context,
                 bool: true,
             });
+            dispatch.tokenState.setLastSyncedState(JSON.stringify(tokenValues.values, null, 2));
             dispatch.tokenState.setTokenData(tokenValues);
         }
 
diff --git a/src/app/store/providers/url.tsx b/src/app/store/providers/url.tsx
new file mode 100644
index 000000000..2a0f10bf2
--- /dev/null
+++ b/src/app/store/providers/url.tsx
@@ -0,0 +1,74 @@
+import {useDispatch} from 'react-redux';
+import {Dispatch} from '@/app/store';
+import {StorageProviderType} from 'Types/api';
+import {MessageToPluginTypes} from 'Types/messages';
+import {TokenProps} from 'Types/tokens';
+import {notifyToUI, postToFigma} from '../../../plugin/notifiers';
+
+async function readTokensFromURL({secret, id}): Promise<TokenProps> | null {
+    let customHeaders = secret;
+    const defaultHeaders = {
+        Accept: 'application/json',
+    };
+    try {
+        customHeaders = JSON.parse(secret);
+    } finally {
+        const headers = {
+            ...defaultHeaders,
+            ...customHeaders,
+        };
+        const response = await fetch(id, {
+            method: 'GET',
+            headers,
+        });
+
+        if (response.ok) {
+            const data = await response.json();
+            return data;
+        }
+        notifyToUI('There was an error connecting, check your sync settings');
+        return null;
+    }
+}
+
+export default function useURL() {
+    const dispatch = useDispatch<Dispatch>();
+
+    // Read tokens from URL
+    async function pullTokensFromURL(context): Promise<TokenProps> | null {
+        const {id, secret, name} = context;
+
+        if (!id && !secret) return;
+
+        try {
+            const data = await readTokensFromURL({id, secret});
+            dispatch.uiState.setProjectURL(id);
+
+            if (data) {
+                postToFigma({
+                    type: MessageToPluginTypes.CREDENTIALS,
+                    id,
+                    name,
+                    secret,
+                    provider: StorageProviderType.URL,
+                });
+                if (data) {
+                    const tokenObj = {
+                        values: data,
+                    };
+                    dispatch.tokenState.setTokenData(tokenObj);
+                    dispatch.tokenState.setEditProhibited(true);
+                    return tokenObj;
+                }
+
+                notifyToUI('No tokens stored on remote');
+            }
+        } catch (e) {
+            notifyToUI('Error fetching from URL, check console (F12)');
+            console.log('Error:', e);
+        }
+    }
+    return {
+        pullTokensFromURL,
+    };
+}
diff --git a/src/app/store/remoteTokens.tsx b/src/app/store/remoteTokens.tsx
index 7d2787d90..56da167dd 100644
--- a/src/app/store/remoteTokens.tsx
+++ b/src/app/store/remoteTokens.tsx
@@ -3,8 +3,10 @@ import {StorageProviderType} from 'Types/api';
 import {MessageToPluginTypes} from 'Types/messages';
 import {postToFigma} from '../../plugin/notifiers';
 import {useJSONbin} from './providers/jsonbin';
+import useURL from './providers/url';
 import {Dispatch, RootState} from '../store';
 import useStorage from './useStorage';
+import {useGitHub} from './providers/github';
 
 export default function useRemoteTokens() {
     const dispatch = useDispatch<Dispatch>();
@@ -12,6 +14,8 @@ export default function useRemoteTokens() {
 
     const {setStorageType} = useStorage();
     const {pullTokensFromJSONBin, addJSONBinCredentials, createNewJSONBin} = useJSONbin();
+    const {addNewGitHubCredentials, pullTokensFromGitHub, pushTokensToGitHub} = useGitHub();
+    const {pullTokensFromURL} = useURL();
 
     const pullTokens = async (context = api) => {
         dispatch.uiState.setLoading(true);
@@ -23,13 +27,23 @@ export default function useRemoteTokens() {
                 tokenValues = await pullTokensFromJSONBin(context);
                 break;
             }
+            case StorageProviderType.GITHUB: {
+                tokenValues = await pullTokensFromGitHub(context);
+                break;
+            }
+            case StorageProviderType.URL: {
+                tokenValues = await pullTokensFromURL(context);
+                break;
+            }
             default:
                 throw new Error('Not implemented');
         }
 
         if (tokenValues) {
+            dispatch.tokenState.setLastSyncedState(JSON.stringify(tokenValues.values, null, 2));
             dispatch.tokenState.setTokenData(tokenValues);
         }
+
         dispatch.uiState.setLoading(false);
     };
 
@@ -37,29 +51,52 @@ export default function useRemoteTokens() {
         dispatch.tokenState.setEmptyTokens();
         dispatch.uiState.setLocalApiState(context);
         dispatch.uiState.setApiData(context);
+        dispatch.tokenState.setEditProhibited(false);
         setStorageType({provider: context, bool: true});
         await pullTokens(context);
         return null;
     };
 
+    const pushTokens = async () => {
+        switch (api.provider) {
+            case StorageProviderType.GITHUB: {
+                await pushTokensToGitHub(api);
+                break;
+            }
+            default:
+                throw new Error('Not implemented');
+        }
+    };
+
     async function addNewProviderItem(context): Promise<boolean> {
+        const credentials = context;
         let data;
         switch (context.provider) {
             case StorageProviderType.JSONBIN: {
                 if (context.id) {
                     data = await addJSONBinCredentials(context);
                 } else {
-                    data = await createNewJSONBin(context);
+                    const id = await createNewJSONBin(context);
+                    credentials.id = id;
+                    data = true;
                 }
                 break;
             }
+            case StorageProviderType.GITHUB: {
+                data = await addNewGitHubCredentials(credentials);
+                break;
+            }
+            case StorageProviderType.URL: {
+                data = await pullTokensFromURL(context);
+                break;
+            }
             default:
                 throw new Error('Not implemented');
         }
         if (data) {
-            dispatch.uiState.setLocalApiState(context);
-            dispatch.uiState.setApiData(context);
-            setStorageType({provider: context, bool: true});
+            dispatch.uiState.setLocalApiState(credentials);
+            dispatch.uiState.setApiData(credentials);
+            setStorageType({provider: credentials, bool: true});
             return true;
         }
         return false;
@@ -77,6 +114,7 @@ export default function useRemoteTokens() {
         restoreStoredProvider,
         deleteProvider,
         pullTokens,
+        pushTokens,
         addNewProviderItem,
     };
 }
diff --git a/src/app/store/updateSources.tsx b/src/app/store/updateSources.tsx
index edc6d0f96..f576dc062 100644
--- a/src/app/store/updateSources.tsx
+++ b/src/app/store/updateSources.tsx
@@ -1,5 +1,5 @@
 import {MessageToPluginTypes} from '@types/messages';
-import {computeMergedTokens, resolveTokenValues} from '@/plugin/tokenHelpers';
+import {mergeTokenGroups, resolveTokenValues} from '@/plugin/tokenHelpers';
 import {TokenProps} from '../../../types/tokens';
 import {StorageProviderType} from '../../../types/api';
 import {notifyToUI, postToFigma} from '../../plugin/notifiers';
@@ -35,7 +35,8 @@ async function updateRemoteTokens({
             });
             break;
         }
-        case StorageProviderType.ARCADE: {
+
+        case StorageProviderType.GITHUB: {
             break;
         }
         default:
@@ -65,7 +66,7 @@ export default async function updateTokensOnSources({
             oldUpdatedAt: lastUpdatedAt,
         });
     }
-    const mergedTokens = tokens ? resolveTokenValues(computeMergedTokens(tokens, usedTokenSet)) : null;
+    const mergedTokens = tokens ? resolveTokenValues(mergeTokenGroups(tokens, usedTokenSet)) : null;
 
     postToFigma({
         type: MessageToPluginTypes.UPDATE,
diff --git a/src/app/store/useManageTokens.tsx b/src/app/store/useManageTokens.tsx
index a55637d22..b89226739 100644
--- a/src/app/store/useManageTokens.tsx
+++ b/src/app/store/useManageTokens.tsx
@@ -5,7 +5,7 @@ import useConfirm from '../hooks/useConfirm';
 
 export default function useManageTokens() {
     const {activeTokenSet} = useSelector((state: RootState) => state.tokenState);
-    const {editToken, createToken, deleteToken, deleteTokenGroup} = useDispatch<Dispatch>().tokenState;
+    const {editToken, createToken, deleteToken, duplicateToken, deleteTokenGroup} = useDispatch<Dispatch>().tokenState;
 
     const dispatch = useDispatch<Dispatch>();
     const {confirm} = useConfirm();
@@ -63,6 +63,12 @@ export default function useManageTokens() {
         dispatch.uiState.setLoading(false);
     }
 
+    async function duplicateSingleToken(data) {
+        dispatch.uiState.setLoading(true);
+        duplicateToken(data);
+        dispatch.uiState.setLoading(false);
+    }
+
     async function deleteSingleToken(data) {
         const userConfirmation = await confirm({
             text: 'Delete token?',
@@ -87,5 +93,5 @@ export default function useManageTokens() {
         }
     }
 
-    return {editSingleToken, createSingleToken, deleteSingleToken, deleteGroup};
+    return {editSingleToken, createSingleToken, deleteSingleToken, deleteGroup, duplicateSingleToken};
 }
diff --git a/src/app/store/useTokens.tsx b/src/app/store/useTokens.tsx
index 9250cc97f..41abe2a97 100644
--- a/src/app/store/useTokens.tsx
+++ b/src/app/store/useTokens.tsx
@@ -2,11 +2,10 @@ import {postToFigma} from '@/plugin/notifiers';
 import {useSelector} from 'react-redux';
 import {MessageToPluginTypes} from 'Types/messages';
 import checkIfAlias from '@/utils/checkIfAlias';
-import getAliasValue from '@/utils/aliases';
 import {SingleTokenObject} from 'Types/tokens';
 import stringifyTokens from '@/utils/stringifyTokens';
 import formatTokens from '@/utils/formatTokens';
-import {computeMergedTokens, resolveTokenValues} from '@/plugin/tokenHelpers';
+import {mergeTokenGroups, resolveTokenValues} from '@/plugin/tokenHelpers';
 import {SelectionValue} from './models/tokenState';
 import {RootState} from '../store';
 
@@ -16,14 +15,14 @@ export default function useTokens() {
 
     // Finds token that matches name
     function findToken(name: string) {
-        const resolved = resolveTokenValues(computeMergedTokens(tokens, [...usedTokenSet, activeTokenSet]));
+        const resolved = resolveTokenValues(mergeTokenGroups(tokens, [...usedTokenSet, activeTokenSet]));
 
         return resolved.find((n) => n.name === name);
     }
 
     // Gets value of token
     function getTokenValue(token: SingleTokenObject, resolved) {
-        return getAliasValue(token, resolved);
+        return resolved.find((t) => t.name === token.name).value;
     }
 
     // Returns resolved value of a specific token
@@ -37,6 +36,7 @@ export default function useTokens() {
             type: MessageToPluginTypes.SET_NODE_DATA,
             values: data,
             tokens: resolvedTokens,
+            settings,
         });
     }
 
@@ -71,10 +71,14 @@ export default function useTokens() {
 
     // Calls Figma with all tokens to create styles
     function createStylesFromTokens() {
-        const resolved = resolveTokenValues(computeMergedTokens(tokens, usedTokenSet));
+        const resolved = resolveTokenValues(mergeTokenGroups(tokens, usedTokenSet));
+        const withoutIgnored = resolved.filter((token) => {
+            return !token.name.split('.').some((part) => part.startsWith('_'));
+        });
+
         postToFigma({
             type: MessageToPluginTypes.CREATE_STYLES,
-            tokens: resolved,
+            tokens: withoutIgnored,
             settings,
         });
     }
diff --git a/src/app/styles/tailwind.css b/src/app/styles/tailwind.css
index 467da8cb2..52009a228 100644
--- a/src/app/styles/tailwind.css
+++ b/src/app/styles/tailwind.css
@@ -85,11 +85,13 @@
 
 body {
     @apply font-body text-sm leading-normal;
+}
 
+.content {
     overflow-y: scroll;
 }
 
-body::-webkit-scrollbar,
+.content::-webkit-scrollbar,
 .ReactModal__Content::-webkit-scrollbar,
 textarea::-webkit-scrollbar {
     width: 9px;
@@ -99,7 +101,7 @@ textarea::-webkit-scrollbar {
     height: 9px;
 }
 
-body::-webkit-scrollbar-thumb,
+.content::-webkit-scrollbar-thumb,
 .overflow-x-auto::-webkit-scrollbar-thumb,
 .ReactModal__Content::-webkit-scrollbar-thumb,
 textarea::-webkit-scrollbar-thumb {
@@ -197,6 +199,10 @@ textarea::-webkit-scrollbar-thumb {
     @apply border-none rounded bg-gray-100 px-0 py-0;
 }
 
+.button-property button {
+    @apply rounded;
+}
+
 .button-property:hover {
     @apply bg-gray-100 bg-opacity-50;
 }
@@ -206,13 +212,11 @@ textarea::-webkit-scrollbar-thumb {
 }
 
 .button-active {
-    @apply bg-primary-100;
-    box-shadow: 0 0 0 2px theme('colors.primary.300');
+    @apply bg-primary-100 shadow-focus-muted;
 }
 
-.button-active:hover {
-    @apply bg-opacity-75 outline-none;
-    box-shadow: 0 0 0 2px theme('colors.primary.400');
+.button-property button:focus {
+    @apply bg-opacity-75 outline-none shadow-focus-subtle;
 }
 
 .button-property-color {
@@ -332,7 +336,12 @@ form {
 }
 
 .input {
-    @apply bg-white border border-gray-300 text-xs p-2 rounded shadow-sm w-24;
+    @apply bg-white border border-gray-300 text-xxs p-2 rounded-sm w-24 font-mono;
+}
+
+.input:focus {
+    outline: none;
+    @apply shadow-focus;
 }
 
 /* switch */
@@ -473,4 +482,11 @@ form {
     border-radius: 50%;
 }
 
+#corner {
+    position: fixed;
+    right: 0px;
+    bottom: 0px;
+    cursor: nwse-resize;
+}
+
 @tailwind utilities;
diff --git a/src/config/default.json b/src/config/default.json
index b6d163f41..3877ee516 100644
--- a/src/config/default.json
+++ b/src/config/default.json
@@ -1,242 +1,784 @@
 {
     "global": {
         "spacing": {
-            "xs": 4,
-            "sm": 8,
-            "md": 16,
-            "lg": 32,
-            "xl": 96
+            "scale": {
+                "value": "2",
+                "type": "spacing"
+            },
+            "xs": {
+                "value": "4",
+                "type": "spacing"
+            },
+            "sm": {
+                "value": "{spacing.xs} * {spacing.scale}",
+                "type": "spacing"
+            },
+            "md": {
+                "value": "{spacing.sm} * {spacing.scale}",
+                "type": "spacing"
+            },
+            "lg": {
+                "value": "{spacing.md} * {spacing.scale}",
+                "type": "spacing"
+            },
+            "xl": {
+                "value": "{spacing.lg} * {spacing.scale}",
+                "type": "spacing"
+            },
+            "broken": {
+                "value": "{spacing.somethingthatdoesnotexist}",
+                "type": "spacing",
+                "description": "I'm a broken reference"
+            }
         },
         "sizing": {
-            "xs": 4,
-            "sm": 8,
-            "md": 16,
-            "lg": 32,
-            "xl": 96
+            "scale": {
+                "value": "1.5",
+                "type": "sizing"
+            },
+            "xs": {
+                "value": "4",
+                "type": "sizing"
+            },
+            "sm": {
+                "value": "{sizing.xs} * {sizing.scale}",
+                "type": "sizing"
+            },
+            "md": {
+                "value": "{sizing.sm} * {sizing.scale}",
+                "type": "sizing"
+            },
+            "lg": {
+                "value": "{sizing.md} * {sizing.scale}",
+                "type": "sizing"
+            },
+            "xl": {
+                "value": "{sizing.lg} * {sizing.scale}",
+                "type": "sizing"
+            }
         },
         "borderRadius": {
-            "sm": 4,
-            "lg": 8,
-            "xl": 16
+            "sm": {
+                "value": "4",
+                "type": "borderRadius"
+            },
+            "lg": {
+                "value": "8",
+                "type": "borderRadius"
+            },
+            "xl": {
+                "value": "16",
+                "type": "borderRadius"
+            }
         },
         "borderWidth": {
-            "none": 0,
-            "xs": 1,
-            "sm": 2,
-            "md": 4,
-            "lg": 8
-        },
-        "boxShadow": {
-            "dark": {
-                "value": {
-                    "x": 5,
-                    "y": 5,
-                    "spread": 3,
-                    "color": "rgba(0, 0, 0, 0.5)",
-                    "blur": 5
-                }
+            "none": {
+                "value": "0",
+                "type": "borderWidth"
+            },
+            "xs": {
+                "value": "1",
+                "type": "borderWidth"
+            },
+            "sm": {
+                "value": "2",
+                "type": "borderWidth"
+            },
+            "md": {
+                "value": "4",
+                "type": "borderWidth"
+            },
+            "lg": {
+                "value": "8",
+                "type": "borderWidth"
             }
         },
         "colors": {
+            "black": {
+                "value": "#000000",
+                "type": "color"
+            },
+            "white": {
+                "value": "#ffffff",
+                "type": "color"
+            },
             "gray": {
-                "100": "#f7fafc",
-                "200": "#edf2f7",
-                "300": "#e2e8f0",
-                "400": "#cbd5e0",
-                "500": "#a0aec0",
-                "600": "#718096",
-                "700": "#4a5568",
-                "800": "#2d3748",
-                "900": "#1a202c"
+                "100": {
+                    "value": "#f7fafc",
+                    "type": "color"
+                },
+                "200": {
+                    "value": "#edf2f7",
+                    "type": "color"
+                },
+                "300": {
+                    "value": "#e2e8f0",
+                    "type": "color"
+                },
+                "400": {
+                    "value": "#cbd5e0",
+                    "type": "color"
+                },
+                "500": {
+                    "value": "#a0aec0",
+                    "type": "color"
+                },
+                "600": {
+                    "value": "#718096",
+                    "type": "color"
+                },
+                "700": {
+                    "value": "#4a5568",
+                    "type": "color"
+                },
+                "800": {
+                    "value": "#2d3748",
+                    "type": "color"
+                },
+                "900": {
+                    "value": "#1a202c",
+                    "type": "color"
+                }
             },
             "red": {
-                "100": "#fff5f5",
-                "200": "#fed7d7",
-                "300": "#feb2b2",
-                "400": "#fc8181",
-                "500": "#f56565",
-                "600": "#e53e3e",
-                "700": "#c53030",
-                "800": "#9b2c2c",
-                "900": "#742a2a"
+                "100": {
+                    "value": "#fff5f5",
+                    "type": "color"
+                },
+                "200": {
+                    "value": "#fed7d7",
+                    "type": "color"
+                },
+                "300": {
+                    "value": "#feb2b2",
+                    "type": "color"
+                },
+                "400": {
+                    "value": "#fc8181",
+                    "type": "color"
+                },
+                "500": {
+                    "value": "#f56565",
+                    "type": "color"
+                },
+                "600": {
+                    "value": "#e53e3e",
+                    "type": "color"
+                },
+                "700": {
+                    "value": "#c53030",
+                    "type": "color"
+                },
+                "800": {
+                    "value": "#9b2c2c",
+                    "type": "color"
+                },
+                "900": {
+                    "value": "#742a2a",
+                    "type": "color"
+                }
             },
             "orange": {
-                "100": "#fffaf0",
-                "200": "#feebc8",
-                "300": "#fbd38d",
-                "400": "#f6ad55",
-                "500": "#ed8936",
-                "600": "#dd6b20",
-                "700": "#c05621",
-                "800": "#9c4221",
-                "900": "#7b341e"
+                "100": {
+                    "value": "#fffaf0",
+                    "type": "color"
+                },
+                "200": {
+                    "value": "#feebc8",
+                    "type": "color"
+                },
+                "300": {
+                    "value": "#fbd38d",
+                    "type": "color"
+                },
+                "400": {
+                    "value": "#f6ad55",
+                    "type": "color"
+                },
+                "500": {
+                    "value": "#ed8936",
+                    "type": "color"
+                },
+                "600": {
+                    "value": "#dd6b20",
+                    "type": "color"
+                },
+                "700": {
+                    "value": "#c05621",
+                    "type": "color"
+                },
+                "800": {
+                    "value": "#9c4221",
+                    "type": "color"
+                },
+                "900": {
+                    "value": "#7b341e",
+                    "type": "color"
+                }
             },
             "yellow": {
-                "100": "#fffff0",
-                "200": "#fefcbf",
-                "300": "#faf089",
-                "400": "#f6e05e",
-                "500": "#ecc94b",
-                "600": "#d69e2e",
-                "700": "#b7791f",
-                "800": "#975a16",
-                "900": "#744210"
+                "100": {
+                    "value": "#fffff0",
+                    "type": "color"
+                },
+                "200": {
+                    "value": "#fefcbf",
+                    "type": "color"
+                },
+                "300": {
+                    "value": "#faf089",
+                    "type": "color"
+                },
+                "400": {
+                    "value": "#f6e05e",
+                    "type": "color"
+                },
+                "500": {
+                    "value": "#ecc94b",
+                    "type": "color"
+                },
+                "600": {
+                    "value": "#d69e2e",
+                    "type": "color"
+                },
+                "700": {
+                    "value": "#b7791f",
+                    "type": "color"
+                },
+                "800": {
+                    "value": "#975a16",
+                    "type": "color"
+                },
+                "900": {
+                    "value": "#744210",
+                    "type": "color"
+                }
             },
             "green": {
-                "100": "#f0fff4",
-                "200": "#c6f6d5",
-                "300": "#9ae6b4",
-                "400": "#68d391",
-                "500": "#48bb78",
-                "600": "#38a169",
-                "700": "#2f855a",
-                "800": "#276749",
-                "900": "#22543d"
+                "100": {
+                    "value": "#f0fff4",
+                    "type": "color"
+                },
+                "200": {
+                    "value": "#c6f6d5",
+                    "type": "color"
+                },
+                "300": {
+                    "value": "#9ae6b4",
+                    "type": "color"
+                },
+                "400": {
+                    "value": "#68d391",
+                    "type": "color"
+                },
+                "500": {
+                    "value": "#48bb78",
+                    "type": "color"
+                },
+                "600": {
+                    "value": "#38a169",
+                    "type": "color"
+                },
+                "700": {
+                    "value": "#2f855a",
+                    "type": "color"
+                },
+                "800": {
+                    "value": "#276749",
+                    "type": "color"
+                },
+                "900": {
+                    "value": "#22543d",
+                    "type": "color"
+                }
             },
             "teal": {
-                "100": "#e6fffa",
-                "200": "#b2f5ea",
-                "300": "#81e6d9",
-                "400": "#4fd1c5",
-                "500": "#38b2ac",
-                "600": "#319795",
-                "700": "#2c7a7b",
-                "800": "#285e61",
-                "900": "#234e52"
+                "100": {
+                    "value": "#e6fffa",
+                    "type": "color"
+                },
+                "200": {
+                    "value": "#b2f5ea",
+                    "type": "color"
+                },
+                "300": {
+                    "value": "#81e6d9",
+                    "type": "color"
+                },
+                "400": {
+                    "value": "#4fd1c5",
+                    "type": "color"
+                },
+                "500": {
+                    "value": "#38b2ac",
+                    "type": "color"
+                },
+                "600": {
+                    "value": "#319795",
+                    "type": "color"
+                },
+                "700": {
+                    "value": "#2c7a7b",
+                    "type": "color"
+                },
+                "800": {
+                    "value": "#285e61",
+                    "type": "color"
+                },
+                "900": {
+                    "value": "#234e52",
+                    "type": "color"
+                }
             },
             "blue": {
-                "100": "#ebf8ff",
-                "200": "#bee3f8",
-                "300": "#90cdf4",
-                "400": "#63b3ed",
-                "500": "#4299e1",
-                "600": "#3182ce",
-                "700": "#2b6cb0",
-                "800": "#2c5282",
-                "900": "#2a4365"
+                "100": {
+                    "value": "#ebf8ff",
+                    "type": "color"
+                },
+                "200": {
+                    "value": "#bee3f8",
+                    "type": "color"
+                },
+                "300": {
+                    "value": "#90cdf4",
+                    "type": "color"
+                },
+                "400": {
+                    "value": "#63b3ed",
+                    "type": "color"
+                },
+                "500": {
+                    "value": "#4299e1",
+                    "type": "color"
+                },
+                "600": {
+                    "value": "#3182ce",
+                    "type": "color"
+                },
+                "700": {
+                    "value": "#2b6cb0",
+                    "type": "color"
+                },
+                "800": {
+                    "value": "#2c5282",
+                    "type": "color"
+                },
+                "900": {
+                    "value": "#2a4365",
+                    "type": "color"
+                }
             },
             "indigo": {
-                "100": "#ebf4ff",
-                "200": "#c3dafe",
-                "300": "#a3bffa",
-                "400": "#7f9cf5",
-                "500": "#667eea",
-                "600": "#5a67d8",
-                "700": "#4c51bf",
-                "800": "#434190",
-                "900": "#3c366b"
+                "100": {
+                    "value": "#ebf4ff",
+                    "type": "color"
+                },
+                "200": {
+                    "value": "#c3dafe",
+                    "type": "color"
+                },
+                "300": {
+                    "value": "#a3bffa",
+                    "type": "color"
+                },
+                "400": {
+                    "value": "#7f9cf5",
+                    "type": "color"
+                },
+                "500": {
+                    "value": "#667eea",
+                    "type": "color"
+                },
+                "600": {
+                    "value": "#5a67d8",
+                    "type": "color"
+                },
+                "700": {
+                    "value": "#4c51bf",
+                    "type": "color"
+                },
+                "800": {
+                    "value": "#434190",
+                    "type": "color"
+                },
+                "900": {
+                    "value": "#3c366b",
+                    "type": "color"
+                }
             },
             "purple": {
-                "100": "#faf5ff",
-                "200": "#e9d8fd",
-                "300": "#d6bcfa",
-                "400": "#b794f4",
-                "500": "#9f7aea",
-                "600": "#805ad5",
-                "700": "#6b46c1",
-                "800": "#553c9a",
-                "900": "#44337a"
+                "100": {
+                    "value": "#faf5ff",
+                    "type": "color"
+                },
+                "200": {
+                    "value": "#e9d8fd",
+                    "type": "color"
+                },
+                "300": {
+                    "value": "#d6bcfa",
+                    "type": "color"
+                },
+                "400": {
+                    "value": "#b794f4",
+                    "type": "color"
+                },
+                "500": {
+                    "value": "#9f7aea",
+                    "type": "color"
+                },
+                "600": {
+                    "value": "#805ad5",
+                    "type": "color"
+                },
+                "700": {
+                    "value": "#6b46c1",
+                    "type": "color"
+                },
+                "800": {
+                    "value": "#553c9a",
+                    "type": "color"
+                },
+                "900": {
+                    "value": "#44337a",
+                    "type": "color"
+                }
             },
             "pink": {
-                "100": "#fff5f7",
-                "200": "#fed7e2",
-                "300": "#fbb6ce",
-                "400": "#f687b3",
-                "500": "#ed64a6",
-                "600": "#d53f8c",
-                "700": "#b83280",
-                "800": "#97266d",
-                "900": "#702459"
-            },
-            "button": {
-                "background": "$colors.brand",
-                "hover": "$colors.blue.400"
-            },
-            "white": "#ffffff",
-            "black": "#000000",
-            "brand": "$colors.blue.500",
-            "accent": "$colors.green.500"
+                "100": {
+                    "value": "#fff5f7",
+                    "type": "color"
+                },
+                "200": {
+                    "value": "#fed7e2",
+                    "type": "color"
+                },
+                "300": {
+                    "value": "#fbb6ce",
+                    "type": "color"
+                },
+                "400": {
+                    "value": "#f687b3",
+                    "type": "color"
+                },
+                "500": {
+                    "value": "#ed64a6",
+                    "type": "color"
+                },
+                "600": {
+                    "value": "#d53f8c",
+                    "type": "color"
+                },
+                "700": {
+                    "value": "#b83280",
+                    "type": "color"
+                },
+                "800": {
+                    "value": "#97266d",
+                    "type": "color"
+                },
+                "900": {
+                    "value": "#702459",
+                    "type": "color"
+                }
+            }
         },
         "opacity": {
-            "low": "10%",
-            "md": "50%",
-            "high": "90%"
+            "low": {
+                "value": "10%",
+                "type": "opacity"
+            },
+            "md": {
+                "value": "50%",
+                "type": "opacity"
+            },
+            "high": {
+                "value": "90%",
+                "type": "opacity"
+            }
         },
         "fontFamilies": {
-            "heading": "Inter",
-            "body": "Roboto"
+            "heading": {
+                "value": "Inter",
+                "type": "fontFamilies"
+            },
+            "body": {
+                "value": "Roboto",
+                "type": "fontFamilies"
+            }
         },
         "lineHeights": {
-            "heading": "110%",
-            "body": "140%"
+            "heading": {
+                "value": "110%",
+                "type": "lineHeights"
+            },
+            "body": {
+                "value": "140%",
+                "type": "lineHeights"
+            }
         },
         "letterSpacing": {
-            "default": 0,
-            "increased": "150%",
-            "decreased": "-5%"
+            "default": {
+                "value": "0",
+                "type": "letterSpacing"
+            },
+            "increased": {
+                "value": "150%",
+                "type": "letterSpacing"
+            },
+            "decreased": {
+                "value": "-5%",
+                "type": "letterSpacing"
+            }
         },
         "paragraphSpacing": {
-            "h1": 32,
-            "h2": 26
+            "h1": {
+                "value": "32",
+                "type": "paragraphSpacing"
+            },
+            "h2": {
+                "value": "26",
+                "type": "paragraphSpacing"
+            }
         },
         "fontWeights": {
-            "headingRegular": "Regular",
-            "headingBold": "Bold",
-            "bodyRegular": "Regular",
-            "bodyBold": "Bold"
+            "headingRegular": {
+                "value": "Regular",
+                "type": "fontWeights"
+            },
+            "headingBold": {
+                "value": "Bold",
+                "type": "fontWeights"
+            },
+            "bodyRegular": {
+                "value": "Regular",
+                "type": "fontWeights"
+            },
+            "bodyBold": {
+                "value": "Bold",
+                "type": "fontWeights"
+            }
         },
         "fontSizes": {
-            "h1": 28,
-            "h2": 24,
-            "h3": 22,
-            "h4": 20,
-            "h5": 18,
-            "h6": 16,
-            "body": 16
+            "h1": {
+                "value": "{fontSizes.h2} * 1.25",
+                "type": "fontSizes"
+            },
+            "h2": {
+                "value": "{fontSizes.h3} * 1.25",
+                "type": "fontSizes"
+            },
+            "h3": {
+                "value": "{fontSizes.h4} * 1.25",
+                "type": "fontSizes"
+            },
+            "h4": {
+                "value": "{fontSizes.h5} * 1.25",
+                "type": "fontSizes"
+            },
+            "h5": {
+                "value": "{fontSizes.h6} * 1.25",
+                "type": "fontSizes"
+            },
+            "h6": {
+                "value": "{fontSizes.body} * 1",
+                "type": "fontSizes"
+            },
+            "body": {
+                "value": "16",
+                "type": "fontSizes"
+            },
+            "sm": {
+                "value": "{fontSizes.body} * 0.85",
+                "type": "fontSizes"
+            },
+            "xs": {
+                "value": "{fontSizes.body} * 0.65",
+                "type": "fontSizes"
+            }
         },
         "typography": {
             "H1": {
                 "Bold": {
-                    "fontFamily": "$fontFamilies.heading",
-                    "fontWeight": "$fontWeights.headingBold",
-                    "lineHeight": "$lineHeights.heading",
-                    "fontSize": "$fontSizes.h1",
-                    "paragraphSpacing": "$paragraphSpacing.h1",
-                    "letterSpacing": "$letterSpacing.decreased"
+                    "type": "typography",
+                    "value": {
+                        "fontFamily": "$fontFamilies.heading",
+                        "fontWeight": "$fontWeights.headingBold",
+                        "lineHeight": "$lineHeights.heading",
+                        "fontSize": "$fontSizes.h1",
+                        "paragraphSpacing": "$paragraphSpacing.h1",
+                        "letterSpacing": "$letterSpacing.decreased"
+                    }
                 },
                 "Regular": {
-                    "fontFamily": "$fontFamilies.heading",
-                    "fontWeight": "$fontWeights.headingRegular",
-                    "lineHeight": "$lineHeights.heading",
-                    "fontSize": "$fontSizes.h1",
-                    "paragraphSpacing": "$paragraphSpacing.h1",
-                    "letterSpacing": "$letterSpacing.decreased"
+                    "type": "typography",
+                    "value": {
+                        "fontFamily": "$fontFamilies.heading",
+                        "fontWeight": "$fontWeights.headingRegular",
+                        "lineHeight": "$lineHeights.heading",
+                        "fontSize": "$fontSizes.h1",
+                        "paragraphSpacing": "$paragraphSpacing.h1",
+                        "letterSpacing": "$letterSpacing.decreased"
+                    }
                 }
             },
             "H2": {
                 "Bold": {
-                    "fontFamily": "$fontFamilies.heading",
-                    "fontWeight": "$fontWeights.headingBold",
-                    "lineHeight": "$lineHeights.heading",
-                    "fontSize": "$fontSizes.h2",
-                    "paragraphSpacing": "$paragraphSpacing.h2",
-                    "letterSpacing": "$letterSpacing.decreased"
+                    "type": "typography",
+                    "value": {
+                        "fontFamily": "$fontFamilies.heading",
+                        "fontWeight": "$fontWeights.headingBold",
+                        "lineHeight": "$lineHeights.heading",
+                        "fontSize": "$fontSizes.h2",
+                        "paragraphSpacing": "$paragraphSpacing.h2",
+                        "letterSpacing": "$letterSpacing.decreased"
+                    }
                 },
                 "Regular": {
-                    "fontFamily": "$fontFamilies.heading",
-                    "fontWeight": "$fontWeights.headingRegular",
-                    "lineHeight": "$lineHeights.heading",
-                    "fontSize": "$fontSizes.h2",
-                    "paragraphSpacing": "$paragraphSpacing.h2",
-                    "letterSpacing": "$letterSpacing.decreased"
+                    "type": "typography",
+                    "value": {
+                        "fontFamily": "$fontFamilies.heading",
+                        "fontWeight": "$fontWeights.headingRegular",
+                        "lineHeight": "$lineHeights.heading",
+                        "fontSize": "$fontSizes.h2",
+                        "paragraphSpacing": "$paragraphSpacing.h2",
+                        "letterSpacing": "$letterSpacing.decreased"
+                    }
                 }
             },
             "Body": {
-                "fontFamily": "$fontFamilies.body",
-                "fontWeight": "$fontWeights.bodyRegular",
-                "lineHeight": "$lineHeights.heading",
-                "fontSize": "$fontSizes.body",
-                "paragraphSpacing": "$paragraphSpacing.h2"
+                "type": "typography",
+                "value": {
+                    "fontFamily": "$fontFamilies.body",
+                    "fontWeight": "$fontWeights.bodyRegular",
+                    "lineHeight": "$lineHeights.heading",
+                    "fontSize": "$fontSizes.body",
+                    "paragraphSpacing": "$paragraphSpacing.h2"
+                }
+            }
+        }
+    },
+    "light": {
+        "fg": {
+            "default": {
+                "value": "{colors.black}",
+                "type": "color"
+            },
+            "muted": {
+                "value": "{colors.gray.700}",
+                "type": "color"
+            },
+            "subtle": {
+                "value": "{colors.gray.500}",
+                "type": "color"
+            }
+        },
+        "bg": {
+            "default": {
+                "value": "{colors.white}",
+                "type": "color"
+            },
+            "muted": {
+                "value": "{colors.gray.100}",
+                "type": "color"
+            },
+            "subtle": {
+                "value": "{colors.gray.200}",
+                "type": "color"
+            }
+        },
+        "accent": {
+            "default": {
+                "value": "{colors.indigo.400}",
+                "type": "color"
+            }
+        }
+    },
+    "dark": {
+        "fg": {
+            "default": {
+                "value": "{colors.white}",
+                "type": "color"
+            },
+            "muted": {
+                "value": "{colors.gray.300}",
+                "type": "color"
+            },
+            "subtle": {
+                "value": "{colors.gray.500}",
+                "type": "color"
+            }
+        },
+        "bg": {
+            "default": {
+                "value": "{colors.gray.900}",
+                "type": "color"
+            },
+            "muted": {
+                "value": "{colors.gray.700}",
+                "type": "color"
+            },
+            "subtle": {
+                "value": "{colors.gray.600}",
+                "type": "color"
+            }
+        },
+        "accent": {
+            "default": {
+                "value": "{colors.indigo.600}",
+                "type": "color"
+            }
+        }
+    },
+    "theme": {
+        "button": {
+            "primary": {
+                "background": {
+                    "value": "{accent.default}",
+                    "type": "color"
+                }
+            },
+            "ghost": {
+                "outline": {
+                    "value": "{fg.default}",
+                    "type": "color"
+                },
+                "text": {
+                    "value": "{fg.default}",
+                    "type": "color"
+                }
+            }
+        },
+        "borderWidth": {
+            "button": {
+                "ghost": {
+                    "value": "$borderWidth.md",
+                    "type": "borderWidth"
+                }
+            }
+        },
+        "borderRadius": {
+            "button": {
+                "ghost": {
+                    "value": "$borderRadius.lg",
+                    "type": "borderRadius"
+                }
+            },
+            "card": {
+                "value": "{borderRadius.sm}",
+                "type": "borderRadius"
+            }
+        },
+        "fontSizes": {
+            "card": {
+                "title": {
+                    "value": "{fontSizes.sm}",
+                    "type": "fontSizes"
+                },
+                "content": {
+                    "value": "{fontSizes.xs}",
+                    "type": "fontSizes"
+                }
             }
         }
     }
diff --git a/src/plugin/compareProviders.test.ts b/src/plugin/compareProviders.test.ts
index 1e327f008..fce9091da 100644
--- a/src/plugin/compareProviders.test.ts
+++ b/src/plugin/compareProviders.test.ts
@@ -7,7 +7,7 @@ describe('compareProvidersWithStored', () => {
         jest.clearAllMocks();
     });
     const firstProvider = {provider: StorageProviderType.JSONBIN, id: '123', secret: '456', name: 'dummy'};
-    const otherProvider = {provider: StorageProviderType.ARCADE, id: '122', secret: '456', name: 'dummy 2'};
+    const otherProvider = {provider: StorageProviderType.GITHUB, id: '122', secret: '456', name: 'dummy 2'};
 
     it('calls postMessage with true if one matches', () => {
         compareProvidersWithStored(JSON.stringify([firstProvider, otherProvider]), firstProvider);
diff --git a/src/plugin/controller.ts b/src/plugin/controller.ts
index 75173eb4b..eba79909d 100644
--- a/src/plugin/controller.ts
+++ b/src/plugin/controller.ts
@@ -53,11 +53,11 @@ figma.ui.onmessage = async (msg) => {
                 notifyStorageType(storageType);
 
                 const apiProviders = await figma.clientStorage.getAsync('apiProviders');
-
                 if (apiProviders) notifyAPIProviders(JSON.parse(apiProviders));
                 switch (storageType.provider) {
                     case StorageProviderType.JSONBIN:
-                    case StorageProviderType.ARCADE: {
+                    case StorageProviderType.GITHUB:
+                    case StorageProviderType.URL: {
                         compareProvidersWithStored(apiProviders, storageType);
 
                         break;
@@ -80,8 +80,8 @@ figma.ui.onmessage = async (msg) => {
             sendPluginValues(figma.currentPage.selection);
             return;
         case MessageToPluginTypes.CREDENTIALS: {
-            const {secret, id, provider, name} = msg;
-            updateCredentials({secret, id, name, provider});
+            const {type, ...context} = msg;
+            updateCredentials(context);
             break;
         }
         case MessageToPluginTypes.REMOVE_SINGLE_CREDENTIAL: {
@@ -95,7 +95,10 @@ figma.ui.onmessage = async (msg) => {
         case MessageToPluginTypes.SET_NODE_DATA:
             try {
                 updatePluginData(figma.currentPage.selection, msg.values);
-                sendPluginValues(figma.currentPage.selection, updateNodes(figma.currentPage.selection, msg.tokens));
+                sendPluginValues(
+                    figma.currentPage.selection,
+                    updateNodes(figma.currentPage.selection, msg.tokens, msg.settings)
+                );
             } catch (e) {
                 console.error(e);
             }
@@ -123,7 +126,7 @@ figma.ui.onmessage = async (msg) => {
             if (msg.tokenValues && msg.updatedAt) setTokensOnDocument(msg.tokenValues, msg.updatedAt);
             if (msg.tokens) {
                 const allWithData = findAllWithData({updateMode: msg.settings.updateMode});
-                updateNodes(allWithData, msg.tokens);
+                updateNodes(allWithData, msg.tokens, msg.settings);
                 updatePluginData(allWithData, {});
                 notifyRemoteComponents({nodes: store.successfulNodes.length, remotes: store.remoteComponents});
             }
@@ -138,6 +141,9 @@ figma.ui.onmessage = async (msg) => {
         case MessageToPluginTypes.NOTIFY:
             notifyUI(msg.msg, msg.opts);
             break;
+        case MessageToPluginTypes.RESIZE_WINDOW:
+            figma.ui.resize(msg.width, msg.height);
+            break;
         case MessageToPluginTypes.SET_UI: {
             updateUISettings({
                 width: msg.uiWindow.width,
diff --git a/src/plugin/figmaTransforms/colors.test.ts b/src/plugin/figmaTransforms/colors.test.ts
index b5df9f75d..0d9c84925 100644
--- a/src/plugin/figmaTransforms/colors.test.ts
+++ b/src/plugin/figmaTransforms/colors.test.ts
@@ -1,3 +1,4 @@
+import {convertToRgb} from '@/app/components/utils';
 import {convertToFigmaColor, hexToRgb, hslaToRgba} from './colors';
 
 describe('hslaToRgba', () => {
@@ -8,6 +9,7 @@ describe('hslaToRgba', () => {
         expect(hsla).toEqual([64, 128, 191, 0.5]);
     });
 });
+
 describe('hexToRgb', () => {
     it('converts hex to rgb', () => {
         const color = '#ff0000';
@@ -61,4 +63,34 @@ describe('convertToFigmaColor', () => {
             opacity: 0.8,
         });
     });
+
+    it('converts named colors to figma readable', () => {
+        const color = 'red';
+
+        expect(convertToFigmaColor(color)).toEqual({
+            color: {
+                r: 1,
+                g: 0,
+                b: 0,
+            },
+            opacity: 1,
+        });
+    });
+});
+
+describe('round-trip from plugin to figma', () => {
+    it('converts rgba to figma', () => {
+        const color = 'rgba(255, 255, 0, 0.5)';
+        const converted = convertToRgb(color);
+
+        expect(converted).toEqual('#ffff0080');
+        expect(convertToFigmaColor(converted)).toEqual({
+            color: {
+                r: 1,
+                g: 1,
+                b: 0,
+            },
+            opacity: 0.5,
+        });
+    });
 });
diff --git a/src/plugin/figmaTransforms/colors.ts b/src/plugin/figmaTransforms/colors.ts
index 1a41ae63b..5eed7fe62 100644
--- a/src/plugin/figmaTransforms/colors.ts
+++ b/src/plugin/figmaTransforms/colors.ts
@@ -1,4 +1,5 @@
 import {hexToFigmaRGB, webRGBToFigmaRGB} from '@figma-plugin/helpers';
+import {toHex} from 'color2k';
 
 interface RGBA {
     r: number;
@@ -96,6 +97,10 @@ export function hslaToRgba(hslaValues) {
     return [r, g, b, a];
 }
 
+function roundToTwo(num) {
+    return +`${Math.round(Number(`${num}e+2`))}e-2`;
+}
+
 export function convertToFigmaColor(input) {
     let color;
     let opacity;
@@ -111,9 +116,9 @@ export function convertToFigmaColor(input) {
         color = {r, g, b};
         opacity = Number(a);
     } else {
-        const {r, g, b, a = 1}: RGBA = hexToFigmaRGB(input);
+        const {r, g, b, a = 1}: RGBA = hexToFigmaRGB(toHex(input));
         color = {r, g, b};
-        opacity = Number(a);
+        opacity = roundToTwo(a);
     }
 
     return {
diff --git a/src/plugin/node.ts b/src/plugin/node.ts
index 526bd339c..fb34b766f 100644
--- a/src/plugin/node.ts
+++ b/src/plugin/node.ts
@@ -3,7 +3,7 @@ import {fetchAllPluginData} from './pluginData';
 import store from './store';
 import setValuesOnNode from './updateNode';
 import {TokenProps} from '../../types/tokens';
-import {StorageProviderType, StorageType} from '../../types/api';
+import {ContextObject, StorageProviderType, StorageType} from '../../types/api';
 import {isSingleToken} from '../app/components/utils';
 import * as pjs from '../../package.json';
 
@@ -65,16 +65,19 @@ export function getTokenData(): {values: TokenProps; updatedAt: string; version:
 }
 
 // set storage type (i.e. local or some remote provider)
-export function saveStorageType({provider, id, name}: StorageType) {
-    figma.root.setSharedPluginData('tokens', 'storageType', JSON.stringify({provider, id, name}));
+export function saveStorageType(context: ContextObject) {
+    // remove secret
+    const storageToSave = context;
+    delete storageToSave.secret;
+    figma.root.setSharedPluginData('tokens', 'storageType', JSON.stringify(storageToSave));
 }
 
 export function getSavedStorageType(): StorageType {
     const values = figma.root.getSharedPluginData('tokens', 'storageType');
 
     if (values) {
-        const {provider, name, id} = JSON.parse(values);
-        return {provider, name, id};
+        const context = JSON.parse(values);
+        return context;
     }
     return {provider: StorageProviderType.LOCAL};
 }
@@ -87,7 +90,8 @@ export function goToNode(id) {
     }
 }
 
-export function updateNodes(nodes, tokens) {
+export function updateNodes(nodes, tokens, settings) {
+    const {ignoreFirstPartForStyles} = settings;
     try {
         let i = 0;
         const len = nodes.length;
@@ -97,7 +101,7 @@ export function updateNodes(nodes, tokens) {
             const data = fetchAllPluginData(node);
             if (data) {
                 const mappedValues = mapValuesToTokens(tokens, data);
-                setValuesOnNode(node, mappedValues, data);
+                setValuesOnNode(node, mappedValues, data, ignoreFirstPartForStyles);
                 store.successfulNodes.push(node);
                 returnedValues.push(data);
             }
diff --git a/src/plugin/tokenHelpers.test.ts b/src/plugin/tokenHelpers.test.ts
new file mode 100644
index 000000000..16baf9558
--- /dev/null
+++ b/src/plugin/tokenHelpers.test.ts
@@ -0,0 +1,44 @@
+import {resolveTokenValues} from './tokenHelpers';
+
+const tokens = [
+    {name: 'foo', value: 3},
+    {name: 'bar', value: '{foo}'},
+    {name: 'boo', value: '{baz}'},
+    {name: 'math', value: '{foo} * 2'},
+    {name: 'mathWrong', value: '{foo} * {boo}'},
+];
+
+const output = [
+    {
+        name: 'foo',
+        rawValue: 3,
+        value: 3,
+    },
+    {
+        name: 'bar',
+        rawValue: '{foo}',
+        value: 3,
+    },
+    {
+        failedToResolve: true,
+        name: 'boo',
+        rawValue: '{baz}',
+        value: '{baz}',
+    },
+    {
+        name: 'math',
+        rawValue: '{foo} * 2',
+        value: 6,
+    },
+    {
+        failedToResolve: true,
+        name: 'mathWrong',
+        rawValue: '{foo} * {boo}',
+        value: '3 * {baz}',
+    },
+];
+describe('resolveTokenValues', () => {
+    it('resolves all values it can resolve', () => {
+        expect(resolveTokenValues(tokens)).toEqual(output);
+    });
+});
diff --git a/src/plugin/tokenHelpers.ts b/src/plugin/tokenHelpers.ts
index 0a72241a2..521b3a53c 100644
--- a/src/plugin/tokenHelpers.ts
+++ b/src/plugin/tokenHelpers.ts
@@ -1,6 +1,7 @@
 import {appendTypeToToken} from '@/app/components/createTokenObj';
 import getAliasValue from '@/utils/aliases';
 import checkIfAlias from '@/utils/checkIfAlias';
+import checkIfContainsAlias from '@/utils/checkIfContainsAlias';
 import {SingleTokenObject} from 'Types/tokens';
 import {mergeDeep} from './helpers';
 
@@ -24,21 +25,30 @@ export function resolveTokenValues(tokens, previousCount = undefined) {
     let returnedTokens = tokens;
     returnedTokens = tokens.map((t) => {
         let returnValue;
+        let failedToResolve;
         // Iterate over Typography and boxShadow Object to get resolved values
         if (['typography', 'boxShadow'].includes(t.type)) {
-            returnValue = Object.entries(t.value).reduce((acc, [key, value]) => {
+            returnValue = Object.entries(t.value).reduce((acc, [key, value]: [string, SingleTokenObject]) => {
                 acc[key] = getAliasValue(value, tokens);
                 return acc;
             }, {});
         } else {
             // If we're not dealing with special tokens, just return resolved value
             returnValue = getAliasValue(t, tokens);
+
+            failedToResolve = returnValue === null || checkIfContainsAlias(returnValue);
         }
-        return {
+
+        const returnObject = {
             ...t,
             value: returnValue,
             rawValue: t.rawValue || t.value,
+            failedToResolve,
         };
+        if (!failedToResolve) {
+            delete returnObject.failedToResolve;
+        }
+        return returnObject;
     });
     if (aliases.length > 0 && (previousCount > aliases.length || !previousCount)) {
         return resolveTokenValues(returnedTokens, aliases.length);
@@ -47,21 +57,6 @@ export function resolveTokenValues(tokens, previousCount = undefined) {
     return returnedTokens;
 }
 
-export function computeMergedTokens(tokens, usedTokenSet?: string[]): SingleTokenObject[] {
-    const mergedTokens = [];
-    // Reverse token set order (right-most win) and check for duplicates
-    Object.entries(tokens)
-        .reverse()
-        .forEach((tokenGroup: [string, SingleTokenObject[]]) => {
-            if (!usedTokenSet || usedTokenSet.includes(tokenGroup[0])) {
-                tokenGroup[1].forEach((token) => {
-                    if (!mergedTokens.some((t) => t.name === token.name)) mergedTokens.push(appendTypeToToken(token));
-                });
-            }
-        });
-    return mergedTokens;
-}
-
 export function mergeTokenGroups(tokens, usedSets = []): SingleTokenObject[] {
     const mergedTokens = [];
     // Reverse token set order (right-most win) and check for duplicates
diff --git a/src/plugin/updateNode.ts b/src/plugin/updateNode.ts
index 01e44285c..1f081d444 100644
--- a/src/plugin/updateNode.ts
+++ b/src/plugin/updateNode.ts
@@ -3,7 +3,7 @@ import {transformValue} from './helpers';
 import setColorValuesOnTarget from './setColorValuesOnTarget';
 import setTextValuesOnTarget from './setTextValuesOnTarget';
 
-export default async function setValuesOnNode(node, values, data) {
+export default async function setValuesOnNode(node, values, data, ignoreFirstPartForStyles = false) {
     try {
         // BORDER RADIUS
         if (typeof values.borderRadius !== 'undefined' && typeof node.cornerRadius !== 'undefined') {
@@ -76,7 +76,7 @@ export default async function setValuesOnNode(node, values, data) {
             if (typeof node.fills !== 'undefined') {
                 const paints = figma.getLocalPaintStyles();
                 const path = data.fill.split('.');
-                const pathname = path.slice(1, path.length).join('/');
+                const pathname = path.slice(ignoreFirstPartForStyles ? 1 : 0, path.length).join('/');
                 const matchingStyles = paints.filter((n) => n.name === pathname);
                 if (matchingStyles.length) {
                     // matchingStyles[0].paints = [{color, opacity, type: 'SOLID'}];
diff --git a/src/stitches.config.ts b/src/stitches.config.ts
index 055a31f72..d690e4da6 100644
--- a/src/stitches.config.ts
+++ b/src/stitches.config.ts
@@ -20,6 +20,7 @@ const globalTokens = {
         primary300: 'var(--theme-colors-brand-300, #90CDF4)',
         primary400: 'var(--theme-colors-brand-300, #3CB1FF)',
         primary500: 'var(--theme-colors-brand-500, #18A0FB)',
+        red500: 'var(--red, #f24822)',
     },
     radii: {
         sm: '2px',
@@ -38,6 +39,7 @@ export const {styled, css, global: globalCSS, keyframes, getCssString, theme} =
             interaction: globalTokens.colors.primary500,
             onInteraction: globalTokens.colors.white,
             interactionDisabled: globalTokens.colors.gray600,
+            dangerFg: globalTokens.colors.red500,
         },
         radii: {
             default: globalTokens.radii.sm,
diff --git a/src/utils/aliases.test.ts b/src/utils/aliases.test.ts
new file mode 100644
index 000000000..9fb0ccc87
--- /dev/null
+++ b/src/utils/aliases.test.ts
@@ -0,0 +1,82 @@
+import getAliasValue from './aliases';
+
+describe('getAliasValue', () => {
+    const allTokens = [
+        {
+            name: 'colors.hex',
+            input: '#ff0000',
+            value: '#ff0000',
+        },
+        {
+            name: 'colors.rgba',
+            input: 'rgba(0, 255, 0, 0.5)',
+            value: '#00ff0080',
+        },
+        {
+            name: 'colors.rgbaalias',
+            input: 'rgba($colors.hex, 0.5)',
+            value: 'rgba(#ff0000, 0.5)',
+        },
+        {
+            name: 'colors.lightness_base',
+            input: '25',
+            value: 25,
+        },
+        {
+            name: 'colors.lightness',
+            input: '$colors.lightness_base * 4 + 0.175',
+            value: 100.175,
+        },
+        {
+            name: 'colors.hsla_1',
+            input: 'hsl(172,50,$colors.lightness_base)',
+            value: 'hsl(172,50,25)',
+        },
+        {
+            name: 'colors.hsla_2',
+            input: 'hsl(172,50,$colors.lightness)',
+            value: 'hsl(172,50,100.175)',
+        },
+        {
+            name: 'alias.complex',
+            input: '$base.scale * $base.ratio ^ round((200 + 400 - $base.index) / 100)',
+            value: 8,
+        },
+        {
+            name: 'alias.round2',
+            input: '$alias.complex + $alias.complex * ((1100 - 400) / 100)',
+            value: 64,
+        },
+        {
+            name: 'alias.round3',
+            input: '$alias.round2 * 1.5',
+            value: 96,
+        },
+        {
+            name: 'colors.zero',
+            input: 0,
+            value: 0,
+        },
+        {
+            name: 'base.scale',
+            input: '2',
+            value: 2,
+        },
+        {
+            name: 'base.ratio',
+            input: '2',
+            value: 2,
+        },
+        {
+            name: 'base.index',
+            input: '400',
+            value: 400,
+        },
+    ];
+
+    allTokens.forEach((token) => {
+        it(`alias ${token.name}`, () => {
+            expect(getAliasValue({value: token.input}, allTokens)).toEqual(token.value);
+        });
+    });
+});
diff --git a/src/utils/aliases.tsx b/src/utils/aliases.tsx
index 301ff7b1a..a184f6c79 100644
--- a/src/utils/aliases.tsx
+++ b/src/utils/aliases.tsx
@@ -3,19 +3,20 @@ import {SingleTokenObject} from 'Types/tokens';
 import checkIfValueToken from './checkIfValueToken';
 import {findReferences} from './findReferences';
 
-export default function getAliasValue(token: SingleTokenObject, tokens = []): string | null {
-    try {
-        let returnedValue = checkIfValueToken(token) ? (token.value as string) : (token as string);
+export default function getAliasValue(token: SingleTokenObject | string, tokens = []): string | null {
+    let returnedValue = checkIfValueToken(token) ? (token.value as string) : (token as string);
 
+    try {
         const tokenReferences = findReferences(returnedValue);
         if (tokenReferences?.length > 0) {
             const resolvedReferences = tokenReferences.map((ref) => {
                 if (ref.length > 1) {
                     const nameToLookFor = ref.startsWith('{') ? ref.slice(1, ref.length - 1) : ref.substring(1);
+
                     const foundToken = tokens.find((t) => t.name === nameToLookFor);
                     if (typeof foundToken !== 'undefined') return foundToken.value;
                 }
-                return null;
+                return ref;
             });
             tokenReferences.forEach((reference, index) => {
                 returnedValue = returnedValue.replace(
@@ -31,10 +32,9 @@ export default function getAliasValue(token: SingleTokenObject, tokens = []): st
             if (!tokenReferences) {
                 return convertToRgb(checkAndEvaluateMath(returnedValue));
             }
-            return returnedValue;
         }
     } catch (e) {
         console.log(`Error getting alias value of ${token}`, tokens);
     }
-    return null;
+    return checkAndEvaluateMath(returnedValue);
 }
diff --git a/src/utils/checkIfAlias.test.ts b/src/utils/checkIfAlias.test.ts
index 35f1dca3b..c28d6d1e2 100644
--- a/src/utils/checkIfAlias.test.ts
+++ b/src/utils/checkIfAlias.test.ts
@@ -14,12 +14,12 @@ describe('checkIfAlias', () => {
             name: 'zero',
             value: '$colors.zero',
         },
-    ];
-    const incorrectTokens = [
         {
             name: 'nonexistant',
             value: '$colors.nonexistant',
         },
+    ];
+    const incorrectTokens = [
         {name: 'string', value: 'foo'},
         {
             name: 'number',
diff --git a/src/utils/checkIfContainsAlias.tsx b/src/utils/checkIfContainsAlias.tsx
new file mode 100644
index 000000000..23ccfcc29
--- /dev/null
+++ b/src/utils/checkIfContainsAlias.tsx
@@ -0,0 +1,7 @@
+import {SingleToken} from 'Types/tokens';
+import {aliasRegex} from './findReferences';
+
+export default function checkIfContainsAlias(token: SingleToken) {
+    if (!token) return false;
+    return Boolean(token.toString().match(aliasRegex));
+}
diff --git a/src/utils/checkIfValueToken.test.ts b/src/utils/checkIfValueToken.test.ts
index 3e3797871..798973dcb 100644
--- a/src/utils/checkIfValueToken.test.ts
+++ b/src/utils/checkIfValueToken.test.ts
@@ -11,6 +11,9 @@ describe('checkIfValueToken', () => {
         objectZero: {
             value: 0,
         },
+        objectNull: {
+            value: null,
+        },
     };
     const incorrectToken = {
         string: 'foo',
diff --git a/src/utils/checkIfValueToken.ts b/src/utils/checkIfValueToken.ts
index c3a31c565..627cb3d63 100644
--- a/src/utils/checkIfValueToken.ts
+++ b/src/utils/checkIfValueToken.ts
@@ -1,5 +1,5 @@
 import {SingleToken} from '@types/tokens';
 
 export default function checkIfValueToken(token: SingleToken): token is {value: string | number} {
-    return typeof token === 'object' && (typeof token?.value === 'string' || typeof token?.value === 'number');
+    return typeof token === 'object' && 'value' in token;
 }
diff --git a/src/utils/convertTokens.tsx b/src/utils/convertTokens.tsx
index 403727ed8..cf39306da 100644
--- a/src/utils/convertTokens.tsx
+++ b/src/utils/convertTokens.tsx
@@ -8,6 +8,7 @@ function checkForTokens({
     returnValuesOnly = false,
     expandTypography = false,
 }): [SingleTokenObject[], SingleToken] {
+    // replaces / in token name
     let returnValue;
     const shouldExpandTypography = expandTypography ? isTypographyToken(token.value) : false;
     if (isValueToken(token) && !shouldExpandTypography) {
@@ -50,6 +51,10 @@ function checkForTokens({
         };
     }
 
+    if (returnValue?.name) {
+        returnValue.name = returnValue.name.split('/').join('.');
+    }
+
     return [obj, returnValue];
 }
 
diff --git a/src/utils/convertTokensObjectToResolved.ts b/src/utils/convertTokensObjectToResolved.ts
index c60540b90..6760d2dc5 100644
--- a/src/utils/convertTokensObjectToResolved.ts
+++ b/src/utils/convertTokensObjectToResolved.ts
@@ -3,7 +3,7 @@ import convertTokensToGroupedObject from './convertTokensToGroupedObject';
 import parseTokenValues from './parseTokenValues';
 
 // Takes Figma Tokens input, resolves all aliases while respecting user's theme choice and outputs an object with resolved tokens, ready to be consumed by style dictionary.
-export default function convertTokensObjectToResolved(tokens, usedSets = []) {
+export default function convertTokensObjectToResolved(tokens, usedSets = [], excludedSets = []) {
     // Parse tokens into array structure
     const parsed = parseTokenValues(tokens);
     // Merge to one giant array
@@ -11,6 +11,6 @@ export default function convertTokensObjectToResolved(tokens, usedSets = []) {
     // Resolve aliases
     const resolved = resolveTokenValues(merged);
     // Group back into one object
-    const object = convertTokensToGroupedObject(resolved);
+    const object = convertTokensToGroupedObject(resolved, excludedSets);
     return object;
 }
diff --git a/src/utils/convertTokensToGroupedObject.ts b/src/utils/convertTokensToGroupedObject.ts
index c561dec94..f70af6275 100644
--- a/src/utils/convertTokensToGroupedObject.ts
+++ b/src/utils/convertTokensToGroupedObject.ts
@@ -1,9 +1,12 @@
 import {appendTypeToToken} from '@/app/components/createTokenObj';
 import set from 'set-value';
 
-export default function convertTokensToGroupedObject(tokens) {
+export default function convertTokensToGroupedObject(tokens, excludedSets) {
     let tokenObj = {};
     tokenObj = tokens.reduce((acc, token) => {
+        if (excludedSets.includes(token.internal__Parent)) {
+            return acc;
+        }
         const obj = acc || {};
         const tokenWithType = appendTypeToToken(token);
         delete tokenWithType.name;
diff --git a/src/utils/credentials.test.ts b/src/utils/credentials.test.ts
index 2cffdeb70..5b617569f 100644
--- a/src/utils/credentials.test.ts
+++ b/src/utils/credentials.test.ts
@@ -1,3 +1,4 @@
+import * as helpers from '@/plugin/helpers';
 import {StorageProviderType} from '../../types/api';
 import {removeSingleCredential, updateCredentials} from './credentials';
 
@@ -5,28 +6,60 @@ describe('updateCredentials', () => {
     afterEach(() => {
         jest.clearAllMocks();
     });
+    const generateIdSpy = jest.spyOn(helpers, 'generateId').mockImplementation(() => 'idMock');
+
+    // Mock id for test
+
     it('sets credentials when no credentials existed before', async () => {
-        const apiObject = {id: '123', secret: 'foo', name: 'mytokens', provider: StorageProviderType.ARCADE};
+        const apiObject = {id: '123', secret: 'foo', name: 'mytokens', provider: StorageProviderType.JSONBIN};
         figma.clientStorage.getAsync
             .mockResolvedValueOnce(undefined)
             .mockResolvedValueOnce(JSON.stringify([apiObject]));
         await updateCredentials(apiObject);
 
-        expect(figma.clientStorage.setAsync).toHaveBeenCalledWith('apiProviders', JSON.stringify([apiObject]));
+        expect(figma.clientStorage.setAsync).toHaveBeenCalledWith(
+            'apiProviders',
+            JSON.stringify([{...apiObject, internalId: 'idMock'}])
+        );
+        expect(generateIdSpy).toHaveBeenCalled();
     });
 
     it('updates credentials when there have been existing', async () => {
-        const apiArray = [{id: '123', secret: 'abc', name: 'mytokens', provider: StorageProviderType.ARCADE}];
-        const newObject = {id: '456', secret: 'foo', name: 'mytokens', provider: StorageProviderType.ARCADE};
-        const newArray = [...apiArray, newObject];
+        const apiArray = [{id: '123', secret: 'abc', name: 'mytokens', provider: StorageProviderType.JSONBIN}];
+        const newObject = {id: '456', secret: 'foo', name: 'mytokens', provider: StorageProviderType.JSONBIN};
+        const newArray = [
+            ...apiArray,
+            {
+                ...newObject,
+                internalId: 'idMock',
+            },
+        ];
         figma.clientStorage.getAsync.mockResolvedValue(JSON.stringify(apiArray));
         await updateCredentials(newObject);
         expect(figma.clientStorage.setAsync).toHaveBeenCalledWith('apiProviders', JSON.stringify(newArray));
+        expect(generateIdSpy).toHaveBeenCalled();
     });
 
     it('merges credentials when there have been existing that match', async () => {
-        const apiArray = [{id: '123', secret: 'abc', name: 'mytokens', provider: StorageProviderType.ARCADE}];
-        const newObject = {id: '123', secret: 'abc', name: 'my new name', provider: StorageProviderType.ARCADE};
+        const apiArray = [{id: '123', secret: 'abc', name: 'mytokens', provider: StorageProviderType.JSONBIN}];
+        const newObject = {id: '123', secret: 'abc', name: 'my new name', provider: StorageProviderType.JSONBIN};
+        const newArray = [newObject];
+        figma.clientStorage.getAsync.mockResolvedValue(JSON.stringify(apiArray));
+        await updateCredentials(newObject);
+        expect(figma.clientStorage.setAsync).toHaveBeenCalledWith('apiProviders', JSON.stringify(newArray));
+    });
+
+    it('merges credentials when there have been existing that match internalId', async () => {
+        const apiArray = [
+            {id: '123', internalId: 'abc', secret: 'abc', name: 'mytokens', provider: StorageProviderType.JSONBIN},
+        ];
+        const newObject = {
+            id: '456',
+            internalId: 'abc',
+            secret: 'abc',
+            name: 'my new name',
+            provider: StorageProviderType.JSONBIN,
+        };
         const newArray = [newObject];
         figma.clientStorage.getAsync.mockResolvedValue(JSON.stringify(apiArray));
         await updateCredentials(newObject);
@@ -39,7 +72,7 @@ describe('removeSingleCredential', () => {
         jest.clearAllMocks();
     });
     it('removes credential if found and only one entry existed', async () => {
-        const apiObject = {id: '123', secret: 'foo', name: 'mytokens', provider: StorageProviderType.ARCADE};
+        const apiObject = {id: '123', secret: 'foo', name: 'mytokens', provider: StorageProviderType.JSONBIN};
         const oldArray = [apiObject];
         figma.clientStorage.getAsync.mockResolvedValue(JSON.stringify(oldArray));
         await removeSingleCredential({secret: apiObject.secret, id: apiObject.id});
@@ -48,8 +81,8 @@ describe('removeSingleCredential', () => {
     });
 
     it('removes credential if found and multiple existed', async () => {
-        const apiObject = {id: '123', secret: 'foo', name: 'mytokens', provider: StorageProviderType.ARCADE};
-        const otherObject = {id: '456', secret: 'bar', name: 'mytokens', provider: StorageProviderType.ARCADE};
+        const apiObject = {id: '123', secret: 'foo', name: 'mytokens', provider: StorageProviderType.JSONBIN};
+        const otherObject = {id: '456', secret: 'bar', name: 'mytokens', provider: StorageProviderType.JSONBIN};
         const oldArray = [apiObject, otherObject];
         figma.clientStorage.getAsync.mockResolvedValueOnce(JSON.stringify(oldArray));
         await removeSingleCredential({id: otherObject.id, secret: otherObject.secret});
diff --git a/src/utils/credentials.ts b/src/utils/credentials.ts
index 44353dc5e..11959ac7d 100644
--- a/src/utils/credentials.ts
+++ b/src/utils/credentials.ts
@@ -1,8 +1,10 @@
+import {generateId} from '@/plugin/helpers';
 import {notifyAPIProviders, notifyUI} from '@/plugin/notifiers';
 
 // update credentials
-export async function updateCredentials({secret, id, name, provider}) {
+export async function updateCredentials(context) {
     try {
+        delete context.new;
         const data = await figma.clientStorage.getAsync('apiProviders');
         let existingProviders = [];
         if (data) {
@@ -10,19 +12,24 @@ export async function updateCredentials({secret, id, name, provider}) {
 
             existingProviders = parsedData;
 
-            const matchingProvider = existingProviders.find(
-                (i) => i.secret === secret && i.id === id && i.provider === provider
-            );
-
-            if (matchingProvider) {
-                matchingProvider.name = name;
+            let matchingProvider;
+            if (context.internalId) {
+                matchingProvider = existingProviders.findIndex((i) => i.internalId === context.internalId);
+            } else {
+                matchingProvider = existingProviders.findIndex(
+                    (i) => i.secret === context.secret && i.id === context.id && i.provider === context.provider
+                );
+            }
+            // Handle case for old credentials where  we had no internalId. Check id and secret and provider then
+            if (matchingProvider !== -1) {
+                existingProviders.splice(matchingProvider, 1, context);
             }
 
-            if (!parsedData || !matchingProvider) {
-                existingProviders.push({id, secret, name, provider});
+            if (!parsedData || matchingProvider === -1) {
+                existingProviders.push({...context, internalId: generateId(24)});
             }
         } else {
-            existingProviders.push({id, secret, name, provider});
+            existingProviders.push({...context, internalId: generateId(24)});
         }
         await figma.clientStorage.setAsync('apiProviders', JSON.stringify(existingProviders));
         const newProviders = await figma.clientStorage.getAsync('apiProviders');
diff --git a/src/utils/isJSONString.ts b/src/utils/isJSONString.ts
new file mode 100644
index 000000000..b1759270f
--- /dev/null
+++ b/src/utils/isJSONString.ts
@@ -0,0 +1,8 @@
+export default function IsJSONString(str) {
+    try {
+        JSON.parse(str);
+    } catch (e) {
+        return false;
+    }
+    return true;
+}
diff --git a/src/utils/parseJson.test.ts b/src/utils/parseJson.test.ts
new file mode 100644
index 000000000..a9a41241f
--- /dev/null
+++ b/src/utils/parseJson.test.ts
@@ -0,0 +1,11 @@
+import parseJson from './parseJson';
+
+describe('parseJson', () => {
+    const regularInput = "{ 'global': { 'colors': { 'blue': { 'value': '#0000ff' }}}}";
+    const JSON5Input = "{ global: { colors: { blue: { value: '#0000ff', /* a comment */ }}}}";
+
+    it('returns parsed json', () => {
+        expect(parseJson(regularInput)).toEqual({global: {colors: {blue: {value: '#0000ff'}}}});
+        expect(parseJson(JSON5Input)).toEqual({global: {colors: {blue: {value: '#0000ff'}}}});
+    });
+});
diff --git a/src/utils/parseJson.ts b/src/utils/parseJson.ts
new file mode 100644
index 000000000..6f674f35e
--- /dev/null
+++ b/src/utils/parseJson.ts
@@ -0,0 +1,5 @@
+import JSON5 from 'json5';
+
+export default function parseJson(payload: string) {
+    return JSON.parse(JSON.stringify(JSON5.parse(payload), null, ' '));
+}
diff --git a/src/utils/parseTokenValues.ts b/src/utils/parseTokenValues.ts
index ca0d5d378..5d2b20f8b 100644
--- a/src/utils/parseTokenValues.ts
+++ b/src/utils/parseTokenValues.ts
@@ -1,7 +1,6 @@
 import convertToTokenArray from './convertTokens';
 
 export default function parseTokenValues(tokens) {
-    console.log('Parsing token values', tokens);
     // If we receive an array of tokens, move them all to the global set
     if (Array.isArray(tokens)) {
         return {
diff --git a/src/utils/transform.ts b/src/utils/transform.ts
index 67ab5a3c7..9e75119d2 100644
--- a/src/utils/transform.ts
+++ b/src/utils/transform.ts
@@ -1,7 +1,7 @@
 import convertTokensObjectToResolved from './convertTokensObjectToResolved';
 
-function transform(input, sets) {
-    return convertTokensObjectToResolved(input, sets);
+function transform(input, sets, excludes) {
+    return convertTokensObjectToResolved(input, sets, excludes);
 }
 
 export default transform;
diff --git a/src/utils/uiSettings.ts b/src/utils/uiSettings.ts
index f5d4354d8..e9d59fdb9 100644
--- a/src/utils/uiSettings.ts
+++ b/src/utils/uiSettings.ts
@@ -34,8 +34,8 @@ export async function getUISettings() {
                     ? false
                     : parsedData.ignoreFirstPartForStyles;
             notifyUISettings({
-                width,
-                height,
+                width: Math.max(300, width),
+                height: Math.max(200, height),
                 updateMode,
                 updateOnChange,
                 updateRemote,
diff --git a/tailwind.js b/tailwind.js
index a2ee1b75f..4070886f2 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -38,6 +38,11 @@ module.exports = {
             zIndex: {
                 1: '1',
             },
+            boxShadow: (theme) => ({
+                focus: `0 0 0 2px ${theme('colors.primary.500')}`,
+                'focus-subtle': `0 0 0 2px ${theme('colors.primary.300')}`,
+                'focus-muted': `0 0 0 2px ${theme('colors.primary.400')}`,
+            }),
         },
     },
 };
diff --git a/tests/config/setupTest.tsx b/tests/config/setupTest.tsx
index 60411a5e8..7c47f6f6a 100644
--- a/tests/config/setupTest.tsx
+++ b/tests/config/setupTest.tsx
@@ -3,13 +3,12 @@ import React, {FC, ReactElement} from 'react';
 import {render, RenderOptions} from '@testing-library/react';
 import {Provider} from 'react-redux';
 import '@testing-library/jest-dom/extend-expect';
-import {TokenProvider} from '../../src/app/store/TokenContext';
 import {store} from '../../src/app/store';
 
 const AllTheProviders: FC = ({children, options}) => {
     return (
         <Provider store={store} {...options}>
-            <TokenProvider {...options}>{children}</TokenProvider>
+            {children}
         </Provider>
     );
 };
diff --git a/token-transformer/README.md b/token-transformer/README.md
new file mode 100644
index 000000000..7d77e2ac2
--- /dev/null
+++ b/token-transformer/README.md
@@ -0,0 +1,17 @@
+# Token Transformer
+
+Converts tokens from Figma Tokens to something Style Dictionary can read, removing any math operations or aliases, only resulting in raw values.
+
+## How to use
+`npm run token-transformer input output sets excludes`
+
+`npm run token-transformer input.json output.json global,dark,components global`
+
+## Parameters
+Input: Filename of input
+
+Output: Filename of output
+
+Sets: Sets to be used, comma-seperated
+
+Excludes: Sets that should not be part of the export (e.g. a global color scale)
\ No newline at end of file
diff --git a/token-transformer/file.json b/token-transformer/file.json
new file mode 100644
index 000000000..a140c2283
--- /dev/null
+++ b/token-transformer/file.json
@@ -0,0 +1,697 @@
+{
+  "sizing": {
+    "base": {
+      "value": 4,
+      "description": "Alias value",
+      "type": "sizing"
+    },
+    "default": {
+      "value": 8,
+      "description": "Math value",
+      "type": "sizing"
+    }
+  },
+  "Light-Theme-Colorscale": {
+    "Gray": {
+      "00": {
+        "value": "#FAFBFC",
+        "description": "Gray 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#EAEEF2",
+        "description": "Gray 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#D4DAE0",
+        "description": "Gray 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#B7BFC7",
+        "description": "Gray 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#949DA7",
+        "description": "Gray 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#707A84",
+        "description": "Gray 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#57606A",
+        "description": "Gray 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#424A53",
+        "description": "Gray 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#32383F",
+        "description": "Gray 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#24292F",
+        "description": "Gray 09",
+        "type": "color"
+      },
+      "Black": {
+        "value": "#1B1F24",
+        "description": "Gray 10 or Black",
+        "type": "color"
+      }
+    },
+    "Coral": {
+      "00": {
+        "value": "#FFF0EB",
+        "description": "Coral 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#FFD6CC",
+        "description": "Coral 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#FFB4A1",
+        "description": "Coral 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#FD8C73",
+        "description": "Coral 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#EC6547",
+        "description": "Coral 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#C4432B",
+        "description": "Coral 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#9E2F1C",
+        "description": "Coral 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#801F0F",
+        "description": "Coral 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#691105",
+        "description": "Coral 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#510901",
+        "description": "Coral 09",
+        "type": "color"
+      }
+    },
+    "Blue": {
+      "00": {
+        "value": "#E4F6FF",
+        "description": "Blue 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#BCE5FF",
+        "description": "Blue 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#89CDFF",
+        "description": "Blue 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#58B1FF",
+        "description": "Blue 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#298FFF",
+        "description": "Blue 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#096BDE",
+        "description": "Blue 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#0552B2",
+        "description": "Blue 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#033F8F",
+        "description": "Blue 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#0B326D",
+        "description": "Blue 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#052455",
+        "description": "Blue 09",
+        "type": "color"
+      }
+    },
+    "Pink": {
+      "00": {
+        "value": "#FFEFF7",
+        "description": "Pink 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#FFD3EB",
+        "description": "Pink 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#FFADDA",
+        "description": "Pink 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#FF80C8",
+        "description": "Pink 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#E85AAD",
+        "description": "Pink 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#BF3989",
+        "description": "Pink 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#99286E",
+        "description": "Pink 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#772057",
+        "description": "Pink 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#611347",
+        "description": "Pink 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#4D0336",
+        "description": "Pink 09",
+        "type": "color"
+      }
+    },
+    "Orange": {
+      "00": {
+        "value": "#FFF1E5",
+        "description": "Orange 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#FFD8B5",
+        "description": "Orange 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#FFB77C",
+        "description": "Orange 2",
+        "type": "color"
+      },
+      "03": {
+        "value": "#FB8F44",
+        "description": "Orange 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#E16F24",
+        "description": "Orange 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#BC4C00",
+        "description": "Orange 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#953800",
+        "description": "Orange 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#762C00",
+        "description": "Orange 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#5C2200",
+        "description": "Orange 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#471700",
+        "description": "Orange 09",
+        "type": "color"
+      }
+    },
+    "Red": {
+      "00": {
+        "value": "#FFEFEE",
+        "description": "Red 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#FFD5D3",
+        "description": "Red 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#FFB2B0",
+        "description": "Red 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#FF8987",
+        "description": "Red 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#FB5254",
+        "description": "Red 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#D42A32",
+        "description": "Red 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#A81C26",
+        "description": "Red 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#84161F",
+        "description": "Red 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#691019",
+        "description": "Red 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#52040F",
+        "description": "Red 09",
+        "type": "color"
+      }
+    },
+    "Indigo": {
+      "00": {
+        "value": "#EFF2FF",
+        "description": "Indigo 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#D7DDFF",
+        "description": "Indigo 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#B9C2FF",
+        "description": "Indigo 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#9AA4FF",
+        "description": "Indigo 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#7683FF",
+        "description": "Indigo 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#545DF0",
+        "description": "Indigo 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#3C42D0",
+        "description": "Indigo 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#2C33A5",
+        "description": "Indigo 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#22297F",
+        "description": "Indigo 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#191F5C",
+        "description": "Indigo 09",
+        "type": "color"
+      }
+    },
+    "Purple": {
+      "00": {
+        "value": "#FBEFFF",
+        "description": "Purple 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#ECD8FF",
+        "description": "Purple 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#D8B9FF",
+        "description": "Purple 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#C297FF",
+        "description": "Purple 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#A475F9",
+        "description": "Purple 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#8250DF",
+        "description": "Purple 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#6639BA",
+        "description": "Purple 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#512A97",
+        "description": "Purple 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#3E1F79",
+        "description": "Purple 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#2E1461",
+        "description": "Purple 09",
+        "type": "color"
+      }
+    },
+    "Green": {
+      "00": {
+        "value": "#DAFBE1",
+        "description": "Green 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#ACEEBB",
+        "description": "Green 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#6FDD8B",
+        "description": "Green 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#4AC26B",
+        "description": "Green 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#2DA44E",
+        "description": "Green 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#1A7F37",
+        "description": "Green 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#116329",
+        "description": "Green 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#044F1E",
+        "description": "Green 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#003D16",
+        "description": "Green 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#002D11",
+        "description": "Green 09",
+        "type": "color"
+      }
+    },
+    "Yellow": {
+      "00": {
+        "value": "#FCF4CA",
+        "description": "Yellow 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#F6DE7C",
+        "description": "Yellow 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#E6C24A",
+        "description": "Yellow 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#D2A52D",
+        "description": "Yellow 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#BB8400",
+        "description": "Yellow 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#976500",
+        "description": "Yellow 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#7A4C00",
+        "description": "Yellow 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#613B01",
+        "description": "Yellow 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#4D2D00",
+        "description": "Yellow 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#382103",
+        "description": "Yellow 09",
+        "type": "color"
+      }
+    },
+    "Lemon": {
+      "00": {
+        "value": "#FDF5B3",
+        "description": "Lemon 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#F4E162",
+        "description": "Lemon 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#DEC741",
+        "description": "Lemon 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#C5AA20",
+        "description": "Lemon 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#A88D02",
+        "description": "Lemon 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#866D00",
+        "description": "Lemon 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#685400",
+        "description": "Lemon 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#534100",
+        "description": "Lemon 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#413200",
+        "description": "Lemon 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#322400",
+        "description": "Lemon 09",
+        "type": "color"
+      }
+    },
+    "Lime": {
+      "00": {
+        "value": "#EAFABA",
+        "description": "Lime 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#CDEC78",
+        "description": "Lime 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#B1D353",
+        "description": "Lime 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#94B83B",
+        "description": "Lime 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#799A2A",
+        "description": "Lime 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#5A791B",
+        "description": "Lime 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#425E13",
+        "description": "Lime 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#2F4A06",
+        "description": "Lime 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#233B03",
+        "description": "Lime 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#182C01",
+        "description": "Lime 09",
+        "type": "color"
+      }
+    },
+    "Teal": {
+      "00": {
+        "value": "#DAF9F5",
+        "description": "Teal 00",
+        "type": "color"
+      },
+      "01": {
+        "value": "#B0EAE3",
+        "description": "Teal 01",
+        "type": "color"
+      },
+      "02": {
+        "value": "#6BD6D0",
+        "description": "Teal 02",
+        "type": "color"
+      },
+      "03": {
+        "value": "#49BCB7",
+        "description": "Teal 03",
+        "type": "color"
+      },
+      "04": {
+        "value": "#339D9B",
+        "description": "Teal 04",
+        "type": "color"
+      },
+      "05": {
+        "value": "#197B7B",
+        "description": "Teal 05",
+        "type": "color"
+      },
+      "06": {
+        "value": "#136061",
+        "description": "Teal 06",
+        "type": "color"
+      },
+      "07": {
+        "value": "#024B4D",
+        "description": "Teal 07",
+        "type": "color"
+      },
+      "08": {
+        "value": "#063A3C",
+        "description": "Teal 08",
+        "type": "color"
+      },
+      "09": {
+        "value": "#052B2C",
+        "description": "Teal 09",
+        "type": "color"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/token-transformer/index.js b/token-transformer/index.js
index efbc9af08..b4c1add82 100644
--- a/token-transformer/index.js
+++ b/token-transformer/index.js
@@ -13,7 +13,9 @@ function writeFile(path, contents, cb) {
 }
 
 function transform() {
-    const [input, output, ...sets] = process.argv.slice(2);
+    const [input, output, rawSets, rawExcludes] = process.argv.slice(2);
+    const sets = rawSets ? rawSets.split(',') : [];
+    const excludes = rawExcludes ? rawExcludes.split(',') : [];
     if (!input) {
         process.stdout.write(`ERROR: Specify an input first (e.g. tokens.json)`);
 
@@ -29,9 +31,13 @@ function transform() {
     if (fs.existsSync(input)) {
         const tokens = fs.readFileSync(input, {encoding: 'utf8', flag: 'r'});
         const parsed = JSON.parse(tokens);
-        const transformed = transformTokens(parsed, sets);
+        const transformed = transformTokens(parsed, sets, excludes);
         writeFile(output, JSON.stringify(transformed, null, 2), () => {
-            process.stdout.write(`Transformed tokens from ${input} to ${output}, using sets ${sets.join(', ')}`);
+            process.stdout.write(
+                `Transformed tokens from ${input} to ${output}, using sets ${sets.join(', ')}${
+                    excludes.length > 0 ? `excluding ${excludes.join(', ')}` : ''
+                }`
+            );
         });
     } else {
         process.stdout.write(`ERROR: Input not found at ${input}`);
diff --git a/token-transformer/input.json b/token-transformer/input.json
new file mode 100644
index 000000000..1fc9e7b53
--- /dev/null
+++ b/token-transformer/input.json
@@ -0,0 +1,727 @@
+{
+    "light": {
+        "colors": {
+            "Background": {
+                "value": "{Light-Theme-Colorscale.Gray.00}",
+                "description": "Alias value",
+                "type": "color"
+            },
+            "Background50": {
+                "value": "rgba({Light-Theme-Colorscale.Gray.00}, 0.5)",
+                "description": "Nested color value",
+                "type": "color"
+            }
+        }
+    },
+    "dark": {
+        "colors": {
+            "Background": {
+                "value": "{Light-Theme-Colorscale.Gray.Black}",
+                "description": "Alias value",
+                "type": "color"
+            },
+            "Background50": {
+                "value": "rgba({Light-Theme-Colorscale.Gray.Black}, 0.5)",
+                "description": "Nested color value",
+                "type": "color"
+            }
+        }
+    },
+    "options": {
+        "sizing": {
+            "base": {
+                "value": "4",
+                "description": "Alias value",
+                "type": "sizing"
+            },
+            "default": {
+                "value": "$sizing.base * 2",
+                "description": "Math value",
+                "type": "sizing"
+            }
+        },
+        "Light-Theme-Colorscale": {
+            "Gray": {
+                "00": {
+                    "value": "#FAFBFC",
+                    "description": "Gray 00",
+                    "type": "color"
+                },
+                "01": {
+                    "value": "#EAEEF2",
+                    "description": "Gray 01",
+                    "type": "color"
+                },
+                "02": {
+                    "value": "#D4DAE0",
+                    "description": "Gray 02",
+                    "type": "color"
+                },
+                "03": {
+                    "value": "#B7BFC7",
+                    "description": "Gray 03",
+                    "type": "color"
+                },
+                "04": {
+                    "value": "#949DA7",
+                    "description": "Gray 04",
+                    "type": "color"
+                },
+                "05": {
+                    "value": "#707A84",
+                    "description": "Gray 05",
+                    "type": "color"
+                },
+                "06": {
+                    "value": "#57606A",
+                    "description": "Gray 06",
+                    "type": "color"
+                },
+                "07": {
+                    "value": "#424A53",
+                    "description": "Gray 07",
+                    "type": "color"
+                },
+                "08": {
+                    "value": "#32383F",
+                    "description": "Gray 08",
+                    "type": "color"
+                },
+                "09": {
+                    "value": "#24292F",
+                    "description": "Gray 09",
+                    "type": "color"
+                },
+                "Black": {
+                    "value": "#1B1F24",
+                    "description": "Gray 10 or Black",
+                    "type": "color"
+                }
+            },
+            "Coral": {
+                "00": {
+                    "value": "#FFF0EB",
+                    "description": "Coral 00",
+                    "type": "color"
+                },
+                "01": {
+                    "value": "#FFD6CC",
+                    "description": "Coral 01",
+                    "type": "color"
+                },
+                "02": {
+                    "value": "#FFB4A1",
+                    "description": "Coral 02",
+                    "type": "color"
+                },
+                "03": {
+                    "value": "#FD8C73",
+                    "description": "Coral 03",
+                    "type": "color"
+                },
+                "04": {
+                    "value": "#EC6547",
+                    "description": "Coral 04",
+                    "type": "color"
+                },
+                "05": {
+                    "value": "#C4432B",
+                    "description": "Coral 05",
+                    "type": "color"
+                },
+                "06": {
+                    "value": "#9E2F1C",
+                    "description": "Coral 06",
+                    "type": "color"
+                },
+                "07": {
+                    "value": "#801F0F",
+                    "description": "Coral 07",
+                    "type": "color"
+                },
+                "08": {
+                    "value": "#691105",
+                    "description": "Coral 08",
+                    "type": "color"
+                },
+                "09": {
+                    "value": "#510901",
+                    "description": "Coral 09",
+                    "type": "color"
+                }
+            },
+            "Blue": {
+                "00": {
+                    "value": "#E4F6FF",
+                    "description": "Blue 00",
+                    "type": "color"
+                },
+                "01": {
+                    "value": "#BCE5FF",
+                    "description": "Blue 01",
+                    "type": "color"
+                },
+                "02": {
+                    "value": "#89CDFF",
+                    "description": "Blue 02",
+                    "type": "color"
+                },
+                "03": {
+                    "value": "#58B1FF",
+                    "description": "Blue 03",
+                    "type": "color"
+                },
+                "04": {
+                    "value": "#298FFF",
+                    "description": "Blue 04",
+                    "type": "color"
+                },
+                "05": {
+                    "value": "#096BDE",
+                    "description": "Blue 05",
+                    "type": "color"
+                },
+                "06": {
+                    "value": "#0552B2",
+                    "description": "Blue 06",
+                    "type": "color"
+                },
+                "07": {
+                    "value": "#033F8F",
+                    "description": "Blue 07",
+                    "type": "color"
+                },
+                "08": {
+                    "value": "#0B326D",
+                    "description": "Blue 08",
+                    "type": "color"
+                },
+                "09": {
+                    "value": "#052455",
+                    "description": "Blue 09",
+                    "type": "color"
+                }
+            },
+            "Pink": {
+                "00": {
+                    "value": "#FFEFF7",
+                    "description": "Pink 00",
+                    "type": "color"
+                },
+                "01": {
+                    "value": "#FFD3EB",
+                    "description": "Pink 01",
+                    "type": "color"
+                },
+                "02": {
+                    "value": "#FFADDA",
+                    "description": "Pink 02",
+                    "type": "color"
+                },
+                "03": {
+                    "value": "#FF80C8",
+                    "description": "Pink 03",
+                    "type": "color"
+                },
+                "04": {
+                    "value": "#E85AAD",
+                    "description": "Pink 04",
+                    "type": "color"
+                },
+                "05": {
+                    "value": "#BF3989",
+                    "description": "Pink 05",
+                    "type": "color"
+                },
+                "06": {
+                    "value": "#99286E",
+                    "description": "Pink 06",
+                    "type": "color"
+                },
+                "07": {
+                    "value": "#772057",
+                    "description": "Pink 07",
+                    "type": "color"
+                },
+                "08": {
+                    "value": "#611347",
+                    "description": "Pink 08",
+                    "type": "color"
+                },
+                "09": {
+                    "value": "#4D0336",
+                    "description": "Pink 09",
+                    "type": "color"
+                }
+            },
+            "Orange": {
+                "00": {
+                    "value": "#FFF1E5",
+                    "description": "Orange 00",
+                    "type": "color"
+                },
+                "01": {
+                    "value": "#FFD8B5",
+                    "description": "Orange 01",
+                    "type": "color"
+                },
+                "02": {
+                    "value": "#FFB77C",
+                    "description": "Orange 2",
+                    "type": "color"
+                },
+                "03": {
+                    "value": "#FB8F44",
+                    "description": "Orange 03",
+                    "type": "color"
+                },
+                "04": {
+                    "value": "#E16F24",
+                    "description": "Orange 04",
+                    "type": "color"
+                },
+                "05": {
+                    "value": "#BC4C00",
+                    "description": "Orange 05",
+                    "type": "color"
+                },
+                "06": {
+                    "value": "#953800",
+                    "description": "Orange 06",
+                    "type": "color"
+                },
+                "07": {
+                    "value": "#762C00",
+                    "description": "Orange 07",
+                    "type": "color"
+                },
+                "08": {
+                    "value": "#5C2200",
+                    "description": "Orange 08",
+                    "type": "color"
+                },
+                "09": {
+                    "value": "#471700",
+                    "description": "Orange 09",
+                    "type": "color"
+                }
+            },
+            "Red": {
+                "00": {
+                    "value": "#FFEFEE",
+                    "description": "Red 00",
+                    "type": "color"
+                },
+                "01": {
+                    "value": "#FFD5D3",
+                    "description": "Red 01",
+                    "type": "color"
+                },
+                "02": {
+                    "value": "#FFB2B0",
+                    "description": "Red 02",
+                    "type": "color"
+                },
+                "03": {
+                    "value": "#FF8987",
+                    "description": "Red 03",
+                    "type": "color"
+                },
+                "04": {
+                    "value": "#FB5254",
+                    "description": "Red 04",
+                    "type": "color"
+                },
+                "05": {
+                    "value": "#D42A32",
+                    "description": "Red 05",
+                    "type": "color"
+                },
+                "06": {
+                    "value": "#A81C26",
+                    "description": "Red 06",
+                    "type": "color"
+                },
+                "07": {
+                    "value": "#84161F",
+                    "description": "Red 07",
+                    "type": "color"
+                },
+                "08": {
+                    "value": "#691019",
+                    "description": "Red 08",
+                    "type": "color"
+                },
+                "09": {
+                    "value": "#52040F",
+                    "description": "Red 09",
+                    "type": "color"
+                }
+            },
+            "Indigo": {
+                "00": {
+                    "value": "#EFF2FF",
+                    "description": "Indigo 00",
+                    "type": "color"
+                },
+                "01": {
+                    "value": "#D7DDFF",
+                    "description": "Indigo 01",
+                    "type": "color"
+                },
+                "02": {
+                    "value": "#B9C2FF",
+                    "description": "Indigo 02",
+                    "type": "color"
+                },
+                "03": {
+                    "value": "#9AA4FF",
+                    "description": "Indigo 03",
+                    "type": "color"
+                },
+                "04": {
+                    "value": "#7683FF",
+                    "description": "Indigo 04",
+                    "type": "color"
+                },
+                "05": {
+                    "value": "#545DF0",
+                    "description": "Indigo 05",
+                    "type": "color"
+                },
+                "06": {
+                    "value": "#3C42D0",
+                    "description": "Indigo 06",
+                    "type": "color"
+                },
+                "07": {
+                    "value": "#2C33A5",
+                    "description": "Indigo 07",
+                    "type": "color"
+                },
+                "08": {
+                    "value": "#22297F",
+                    "description": "Indigo 08",
+                    "type": "color"
+                },
+                "09": {
+                    "value": "#191F5C",
+                    "description": "Indigo 09",
+                    "type": "color"
+                }
+            },
+            "Purple": {
+                "00": {
+                    "value": "#FBEFFF",
+                    "description": "Purple 00",
+                    "type": "color"
+                },
+                "01": {
+                    "value": "#ECD8FF",
+                    "description": "Purple 01",
+                    "type": "color"
+                },
+                "02": {
+                    "value": "#D8B9FF",
+                    "description": "Purple 02",
+                    "type": "color"
+                },
+                "03": {
+                    "value": "#C297FF",
+                    "description": "Purple 03",
+                    "type": "color"
+                },
+                "04": {
+                    "value": "#A475F9",
+                    "description": "Purple 04",
+                    "type": "color"
+                },
+                "05": {
+                    "value": "#8250DF",
+                    "description": "Purple 05",
+                    "type": "color"
+                },
+                "06": {
+                    "value": "#6639BA",
+                    "description": "Purple 06",
+                    "type": "color"
+                },
+                "07": {
+                    "value": "#512A97",
+                    "description": "Purple 07",
+                    "type": "color"
+                },
+                "08": {
+                    "value": "#3E1F79",
+                    "description": "Purple 08",
+                    "type": "color"
+                },
+                "09": {
+                    "value": "#2E1461",
+                    "description": "Purple 09",
+                    "type": "color"
+                }
+            },
+            "Green": {
+                "00": {
+                    "value": "#DAFBE1",
+                    "description": "Green 00",
+                    "type": "color"
+                },
+                "01": {
+                    "value": "#ACEEBB",
+                    "description": "Green 01",
+                    "type": "color"
+                },
+                "02": {
+                    "value": "#6FDD8B",
+                    "description": "Green 02",
+                    "type": "color"
+                },
+                "03": {
+                    "value": "#4AC26B",
+                    "description": "Green 03",
+                    "type": "color"
+                },
+                "04": {
+                    "value": "#2DA44E",
+                    "description": "Green 04",
+                    "type": "color"
+                },
+                "05": {
+                    "value": "#1A7F37",
+                    "description": "Green 05",
+                    "type": "color"
+                },
+                "06": {
+                    "value": "#116329",
+                    "description": "Green 06",
+                    "type": "color"
+                },
+                "07": {
+                    "value": "#044F1E",
+                    "description": "Green 07",
+                    "type": "color"
+                },
+                "08": {
+                    "value": "#003D16",
+                    "description": "Green 08",
+                    "type": "color"
+                },
+                "09": {
+                    "value": "#002D11",
+                    "description": "Green 09",
+                    "type": "color"
+                }
+            },
+            "Yellow": {
+                "00": {
+                    "value": "#FCF4CA",
+                    "description": "Yellow 00",
+                    "type": "color"
+                },
+                "01": {
+                    "value": "#F6DE7C",
+                    "description": "Yellow 01",
+                    "type": "color"
+                },
+                "02": {
+                    "value": "#E6C24A",
+                    "description": "Yellow 02",
+                    "type": "color"
+                },
+                "03": {
+                    "value": "#D2A52D",
+                    "description": "Yellow 03",
+                    "type": "color"
+                },
+                "04": {
+                    "value": "#BB8400",
+                    "description": "Yellow 04",
+                    "type": "color"
+                },
+                "05": {
+                    "value": "#976500",
+                    "description": "Yellow 05",
+                    "type": "color"
+                },
+                "06": {
+                    "value": "#7A4C00",
+                    "description": "Yellow 06",
+                    "type": "color"
+                },
+                "07": {
+                    "value": "#613B01",
+                    "description": "Yellow 07",
+                    "type": "color"
+                },
+                "08": {
+                    "value": "#4D2D00",
+                    "description": "Yellow 08",
+                    "type": "color"
+                },
+                "09": {
+                    "value": "#382103",
+                    "description": "Yellow 09",
+                    "type": "color"
+                }
+            },
+            "Lemon": {
+                "00": {
+                    "value": "#FDF5B3",
+                    "description": "Lemon 00",
+                    "type": "color"
+                },
+                "01": {
+                    "value": "#F4E162",
+                    "description": "Lemon 01",
+                    "type": "color"
+                },
+                "02": {
+                    "value": "#DEC741",
+                    "description": "Lemon 02",
+                    "type": "color"
+                },
+                "03": {
+                    "value": "#C5AA20",
+                    "description": "Lemon 03",
+                    "type": "color"
+                },
+                "04": {
+                    "value": "#A88D02",
+                    "description": "Lemon 04",
+                    "type": "color"
+                },
+                "05": {
+                    "value": "#866D00",
+                    "description": "Lemon 05",
+                    "type": "color"
+                },
+                "06": {
+                    "value": "#685400",
+                    "description": "Lemon 06",
+                    "type": "color"
+                },
+                "07": {
+                    "value": "#534100",
+                    "description": "Lemon 07",
+                    "type": "color"
+                },
+                "08": {
+                    "value": "#413200",
+                    "description": "Lemon 08",
+                    "type": "color"
+                },
+                "09": {
+                    "value": "#322400",
+                    "description": "Lemon 09",
+                    "type": "color"
+                }
+            },
+            "Lime": {
+                "00": {
+                    "value": "#EAFABA",
+                    "description": "Lime 00",
+                    "type": "color"
+                },
+                "01": {
+                    "value": "#CDEC78",
+                    "description": "Lime 01",
+                    "type": "color"
+                },
+                "02": {
+                    "value": "#B1D353",
+                    "description": "Lime 02",
+                    "type": "color"
+                },
+                "03": {
+                    "value": "#94B83B",
+                    "description": "Lime 03",
+                    "type": "color"
+                },
+                "04": {
+                    "value": "#799A2A",
+                    "description": "Lime 04",
+                    "type": "color"
+                },
+                "05": {
+                    "value": "#5A791B",
+                    "description": "Lime 05",
+                    "type": "color"
+                },
+                "06": {
+                    "value": "#425E13",
+                    "description": "Lime 06",
+                    "type": "color"
+                },
+                "07": {
+                    "value": "#2F4A06",
+                    "description": "Lime 07",
+                    "type": "color"
+                },
+                "08": {
+                    "value": "#233B03",
+                    "description": "Lime 08",
+                    "type": "color"
+                },
+                "09": {
+                    "value": "#182C01",
+                    "description": "Lime 09",
+                    "type": "color"
+                }
+            },
+            "Teal": {
+                "00": {
+                    "value": "#DAF9F5",
+                    "description": "Teal 00",
+                    "type": "color"
+                },
+                "01": {
+                    "value": "#B0EAE3",
+                    "description": "Teal 01",
+                    "type": "color"
+                },
+                "02": {
+                    "value": "#6BD6D0",
+                    "description": "Teal 02",
+                    "type": "color"
+                },
+                "03": {
+                    "value": "#49BCB7",
+                    "description": "Teal 03",
+                    "type": "color"
+                },
+                "04": {
+                    "value": "#339D9B",
+                    "description": "Teal 04",
+                    "type": "color"
+                },
+                "05": {
+                    "value": "#197B7B",
+                    "description": "Teal 05",
+                    "type": "color"
+                },
+                "06": {
+                    "value": "#136061",
+                    "description": "Teal 06",
+                    "type": "color"
+                },
+                "07": {
+                    "value": "#024B4D",
+                    "description": "Teal 07",
+                    "type": "color"
+                },
+                "08": {
+                    "value": "#063A3C",
+                    "description": "Teal 08",
+                    "type": "color"
+                },
+                "09": {
+                    "value": "#052B2C",
+                    "description": "Teal 09",
+                    "type": "color"
+                }
+            }
+        }
+    }
+}
diff --git a/token-transformer/package-lock.json b/token-transformer/package-lock.json
new file mode 100644
index 000000000..d577334c3
--- /dev/null
+++ b/token-transformer/package-lock.json
@@ -0,0 +1,5 @@
+{
+  "name": "token-transformer",
+  "version": "0.0.12",
+  "lockfileVersion": 1
+}
diff --git a/token-transformer/package.json b/token-transformer/package.json
index 859cbfaf0..bbdc41aec 100644
--- a/token-transformer/package.json
+++ b/token-transformer/package.json
@@ -1,13 +1,12 @@
 {
-    "name": "token-transformer",
-    "version": "0.0.9",
-    "description": "A utility that transforms tokens from Figma Tokens to a format that is readable by Style Dictionary.",
-    "main": "index.js",
-    "scripts": {
-      "test": "echo \"Error: no test specified\" && exit 1"
-    },
-    "author": "six7",
-    "license": "ISC",
-    "bin": "index.js"
-  }
-  
\ No newline at end of file
+  "name": "token-transformer",
+  "version": "0.0.13",
+  "description": "A utility that transforms tokens from Figma Tokens to a format that is readable by Style Dictionary.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "six7",
+  "license": "ISC",
+  "bin": "index.js"
+}
diff --git a/types/api.tsx b/types/api.tsx
index 4d5b4d3f1..5eb08f90d 100644
--- a/types/api.tsx
+++ b/types/api.tsx
@@ -14,12 +14,15 @@ export type ApiDataType = {
 
 export enum StorageProviderType {
     LOCAL = 'local',
-    ARCADE = 'arcade',
     JSONBIN = 'jsonbin',
+    GITHUB = 'github',
+    URL = 'url',
 }
 
 export interface ContextObject extends ApiDataType {
     secret: string;
     id: string;
+    branch?: string;
+    filePath?: string;
     tokens: string;
 }
diff --git a/types/messages.tsx b/types/messages.tsx
index 046b55cbb..72a8bc7fb 100644
--- a/types/messages.tsx
+++ b/types/messages.tsx
@@ -25,4 +25,5 @@ export enum MessageToPluginTypes {
     SET_STORAGE_TYPE = 'set-storage-type',
     NOTIFY = 'notify',
     SET_UI = 'set_ui',
+    RESIZE_WINDOW = 'resize_window',
 }
diff --git a/types/state.tsx b/types/state.tsx
index 069bf3c12..8cbd90d1e 100644
--- a/types/state.tsx
+++ b/types/state.tsx
@@ -8,8 +8,6 @@ export type StateType = {
     disabled: boolean;
     collapsed: boolean;
     selectionValues: object;
-    showEditForm: boolean;
-    showOptions: boolean | string;
     api: ApiDataType;
     apiProviders: ApiDataType[];
     updatePageOnly: boolean;
diff --git a/types/tokens.tsx b/types/tokens.tsx
index 0d0ba1733..945b8f3ac 100644
--- a/types/tokens.tsx
+++ b/types/tokens.tsx
@@ -4,8 +4,8 @@ export interface TokenProps {
     values: {
         [key: string]: SingleTokenObject[] | TokenObject;
     };
-    updatedAt: string;
-    version: string;
+    updatedAt?: string;
+    version?: string;
 }
 
 export type SingleToken = TokenGroup;
@@ -59,21 +59,3 @@ export type TokenType =
     | 'fontSizes'
     | 'letterSpacing'
     | 'paragraphSpacing';
-
-export type ArcadeTokenType =
-    | 'color'
-    | 'implicit'
-    | 'border-radius'
-    | 'size'
-    | 'space'
-    | 'text'
-    | 'typography'
-    | 'opacity'
-    | 'border-width'
-    | 'shadow'
-    | 'font-family'
-    | 'font-weight'
-    | 'line-height'
-    | 'font-size'
-    | 'letter-spacing'
-    | 'paragraph-spacing';
diff --git a/webpack.config.js b/webpack.config.js
index a937063f4..3f49f1f51 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -12,6 +12,7 @@ module.exports = (env, argv) => ({
     entry: {
         ui: './src/app/index.tsx', // The entry point for your UI code
         code: './src/plugin/controller.ts', // The entry point for your plugin code
+        transform: './src/utils/transform.ts', // The entry point for your plugin code
     },
 
     module: {
diff --git a/yarn.lock b/yarn.lock
index 5c73fc039..a573bdd83 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1015,10 +1015,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@figma-plugin/helpers@^0.13.2":
-  version "0.13.3"
-  resolved "https://registry.yarnpkg.com/@figma-plugin/helpers/-/helpers-0.13.3.tgz#9bf9c94f8f1ff6965dfc59d13f6c668eb08167db"
-  integrity sha512-p4jsNuNKEzQ39dtOOg7e/HbD402crVwdeB11tCmY/wztyKh31vZA/31eqko6/Iw4gY1Tj2UVG92Z6mKx4GhKKQ==
+"@figma-plugin/helpers@^0.15.2":
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/@figma-plugin/helpers/-/helpers-0.15.2.tgz#0941089e7451fd2764843d763042728579dd54bf"
+  integrity sha512-ggFxoefZKc0D/HJXFHqliLWCLQG3QTbByHqgiSpTK0D76qTDv2fpcF9bytjSMVnc4flD7Rq17tLNP/WmaJt3dA==
   dependencies:
     lodash "^4.17.15"
     matrix-inverse "^1.0.1"
@@ -1243,6 +1243,107 @@
     "@nodelib/fs.scandir" "2.1.4"
     fastq "^1.6.0"
 
+"@octokit/auth-token@^2.4.4":
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/@octokit/auth-token/-/auth-token-2.4.5.tgz#568ccfb8cb46f36441fac094ce34f7a875b197f3"
+  integrity sha512-BpGYsPgJt05M7/L/5FoE1PiAbdxXFZkX/3kDYcsvd1v6UhlnE5e96dTDr0ezX/EFwciQxf3cNV0loipsURU+WA==
+  dependencies:
+    "@octokit/types" "^6.0.3"
+
+"@octokit/core@^3.5.0":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@octokit/core/-/core-3.5.1.tgz#8601ceeb1ec0e1b1b8217b960a413ed8e947809b"
+  integrity sha512-omncwpLVxMP+GLpLPgeGJBF6IWJFjXDS5flY5VbppePYX9XehevbDykRH9PdCdvqt9TS5AOTiDide7h0qrkHjw==
+  dependencies:
+    "@octokit/auth-token" "^2.4.4"
+    "@octokit/graphql" "^4.5.8"
+    "@octokit/request" "^5.6.0"
+    "@octokit/request-error" "^2.0.5"
+    "@octokit/types" "^6.0.3"
+    before-after-hook "^2.2.0"
+    universal-user-agent "^6.0.0"
+
+"@octokit/endpoint@^6.0.1":
+  version "6.0.12"
+  resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-6.0.12.tgz#3b4d47a4b0e79b1027fb8d75d4221928b2d05658"
+  integrity sha512-lF3puPwkQWGfkMClXb4k/eUT/nZKQfxinRWJrdZaJO85Dqwo/G0yOC434Jr2ojwafWJMYqFGFa5ms4jJUgujdA==
+  dependencies:
+    "@octokit/types" "^6.0.3"
+    is-plain-object "^5.0.0"
+    universal-user-agent "^6.0.0"
+
+"@octokit/graphql@^4.5.8":
+  version "4.6.4"
+  resolved "https://registry.yarnpkg.com/@octokit/graphql/-/graphql-4.6.4.tgz#0c3f5bed440822182e972317122acb65d311a5ed"
+  integrity sha512-SWTdXsVheRmlotWNjKzPOb6Js6tjSqA2a8z9+glDJng0Aqjzti8MEWOtuT8ZSu6wHnci7LZNuarE87+WJBG4vg==
+  dependencies:
+    "@octokit/request" "^5.6.0"
+    "@octokit/types" "^6.0.3"
+    universal-user-agent "^6.0.0"
+
+"@octokit/openapi-types@^9.5.0":
+  version "9.7.0"
+  resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-9.7.0.tgz#9897cdefd629cd88af67b8dbe2e5fb19c63426b2"
+  integrity sha512-TUJ16DJU8mekne6+KVcMV5g6g/rJlrnIKn7aALG9QrNpnEipFc1xjoarh0PKaAWf2Hf+HwthRKYt+9mCm5RsRg==
+
+"@octokit/plugin-paginate-rest@^2.6.2":
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.15.1.tgz#264189dd3ce881c6c33758824aac05a4002e056a"
+  integrity sha512-47r52KkhQDkmvUKZqXzA1lKvcyJEfYh3TKAIe5+EzMeyDM3d+/s5v11i2gTk8/n6No6DPi3k5Ind6wtDbo/AEg==
+  dependencies:
+    "@octokit/types" "^6.24.0"
+
+"@octokit/plugin-request-log@^1.0.2":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz#5e50ed7083a613816b1e4a28aeec5fb7f1462e85"
+  integrity sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==
+
+"@octokit/plugin-rest-endpoint-methods@5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.7.0.tgz#80b69452c17597738d4692c79829b72d9e72ccec"
+  integrity sha512-G7sgccWRYQMwcHJXkDY/sDxbXeKiZkFQqUtzBCwmrzCNj2GQf3VygQ4T/BFL2crLVpIbenkE/c0ErhYOte2MPw==
+  dependencies:
+    "@octokit/types" "^6.24.0"
+    deprecation "^2.3.1"
+
+"@octokit/request-error@^2.0.5", "@octokit/request-error@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-2.1.0.tgz#9e150357831bfc788d13a4fd4b1913d60c74d677"
+  integrity sha512-1VIvgXxs9WHSjicsRwq8PlR2LR2x6DwsJAaFgzdi0JfJoGSO8mYI/cHJQ+9FbN21aa+DrgNLnwObmyeSC8Rmpg==
+  dependencies:
+    "@octokit/types" "^6.0.3"
+    deprecation "^2.0.0"
+    once "^1.4.0"
+
+"@octokit/request@^5.6.0":
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.6.1.tgz#f97aff075c37ab1d427c49082fefeef0dba2d8ce"
+  integrity sha512-Ls2cfs1OfXaOKzkcxnqw5MR6drMA/zWX/LIS/p8Yjdz7QKTPQLMsB3R+OvoxE6XnXeXEE2X7xe4G4l4X0gRiKQ==
+  dependencies:
+    "@octokit/endpoint" "^6.0.1"
+    "@octokit/request-error" "^2.1.0"
+    "@octokit/types" "^6.16.1"
+    is-plain-object "^5.0.0"
+    node-fetch "^2.6.1"
+    universal-user-agent "^6.0.0"
+
+"@octokit/rest@^18.9.0":
+  version "18.9.0"
+  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-18.9.0.tgz#e5cc23fa199a2bdeea9efbe6096f81d7d6156fe9"
+  integrity sha512-VrmrE8gjpuOoDAGjrQq2j9ZhOE6LxaqxaQg0yMrrEnnQZy2ZcAnr5qbVfKsMF0up/48PRV/VFS/2GSMhA7nTdA==
+  dependencies:
+    "@octokit/core" "^3.5.0"
+    "@octokit/plugin-paginate-rest" "^2.6.2"
+    "@octokit/plugin-request-log" "^1.0.2"
+    "@octokit/plugin-rest-endpoint-methods" "5.7.0"
+
+"@octokit/types@^6.0.3", "@octokit/types@^6.16.1", "@octokit/types@^6.24.0":
+  version "6.25.0"
+  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.25.0.tgz#c8e37e69dbe7ce55ed98ee63f75054e7e808bf1a"
+  integrity sha512-bNvyQKfngvAd/08COlYIN54nRgxskmejgywodizQNyiKoXmWRAjKup2/LYwm+T9V0gsKH6tuld1gM0PzmOiB4Q==
+  dependencies:
+    "@octokit/openapi-types" "^9.5.0"
+
 "@radix-ui/popper@0.0.10":
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/@radix-ui/popper/-/popper-0.0.10.tgz#9f707d9cec8762423f81acaf8e650e40a554cb73"
@@ -2989,6 +3090,11 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+before-after-hook@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.2.tgz#a6e8ca41028d90ee2c24222f201c90956091613e"
+  integrity sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -3613,6 +3719,11 @@ color-string@^1.5.4:
     color-name "^1.0.0"
     simple-swizzle "^0.2.2"
 
+color2k@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/color2k/-/color2k-1.2.4.tgz#af34950ac58e23cf224a01cb8dd0c9911a79605e"
+  integrity sha512-DiwdBwc0BryPFFXoCrW8XQGXl2rEtMToODybxZjKnN5IJXt/tV/FsN02pCK/b7KcWvJEioz3c74lQSmayFvS4Q==
+
 color@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e"
@@ -4241,6 +4352,11 @@ dependency-graph@^0.9.0:
   resolved "https://registry.yarnpkg.com/dependency-graph/-/dependency-graph-0.9.0.tgz#11aed7e203bc8b00f48356d92db27b265c445318"
   integrity sha512-9YLIBURXj4DJMFALxXw9K3Y3rwb5Fk0X5/8ipCzaN84+gKxoHK43tVKRNakCQbiEx07E8Uwhuq21BpUagFhZ8w==
 
+deprecation@^2.0.0, deprecation@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
+  integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -6160,6 +6276,11 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
+is-plain-object@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-5.0.0.tgz#4427f50ab3429e9025ea7d52e9043a9ef4159344"
+  integrity sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==
+
 is-potential-custom-element-name@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz#0c52e54bcca391bb2c494b21e8626d7336c6e397"
@@ -6758,7 +6879,7 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
-json-stringify-safe@~5.0.1:
+json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
@@ -6775,7 +6896,7 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.2:
+json5@^2.1.2, json5@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.0.tgz#2dfefe720c6ba525d9ebd909950f0515316c89a3"
   integrity sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==
@@ -7076,7 +7197,7 @@ lodash.toarray@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
   integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE=
 
-lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3:
+lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -7374,7 +7495,7 @@ mixpanel-figma@^2.0.1:
   resolved "https://registry.yarnpkg.com/mixpanel-figma/-/mixpanel-figma-2.0.1.tgz#3936f6fc133b848e22235f2275c341a73eb905fb"
   integrity sha512-p+xWU/dA04IqpjEOzdf3eZGCh3yWCZSc5SsmW2WZU4zTFh4p2h6OJmt7pqozYlXjY4p3+7BXmRFdoAand3uArw==
 
-mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.4, mkdirp@~0.5.1:
+mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.4, mkdirp@~0.5.1:
   version "0.5.5"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
   integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
@@ -7472,6 +7593,17 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
+nock@^11.7.0:
+  version "11.9.1"
+  resolved "https://registry.yarnpkg.com/nock/-/nock-11.9.1.tgz#2b026c5beb6d0dbcb41e7e4cefa671bc36db9c61"
+  integrity sha512-U5wPctaY4/ar2JJ5Jg4wJxlbBfayxgKbiAeGh+a1kk6Pwnc2ZEuKviLyDSG6t0uXl56q7AALIxoM6FJrBSsVXA==
+  dependencies:
+    debug "^4.1.0"
+    json-stringify-safe "^5.0.1"
+    lodash "^4.17.13"
+    mkdirp "^0.5.0"
+    propagate "^2.0.0"
+
 node-emoji@^1.8.1:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
@@ -7479,6 +7611,11 @@ node-emoji@^1.8.1:
   dependencies:
     lodash.toarray "^4.4.0"
 
+node-fetch@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+
 node-int64@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@@ -7717,6 +7854,13 @@ object.values@^1.1.0, object.values@^1.1.1:
     es-abstract "^1.18.0-next.2"
     has "^1.0.3"
 
+octokit-commit-multiple-files@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/octokit-commit-multiple-files/-/octokit-commit-multiple-files-3.2.1.tgz#995ef26dd8079b25d861560c0d18483424866398"
+  integrity sha512-2Dam7A0ZoBI+5ftP4mdwb+pu27ZalwUCqo5IwLMcq7WgIYdoCVq6cI7sPZ54B8Ftp49RNV/CWKBXDswgp/8oHg==
+  dependencies:
+    nock "^11.7.0"
+
 on-headers@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.2.tgz#772b0ae6aaa525c399e489adfad90c403eb3c28f"
@@ -8323,6 +8467,11 @@ prop-types@^15.5.10, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+propagate@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/propagate/-/propagate-2.0.1.tgz#40cdedab18085c792334e64f0ac17256d38f9a45"
+  integrity sha512-vGrhOavPSTz4QVNuBNdcNXePNdNMaO1xj9yBeH1ScQPjk/rhg9sSlCXPhMkFuaNNW/syTvYqsnbIJxMBfRbbag==
+
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
@@ -10193,6 +10342,11 @@ unique-slug@^2.0.0:
   dependencies:
     imurmurhash "^0.1.4"
 
+universal-user-agent@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-6.0.0.tgz#3381f8503b251c0d9cd21bc1de939ec9df5480ee"
+  integrity sha512-isyNax3wXoKaulPDZWHQqbmIx1k2tb9fb3GGDBRxCscfYV2Ch7WxPArBsFEG8s/safwXTT7H4QGhaIkTp9447w==
+
 universalify@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"