diff --git a/client/app/scripts/charts/nodes-chart.js b/client/app/scripts/charts/nodes-chart.js
index 914bffa33..adb804830 100644
--- a/client/app/scripts/charts/nodes-chart.js
+++ b/client/app/scripts/charts/nodes-chart.js
@@ -5,6 +5,7 @@ import React from 'react';
 import { Map as makeMap } from 'immutable';
 import timely from 'timely';
 
+import { DETAILS_PANEL_WIDTH } from '../constants/styles';
 import { clickBackground } from '../actions/app-actions';
 import AppStore from '../stores/app-store';
 import Edge from './edge';
@@ -302,9 +303,8 @@ export default class NodesChart extends React.Component {
 
     // move origin node to center of viewport
     const zoomScale = state.scale;
-    const detailsWidth = 420;
     const translate = state.panTranslate;
-    const centerX = (-translate[0] + (props.width + MARGINS.left - detailsWidth) / 2) / zoomScale;
+    const centerX = (-translate[0] + (props.width + MARGINS.left - DETAILS_PANEL_WIDTH) / 2) / zoomScale;
     const centerY = (-translate[1] + (props.height + MARGINS.top) / 2) / zoomScale;
     stateNodes = stateNodes.mergeIn([props.selectedNodeId], {
       x: centerX,
diff --git a/client/app/scripts/components/details-card.js b/client/app/scripts/components/details-card.js
index 256311213..b1f8694a0 100644
--- a/client/app/scripts/components/details-card.js
+++ b/client/app/scripts/components/details-card.js
@@ -1,13 +1,8 @@
 import React from 'react';
 
 import NodeDetails from './node-details';
-
-// card dimensions in px
-const marginTop = 24;
-const marginBottom = 48;
-const marginRight = 36;
-const panelWidth = 420;
-const offset = 8;
+import { DETAILS_PANEL_WIDTH as WIDTH, DETAILS_PANEL_OFFSET as OFFSET,
+  DETAILS_PANEL_MARGINS as MARGINS } from '../constants/styles';
 
 export default class DetailsCard extends React.Component {
 
@@ -27,21 +22,21 @@ export default class DetailsCard extends React.Component {
   render() {
     let transform;
     const origin = this.props.origin;
-    const panelHeight = window.innerHeight - marginBottom - marginTop;
+    const panelHeight = window.innerHeight - MARGINS.bottom - MARGINS.top;
     if (origin && !this.state.mounted) {
       // render small panel near origin, will transition into normal panel after being mounted
-      const scaleY = origin.height / (window.innerHeight - marginBottom - marginTop) / 2;
-      const scaleX = origin.width / panelWidth / 2;
-      const centerX = window.innerWidth - marginRight - (panelWidth / 2);
-      const centerY = (panelHeight) / 2 + marginTop;
+      const scaleY = origin.height / (window.innerHeight - MARGINS.bottom - MARGINS.top) / 2;
+      const scaleX = origin.width / WIDTH / 2;
+      const centerX = window.innerWidth - MARGINS.right - (WIDTH / 2);
+      const centerY = (panelHeight) / 2 + MARGINS.top;
       const dx = (origin.left + origin.width / 2) - centerX;
       const dy = (origin.top + origin.height / 2) - centerY;
       transform = `translate(${dx}px, ${dy}px) scale(${scaleX},${scaleY})`;
     } else {
       // stack effect: shift top cards to the left, shrink lower cards vertically
-      const shiftX = -1 * this.props.index * offset;
+      const shiftX = -1 * this.props.index * OFFSET;
       const position = this.props.cardCount - this.props.index - 1; // reverse index
-      const scaleY = position === 0 ? 1 : (panelHeight - 2 * offset * position) / panelHeight;
+      const scaleY = position === 0 ? 1 : (panelHeight - 2 * OFFSET * position) / panelHeight;
       if (scaleY !== 1) {
         transform = `translateX(${shiftX}px) scaleY(${scaleY})`;
       } else {
diff --git a/client/app/scripts/constants/styles.js b/client/app/scripts/constants/styles.js
new file mode 100644
index 000000000..44d3afc85
--- /dev/null
+++ b/client/app/scripts/constants/styles.js
@@ -0,0 +1,10 @@
+
+export const DETAILS_PANEL_WIDTH = 420;
+
+export const DETAILS_PANEL_MARGINS = {
+  top: 24,
+  bottom: 48,
+  right: 36
+};
+
+export const DETAILS_PANEL_OFFSET = 8;