diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index 9306a2750f..8ffaae28fe 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -10,18 +10,20 @@
   align-items: center;
 }
 .Element:hover {
-  background-color: var(--color-state03);
+  background-color: var(--color-tree-node-hover);
 }
 
 .SelectedElement {
-  background-color: var(--color-state00);
+  background-color: var(--color-tree-node-selected);
 
   /* Invert colors */
-  --color-component: var(--color-base00);
-  --color-arrow: var(--color-base00);
-  --color-tree-tag: rgba(255, 255, 255, 0.8);
-  --color-tree-attr-name: #b3e5fc;
-  --color-tree-attr-value: #fff;
+  --color-component-name: var(--color-component-name-inverted);
+  --color-arrow: var(--color-arrow-inverted);
+  --color-tree-jsx-arrow-brackets: var(
+    --color-tree-jsx-arrow-brackets-inverted
+  );
+  --color-attribute-name: #b3e5fc;
+  --color-attribute-value: #fff;
 }
 
 .ArrowClosed,
@@ -37,23 +39,23 @@
 }
 
 .Component {
-  color: var(--color-component);
+  color: var(--color-component-name);
 }
 .Component:before {
   white-space: nowrap;
   content: '<';
-  color: var(--color-tree-tag);
+  color: var(--color-tree-jsx-arrow-brackets);
 }
 .Component:after {
   white-space: nowrap;
   content: '>';
-  color: var(--color-tree-tag);
+  color: var(--color-tree-jsx-arrow-brackets);
 }
 
 .AttributeName {
-  color: var(--color-tree-attr-name);
+  color: var(--color-attribute-name);
 }
 
 .AttributeValue {
-  color: var(--color-tree-attr-value);
+  color: var(--color-attribute-value);
 }
diff --git a/src/devtools/views/Elements.css b/src/devtools/views/Elements.css
index dea13215c2..2fe8bb63c6 100644
--- a/src/devtools/views/Elements.css
+++ b/src/devtools/views/Elements.css
@@ -3,7 +3,7 @@
   height: 100%;
   display: flex;
   flex-direction: row;
-
+  background-color: var(--color-background);
   font-family: var(--font-family-sans);
 }
 
