diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.ts
index 13327fe..6107d16 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.ts
@@ -16,6 +16,7 @@
 import { Injectable } from '@angular/core';
 import { FnService } from '../util/fn.service';
 import { LogService } from '../log.service';
+import * as d3 from 'd3';
 
 /**
  * ONOS GUI -- SVG -- Util Service
@@ -26,11 +27,45 @@
     providedIn: 'root',
 })
 export class SvgUtilService {
+    lightNorm: string[];
+    lightMute: string[];
+    darkNorm: string[];
+    darkMute: string[];
+    colors: any;
 
     constructor(
         private fs: FnService,
         private log: LogService
     ) {
+
+        // --- Ordinal scales for 7 values.
+        // TODO: migrate these colors to the theme service.
+
+        // Colors per Mojo-Design's color palette.. (version one)
+        //               blue       red        dk grey    steel      lt blue    lt red     lt grey
+        // var lightNorm = ['#5b99d2', '#d05a55', '#716b6b', '#7e9aa8', '#66cef6', '#db7773', '#aeada8' ],
+        //     lightMute = ['#a8cceb', '#f1a7a7', '#b9b5b5', '#bdcdd5', '#a8e9fd', '#f8c9c9', '#d7d6d4' ],
+
+        // Colors per Mojo-Design's color palette.. (version two)
+        //               blue       lt blue    red        green      brown      teal       lime
+        this.lightNorm = ['#5b99d2', '#66cef6', '#d05a55', '#0f9d58', '#ba7941', '#3dc0bf', '#56af00'];
+        this.lightMute = ['#9ebedf', '#abdef5', '#d79a96', '#7cbe99', '#cdab8d', '#96d5d5', '#a0c96d'];
+
+        this.darkNorm = ['#5b99d2', '#66cef6', '#d05a55', '#0f9d58', '#ba7941', '#3dc0bf', '#56af00'];
+        this.darkMute = ['#9ebedf', '#abdef5', '#d79a96', '#7cbe99', '#cdab8d', '#96d5d5', '#a0c96d'];
+
+
+        this.colors = {
+            light: {
+                norm: d3.scaleOrdinal().range(this.lightNorm),
+                mute: d3.scaleOrdinal().range(this.lightMute),
+            },
+            dark: {
+                norm: d3.scaleOrdinal().range(this.darkNorm),
+                mute: d3.scaleOrdinal().range(this.darkMute),
+            },
+        };
+
         this.log.debug('SvgUtilService constructed');
     }
 
@@ -40,4 +75,91 @@
         }
         return 'translate(' + x + ',' + y + ')';
     }
+
+    scale(x, y) {
+        return 'scale(' + x + ',' + y + ')';
+    }
+
+    skewX(x) {
+        return 'skewX(' + x + ')';
+    }
+
+    rotate(deg) {
+        return 'rotate(' + deg + ')';
+    }
+
+    cat7() {
+        const tcid = 'd3utilTestCard';
+
+        function getColor(id, muted, theme) {
+            // NOTE: since we are lazily assigning domain ids, we need to
+            //       get the color from all 4 scales, to keep the domains
+            //       in sync.
+            const ln = this.colors.light.norm(id);
+            const lm = this.colors.light.mute(id);
+            const dn = this.colors.dark.norm(id);
+            const dm = this.colors.dark.mute(id);
+            if (theme === 'dark') {
+                return muted ? dm : dn;
+            } else {
+                return muted ? lm : ln;
+            }
+        }
+
+        function testCard(svg) {
+            let g = svg.select('g#' + tcid);
+            const dom = d3.range(7);
+            let k;
+            let muted;
+            let theme;
+            let what;
+
+            if (!g.empty()) {
+                g.remove();
+
+            } else {
+                g = svg.append('g')
+                    .attr('id', tcid)
+                    .attr('transform', 'scale(4)translate(20,20)');
+
+                for (k = 0; k < 4; k++) {
+                    muted = k % 2;
+                    what = muted ? ' muted' : ' normal';
+                    theme = k < 2 ? 'light' : 'dark';
+                    dom.forEach(function (id, i) {
+                        const x = i * 20;
+                        const y = k * 20;
+                        const f = getColor(id, muted, theme);
+                        g.append('circle').attr({
+                            cx: x,
+                            cy: y,
+                            r: 5,
+                            fill: f,
+                        });
+                    });
+                    g.append('rect').attr({
+                        x: 140,
+                        y: k * 20 - 5,
+                        width: 32,
+                        height: 10,
+                        rx: 2,
+                        fill: '#888',
+                    });
+                    g.append('text').text(theme + what)
+                        .attr({
+                            x: 142,
+                            y: k * 20 + 2,
+                            fill: 'white',
+                        })
+                        .style('font-size', '4pt');
+                }
+            }
+        }
+
+        return {
+            testCard: testCard,
+            getColor: getColor,
+        };
+    }
+
 }