diff --git a/bower.json b/bower.json
index 5671008e..075d6c37 100644
--- a/bower.json
+++ b/bower.json
@@ -5,6 +5,7 @@
     "platform": "Polymer/platform#master",
     "code-mirror": "Polymer/code-mirror#master",
     "github-elements": "PolymerLabs/github-elements#master",
+    "x-meta": "PolymerLabs/x-meta#master",
     "polymer-elements": "Polymer/polymer-elements#master",
     "polymer-ui-elements": "Polymer/polymer-ui-elements#master",
     "more-elements": "Polymer/more-elements#master"
diff --git a/elements/designer-element/designer-element.css b/elements/designer-element/designer-element.css
new file mode 100644
index 00000000..b0dd4d9a
--- /dev/null
+++ b/elements/designer-element/designer-element.css
@@ -0,0 +1,30 @@
+iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+#viewSelector {
+  padding: 4px;
+  background: #E0E0E0;
+  border-radius: 2px;
+  margin-left: 8px;
+}
+
+#inspector {
+  position: relative;
+  width: 350px;
+  border-left: 1px solid silver;
+  transition: width 0.3s;
+  box-shadow: -5px 0 8px rgba(0, 0, 0, 0.14);
+}
+
+#inspector.maximized {
+  width: 0;
+  border: 0;
+}
+
+#frameContainer {
+  height: 100%;
+  z-index: 0;
+}
diff --git a/elements/designer-element/designer-element.html b/elements/designer-element/designer-element.html
index 14bc2422..50fc2927 100644
--- a/elements/designer-element/designer-element.html
+++ b/elements/designer-element/designer-element.html
@@ -1,94 +1,60 @@
-<link rel="import" href="../../components/polymer-layout/polymer-layout.html">
-<link rel="import" href="../../components/polymer-flex-layout/polymer-flex-layout.html">
-<link rel="import" href="../../components/polymer-ui-toolbar/polymer-ui-toolbar.html">
-<link rel="import" href="../../components/polymer-ui-icon-button/polymer-ui-icon-button.html">
+<link rel="import" href="../../components/core-selector/core-selector.html">
+<link rel="import" href="../../components/core-layout/core-layout.html">
+<link rel="import" href="../../components/core-pages/core-pages.html">
+
+<link rel="import" href="../../components/paper-appbar/paper-appbar.html">
+<link rel="import" href="../../components/paper-icon-button/paper-icon-button.html">
 
 <link rel="import" href="../../components/code-mirror/code-mirror.html">
 <link rel="import" href="../../components/github-elements/github-elements.html">
 
 <link rel="import" href="../x-dom-serializer/x-dom-serializer.html">
-
 <link rel="import" href="../x-inspector/x-inspector.html">
 <link rel="import" href="../x-file-document/x-file-document.html">
 
 <polymer-element name="designer-element">
 <template>
 
-  <style>
-
-    iframe {
-      width: 100%;
-      height: 100%;
-      border: none;
-    }
-
-    #viewSelector {
-      padding: 4px;
-      background: #E0E0E0;
-      border-radius: 2px;
-      margin-left: 8px;
-    }
+  <link rel="stylesheet" href="designer-element.css">
 
-    #inspector {
-      position: relative;
-      width: 350px;
-      border-left: 1px solid silver;
-      transition: width 0.3s;
-      box-shadow: -5px 0 8px rgba(0, 0, 0, 0.14);
-    }
+  <core-layout flow="v"></core-layout>
 
-    #inspector.maximized {
-      width: 0;
-      border: 0;
-    }
-
-    #frameContainer {
-      height: 100%;
-      z-index: 0;
-    }
+  <paper-appbar id="appbar" theme="paper-light-theme">
 
-  </style>
+    <paper-icon-button icon="maximize" on-tap="{{fullscreenAction}}"></paper-icon-button>
 