diff --git a/src/devtools/views/HooksTree.css b/src/devtools/views/HooksTree.css
index 950ca8eb97..e531ba9f5a 100644
--- a/src/devtools/views/HooksTree.css
+++ b/src/devtools/views/HooksTree.css
@@ -1,6 +1,6 @@
 .HooksTreeView {
   padding: 0.25rem;
-  border-bottom: 1px solid var(--color-base02);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .HooksNode {
@@ -11,14 +11,14 @@
 }
 
 .Name {
-  color: var(--color-tree-attr-name);
+  color: var(--color-attribute-name);
 }
 
 .Value {
-  color: var(--color-tree-attr-value);
+  color: var(--color-attribute-value);
 }
 
 .None {
-  color: var(--color-base03);
+  color: var(--color-deemphasized);
   font-style: italic;
 }
diff --git a/src/devtools/views/InspectedElementTree.css b/src/devtools/views/InspectedElementTree.css
index b2ecc50e59..f56b57fa33 100644
--- a/src/devtools/views/InspectedElementTree.css
+++ b/src/devtools/views/InspectedElementTree.css
@@ -1,20 +1,26 @@
 .InspectedElementTree {
   padding: 0.25rem;
-  border-bottom: 1px solid var(--color-base02);
+  border-bottom: 1px solid var(--color-border);
 }
 
 .Item {
 }
 
 .Name {
-  color: var(--color-tree-attr-name);
+  color: var(--color-attribute-name);
 }
 
 .Value {
-  color: var(--color-tree-attr-value);
+  color: var(--color-attribute-value);
 }
 
 .None {
-  color: var(--color-base03);
+  color: var(--color-deemphasized);
   font-style: italic;
 }
+
+.Empty {
+  color: var(--color-deemphasized);
+  font-style: italic;
+  padding-left: 1rem;
+}
diff --git a/src/devtools/views/InspectedElementTree.js b/src/devtools/views/InspectedElementTree.js
index 4f37bf0bea..e24accf89e 100644
--- a/src/devtools/views/InspectedElementTree.js
+++ b/src/devtools/views/InspectedElementTree.js
@@ -6,12 +6,19 @@ import { meta } from '../../hydration';
 import styles from './InspectedElementTree.css';
 
 type Props = {|
-  label: string,
   data: Object | null,
+  label: string,
+  showWhenEmpty?: boolean,
 |};
 
-export default function InspectedElementTree({ data, label }: Props) {
-  if (data === null || Object.keys(data).length === 0) {
+export default function InspectedElementTree({
+  data,
+  label,
+  showWhenEmpty = false,
+}: Props) {
+  const isEmpty = data === null || Object.keys(data).length === 0;
+
+  if (isEmpty && !showWhenEmpty) {
     return null;
   } else {
     // TODO Add click and key handlers for toggling element open/close state.
@@ -19,9 +26,11 @@ export default function InspectedElementTree({ data, label }: Props) {
     return (
       <div className={styles.InspectedElementTree}>
         <div className={styles.Item}>{label}</div>
-        {Object.keys(data).map(name => (
-          <KeyValue key={name} depth={1} name={name} value={data[name]} />
-        ))}
+        {isEmpty && <div className={styles.Empty}>None</div>}
+        {!isEmpty &&
+          Object.keys((data: any)).map(name => (
+            <KeyValue key={name} depth={1} name={name} value={(data: any)[name]} />
+          ))}
       </div>
     );
   }
diff --git a/src/devtools/views/SelectedElement.css b/src/devtools/views/SelectedElement.css
index 40d6bb6a22..c0fd0a1ba9 100644
--- a/src/devtools/views/SelectedElement.css
+++ b/src/devtools/views/SelectedElement.css
@@ -3,8 +3,8 @@
   flex-direction: column;
   height: 100%;
   width: 100%;
-  border-left: 1px solid var(--color-base02);
-  border-top: 1px solid var(--color-base02);
+  border-left: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border);
 }
 
 .TitleRow {
@@ -12,7 +12,7 @@
   display: flex;
   align-items: center;
   font-size: 16px;
-  border-bottom: 1px solid var(--color-base02);
+  border-bottom: 1px solid var(--color-border);
   padding: 0.5rem;
 }
 
@@ -24,10 +24,10 @@
   align-items: center;
   padding: 0.25rem;
   cursor: pointer;
-  color: var(--color-state00);
+  color: var(--color-button);
 }
 .IconButton:hover {
-  color: var(--color-special02);
+  color: var(--color-button-hover);
 }
 
 .SelectedComponentName {
@@ -44,19 +44,19 @@
 .Owner {
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--color-component);
+  color: var(--color-component-name);
 }
 .Component:before,
 .Owner:before {
   white-space: nowrap;
   content: '<';
-  color: var(--color-tree-tag);
+  color: var(--color-tree-jsx-arrow-brackets);
 }
 .Component:after,
 .Owner:after {
   white-space: nowrap;
   content: '>';
-  color: var(--color-tree-tag);
+  color: var(--color-tree-jsx-arrow-brackets);
 }
 
 .Component {
@@ -66,8 +66,8 @@
 .InspectedElement {
   overflow: auto;
   font-family: var(--font-family-monospace);
-  font-size: var(--font-size-tree-compact);
-  line-height: var(--line-height-compact);
+  font-size: var(--font-size-normal);
+  line-height: var(--line-height-data);
 }
 
 .Owner {
@@ -77,6 +77,6 @@
 
 .Loading {
   padding: 0.25rem;
-  color: var(--color-base03);
+  color: var(--color-deemphasized);
   font-style: italic;
 }
diff --git a/src/devtools/views/SelectedElement.js b/src/devtools/views/SelectedElement.js
index 0264a9107c..8e3386a60b 100644
--- a/src/devtools/views/SelectedElement.js
+++ b/src/devtools/views/SelectedElement.js
@@ -87,7 +87,7 @@ function InspectedElementView({
 
   return (
     <div className={styles.InspectedElement}>
-      <InspectedElementTree label="props" data={props} />
+      <InspectedElementTree label="props" data={props} showWhenEmpty />
       <InspectedElementTree label="state" data={state} />
       <HooksTree hooksTree={hooks} />
       <InspectedElementTree label="context" data={context} />
diff --git a/src/devtools/views/Tree.css b/src/devtools/views/Tree.css
index a168eab550..855f5331af 100644
--- a/src/devtools/views/Tree.css
+++ b/src/devtools/views/Tree.css
@@ -3,7 +3,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  border-top: 1px solid var(--color-base02);
+  border-top: 1px solid var(--color-border);
 }
 
 .SearchRow {
@@ -11,7 +11,7 @@
   display: flex;
   align-items: center;
   font-size: 16px;
-  border-bottom: 1px solid var(--color-base02);
+  border-bottom: 1px solid var(--color-border);
   padding: 0.5rem;
 }
 
@@ -34,11 +34,11 @@
   align-items: center;
   padding: 0.25rem;
   cursor: pointer;
-  color: var(--color-state00);
+  color: var(--color-button);
   flex: 0 0 auto;
 }
 .IconButton:hover {
-  color: var(--color-special02);
+  color: var(--color-button-hover);
 }
 
 .AutoSizerWrapper {
@@ -50,6 +50,6 @@
 
 .List {
   font-family: var(--font-family-monospace);
-  font-size: var(--font-size-tree-compact);
-  line-height: var(--line-height-tree-compact);
+  font-size: var(--font-size-normal);
+  line-height: var(--line-height-data);
 }
diff --git a/src/devtools/views/root.css b/src/devtools/views/root.css
index e39331633f..7c62c37480 100644
--- a/src/devtools/views/root.css
+++ b/src/devtools/views/root.css
@@ -1,45 +1,50 @@
 :root {
-  /* TODO */
-  --color-base00: #ffffff;
-  --color-base01: #f3f3f3;
-  --color-base02: #eeeeee;
-  --color-base03: #cfd1d5;
-  --color-base04: #333333;
-  --color-base05: #5a5a5a;
-  --color-special00: #8155cb;
-  --color-special01: #222222;
-  --color-special02: #1a1aa6;
-  --color-special03: #c80000;
-  --color-special04: #236e25;
-  --color-special05: #aa0d91;
-  --color-special06: #ef6632;
-  --color-special07: #777d88;
-  --color-state00: #0088fa;
-  --color-state01: #dadada;
-  --color-state02: #ffffff;
-  --color-state03: #ebf1fb;
-  --color-state04: #ffff00;
-  --color-state05: #222222;
-  --color-state06: #222222;
+  /* Light theme */
+  --theme-light-arrow: #777d88;
+  --theme-light-arrow-inverted: #ffffff;
+  --theme-light-attribute-name: #ef6632;
+  --theme-light-attribute-value: #1a1aa6;
+  --theme-light-background: #ffffff;
+  --theme-light-button: #0088fa;
+  --theme-light-button-hover: #1a1aa6;
+  --theme-light-color-border: #eeeeee;
+  --theme-light-component-name: #8155cb;
+  --theme-light-component-name-inverted: #ffffff;
+  --theme-light-deemphasized: #cfd1d5;
+  --theme-light-jsx-arrow-brackets: #333333;
+  --theme-light-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.8);
+  --theme-light-tree-node-selected: #0088fa;
+  --theme-light-tree-node-hover: #ebf1fb;
 
-  --color-arrow: var(--color-special07);
-  --color-component: var(--color-special00);
-  --color-tree-tag: var(--color-base04);
-  --color-tree-attr-name: var(--color-special06);
-  --color-tree-attr-value: var(--color-special02);
+  /* TODO Dark theme */
 
-  --line-height-tree-compact: 1.5;
-  --line-height-tree-normal: 1.5;
+  /* "theme" values referenced by other stylesheets */
+  --color-arrow: var(--theme-light-arrow);
+  --color-arrow-inverted: var(--theme-light-arrow-inverted);
+  --color-attribute-name: var(--theme-light-attribute-name);
+  --color-attribute-value: var(--theme-light-attribute-value);
+  --color-background: var(--theme-light-background);
+  --color-border: var(--theme-light-color-border);
+  --color-button: var(--theme-light-button);
+  --color-button-hover: var(--theme-light-button-hover);
+  --color-component-name: var(--theme-light-component-name);
+  --color-component-name-inverted: var(--theme-light-component-name-inverted);
+  --color-deemphasized: var(--theme-light-deemphasized);
+  --color-tree-jsx-arrow-brackets: var(--theme-light-jsx-arrow-brackets);
+  --color-tree-jsx-arrow-brackets-inverted: var(
+    --theme-light-jsx-arrow-brackets-inverted
+  );
+  --color-tree-node-selected: var(--theme-light-tree-node-selected);
+  --color-tree-node-hover: var(--theme-light-tree-node-hover);
+
+  --font-size-normal: 12px;
+  --line-height-data: 1.5rem;
 
   /* GitHub.com system fonts */
   --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
     Courier, monospace;
   --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
     Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-  --font-size-tree-compact: 12px;
-  --font-size-tree-normal: 14px;
-  --line-height-compact: 20px;
-  --line-height-normal: 24px;
 }
 
 * {
diff --git a/src/devtools/views/utils.js b/src/devtools/views/utils.js
index 8d77d8a7c2..3726edd83a 100644
--- a/src/devtools/views/utils.js
+++ b/src/devtools/views/utils.js
@@ -5,7 +5,7 @@ import { meta } from '../../hydration';
 export function getMetaValueLabel(data: Object): string | null {
   switch (data[meta.type]) {
     case 'react_element':
-      return `<${data[meta.name]} />`;
+      return `<${data[meta.name]}/>`;
     case 'function':
       return `${data[meta.name] || 'fn'}()`;
     case 'object':