diff --git a/src/less/neutral/classDiagram.less b/src/less/neutral/classDiagram.less
new file mode 100644
index 000000000..cb7bf0fe3
--- /dev/null
+++ b/src/less/neutral/classDiagram.less
@@ -0,0 +1,69 @@
+g.classGroup text {
+  fill: @nodeBorder;
+  stroke:none;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 14px;
+}
+
+g.classGroup rect {
+  fill:@nodeBkg;
+  stroke: @nodeBorder;
+}
+
+g.classGroup line {
+  stroke: @nodeBorder;
+  stroke-width:1;
+}
+
+svg .classLabel .box {
+  stroke: none;
+  stroke-width:0;
+  fill: @nodeBkg;
+  opacity: 0.5;
+}
+
+svg .classLabel .label {
+  fill: @nodeBorder;
+}
+
+.relation {
+  stroke: @nodeBorder;
+  stroke-width: 1;
+  fill:none;
+}
+
+.composition{
+  fill : @nodeBorder;
+  stroke: @nodeBorder;
+  stroke-width:1;
+}
+#compositionStart {
+  .composition;
+}
+#compositionEnd {
+  .composition;
+}
+.aggregation{
+  fill : @nodeBkg;
+  stroke: @nodeBorder;
+  stroke-width:1;
+}
+#aggregationStart {
+  .aggregation;
+}
+#aggregationEnd {
+  .aggregation;
+}
+
+#dependencyStart {
+  .composition;
+}
+#dependencyEnd {
+  .composition;
+}
+#extensionStart {
+  .composition;
+}
+#extensionEnd {
+  .composition;
+}
\ No newline at end of file
diff --git a/src/less/neutral/flow.less b/src/less/neutral/flow.less
new file mode 100644
index 000000000..270d5f3f0
--- /dev/null
+++ b/src/less/neutral/flow.less
@@ -0,0 +1,30 @@
+.mermaid .label { color: @text }
+
+.node rect,
+.node circle,
+.node ellipse,
+.node polygon {
+  fill: @mainBkg;
+  stroke: @nodeBorder;
+  stroke-width: 1px;
+}
+
+.edgePath .path {
+  stroke: @lineColor;
+  stroke-width: 1.5px;
+}
+
+.edgeLabel {
+  background-color: @edgeLabelBackground;
+}
+
+.cluster rect {
+  fill: @secondBkg !important;
+  rx: 4 !important;
+  stroke: @clusterBorder !important;
+  stroke-width: 1px !important;
+}
+
+.cluster text {
+  fill: @titleColor;
+}
diff --git a/src/less/neutral/gantt.less b/src/less/neutral/gantt.less
new file mode 100644
index 000000000..76368387e
--- /dev/null
+++ b/src/less/neutral/gantt.less
@@ -0,0 +1,135 @@
+/** Section styling */
+.section {
+  stroke: none;
+  opacity:0.2;
+}
+.section0{
+  fill: @sectionBkgColor;
+}
+.section2 {
+  fill: @sectionBkgColor2;
+}
+.section1,.section3 {
+  fill: @altSectionBkgColor;
+  opacity: 0.2;
+}
+
+.sectionTitle0 { fill: @titleColor;}
+.sectionTitle1 { fill: @titleColor;}
+.sectionTitle2 { fill: @titleColor;}
+.sectionTitle3 { fill: @titleColor;}
+
+
+.sectionTitle {
+  text-anchor: start;
+  font-size: 11px;
+  text-height: 14px;
+}
+
+/* Grid and axis */
+.grid .tick {
+  stroke: @gridColor;
+  opacity: 0.3;
+  shape-rendering: crispEdges;
+}
+.grid path {
+  stroke-width: 0;
+}
+
+/* Today line */
+.today {
+  fill: none;
+  stroke: @todayLineColor;
+  stroke-width: 2px;
+}
+
+/* Task styling */
+/* Default task */
+.task {
+  stroke-width: 2;
+}
+
+.taskText {
+  text-anchor: middle;
+  font-size: 11px;
+}
+.taskTextOutsideRight {
+  fill: @taskTextDarkColor;
+  text-anchor: start;
+  font-size: 11px;
+}
+.taskTextOutsideLeft {
+  fill: @taskTextDarkColor;
+  text-anchor: end;
+  font-size: 11px;
+}
+
+/* Specific task settings for the sections*/
+
+.taskText0, .taskText1, .taskText2, .taskText3 {
+  fill: @taskTextColor;
+}
+
+.task0, .task1, .task2, .task3 {
+  fill: @taskBkgColor;
+  stroke: @taskBorderColor;
+}
+
+.taskTextOutside0,.taskTextOutside2, {
+  fill: @taskTextOutsideColor;
+}
+.taskTextOutside1, .taskTextOutside3 {
+  fill: @taskTextOutsideColor;
+}
+
+/* Active task */
+.active0, .active1, .active2, .active3 {
+  fill: @activeTaskBkgColor;
+  stroke: @activeTaskBorderColor;
+}
+
+.activeText0, .activeText1, .activeText2, .activeText3 {
+  fill: @taskTextDarkColor !important;
+}
+/* Completed task */
+.done0, .done1, .done2, .done3 {
+  stroke: @doneTaskBorderColor;
+  fill: @doneTaskBkgColor;
+  stroke-width: 2;
+}
+
+.doneText0, .doneText1, .doneText2, .doneText3 {
+  fill: @taskTextDarkColor !important;
+}
+
+/* Tasks on the critical line */
+.crit0, .crit1, .crit2, .crit3 {
+  stroke:@critBorderColor;
+  fill: @critBkgColor;
+  stroke-width: 2;
+}
+.activeCrit0, .activeCrit1, .activeCrit2, .activeCrit3 {
+  stroke: @critBorderColor;
+  fill: @activeTaskBkgColor;
+  stroke-width: 2;
+}
+.doneCrit0, .doneCrit1, .doneCrit2, .doneCrit3 {
+  stroke: @critBorderColor;
+  fill:  @doneTaskBkgColor;
+  stroke-width: 2;
+  cursor: pointer;
+  //shape-rendering: crispEdges;
+}
+.doneCritText0, .doneCritText1, .doneCritText2, .doneCritText3 {
+  fill: @taskTextDarkColor !important;
+}
+.activeCritText0, .activeCritText1, .activeCritText2, .activeCritText3 {
+  fill: @taskTextDarkColor !important;
+}
+
+.titleText {
+  text-anchor: middle;
+  font-size: 18px;
+  fill: @taskTextDarkColor;
+}
+
diff --git a/src/less/neutral/mermaid.less b/src/less/neutral/mermaid.less
new file mode 100644
index 000000000..06568095d
--- /dev/null
+++ b/src/less/neutral/mermaid.less
@@ -0,0 +1,24 @@
+@import "variables";
+@import "flow";
+@import "sequenceDiagram";
+@import "gantt";
+@import "classDiagram";
+
+.node text {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size:14px;
+}
+
+div.mermaidTooltip {
+  position: absolute;
+  text-align: center;
+  max-width: 200px;
+  padding: 2px;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  background: @secondBkg;
+  border: 1px solid @border2;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index:100;
+}
\ No newline at end of file
diff --git a/src/less/neutral/sequenceDiagram.less b/src/less/neutral/sequenceDiagram.less
new file mode 100644
index 000000000..e42c061de
--- /dev/null
+++ b/src/less/neutral/sequenceDiagram.less
@@ -0,0 +1,75 @@
+
+
+.actor {
+  stroke: @actorBorder;
+  fill: @actorBkg;
+}
+text.actor {
+  fill: @actorTextColor;
+  stroke: none;
+}
+
+.actor-line {
+  stroke: @actorLineColor;
+}
+
+.messageLine0 {
+  stroke-width: 1.5;
+  stroke-dasharray: "2 2";
+  marker-end: "url(#arrowhead)";
+  stroke: @signalColor;
+}
+
+.messageLine1 {
+  stroke-width: 1.5;
+  stroke-dasharray: "2 2";
+  stroke: @signalColor;
+}
+
+#arrowhead {
+  fill: @signalColor;
+}
+#crosshead path {
+  fill: @signalColor !important;
+  stroke: @signalColor !important;
+
+}
+.messageText {
+  fill: @signalTextColor;
+  stroke: none;
+}
+
+.labelBox {
+  stroke: @labelBoxBorderColor;
+  fill: @labelBoxBkgColor;
+}
+
+.labelText {
+  fill: @labelTextColor;
+  stroke: none;
+}
+
+.loopText {
+  fill: @labelTextColor;
+  stroke: none;
+}
+
+.loopLine {
+  stroke-width: 2;
+  stroke-dasharray: "2 2";
+  marker-end: "url(#arrowhead)";
+  stroke: @labelBoxBorderColor;
+}
+
+.note {
+  //stroke: #decc93;
+  stroke: @noteBorderColor;
+  fill: @noteBkgColor;
+}
+
+.noteText {
+  fill: black;
+  stroke: none;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 14px;
+}
\ No newline at end of file
diff --git a/src/less/neutral/variables.less b/src/less/neutral/variables.less
new file mode 100644
index 000000000..ccf93fb01
--- /dev/null
+++ b/src/less/neutral/variables.less
@@ -0,0 +1,66 @@
+@mainBkg:   #eee;
+@secondBkg: lighten(@contrast, 55%);
+@lineColor: #666;
+@border1:   #999;
+@border2:   @contrast;
+
+@note:      #ffa;
+@text:      #333;
+@contrast:  #26a;
+@critical:  #d42;
+@done:      #bbb;
+
+/* Flowchart variables */
+@nodeBkg: @mainBkg;
+@nodeBorder: @border1;
+
+@clusterBkg: @secondBkg;
+@clusterBorder: @border2;
+
+@defaultLinkColor: @lineColor;
+
+@titleColor: @text;
+
+@edgeLabelBackground: white;
+
+/* Sequence Diagram variables */
+@actorBorder: @border1;
+@actorBkg:    @mainBkg;
+@actorTextColor: @text;
+@actorLineColor: @lineColor;
+
+@signalColor: @text;
+@signalTextColor: @text;
+
+@labelBoxBkgColor: @contrast;
+@labelBoxBorderColor: @contrast;
+@labelTextColor: white;
+
+@noteBorderColor: darken(@note, 60%);
+@noteBkgColor:    @note;
+
+/* Gantt chart variables */
+@sectionBkgColor: lighten(@contrast, 30%);
+@altSectionBkgColor: white;
+@sectionBkgColor2: lighten(@contrast, 30%);
+
+@taskBorderColor: darken(@contrast, 10%);
+@taskBkgColor: @contrast;
+@taskTextColor: @taskTextLightColor;
+@taskTextOutsideColor: @taskTextDarkColor;
+
+@activeTaskBorderColor: @taskBorderColor;
+@activeTaskBkgColor: @mainBkg;
+
+@gridColor: lighten(@border1, 30%);
+
+@doneTaskBkgColor: @done;
+@doneTaskBorderColor: @lineColor;
+
+@critBorderColor: darken(@critBkgColor, 10%);
+@critBkgColor: @critical;
+
+@taskTextLightColor: white;
+@taskTextDarkColor: @text;
+
+@todayLineColor: @critBkgColor;
\ No newline at end of file