old_contents: module.exports = {
    gutterWidth: 32,
  
    font: 'Roboto',
  
    nodeSizes: {
      parent: 120,
      contextAgent: 80,
      default: 40
    },
  
    graphSize: {
      width: 700,
      height: 700
    },
  
    colors: {
      mediumGray: '#707070',
      black: 'black',
      lightGrey: '#f5f5f5',
      charcoal: '#333333',
      gray: '#999999',
      ashGray: '#cccccc',
      silver: '#e9e9e9',
      brown: '#815b3a',
      cheetoorange: '#f79232',
      tan: '#f1a257',
      lightBrown: '#d39c3f',
      cyan: '#59afe1',
      slate: '#4a6785',
      coolBlue: '#84bbc6',
      limeBreen: '#8eb021',
      midGreen: '#67ab49',
      violet: '#654982',
      mauve: '#ac707a',
      brightPink: '#f15c75',
      rosie: '#f691b2'
    },
  
    //all of these appropriate as the background for black text
    //http://leaverou.github.io/contrast-ratio/
    lightBackground: [
      '#f5f5f5', //lightGrey
      '#ebf2f9', //pale blue
      '#14892c', //green
      '#f6c342', //yellow
      '#d04437', //red
      '#59afe1', //cyan
      '#d39c3f', //lightBrown
      '#f691b2', //rosie
      '#ac707a' //mauve
    ],
  
    nodesAndLinks: [
      '#707070', //grey
      '#3572b0', //blue
      // '#14892c', //green
      '#d04437', //red
      '#815b3a', //brown
      '#654982', //violet
    ],
  
    roleIcons: [
      'star-outline',
      'triangle-outline',
      'circle-outline',
      'square-outline'
    ],
  
    overlay: {
      darken: 'rgba(0,0,0,0.12)'
    },
  
    fontSize: {
      button: {
        large: 17,
        medium: 14
      }
    }
  }
  
new_contents: module.exports = {
    gutterWidth: 32,
  
    font: 'Roboto',
  
    transition: {
      duration: 800
    },
  
    nodeSizes: {
      parent: 120,
      contextAgent: 80,
      default: 40
    },
  
    graphSize: {
      width: 700,
      height: 700
    },
  
    colors: {
      mediumGray: '#707070',
      black: 'black',
      lightGrey: '#f5f5f5',
      charcoal: '#333333',
      gray: '#999999',
      ashGray: '#cccccc',
      silver: '#e9e9e9',
      brown: '#815b3a',
      cheetoorange: '#f79232',
      tan: '#f1a257',
      lightBrown: '#d39c3f',
      cyan: '#59afe1',
      slate: '#4a6785',
      coolBlue: '#84bbc6',
      limeBreen: '#8eb021',
      midGreen: '#67ab49',
      violet: '#654982',
      mauve: '#ac707a',
      brightPink: '#f15c75',
      rosie: '#f691b2'
    },
  
    //all of these appropriate as the background for black text
    //http://leaverou.github.io/contrast-ratio/
    lightBackground: [
      '#f5f5f5', //lightGrey
      '#ebf2f9', //pale blue
      '#14892c', //green
      '#f6c342', //yellow
      '#d04437', //red
      '#59afe1', //cyan
      '#d39c3f', //lightBrown
      '#f691b2', //rosie
      '#ac707a' //mauve
    ],
  
    nodesAndLinks: [
      '#707070', //grey
      '#3572b0', //blue
      // '#14892c', //green
      '#d04437', //red
      '#815b3a', //brown
      '#654982', //violet
    ],
  
    roleIcons: [
      'star-outline',
      'triangle-outline',
      'circle-outline',
      'square-outline'
    ],
  
    overlay: {
      darken: 'rgba(0,0,0,0.12)'
    },
  
    fontSize: {
      button: {
        large: 17,
        medium: 14
      }
    }
  }
  
subject: add transition uration to vars