diff --git a/addon/styles/resources/_manual.sass b/addon/styles/resources/_manual.sass
index 5bcacf3..641dae6 100644
--- a/addon/styles/resources/_manual.sass
+++ b/addon/styles/resources/_manual.sass
@@ -5,3 +5,21 @@
     .ui.sticky.fixed.top
       // allow space for top navigation
       padding-top: 50px
+
+  // colors grabbed from app/components/project/workflow-action-offsets-graph.coffee
+  .offset-diagram-colors-explanation
+    .rooted-action .icon
+      color: #b9e0ff
+    .critical-path .icon
+      color: #ccfff2
+    .non-critical-path .icon
+      color: #ffe1b8
+    .unresolved-path-action .icon
+      color: #c2f9c0
+    .attached-action .icon
+      color: #dddddd
+    .constraint-action .icon
+      color: #ffcc7d
+    .info-action .icon
+      color: #f7f7f7
+
diff --git a/addon/styles/resources/_workflow-action-definition.sass b/addon/styles/resources/_workflow-action-definition.sass
index 9ffffb9..50f4904 100644
--- a/addon/styles/resources/_workflow-action-definition.sass
+++ b/addon/styles/resources/_workflow-action-definition.sass
@@ -2,6 +2,11 @@
   color: #222
   &.is-editing
     background-color: #FEF9E7
+
+  &.completes-group
+    background-color: #eee
+    font-weight: bold
+  // Done is a dynosaur from the PMBC era
   &.done
     text-decoration: line-through
     color: #aaa
diff --git a/app/components/workflow-action-definition-item.coffee b/app/components/workflow-action-definition-item.coffee
index 2625513..cd229ca 100644
--- a/app/components/workflow-action-definition-item.coffee
+++ b/app/components/workflow-action-definition-item.coffee
@@ -1,7 +1,7 @@
 import Ember from 'ember'
 export default Ember.Component.extend
   classNames: ["workflow-action-definition-item", 'workflow-action-container']
-  classNameBindings: ["workflow_action_definition.done:done", "isEditing:is-editing:is-display"]
+  classNameBindings: ["workflow_action_definition.done:done", "isEditing:is-editing:is-display", "workflow_action_definition.completes_group:completes-group"]
   selectedValueType: Ember.computed.oneWay "workflow_action_definition.value_type"
   isEditing: false
 
diff --git a/app/templates/manual/project/dunlop.emblem b/app/templates/manual/project/dunlop.emblem
index a4b903a..b092aab 100644
--- a/app/templates/manual/project/dunlop.emblem
+++ b/app/templates/manual/project/dunlop.emblem
@@ -36,3 +36,28 @@ p
     non-rooted tree in itself and action B will have a connection to this non-rooted tree (consisting only of 1 action in this case).
 img src="../../assets/manual/action-offsets/rooted-non-critical-path.png" title="rooted-critical-path"
 p The C action in this case also is a non critical path connection since it's connection with B is defined on B, so not the farthest away from the X-rooted (or specifically planned) action.
+
+h4 Color explanations
+.ui.list.offset-diagram-colors-explanation
+  .item.rooted-action
+    i.square.icon
+    .content This action is directly configured with respect to the reference date (X)
+  .item.critical-path
+    i.square.icon
+    .content This action is configured relative to other actions given the strategy to start with an X action and configure other actions 'aways' from X (critical path)
+  .item.non-critical-path
+    i.square.icon
+    .content This action is configured relative to other actions and the target date is determined using higher order non critical path resolve algorithms
+  .item.unresolved-path-action
+    i.square.icon
+    .content This action is configured relative to other actions but not connected to another action/tree that is rooted. So no target date can be determined!!
+  .item.attached-action
+    i.square.icon
+    .content This action is configured attached to other actions. Wether this action is visible/required can depend on the requirement configuration
+  .item.constraint-action
+    i.square.icon
+    .content This action is a constraint to another action and needs to be in a completed state before the other action can be completed. This action should have it's owd target date configuration and should therefore be displayed more than one time in the diagram.
+  .item.info-action
+    i.square.icon
+    .content This action is extra information to another action. This action should have it's owd target date configuration and should therefore be displayed more than one time in the diagram.
+img src="../../assets/manual/action-offsets/more-elaborate-example.png" title="rooted-critical-path"
diff --git a/tests/dummy/public/assets/manual/action-offsets/more-elaborate-example.png b/tests/dummy/public/assets/manual/action-offsets/more-elaborate-example.png
new file mode 100644
index 0000000..b17fcfe
Binary files /dev/null and b/tests/dummy/public/assets/manual/action-offsets/more-elaborate-example.png differ