-  <polymer-layout vertical></polymer-layout>
-
-  <polymer-ui-toolbar id="appbar" theme="polymer-ui-light-theme">
-
-    <polymer-ui-icon-button icon="maximize" on-tap="{{fullscreenAction}}"></polymer-ui-icon-button>
-
-    <polymer-selector id="viewSelector" selected="{{selected}}">
-      <polymer-ui-icon-button src="assets/design.png" name="design"></polymer-ui-icon-button>
-      <polymer-ui-icon-button src="assets/code.png" name="code"></polymer-ui-icon-button>
-    </polymer-selector>
+    <core-selector id="viewSelector" selected="{{selected}}">
+      <paper-icon-button src="assets/design.png" name="design"></paper-icon-button>
+      <paper-icon-button src="assets/code.png" name="code"></paper-icon-button>
+    </core-selector>
 
     <span style="padding-right: 24px;"></span>
 
-    <polymer-ui-icon-button icon="add" on-tap="{{saveAction}}"></polymer-ui-icon-button>
+    <paper-icon-button icon="add" on-tap="{{saveAction}}"></paper-icon-button>
     <!-- shareAction has to be triggered from on-click to allow opening a tab (otherwise can only open a floating window) -->
-    <polymer-ui-icon-button icon="shortcut" on-click="{{shareAction}}"></polymer-ui-icon-button>
+    <paper-icon-button icon="shortcut" on-click="{{shareAction}}"></paper-icon-button>
 
     <span style="padding-right: 16px;"></span>
 
-    <polymer-ui-icon-button icon="left" on-tap="{{promoteElement}}"></polymer-ui-icon-button>
-    <polymer-ui-icon-button icon="right" on-tap="{{demoteElement}}"></polymer-ui-icon-button>
+    <paper-icon-button icon="left" on-tap="{{promoteElement}}"></paper-icon-button>
+    <paper-icon-button icon="right" on-tap="{{demoteElement}}"></paper-icon-button>
 
-  </polymer-ui-toolbar>
+  </paper-appbar>
 
-  <polymer-ui-pages flex selected="{{selected}}">
+  <core-pages core-flex selected="{{selected}}">
 
-    <section name="design">
-      <polymer-flex-layout></polymer-flex-layout>
-      <div id="frameContainer" flex>
+    <core-layout name="design">
+      <div id="frameContainer" core-flex>
         <iframe id="frame" src="designer.html"></iframe>
       </div>
       <x-inspector id="inspector" on-delete-element="{{deleteElement}}" on-parent-element="{{selectParentElement}}" on-bind-property="{{applyPropertyBinding}}"></x-inspector>
-    </section>
+    </core-layout>
 
-    <section name="code">
-      <polymer-layout></polymer-layout>
-      <code-mirror id="code" flex></code-mirror>
-    </section>
+    <core-layout name="code">
+      <code-mirror id="code" core-flex></code-mirror>
+    </core-layout>
 
-  </polymer-ui-pages>
+  </core-pages>
 
   <x-dom-serializer id="serializer"></x-dom-serializer>
 
@@ -133,24 +99,26 @@
     },
 
     designerReady: function(event) {
-      //console.log('designerReady');
       this.designer = event.target;
-      this.designer.loadLinks(window.metadata, function() {
-        if (this.firstLoad) {
-          this.firstLoad = false;
-          this.loadRemoteContent();
-          return;
-        }
-        if (this.pendingHtml) {
-          this.loadHtml(this.pendingHtml);
-          this.pendingHtml = null;
-        } else {
-          var tag = Platform.flags.element;
-          if (tag) {
-            this.designer.createElement(tag);
-          }
+      // crosses iframe boundary
+      this.designer.import(window.metadata, this.importsLoaded.bind(this));
+    },
+
+    importsLoaded: function() {
+      if (this.firstLoad) {
+        this.firstLoad = false;
+        this.loadRemoteContent();
+        return;
+      }
+      if (this.pendingHtml) {
+        this.loadHtml(this.pendingHtml);
+        this.pendingHtml = null;
+      } else {
+        var tag = Platform.flags.element;
+        if (tag) {
+          this.designer.createElement(tag);
         }
-      }.bind(this));
+      }
     },
 
     designChange: function(event) {
diff --git a/elements/designer-element/designer.html b/elements/designer-element/designer.html
index edebdb24..7cdec376 100644
--- a/elements/designer-element/designer.html
+++ b/elements/designer-element/designer.html
@@ -7,23 +7,26 @@
   <script>
     window.parent.postMessage('designer-loading', location.href);
   </script>
-  
+
   <link rel="import" href="../x-designer/x-designer.html">
 
   <style>
+
     body {
       font-size: 12px;
       font-family: 'Helvetica Neue', Helvetica, Roboto, Arial;
       overflow: hidden;
     }
+
     x-designer {
       -webkit-transform: translateZ(0);
       transform: translateZ(0);
     }
+
   </style>
 
 </head>
-<body>
+<body unresolved>
 
   <x-designer></x-designer>
 
diff --git a/elements/x-designer/x-designer.html b/elements/x-designer/x-designer.html
index f941513f..25d79b99 100644
--- a/elements/x-designer/x-designer.html
+++ b/elements/x-designer/x-designer.html
@@ -1,4 +1,3 @@
-<link rel="import" href="../../components/polymer-layout/polymer-layout.html">
 <link rel="import" href="../../components/polymer-flex-layout/polymer-flex-layout.html">
 <link rel="import" href="../../components/polymer-ui-splitter/polymer-ui-splitter.html">
 <link rel="import" href="../x-designable/x-designable.html">
@@ -100,8 +99,11 @@
       }
     },
 
