diff --git a/packages/canvas-tokens/build.ts b/packages/canvas-tokens/build.ts
index d24c927..31f5276 100644
--- a/packages/canvas-tokens/build.ts
+++ b/packages/canvas-tokens/build.ts
@@ -19,11 +19,12 @@ const config = setConfig({
         {
           level: ['base'],
           filterByLevel: true,
+          filter: filters.filterCodeTokens,
         },
         {
           level: ['brand', 'sys'],
           format: 'merge/refs',
-          combineWith: ['{platform}/composite', '{platform}/variables'],
+          combineWith: ['{platform}/composite', '{platform}/variables', '{platform}/shadow'],
           options: {
             outputReferences: true,
           },
@@ -36,7 +37,7 @@ const config = setConfig({
     'es6, common-js': {
       buildPath: '../canvas-tokens-web/dist/',
       transformGroup: 'js',
-      transforms: ['value/flatten-border', 'value/flatten-base-shadow', 'name/camel'],
+      transforms: ['value/flatten-border', 'value/shadow/flat-sys', 'name/camel'],
       fileName: '{platform}/{level}/index',
       extensions: ['js', 'd.ts'],
       modifiers: [
@@ -45,12 +46,14 @@ const config = setConfig({
           extensions: ['js'],
           format: 'js/{platform}',
           filterByLevel: true,
+          filter: filters.filterCodeTokens,
         },
         {
           level: ['base'],
           extensions: ['d.ts'],
           format: 'ts/inline',
           filterByLevel: true,
+          filter: filters.filterCodeTokens,
         },
         {
           level: ['brand', 'sys'],
@@ -109,13 +112,13 @@ StyleDictionary.registerTransformGroup({
   transforms: [
     'name/cti/kebab',
     'value/flatten-border',
-    'value/flatten-base-shadow',
+    'value/shadow/flat-sys',
     'value/hex-to-rgba',
     'value/wrapped-font-family',
     'value/math',
     'value/letter-spacing/px2rem',
     'value/flatten-rgba',
-    'value/font-weight/lower-case',
+    'value/font-weight/numbers',
     'value/line-height/px2rem',
   ],
 });
diff --git a/packages/canvas-tokens/tokens/base.json b/packages/canvas-tokens/tokens/base.json
index f259e8a..c9f7166 100644
--- a/packages/canvas-tokens/tokens/base.json
+++ b/packages/canvas-tokens/tokens/base.json
@@ -934,140 +934,145 @@
         "type": "number"
       }
     },
+    "level": {
+      "value": "2",
+      "type": "number",
+      "description": "Used to calculate the skip level amount between levels in the type ramp, such as going from subtext to body, body to heading."
+    },
     "shadow": {
-      "100": {
-        "value": [
-          {
-            "x": "0",
-            "y": "1",
-            "blur": "4",
-            "spread": "0",
-            "color": "rgba({palette.licorice.600},{opacity.200})",
-            "type": "dropShadow"
+      "1": {
+        "100": {
+          "y": {
+            "value": "1",
+            "type": "number"
           },
-          {
-            "x": "0",
-            "y": "2",
-            "blur": "8",
-            "spread": "0",
-            "color": "rgba({palette.licorice.600},{opacity.100})",
-            "type": "dropShadow"
+          "blur": {
+            "value": "4",
+            "type": "number"
           }
-        ],
-        "type": "boxShadow"
+        },
+        "200": {
+          "y": {
+            "value": "2",
+            "type": "number"
+          },
+          "blur": {
+            "value": "8",
+            "type": "number"
+          }
+        }
       },
-      "200": {
-        "value": [
-          {
-            "x": "0",
-            "y": "2",
-            "blur": "8",
-            "spread": "0",
-            "color": "rgba({palette.licorice.600},{opacity.200})",
-            "type": "dropShadow"
+      "2": {
+        "100": {
+          "y": {
+            "value": "2",
+            "type": "number"
           },
-          {
-            "x": "0",
-            "y": "4",
-            "blur": "16",
-            "spread": "0",
-            "color": "rgba({palette.licorice.600},{opacity.100})",
-            "type": "dropShadow"
+          "blur": {
+            "value": "8",
+            "type": "number"
           }
-        ],
-        "type": "boxShadow",
-        "description": "Top navigation, Bottom navigation"
+        },
+        "200": {
+          "y": {
+            "value": "4",
+            "type": "number"
+          },
+          "blur": {
+            "value": "16",
+            "type": "number"
+          }
+        }
       },
-      "300": {
-        "value": [
-          {
-            "x": "0",
-            "y": "3",
-            "blur": "12",
-            "spread": "0",
-            "color": "rgba({palette.licorice.600},{opacity.200})",
-            "type": "dropShadow"
+      "3": {
+        "100": {
+          "y": {
+            "value": "3",
+            "type": "number"
+          },
+          "blur": {
+            "value": "12",
+            "type": "number"
+          }
+        },
+        "200": {
+          "y": {
+            "value": "6",
+            "type": "number"
           },
-          {
-            "x": "0",
-            "y": "6",
-            "blur": "24",
-            "spread": "0",
-            "color": "rgba({palette.licorice.600},{opacity.100})",
-            "type": "dropShadow"
+          "blur": {
+            "value": "24",
+            "type": "number"
           }
-        ],
-        "type": "boxShadow"
+        }
       },
-      "400": {
-        "value": [
-          {
-            "x": "0",
-            "y": "4",
-            "blur": "16",
-            "spread": "0",
-            "color": "rgba({palette.licorice.600},{opacity.200})",
-            "type": "dropShadow"
+      "4": {
+        "100": {
+          "y": {
+            "value": "4",
+            "type": "number"
           },
-          {
-            "x": "0",
-            "y": "8",
-            "blur": "32",
-            "spread": "0",
-            "color": "rgba({palette.licorice.600},{opacity.100})",
-            "type": "dropShadow"
+          "blur": {
+            "value": "16",
+            "type": "number"
           }
-        ],
-        "type": "boxShadow"
+        },
+        "200": {
+          "y": {
+            "value": "8",
+            "type": "number"
+          },
+          "blur": {
+            "value": "32",
+            "type": "number"
+          }
+        }
       },
-      "500": {
-        "value": [
-          {
-            "x": "0",
-            "y": "5",
-            "blur": "20",
-            "spread": "0",
-            "color": "rgba({palette.licorice.600},{opacity.200})",
-            "type": "dropShadow"
+      "5": {
+        "100": {
+          "y": {
+            "value": "5",
+            "type": "number"
+          },
+          "blur": {
+            "value": "20",
+            "type": "number"
+          }
+        },
+        "200": {
+          "y": {
+            "value": "10",
+            "type": "number"
           },
-          {
-            "x": "0",
-            "y": "10",
-            "blur": "40",
-            "spread": "0",
-            "color": "rgba({palette.licorice.600},{opacity.100})",
-            "type": "dropShadow"
+          "blur": {
+            "value": "40",
+            "type": "number"
           }
-        ],
-        "type": "boxShadow"
+        }
       },
-      "600": {
-        "value": [
-          {
-            "x": "0",
-            "y": "6",
-            "blur": "24",
-            "spread": "0",
-            "color": "rgba({palette.licorice.600},{opacity.200})",
-            "type": "dropShadow"
+      "6": {
+        "100": {
+          "y": {
+            "value": "6",
+            "type": "number"
+          },
+          "blur": {
+            "value": "24",
+            "type": "number"
+          }
+        },
+        "200": {
+          "y": {
+            "value": "12",
+            "type": "number"
           },
-          {
-            "x": "0",
-            "y": "12",
-            "blur": "48",
-            "spread": "0",
-            "color": "rgba({palette.licorice.600},{opacity.100})",
-            "type": "dropShadow"
+          "blur": {
+            "value": "48",
+            "type": "number"
           }
-        ],
-        "type": "boxShadow"
+        }
       }
     },
-    "level": {
-      "value": "2",
-      "type": "number",
-      "description": "Used to calculate the skip level amount between levels in the type ramp, such as going from subtext to body, body to heading."
-    },
     "extended": {
       "palette": {
         "dragon-fruit": {
diff --git a/packages/canvas-tokens/tokens/web/sys.json b/packages/canvas-tokens/tokens/web/sys.json
index c1d76f2..d59101d 100644
--- a/packages/canvas-tokens/tokens/web/sys.json
+++ b/packages/canvas-tokens/tokens/web/sys.json
@@ -107,10 +107,10 @@
             "type": "color",
             "description": "Disabled success background"
           },
-          "soft": {
+          "softer": {
             "value": "{palette.green-apple.100}",
             "type": "color",
-            "description": "Default success background"
+            "description": "Softer success background"
           },
           "strong": {
             "value": "{palette.green-apple.500}",
@@ -645,32 +645,134 @@
     },
     "depth": {
       "1": {
-        "value": "{shadow.100}",
+        "value": [
+          {
+            "x": "0",
+            "y": "{shadow.1.100.y}",
+            "blur": "{shadow.1.100.blur}",
+            "spread": "0",
+            "color": "{color.shadow.1}",
+            "type": "dropShadow"
+          },
+          {
+            "x": "0",
+            "y": "{shadow.1.200.y}",
+            "blur": "{shadow.1.200.blur}",
+            "spread": "0",
+            "color": "{color.shadow.2}",
+            "type": "dropShadow"
+          }
+        ],
         "type": "boxShadow",
         "description": "Standard card depth"
       },
       "2": {
-        "value": "{shadow.200}",
+        "value": [
+          {
+            "x": "0",
+            "y": "{shadow.2.100.y}",
+            "blur": "{shadow.2.100.blur}",
+            "spread": "0",
+            "color": "{color.shadow.1}",
+            "type": "dropShadow"
+          },
+          {
+            "x": "0",
+            "y": "{shadow.2.200.y}",
+            "blur": "{shadow.2.200.blur}",
+            "spread": "0",
+            "color": "{color.shadow.2}",
+            "type": "dropShadow"
+          }
+        ],
         "type": "boxShadow",
         "description": "Top navigation, Bottom Navigation"
       },
       "3": {
-        "value": "{shadow.300}",
+        "value": [
+          {
+            "x": "0",
+            "y": "{shadow.3.100.y}",
+            "blur": "{shadow.3.100.blur}",
+            "spread": "0",
+            "color": "{color.shadow.1}",
+            "type": "dropShadow"
+          },
+          {
+            "x": "0",
+            "y": "{shadow.3.200.y}",
+            "blur": "{shadow.3.200.blur}",
+            "spread": "0",
+            "color": "{color.shadow.2}",
+            "type": "dropShadow"
+          }
+        ],
         "type": "boxShadow",
         "description": "Floating Action Buttons (FAB), Menus"
       },
       "4": {
-        "value": "{shadow.400}",
+        "value": [
+          {
+            "x": "0",
+            "y": "{shadow.4.100.y}",
+            "blur": "{shadow.4.100.blur}",
+            "spread": "0",
+            "color": "{color.shadow.1}",
+            "type": "dropShadow"
+          },
+          {
+            "x": "0",
+            "y": "{shadow.4.200.y}",
+            "blur": "{shadow.4.200.blur}",
+            "spread": "0",
+            "color": "{color.shadow.2}",
+            "type": "dropShadow"
+          }
+        ],
         "type": "boxShadow",
         "description": "Bottom Sheets"
       },
       "5": {
-        "value": "{shadow.500}",
+        "value": [
+          {
+            "x": "0",
+            "y": "{shadow.5.100.y}",
+            "blur": "{shadow.5.100.blur}",
+            "spread": "0",
+            "color": "{color.shadow.1}",
+            "type": "dropShadow"
+          },
+          {
+            "x": "0",
+            "y": "{shadow.5.200.y}",
+            "blur": "{shadow.5.200.blur}",
+            "spread": "0",
+            "color": "{color.shadow.2}",
+            "type": "dropShadow"
+          }
+        ],
         "type": "boxShadow",
         "description": "Banners, Snackbars, Toast Messages, Non modal Dialogs, \nSide Panels (when opacity overlay behaviour is not applied)"
       },
       "6": {
-        "value": "{shadow.600}",
+        "value": [
+          {
+            "x": "0",
+            "y": "{shadow.6.100.y}",
+            "blur": "{shadow.6.100.blur}",
+            "spread": "0",
+            "color": "{color.shadow.1}",
+            "type": "dropShadow"
+          },
+          {
+            "x": "0",
+            "y": "{shadow.6.200.y}",
+            "blur": "{shadow.6.200.blur}",
+            "spread": "0",
+            "color": "{color.shadow.2}",
+            "type": "dropShadow"
+          }
+        ],
         "type": "boxShadow",
         "description": "Modal Dialogs, Side Panels (when opacity overlay behaviour\nis applied)"
       }
@@ -714,7 +816,6 @@
         }
       }
     },
-    "layer-opacity": {},
     "shape": {
       "zero": {
         "value": "0rem",
diff --git a/packages/canvas-tokens/utils/filters/index.ts b/packages/canvas-tokens/utils/filters/index.ts
index 5059254..c9d50f4 100644
--- a/packages/canvas-tokens/utils/filters/index.ts
+++ b/packages/canvas-tokens/utils/filters/index.ts
@@ -1,7 +1,7 @@
 import {Matcher} from 'style-dictionary';
 
-export const isBaseShadow: Matcher = ({path: [level], type}) => {
-  return level === 'base' && type === 'boxShadow';
+export const isSysShadow: Matcher = ({path: [level, type]}) => {
+  return level === 'sys' && type === 'depth';
 };
 
 export const isBaseFontFamily: Matcher = ({path: [level, category]}) => {
@@ -45,10 +45,15 @@ export const isComposite: Matcher = ({type}) => {
 };
 
 export const isNotComposite: Matcher = token => {
-  return !isComposite(token);
+  return !isComposite(token) && token.path[1] !== 'depth';
 };
 
 export const isBaseOpacity: Matcher = token => {
   const [level, category] = token.path;
   return level === 'base' && category === 'opacity' && parseFloat(token.value) > 1;
 };
+
+export const filterCodeTokens: Matcher = token => {
+  const excludedTokens = ['level', 'shadow', 'typescale'];
+  return !excludedTokens.includes(token.path[1]);
+};
diff --git a/packages/canvas-tokens/utils/formatters/formatShadowStyles.ts b/packages/canvas-tokens/utils/formatters/formatShadowStyles.ts
new file mode 100644
index 0000000..0a9e3d4
--- /dev/null
+++ b/packages/canvas-tokens/utils/formatters/formatShadowStyles.ts
@@ -0,0 +1,38 @@
+import {Formatter} from 'style-dictionary';
+import {isSysShadow} from '../filters';
+
+/**
+ * Style Dictionary format function that create classes with CSS variables.
+ * @param {*} FormatterArguments - Style Dictionary formatter object containing `dictionary`, `options`, `file` and `platform` properties.
+ * @returns file content as a string
+ */
+export const formatCSSShadow: Formatter = ({dictionary}) => {
+  return dictionary.allTokens
+    .filter(isSysShadow)
+    .map(token => `  --${token.name}: ${token.value}; /* ${token.comment} */`)
+    .join('\n');
+};
+
+/**
+ * Style Dictionary format function that create classes with Less variables.
+ * @param {*} FormatterArguments - Style Dictionary formatter object containing `dictionary`, `options`, `file` and `platform` properties.
+ * @returns file content as a string
+ */
+export const formatLessShadow: Formatter = ({dictionary}) => {
+  return dictionary.allTokens
+    .filter(isSysShadow)
+    .map(token => `@${token.name}: ${token.value}; // ${token.comment}`)
+    .join('\n');
+};
+
+/**
+ * Style Dictionary format function that create classes with Sass variables.
+ * @param {*} FormatterArguments - Style Dictionary formatter object containing `dictionary`, `options`, `file` and `platform` properties.
+ * @returns file content as a string
+ */
+export const formatSassShadow: Formatter = ({dictionary}) => {
+  return dictionary.allTokens
+    .filter(isSysShadow)
+    .map(token => `$${token.name}: ${token.value}; // ${token.comment}`)
+    .join('\n');
+};
diff --git a/packages/canvas-tokens/utils/formatters/formatTypes.ts b/packages/canvas-tokens/utils/formatters/formatTypes.ts
index 240537f..79dac9b 100644
--- a/packages/canvas-tokens/utils/formatters/formatTypes.ts
+++ b/packages/canvas-tokens/utils/formatters/formatTypes.ts
@@ -99,16 +99,24 @@ const generateJSDoc = (original: TransformedToken, depth: number) => {
   const spaces = '  '.repeat(depth);
   const extraSpaces = spaces + ' ';
   const newJSDocLineStart = `\n${extraSpaces}* `;
-  const {value, comment} = original;
-  const pxValue = value.includes('rem') ? parseFloat(value) * 16 : null;
+  const {value, comment, raw} = original;
 
+  const pxValue = value.includes('rem') ? parseFloat(value) * 16 : null;
   const valueText = value + (pxValue ? ` (${pxValue}px)` : '');
+  const tokenValue =
+    typeof raw === 'string'
+      ? 'token: ' + raw.replace(/^{(.+)}$/, (_: any, b: any) => b).replace('palette.', '')
+      : '';
+
   const updatedComment = comment?.replace(/; /g, newJSDocLineStart);
   const text = comment
     ? newJSDocLineStart +
       valueText +
       newJSDocLineStart +
       newJSDocLineStart +
+      tokenValue +
+      newJSDocLineStart +
+      newJSDocLineStart +
       updatedComment +
       `\n${extraSpaces}`
     : ` ${valueText} `;
diff --git a/packages/canvas-tokens/utils/formatters/helpers/formattedObjectInnerValues.ts b/packages/canvas-tokens/utils/formatters/helpers/formattedObjectInnerValues.ts
index 0ac4433..eba78d9 100644
--- a/packages/canvas-tokens/utils/formatters/helpers/formattedObjectInnerValues.ts
+++ b/packages/canvas-tokens/utils/formatters/helpers/formattedObjectInnerValues.ts
@@ -120,11 +120,11 @@ export const changeValuesToCSSVars = (
  * @param {Function} getRefs: style dictionary getReferences function
  * @returns the updated token composite value
  */
-type ReturnValues = {value: string; comment?: string};
+type ReturnValues = {value: string; comment?: string; raw?: TransformedToken['original']};
 export const getOriginalValues = (
   token: TransformedToken
 ): Record<string, ReturnValues> | ReturnValues => {
-  const {value: tokenValue, comment} = token;
+  const {value: tokenValue, comment, original} = token;
 
   if (isComposite(token) && typeof tokenValue !== 'string') {
     return Object.entries<string>(tokenValue).reduce(
@@ -132,14 +132,14 @@ export const getOriginalValues = (
         const name = camelCase(key);
         return {
           ...acc,
-          [name]: {value: resolveMathExpressions(value), comment},
+          [name]: {value: resolveMathExpressions(value), comment, raw: original.value},
         };
       },
       {}
     );
   }
 
-  return {value: resolveMathExpressions(tokenValue), comment};
+  return {value: resolveMathExpressions(tokenValue), comment, raw: original.value};
 };
 
 const resolveMathExpressions = (value: string): string => {
diff --git a/packages/canvas-tokens/utils/formatters/index.ts b/packages/canvas-tokens/utils/formatters/index.ts
index ac02114..604f2f0 100644
--- a/packages/canvas-tokens/utils/formatters/index.ts
+++ b/packages/canvas-tokens/utils/formatters/index.ts
@@ -13,6 +13,7 @@ import {formatJSToTypes} from './formatTypes';
 import {mergeObjects} from './mergeObjects';
 import {mergeTypes} from './mergeTypes';
 import {mergeStyleReferences} from './mergeStyleReferences';
+import {formatCSSShadow, formatLessShadow, formatSassShadow} from './formatShadowStyles';
 
 export const formats: Record<string, Formatter> = {
   // formatter creating the inline common-js file structure
@@ -45,6 +46,15 @@ export const formats: Record<string, Formatter> = {
   // formatter creating the less file structure
   // with composite tokens as a class
   'less/composite': formatLessComposite,
+  // formatter creating the css file structure
+  // for depth values
+  'css/shadow': formatCSSShadow,
+  // formatter creating the sass file structure
+  // for depth values
+  'scss/shadow': formatSassShadow,
+  // formatter creating the less file structure
+  // for depth values
+  'less/shadow': formatLessShadow,
   // formatter merging default format for platform
   // with format helper transforming properties to the specific object
   'merge/objects': mergeObjects,
diff --git a/packages/canvas-tokens/utils/formatters/mergeStyleReferences.ts b/packages/canvas-tokens/utils/formatters/mergeStyleReferences.ts
index 9910972..1840d9e 100644
--- a/packages/canvas-tokens/utils/formatters/mergeStyleReferences.ts
+++ b/packages/canvas-tokens/utils/formatters/mergeStyleReferences.ts
@@ -11,7 +11,7 @@ import {isNotComposite} from '../filters';
  */
 export const mergeStyleReferences: Formatter = ({options, dictionary, ...rest}) => {
   const {
-    formats: [compositeFormat, defaultFormat],
+    formats: [compositeFormat, defaultFormat, shadowFormat],
     level,
   } = options;
 
@@ -19,6 +19,14 @@ export const mergeStyleReferences: Formatter = ({options, dictionary, ...rest})
     ({path: [ctg]}: TransformedToken) => ctg === level
   );
 
+  const shadowTokens = filteredTokens.filter(({path}: TransformedToken) => path[1] === 'depth');
+
+  const shadowContent = StyleDictionary.format[shadowFormat]({
+    dictionary: {...dictionary, allTokens: shadowTokens},
+    options,
+    ...rest,
+  });
+
   const compositeTokensContent = StyleDictionary.format[compositeFormat]({
     dictionary: {...dictionary, allTokens: filteredTokens},
     options,
@@ -34,5 +42,13 @@ export const mergeStyleReferences: Formatter = ({options, dictionary, ...rest})
     ...rest,
   });
 
-  return defaultContent + '\n' + compositeTokensContent;
+  if (shadowContent && defaultContent.includes(':root')) {
+    return (
+      defaultContent.replace(':root {\n', ':root {\n' + shadowContent + '\n') +
+      '\n' +
+      compositeTokensContent
+    );
+  }
+
+  return defaultContent + shadowContent + '\n\n' + compositeTokensContent;
 };
diff --git a/packages/canvas-tokens/utils/setConfig.ts b/packages/canvas-tokens/utils/setConfig.ts
index 17adcf0..196f4d0 100644
--- a/packages/canvas-tokens/utils/setConfig.ts
+++ b/packages/canvas-tokens/utils/setConfig.ts
@@ -5,7 +5,7 @@ import {DesignToken} from 'style-dictionary/types/DesignToken';
 export interface Modifier {
   level: string[];
   format?: string;
-  filter?: Matcher;
+  filter?: Matcher | Matcher[];
   combineWith?: string[];
   transforms?: string[];
   options?: Options;
@@ -151,7 +151,10 @@ const generateFiles = ({
 
         Object.assign(fileStructure, {
           format: format ? resolveName(format, platform, level) : defaultFormat,
-          filter: filterByLevel ? ({path: [ctg]}: DesignToken) => !level || ctg === level : filter,
+          filter: combineFilters(!filter ? [] : typeof filter === 'function' ? [filter] : filter, {
+            filtered: filterByLevel,
+            level,
+          }),
           options: {
             ...options,
             formats: formats.length ? formats : [defaultFormat],
@@ -174,3 +177,11 @@ const validateFormat = (platform: string, level: string, format?: string | Forma
   typeof format === 'string'
     ? resolveName(format, platform, level)
     : format || `${platform}/variables`;
+
+const combineFilters =
+  (filters: Matcher[], {filtered, level}: {filtered?: boolean; level: string}) =>
+  (token: DesignToken) => {
+    const levelFilter = ({path: [ctg]}: DesignToken) => !level || ctg === level;
+    const allFilters = filtered ? [levelFilter, ...filters] : filters;
+    return allFilters.map((filter: any) => filter(token)).every((result: boolean) => result);
+  };
diff --git a/packages/canvas-tokens/utils/spec/formats.spec.ts b/packages/canvas-tokens/utils/spec/formats.spec.ts
index 2181a3d..3317dcc 100644
--- a/packages/canvas-tokens/utils/spec/formats.spec.ts
+++ b/packages/canvas-tokens/utils/spec/formats.spec.ts
@@ -21,6 +21,7 @@ jest.mock('style-dictionary', () => ({
     'css/variables': () => `:root {\n --cnvs-sys-shape-zero: 0rem;\n}`,
     'css/composite': () =>
       `.cnvs-sys-border-input-default {\n border: var(--cnvs-sys-line-default);\n}`,
+    'css/shadow': () => ` --cnvs-sys-depth-1: 0 0 0 0 black;`,
   },
   formatHelpers: {
     fileHeader: () => `// Test Header\n\n`,
@@ -114,7 +115,7 @@ describe('formats', () => {
         headerContent +
         `export declare const cinnamon100 = "--cnvs-base-palette-cinnamon-100" as const;\nexport declare const cinnamon200 = "--cnvs-base-palette-cinnamon-200" as const;\n`;
 
-      expect(result).toBe(expected); //?
+      expect(result).toBe(expected);
     });
   });
 
@@ -176,7 +177,7 @@ describe('formats', () => {
         headerContent +
         `import * as base from "./base";\nimport * as system from "./system";\nexport {base,system}`;
 
-      expect(result).toBe(expected); //?
+      expect(result).toBe(expected);
     });
   });
 
@@ -343,7 +344,7 @@ describe('formats', () => {
       const expected =
         'export declare const opacity = {\n  "disabled": "--cnvs-base-opacity-300"\n}';
 
-      expect(result).toBe(expected); //?
+      expect(result).toBe(expected);
     });
   });
 
@@ -357,6 +358,7 @@ describe('formats', () => {
               disabled: {
                 comment: 'Test JSDoc',
                 value: '0.4',
+                raw: '{base.opacity.400}',
               },
             },
           },
@@ -372,7 +374,7 @@ describe('formats', () => {
 
       const expected =
         headerContent +
-        'export declare const opacity = {\n  /**\n   * 0.4\n   * \n   * Test JSDoc\n   */\n  "disabled": "--cnvs-base-opacity-300",\n} as const;\n';
+        'export declare const opacity = {\n  /**\n   * 0.4\n   * \n   * token: base.opacity.400\n   * \n   * Test JSDoc\n   */\n  "disabled": "--cnvs-base-opacity-300",\n} as const;\n';
 
       expect(result).toBe(expected);
     });
@@ -411,13 +413,13 @@ describe('formats', () => {
       const result = formats['merge/refs']({
         ...defaultArgs,
         options: {
-          formats: ['css/composite', 'css/variables'],
+          formats: ['css/composite', 'css/variables', 'css/shadow'],
           level: 'sys',
         },
       });
 
       const expected =
-        `:root {\n --cnvs-sys-shape-zero: 0rem;\n}` +
+        `:root {\n --cnvs-sys-depth-1: 0 0 0 0 black;\n --cnvs-sys-shape-zero: 0rem;\n}` +
         '\n' +
         `.cnvs-sys-border-input-default {\n border: var(--cnvs-sys-line-default);\n}`;
 
diff --git a/packages/canvas-tokens/utils/spec/helpers.spec.ts b/packages/canvas-tokens/utils/spec/helpers.spec.ts
index d674610..fa76485 100644
--- a/packages/canvas-tokens/utils/spec/helpers.spec.ts
+++ b/packages/canvas-tokens/utils/spec/helpers.spec.ts
@@ -93,7 +93,7 @@ describe('format helpers', () => {
 
     const expected = {primary: {base: 'testValue'}};
 
-    expect(result).toStrictEqual(expected); //?
+    expect(result).toStrictEqual(expected);
   });
 });
 
@@ -103,7 +103,7 @@ describe('utils to change value', () => {
 
     const expected = '--cnvs-brand-primary-base';
 
-    expect(result).toStrictEqual(expected); //?
+    expect(result).toStrictEqual(expected);
   });
 
   it('should transform composite tokens into css rule sets', () => {
@@ -121,6 +121,9 @@ describe('utils to change value', () => {
       color: {
         comment: 'Use for primary background',
         value: '{base.pallete.blueberry.400}',
+        raw: {
+          color: '{base.pallete.blueberry.400}',
+        },
       },
     };
 
@@ -133,6 +136,7 @@ describe('utils to change value', () => {
     const expected = {
       comment: 'Use for spaces between elements',
       value: '1rem',
+      raw: '{base.unit} * 4',
     };
 
     expect(result).toStrictEqual(expected);
diff --git a/packages/canvas-tokens/utils/spec/transforms.spec.ts b/packages/canvas-tokens/utils/spec/transforms.spec.ts
index 4fc00db..c7da164 100644
--- a/packages/canvas-tokens/utils/spec/transforms.spec.ts
+++ b/packages/canvas-tokens/utils/spec/transforms.spec.ts
@@ -130,7 +130,7 @@ describe('transforms', () => {
   });
 
   it('should change font weight value to lower case', () => {
-    const result = transforms['value/font-weight/lower-case'].transformer(
+    const result = transforms['value/font-weight/numbers'].transformer(
       {...defaultToken, value: 'Bold'},
       defaultOptions
     );
@@ -219,7 +219,7 @@ describe('transforms', () => {
     expect(result).toBe(expected);
   });
 
-  it('should flat shhadow value', () => {
+  it('should flat shadow value', () => {
     const token = {
       ...defaultToken,
       value: [
@@ -262,9 +262,9 @@ describe('transforms', () => {
       },
       path: ['base', 'shadow', '100'],
     };
-    const result = transforms['value/flatten-base-shadow'].transformer(token, defaultOptions);
+    const result = transforms['value/shadow/flat-sys'].transformer(token, defaultOptions);
     const expected =
-      '0 1 4 0 rgba({palette.licorice.600},{opacity.200}), 0 2 16 0 rgba({palette.licorice.600},{opacity.100})';
+      '0 0.0625rem 0.25rem 0 rgba({palette.licorice.600},{opacity.200}), 0 0.125rem 1rem 0 rgba({palette.licorice.600},{opacity.100})';
 
     expect(result).toBe(expected);
   });
diff --git a/packages/canvas-tokens/utils/tokenStudioParser.ts b/packages/canvas-tokens/utils/tokenStudioParser.ts
index a7fcdca..128c52a 100644
--- a/packages/canvas-tokens/utils/tokenStudioParser.ts
+++ b/packages/canvas-tokens/utils/tokenStudioParser.ts
@@ -63,6 +63,7 @@ const getLevel = (ref: string): string => {
 
 const replaceDescriptionByComment = (token: DesignToken) => {
   const {description} = token;
+
   if (description) {
     delete token.description;
     const updated = description.replace(/\n+/g, '; ');
@@ -73,10 +74,9 @@ const replaceDescriptionByComment = (token: DesignToken) => {
 const transformRefs = (token: DesignToken) => {
   const {value} = token;
 
-  const replacePx = (value: string, key: string) =>
-    ['x', 'y', 'blur', 'spread', 'width'].includes(key) && value !== '0'
-      ? `${parseFloat(value) / 16}rem`
-      : value;
+  const replacePx = (value: string, key: string) => {
+    return ['width'].includes(key) && value !== '0' ? `${parseFloat(value) / 16}rem` : value;
+  };
 
   const updateInnerValue = (value: string, key: string): string => {
     const noRefValue = replaceByFullRef(value);
diff --git a/packages/canvas-tokens/utils/transformers/flatShadow.ts b/packages/canvas-tokens/utils/transformers/flatShadow.ts
index d13696b..6254dbd 100644
--- a/packages/canvas-tokens/utils/transformers/flatShadow.ts
+++ b/packages/canvas-tokens/utils/transformers/flatShadow.ts
@@ -6,9 +6,11 @@ import {DesignToken} from 'style-dictionary';
  * @param {*} Token - style dictionary token object.
  * @returns updated token value
  */
-export const flatShadow = (token: DesignToken): string => {
-  const flatValue = token.value.map(({x, y, blur, color, spread}: any) => {
-    return `${x} ${y} ${blur} ${spread} ${color}`;
+export const flatShadow = ({value}: DesignToken): string => {
+  const flatValue = value.map(({x, y, blur, spread, color}: any) => {
+    const numbers = [x, y, blur, spread].map(i => (i > 0 ? `${parseInt(i) / 16}rem` : i)).join(' ');
+
+    return `${numbers} ${color}`;
   });
 
   return flatValue.join(', ');
diff --git a/packages/canvas-tokens/utils/transformers/index.ts b/packages/canvas-tokens/utils/transformers/index.ts
index 65a314c..5b62522 100644
--- a/packages/canvas-tokens/utils/transformers/index.ts
+++ b/packages/canvas-tokens/utils/transformers/index.ts
@@ -15,15 +15,14 @@ export const transforms: Record<string, Transform> = {
     matcher: filter.isHexColor,
     transformer: transformHexToRgb,
   },
-  // transform function that changes the shadow object as value to the single line string
-  'value/flatten-base-shadow': {
+  'value/shadow/flat-sys': {
     type: 'value',
     transitive: true,
-    matcher: filter.isBaseShadow,
+    matcher: filter.isSysShadow,
     transformer: flatShadow,
   },
   // transform function that changes the shadow object as value to the single line string
-  'value/font-weight/lower-case': {
+  'value/font-weight/numbers': {
     type: 'value',
     transitive: true,
     matcher: filter.isBaseFontWeight,
diff --git a/scripts/utils/forward-merge.js b/scripts/utils/forward-merge.js
index 41643c9..3a83f61 100644
--- a/scripts/utils/forward-merge.js
+++ b/scripts/utils/forward-merge.js
@@ -204,7 +204,7 @@ async function updateChangelog() {
     }
   } while (lines.length);
 
-  const sortedReleases = orderBy(releases, 'date', 'desc'); //?
+  const sortedReleases = orderBy(releases, 'date', 'desc');
 
   const contents = [
     ...header,