diff --git a/lib/draw/BpmnRenderUtil.js b/lib/draw/BpmnRenderUtil.js
index 0bc24091..5f5391d8 100644
--- a/lib/draw/BpmnRenderUtil.js
+++ b/lib/draw/BpmnRenderUtil.js
@@ -14,6 +14,8 @@ import {
 // re-export getDi for compatibility
 export { getDi };
 
+export var black = 'hsl(225, 10%, 15%)';
+
 // element utils //////////////////////
 
 /**
@@ -64,7 +66,7 @@ export function getFillColor(element, defaultColor) {
 export function getStrokeColor(element, defaultColor) {
   var di = getDi(element);
 
-  return di.get('color:border-color') || di.get('bioc:stroke') || defaultColor || 'black';
+  return di.get('color:border-color') || di.get('bioc:stroke') || defaultColor || black;
 }
 
 export function getLabelColor(element, defaultColor, defaultStrokeColor) {
diff --git a/lib/draw/BpmnRenderer.js b/lib/draw/BpmnRenderer.js
index ee9bb649..006a6d60 100644
--- a/lib/draw/BpmnRenderer.js
+++ b/lib/draw/BpmnRenderer.js
@@ -57,6 +57,8 @@ import {
 
 import Ids from 'ids';
 
+import { black } from './BpmnRenderUtil';
+
 var RENDERER_IDS = new Ids();
 
 var TASK_BORDER_RADIUS = 10;
@@ -85,7 +87,7 @@ export default function BpmnRenderer(
 
   function addMarker(id, options) {
     var attrs = assign({
-      fill: 'black',
+      fill: black,
       strokeWidth: 1,
       strokeLinecap: 'round',
       strokeDasharray: 'none'
@@ -264,7 +266,7 @@ export default function BpmnRenderer(
     offset = offset || 0;
 
     attrs = computeStyle(attrs, {
-      stroke: 'black',
+      stroke: black,
       strokeWidth: 2,
       fill: 'white'
     });
@@ -299,7 +301,7 @@ export default function BpmnRenderer(
     offset = offset || 0;
 
     attrs = computeStyle(attrs, {
-      stroke: 'black',
+      stroke: black,
       strokeWidth: 2,
       fill: 'white'
     });
@@ -332,7 +334,7 @@ export default function BpmnRenderer(
     }).join(' ');
 
     attrs = computeStyle(attrs, {
-      stroke: 'black',
+      stroke: black,
       strokeWidth: 2,
       fill: 'white'
     });
@@ -350,7 +352,7 @@ export default function BpmnRenderer(
 
   function drawLine(parentGfx, waypoints, attrs) {
     attrs = computeStyle(attrs, [ 'no-fill' ], {
-      stroke: 'black',
+      stroke: black,
       strokeWidth: 2,
       fill: 'none'
     });
@@ -366,7 +368,7 @@ export default function BpmnRenderer(
 
     attrs = computeStyle(attrs, [ 'no-fill' ], {
       strokeWidth: 2,
-      stroke: 'black'
+      stroke: black
     });
 
     var path = svgCreate('path');
@@ -1471,7 +1473,7 @@ export default function BpmnRenderer(
 
         if (di.messageVisibleKind === 'initiating') {
           messageAttrs.fill = 'white';
-          messageAttrs.stroke = 'black';
+          messageAttrs.stroke = black;
         } else {
           messageAttrs.fill = '#888';
           messageAttrs.stroke = 'white';
@@ -1546,7 +1548,7 @@ export default function BpmnRenderer(
 
       /* output arrow path */ drawPath(parentGfx, arrowPathData, {
         strokeWidth: 1,
-        fill: 'black'
+        fill: black
       });
 
       return elementObject;