-    loadLinks: function(urls, callback) {
-      Polymer.import(urls, callback);
+    'import': function(urls, callback) {
+      var imports = urls.map(function(u) {
+        return '../' + u;
+      }, this);
+      Polymer.import(imports, callback);
     },
 
     loadHtml: function(html) {
diff --git a/elements/x-meta/x-meta.html b/elements/x-meta/x-meta.html
deleted file mode 100644
index afeed677..00000000
--- a/elements/x-meta/x-meta.html
+++ /dev/null
@@ -1,147 +0,0 @@
-<link rel="import" href="../../components/polymer/polymer.html">
-
-<polymer-element name="x-meta" attributes="label isContainer isHidden list map categories shouldPrepend hideSubtree isEditor">
-  <script>
-    Polymer('x-meta', {
-      // shared data
-      list: [],
-      map: {},
-      categories: [],
-      pathMap: {},
-      // instance properties
-      alwaysPrepare: true,
-      isContainer: false,
-      isHidden: false,
-      properties: null,
-      shouldPrepend: false,
-      hideSubtree: false,
-      isEditor: false,
-      ready: function() {
-        if (this.id && this.id !== 'meta') {
-          this.resolveImportPath();
-          this.resolveCategory();
-          this.idChanged();
-        }
-        this.updateProperties();
-      },
-      enteredView: function() {
-        this.updateProperties();
-      },
-      resolveImportPath: function() {
-        this.importPath = (this.ownerDocument.baseURI || '').split('/').slice(0,-1).join('/');
-      },
-      resolveCategory: function() {
-        this.category =  this.getAttribute('group');
-        if (!this.category) {
-          // TODO(sjmiles): hack, add metadata instead
-          if (this.id.indexOf('polymer-ui-') >= 0) {
-            this.category = 'Polymer UI';
-          } else if (this.id.indexOf('polymer-') >= 0) {
-            this.category = 'Polymer';
-          } else {
-            this.category = this.importPath.split('/').slice(0, -1).join('/');
-          }
-        }
-        // add to path category collation as needed
-        var pm = this.pathMap[this.category];
-        if (!pm) {
-          pm = this.pathMap[this.category] = {
-            name: this.category.split('/').pop(),
-            list: []
-          }
-          this.categories.push(pm);
-        }
-        this.categories.sort(function(a, b) {
-          var an = a.name.toLowerCase(), bn = b.name.toLowerCase();
-          return an == bn ? 0 : an < bn ? -1 : 1;
-        });
-      },
-      idChanged: function(inOld) {
-        this.unregister(this, inOld);
-        if (this.id && this.id !== 'meta') {
-          this.register(this);
-        }
-      },
-      register: function(meta) {
-        if (meta.id) {
-          // add to id map
-          this.map[meta.id] = meta;
-          // pre|append to id list
-          if (meta.shouldPrepend) {
-            this.list.unshift(meta);
-          } else {
-            this.list.push(meta);
-          }
-          // add to path category collation
-          this.pathMap[this.category].list.push(meta);
-        }
-      },
-      unregister: function(meta, id) {
-        if (id) {
-          delete this.map[id || meta.id];
-          var i = this.list.indexOf(meta);
-          if (i >= 0) {
-            this.list.splice(i, 1);
-          }
-        }
-      },
-      byId: function(id) {
-        return this.map[id];
-      },
-      updateProperties: function() {
-        var props = {};
-        var ps = this.querySelectorAll('property');
-        ps && Array.prototype.forEach.call(ps, function(p) {
-          var o = {};
-          Array.prototype.forEach.call(p.attributes, function(a) {
-            var v = a.value;
-            v = v.indexOf(',') > 0 ? v.split(',') : v;
-            o[a.name] = v;
-          });
-          props[o.name] = o;
-        });
-        this.properties = props;
-      },
-      // TODO(sjmiles): functions below here don't necessarily belong
-      // in this object
-      get archetype() {
-        return this.querySelector('template');
-      },
-      createElement: function() {
-        if (!this.importsLoaded) {
-          this.loadImports();
-        }
-        if (this.archetype) {
-          var node = this.archetype.createInstance().querySelector('*');
-        } else {
-          node = document.createElement(this.id);
-        }
-        this.ensureMeta(node);
-        return node;
-      },
-      ensureMeta: function(node) {
-        node.meta = node.meta || this.byId(node.localName);
-        Array.prototype.forEach.call(node.children, function(n) {
-          this.ensureMeta(n);
-        }, this);
-      },
-      getImports: function() {
-        var t = this.querySelector('#imports');
-        // resolve urls in template.
-        if (t) {
-          Platform.urlResolver.resolveTemplate(t);
-        }
-        return t;
-      },
-      loadImports: function(callback) {
-        this.importsLoaded = true;
-        var t = this.getImports();
-        if (t) {
-          Polymer.importElements(t.content.cloneNode(true), callback);
-        } else if (callback) {
-          callback();
-        }
-      }
-    });
-  </script>
-</polymer-element>
diff --git a/elements/x-palette/x-palette.html b/elements/x-palette/x-palette.html
index ab2851d5..fb8f0218 100644
--- a/elements/x-palette/x-palette.html
+++ b/elements/x-palette/x-palette.html
@@ -2,7 +2,7 @@
 <link rel="import" href="../../components/polymer-ui-menu/polymer-ui-menu.html">
 <link rel="import" href="../../components/polymer-ui-menu-item/polymer-ui-menu-item.html">
 <link rel="import" href="../../components/polymer-ui-submenu-item/polymer-ui-submenu-item.html">
-<link rel="import" href="../x-meta/x-meta.html">
+<link rel="import" href="../../components/x-meta/x-meta.html">
 
 <polymer-element name="x-palette" attributes="canvas drag">
 
diff --git a/index.html b/index.html
index 6d36b14a..ab1d1957 100644
--- a/index.html
+++ b/index.html
@@ -8,43 +8,32 @@
 
   <link rel="import" href="elements/designer-element/designer-element.html">
 
-  <style>
-
-    html {
-      position: relative;
-      height: 100%;
-    }
-
-    body {
-      font-family: 'Helvetica Neue', Helvetica, Roboto, Arial;
-      height: 100%;
-      margin: 0;
-      overflow: hidden;
-    }
-
-    designer-element {
-      display: block;
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      overflow: hidden;
+  <style>
+
+    body {
+      font-family: 'Helvetica Neue', Roboto, Helvetica, Arial, sans-serif;
+      margin: 0;
+    }
+
+    designer-element {
+      height: 100vh;
+      width: 100vw;
+      overflow: hidden;
     }
 
   </style>
 
 </head>
-<body>
+<body unresolved>
 
   <script>
     var metadata = [
-      /* 'components/core-elements/metadata.html', */
-      '../../components/paper-elements/metadata.html',
-      '../../components/polymer-elements/metadata.html',
-      '../../components/polymer-ui-elements/metadata.html',
-      '../../components/more-elements/metadata.html',
-      '../../components/polytype/metadata.html'
+      '../components/core-elements/metadata.html',
+      '../components/paper-elements/metadata.html',
+      '../components/polymer-elements/metadata.html',
+      '../components/polymer-ui-elements/metadata.html',
+      '../components/more-elements/metadata.html',
+      '../components/polytype/metadata.html'
     ];
   </script>