diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/view/defs.tsx b/x-pack/plugins/endpoint/public/embeddables/resolver/view/defs.tsx
index 8ee9bfafc630e6..de9c3c7e8f8f3e 100644
--- a/x-pack/plugins/endpoint/public/embeddables/resolver/view/defs.tsx
+++ b/x-pack/plugins/endpoint/public/embeddables/resolver/view/defs.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { memo } from 'react';
-import { saturate, lighten } from 'polished';
+import { saturate } from 'polished';
 
 import {
   htmlIdGenerator,
@@ -79,8 +79,6 @@ const idGenerator = htmlIdGenerator();
  * Ids of paint servers to be referenced by fill and stroke attributes
  */
 export const PaintServerIds = {
-  runningProcess: idGenerator('psRunningProcess'),
-  runningTrigger: idGenerator('psRunningTrigger'),
   runningProcessCube: idGenerator('psRunningProcessCube'),
   runningTriggerCube: idGenerator('psRunningTriggerCube'),
   terminatedProcessCube: idGenerator('psTerminatedProcessCube'),
@@ -93,46 +91,6 @@ export const PaintServerIds = {
  */
 const PaintServers = memo(() => (
   <>
-    <linearGradient
-      id={PaintServerIds.runningProcess}
-      x1="0"
-      y1="0"
-      x2="1"
-      y2="0"
-      spreadMethod="reflect"
-      gradientUnits="objectBoundingBox"
-    >
-      <stop
-        offset="0%"
-        stopColor={saturate(0.7, lighten(0.05, NamedColors.runningProcessStart))}
-        stopOpacity="1"
-      />
-      <stop
-        offset="100%"
-        stopColor={saturate(0.7, lighten(0.05, NamedColors.runningProcessEnd))}
-        stopOpacity="1"
-      />
-    </linearGradient>
-    <linearGradient
-      id={PaintServerIds.runningTrigger}
-      x1="0"
-      y1="0"
-      x2="1"
-      y2="0"
-      spreadMethod="reflect"
-      gradientUnits="objectBoundingBox"
-    >
-      <stop
-        offset="0%"
-        stopColor={saturate(0.7, lighten(0.05, NamedColors.runningTriggerStart))}
-        stopOpacity="1"
-      />
-      <stop
-        offset="100%"
-        stopColor={saturate(0.7, lighten(0.05, NamedColors.runningTriggerEnd))}
-        stopOpacity="1"
-      />
-    </linearGradient>
     <linearGradient
       id={PaintServerIds.terminatedProcessCube}
       x1="-381.23752"
diff --git a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx
index 2e3981de74d34a..10e331ffff02d5 100644
--- a/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx
+++ b/x-pack/plugins/endpoint/public/embeddables/resolver/view/process_event_dot.tsx
@@ -11,7 +11,7 @@ import { htmlIdGenerator, EuiKeyboardAccessible } from '@elastic/eui';
 import { useSelector } from 'react-redux';
 import { applyMatrix3 } from '../lib/vector2';
 import { Vector2, Matrix3, AdjacentProcessMap, ResolverProcessType } from '../types';
-import { SymbolIds, NamedColors, PaintServerIds } from './defs';
+import { SymbolIds, NamedColors } from './defs';
 import { ResolverEvent } from '../../../../common/types';
 import { useResolverDispatch } from './use_resolver_dispatch';
 import * as eventModel from '../../../../common/models/event';
@@ -21,7 +21,7 @@ import * as selectors from '../store/selectors';
 const nodeAssets = {
   runningProcessCube: {
     cubeSymbol: `#${SymbolIds.runningProcessCube}`,
-    labelFill: `url(#${PaintServerIds.runningProcess})`,
+    labelBackground: NamedColors.fullLabelBackground,
     descriptionFill: NamedColors.empty,
     descriptionText: i18n.translate('xpack.endpoint.resolver.runningProcess', {
       defaultMessage: 'Running Process',
@@ -29,7 +29,7 @@ const nodeAssets = {
   },
   runningTriggerCube: {
     cubeSymbol: `#${SymbolIds.runningTriggerCube}`,
-    labelFill: `url(#${PaintServerIds.runningTrigger})`,
+    labelBackground: NamedColors.fullLabelBackground,
     descriptionFill: NamedColors.empty,
     descriptionText: i18n.translate('xpack.endpoint.resolver.runningTrigger', {
       defaultMessage: 'Running Trigger',
@@ -37,7 +37,7 @@ const nodeAssets = {
   },
   terminatedProcessCube: {
     cubeSymbol: `#${SymbolIds.terminatedProcessCube}`,
-    labelFill: NamedColors.fullLabelBackground,
+    labelBackground: NamedColors.fullLabelBackground,
     descriptionFill: NamedColors.empty,
     descriptionText: i18n.translate('xpack.endpoint.resolver.terminatedProcess', {
       defaultMessage: 'Terminated Process',
@@ -45,7 +45,7 @@ const nodeAssets = {
   },
   terminatedTriggerCube: {
     cubeSymbol: `#${SymbolIds.terminatedTriggerCube}`,
-    labelFill: NamedColors.fullLabelBackground,
+    labelBackground: NamedColors.fullLabelBackground,
     descriptionFill: NamedColors.empty,
     descriptionText: i18n.translate('xpack.endpoint.resolver.terminatedTrigger', {
       defaultMessage: 'Terminated Trigger',
@@ -114,14 +114,21 @@ export const ProcessEventDot = styled(
         [left, magFactorX, top]
       );
 
+      /**
+       * Type in non-SVG components scales as follows:
+       *  (These values were adjusted to match the proportions in the comps provided by UX/Design)
+       *  18.75 : The smallest readable font size at which labels/descriptions can be read. Font size will not scale below this.
+       *  12.5 : A 'slope' at which the font size will scale w.r.t. to zoom level otherwise
+       */
+      const minimumFontSize = 18.75;
+      const slopeOfFontScale = 12.5;
+      const fontSizeAdjustmentForScale = magFactorX > 1 ? slopeOfFontScale * (magFactorX - 1) : 0;
+      const scaledTypeSize = minimumFontSize + fontSizeAdjustmentForScale;
+
       const markerBaseSize = 15;
       const markerSize = markerBaseSize;
       const markerPositionOffset = -markerBaseSize / 2;
 
-      const labelYOffset = markerPositionOffset + 0.25 * markerSize - 0.5;
-
-      const labelYHeight = markerSize / 1.7647;
-
       /**
        * An element that should be animated when the node is clicked.
        */
@@ -136,9 +143,7 @@ export const ProcessEventDot = styled(
             })
           | null;
       } = React.createRef();
-      const { cubeSymbol, labelFill, descriptionFill, descriptionText } = nodeAssets[
-        nodeType(event)
-      ];
+      const { cubeSymbol, labelBackground, descriptionText } = nodeAssets[nodeType(event)];
       const resolverNodeIdGenerator = useMemo(() => htmlIdGenerator('resolverNode'), []);
 
       const nodeId = useMemo(() => resolverNodeIdGenerator(selfId), [
@@ -154,7 +159,7 @@ export const ProcessEventDot = styled(
       const dispatch = useResolverDispatch();
 
       const handleFocus = useCallback(
-        (focusEvent: React.FocusEvent<SVGSVGElement>) => {
+        (focusEvent: React.FocusEvent<HTMLDivElement>) => {
           dispatch({
             type: 'userFocusedOnResolverNode',
             payload: {
@@ -166,7 +171,7 @@ export const ProcessEventDot = styled(
       );
 
       const handleClick = useCallback(
-        (clickEvent: React.MouseEvent<SVGSVGElement, MouseEvent>) => {
+        (clickEvent: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
           if (animationTarget.current !== null) {
             (animationTarget.current as any).beginElement();
           }
@@ -179,14 +184,15 @@ export const ProcessEventDot = styled(
         },
         [animationTarget, dispatch, nodeId]
       );
-
+      /* eslint-disable jsx-a11y/click-events-have-key-events */
+      /**
+       * Key event handling (e.g. 'Enter'/'Space') is provisioned by the `EuiKeyboardAccessible` component
+       */
       return (
         <EuiKeyboardAccessible>
-          <svg
+          <div
             data-test-subj={'resolverNode'}
             className={className + ' kbn-resetFocusState'}
-            viewBox="-15 -15 90 30"
-            preserveAspectRatio="xMidYMid meet"
             role="treeitem"
             aria-level={adjacentNodeMap.level}
             aria-flowto={
@@ -203,81 +209,100 @@ export const ProcessEventDot = styled(
             onFocus={handleFocus}
             tabIndex={-1}
           >
-            <g>
-              <use
-                xlinkHref={`#${SymbolIds.processCubeActiveBacking}`}
-                x={-11.35}
-                y={-11.35}
-                width={markerSize * 1.5}
-                height={markerSize * 1.5}
-                className="backing"
-              />
-              <rect x="7" y="-12.75" width="15" height="10" fill={NamedColors.resolverBackground} />
-              <use
-                role="presentation"
-                xlinkHref={cubeSymbol}
-                x={markerPositionOffset}
-                y={markerPositionOffset}
-                width={markerSize}
-                height={markerSize}
-                opacity="1"
-                className="cube"
-              >
-                <animateTransform
-                  attributeType="XML"
-                  attributeName="transform"
-                  type="scale"
-                  values="1 1; 1 .83; 1 .8; 1 .83; 1 1"
-                  dur="0.2s"
-                  begin="click"
-                  repeatCount="1"
-                  className="squish"
-                  ref={animationTarget}
+            <svg
+              viewBox="-15 -15 90 30"
+              preserveAspectRatio="xMidYMid meet"
+              style={{
+                display: 'block',
+                width: '100%',
+                height: '100%',
+                position: 'absolute',
+                top: '0',
+                left: '0',
+              }}
+            >
+              <g>
+                <use
+                  xlinkHref={`#${SymbolIds.processCubeActiveBacking}`}
+                  x={-11.35}
+                  y={-11.35}
+                  width={markerSize * 1.5}
+                  height={markerSize * 1.5}
+                  className="backing"
                 />
-              </use>
-              <use
-                role="presentation"
-                xlinkHref={`#${SymbolIds.processNodeLabel}`}
-                x={markerPositionOffset + markerSize - 0.5}
-                y={labelYOffset}
-                width={(markerSize / 1.7647) * 5}
-                height={markerSize / 1.7647}
-                opacity="1"
-                fill={labelFill}
-              />
-              <text
-                x={markerPositionOffset + 0.7 * markerSize + 50 / 2}
-                y={labelYOffset + labelYHeight / 2}
-                textAnchor="middle"
-                dominantBaseline="middle"
-                fontSize="3.75"
-                fontWeight="bold"
-                fill={NamedColors.empty}
-                paintOrder="stroke"
-                tabIndex={-1}
-                style={{ letterSpacing: '-0.02px' }}
-                id={labelId}
-              >
-                {eventModel.eventName(event)}
-              </text>
-              <text
-                x={markerPositionOffset + markerSize}
-                y={labelYOffset - 1}
-                textAnchor="start"
-                dominantBaseline="middle"
-                fontSize="2.67"
-                fill={descriptionFill}
+                <use
+                  role="presentation"
+                  xlinkHref={cubeSymbol}
+                  x={markerPositionOffset}
+                  y={markerPositionOffset}
+                  width={markerSize}
+                  height={markerSize}
+                  opacity="1"
+                  className="cube"
+                >
+                  <animateTransform
+                    attributeType="XML"
+                    attributeName="transform"
+                    type="scale"
+                    values="1 1; 1 .83; 1 .8; 1 .83; 1 1"
+                    dur="0.2s"
+                    begin="click"
+                    repeatCount="1"
+                    className="squish"
+                    ref={animationTarget}
+                  />
+                </use>
+              </g>
+            </svg>
+            <div
+              style={{
+                left: '25%',
+                top: '30%',
+                position: 'absolute',
+                width: '50%',
+                color: 'white',
+                fontSize: `${scaledTypeSize}px`,
+                lineHeight: '140%',
+              }}
+            >
+              <div
                 id={descriptionId}
-                paintOrder="stroke"
-                fontWeight="bold"
-                style={{ textTransform: 'uppercase', letterSpacing: '-0.01px' }}
+                style={{
+                  textTransform: 'uppercase',
+                  letterSpacing: '-0.01px',
+                  backgroundColor: NamedColors.resolverBackground,
+                  lineHeight: '1.2',
+                  fontWeight: 'bold',
+                  fontSize: '.5em',
+                  width: '100%',
+                  margin: '0 0 .05em 0',
+                  textAlign: 'left',
+                  padding: '0',
+                }}
               >
                 {descriptionText}
-              </text>
-            </g>
-          </svg>
+              </div>
+              <div
+                data-test-subject="nodeLabel"
+                id={labelId}
+                style={{
+                  backgroundColor: labelBackground,
+                  padding: '.15em 0',
+                  textAlign: 'center',
+                  maxWidth: '100%',
+                  overflow: 'hidden',
+                  whiteSpace: 'nowrap',
+                  textOverflow: 'ellipsis',
+                  contain: 'content',
+                }}
+              >
+                {eventModel.eventName(event)}
+              </div>
+            </div>
+          </div>
         </EuiKeyboardAccessible>
       );
+      /* eslint-enable jsx-a11y/click-events-have-key-events */
     }
   )
 )`