diff --git a/cookbook/gatsby-browser.js b/cookbook/gatsby-browser.js
deleted file mode 100644
index c6c9925..0000000
--- a/cookbook/gatsby-browser.js
+++ /dev/null
@@ -1 +0,0 @@
-import "./src/styles/index.scss";
diff --git a/cookbook/src/styles/index.scss b/cookbook/src/styles/index.scss
deleted file mode 100644
index ecbe08e..0000000
--- a/cookbook/src/styles/index.scss
+++ /dev/null
@@ -1,175 +0,0 @@
-// This is where your application styles could go.
-
-[class*="PageHeader-module--page-header"] {
-  height: auto !important;
-  min-height: 13rem;
-  max-height: 15rem;
-  padding-top: 1rem;
-}
-
-@media (min-width: 99rem) {
-  [class*="PageHeader-module--text"] {
-    font-size: 4rem !important;
-  }
-}
-
-.bx--inline-notification__subtitle .bx--list--unordered {
-  width: 100%;
-}
-
-.bx--inline-notification__subtitle .bx--list--unordered .bx--list__item {
-  font-size: 0.875rem;
-  line-height: 1.2rem;
-}
-
-[class*="Tabs-module--panel"] {
-  padding-bottom: 1rem;
-  max-width: calc(67% + 1rem);
-}
-
-[class*="Tabs-module--panel"] ul.bx--list--unordered {
-  width: 100%;
-}
-
-[class*="Tabs-module--panel"] ul.bx--list--unordered li,
-[class*="Tabs-module--panel"] div.bx--row p {
-  font-size: 14px;
-}
-
-[class*="Tabs-module--panel"] ul + pre {
-  margin-top: 1rem;
-}
-
-@media (min-width: 66rem) {
-  [class*="Tabs-module--panel"] {
-    padding-bottom: 1rem;
-    max-width: 75%;
-  }
-  [class*="Markdown-module--list"] {
-    max-width: 90%;
-    margin-bottom: 10px;
-  }
-
-  [class*="Tabs-module--panel"] [class*="Code-module--row"] {
-    width: 100%;
-  }
-
-  [class*="Markdown-module--list"].bx--list--nested {
-    width: calc(100% - 1rem);
-    margin-bottom: 10px;
-  }
-
-  .page-table__container.bx--col-lg-8 {
-    display: block;
-    flex: 0 0 90%;
-    max-width: 90%;
-  }
-  .bx--no-gutter-sm.bx--col-lg-8 {
-    display: block;
-    flex: 0 0 90%;
-    max-width: 90%;
-  }
-
-  li
-    [class*="InlineNotification-module--notification"].bx--col-md-6.bx--col-lg-8 {
-    display: block;
-    flex: 0 0 100%;
-    max-width: 100%;
-  }
-
-  h3#global-properties + div.bx--row table.page-table tbody tr td:nth-child(1),
-  h3#liberty-runtime
-    + div.bx--row
-    + div.bx--row
-    table.page-table
-    tbody
-    tr
-    td:nth-child(1),
-  h3#batch-jobs
-    + div.bx--row
-    + div.bx--row
-    table.page-table
-    tbody
-    tr
-    td:nth-child(1) {
-    width: 35%;
-  }
-
-  h3#ibm-mq
-    + div.bx--row
-    + div.bx--row
-    table.page-table
-    tbody
-    tr
-    td:nth-child(1),
-  h3#static-content-server
-    + div.bx--row
-    table.page-table
-    tbody
-    tr
-    td:nth-child(1),
-  h3#xml-server + div.bx--row table.page-table tbody tr td:nth-child(1),
-  h3#universal-access-react-app-optional
-    + div.bx--row
-    table.page-table
-    tbody
-    tr
-    td:nth-child(1) {
-    width: 30%;
-  }
-}
-
-@media (max-width: 66rem) {
-  [class*="Tabs-module--panel"] {
-    max-width: 100%;
-  }
-  [class*="Tabs-module--panel"] [class*="Code-module--row"] {
-    width: 100%;
-  }
-}
-
-// Hide SideBar and Footer when printing
-@media print {
-  [class*="LeftNavWrapper-module--expanded"] {
-    display: none;
-  }
-  [class*="Footer-module--footer"] {
-    display: none;
-  }
-}
-
-[class*="Code-module--row"] {
-  width: 70%;
-}
-
-[class*="Markdown-module--list"] {
-  width: 77.5%;
-}
-
-li [class*="Code-module--container"] {
-  width: 100%;
-}
-
-.container:not(.container--homepage) .bx--grid {
-  max-width: 115rem;
-}
-
-.bx--inline-notification.bx--inline-notification--low-contrast.bx--inline-notification--hide-close-button {
-  width: 86%;
-}
-
-[class*="InlineNotification-module--notification"].bx--col-md-6.bx--col-lg-8 {
-  display: block;
-  flex: 0 0 80%;
-  max-width: 80%;
-}
-
-[class*="Markdown-module--list-item"] .bx--row {
-  max-width: 100%;
-}
-
-[class*="Caption-module--caption"] {
-  max-width: 95%;
-}
-
-// This is where your application styles could go.
diff --git a/packages/carbon-addons-devenv/src/react/addons_samples/Logo/Logo.stories.js b/packages/carbon-addons-devenv/src/react/addons_samples/Logo/Logo.stories.js
index 5f5bc73..13cb969 100644
--- a/packages/carbon-addons-devenv/src/react/addons_samples/Logo/Logo.stories.js
+++ b/packages/carbon-addons-devenv/src/react/addons_samples/Logo/Logo.stories.js
@@ -1,6 +1,7 @@
 import React from "react";
 import Example from "../../../examples/images/sample-logo.jpg";
 import Logo from "./Logo";
+import settings from "../../core/settings";
 
 export default {
   title: "Logo",
@@ -37,25 +38,25 @@ Large.args = {
 export const All = () => {
   return (
     <div className="spm-custom-component">
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col">
+      <div className={`${settings.prefix}--grid`}>
+        <div className={`${settings.prefix}--row`}>
+          <div className={`${settings.prefix}--col`}>
             <h2>small</h2>
             <Logo size="small">
               <img src={Example} alt="small logo" />
             </Logo>
           </div>
         </div>
-        <div className="bx--row">
-          <div className="bx--col">
+        <div className={`${settings.prefix}--row`}>
+          <div className={`${settings.prefix}--col`}>
             <h2>medium</h2>
             <Logo size="medium">
               <img src={Example} alt="medium logo" />
             </Logo>
           </div>
         </div>
-        <div className="bx--row">
-          <div className="bx--col">
+        <div className={`${settings.prefix}--row`}>
+          <div className={`${settings.prefix}--col`}>
             <h2>large</h2>
             <Logo size="large">
               <img src={Example} alt="large logo" />
diff --git a/packages/carbon-addons-devenv/src/react/addons_samples/Logo/__tests__/Logo.test.js b/packages/carbon-addons-devenv/src/react/addons_samples/Logo/__tests__/Logo.test.js
index dd7c1dd..f10f837 100644
--- a/packages/carbon-addons-devenv/src/react/addons_samples/Logo/__tests__/Logo.test.js
+++ b/packages/carbon-addons-devenv/src/react/addons_samples/Logo/__tests__/Logo.test.js
@@ -50,7 +50,7 @@ describe("Logo tests", () => {
     expect(Object.keys(divAtts).length).toBe(3);
 
     expect(logoDiv.at(0).props().className).toBe(
-      "bx--logo bx--logo--large settings.prefix--logo--extraextra",
+      `${settings.prefix}--logo ${settings.prefix}--logo--large settings.prefix--logo--extraextra`,
     );
     expect(logoDiv.at(0).props().id).toBe("logo_123");
     // this is the child nodes not an attribute
diff --git a/packages/carbon-addons-devenv/src/react/core/settings.js b/packages/carbon-addons-devenv/src/react/core/settings.js
index d036ead..9cf778c 100644
--- a/packages/carbon-addons-devenv/src/react/core/settings.js
+++ b/packages/carbon-addons-devenv/src/react/core/settings.js
@@ -1,5 +1,5 @@
 const settings = {
-  prefix: "bx",
+  prefix: "cds",
 };
 
 module.exports = settings;
diff --git a/packages/carbon-addons-devenv/src/scss/logo.scss b/packages/carbon-addons-devenv/src/scss/logo.scss
deleted file mode 100644
index 9b2fe6a..0000000
--- a/packages/carbon-addons-devenv/src/scss/logo.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.#{$prefix}--logo {
-  box-shadow: inset 0 0 0 2px themes.get("layer-01");
-  border-radius: $border-radius-round;
-  font-weight: 500;
-  overflow: hidden;
-
-  &--small {
-    height: $width-logo-small;
-    width: $width-logo-small;
-    min-width: $width-logo-small;
-  }
-
-  &--medium {
-    height: $width-logo-medium;
-    width: $width-logo-medium;
-    min-width: $width-logo-medium;
-  }
-
-  &--large {
-    height: $width-logo-large;
-    width: $width-logo-large;
-    min-width: $width-logo-large;
-  }
-
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
diff --git a/packages/carbon-addons-devenv/src/scss/personfolio.scss b/packages/carbon-addons-devenv/src/scss/personfolio.scss
deleted file mode 100644
index 1ded0d1..0000000
--- a/packages/carbon-addons-devenv/src/scss/personfolio.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.#{$prefix}--personfolio {
-  background-color: themes.get("layer-01");
-  color: themes.get("text-primary");
-  border-radius: 6px;
-  border-width: 1px 1px 1px 1px;
-  border-style: solid !important;
-  padding: themes.get("spacing-05");
-  margin-top: themes.get("spacing-05");
-
-  &--child {
-    border-color: themes.get("support-error");
-  }
-
-  &--youngadult {
-    border-color: themes.get("support-success");
-  }
-
-  &--adult {
-    border-color: themes.get("support-warning");
-  }
-
-  &--senior {
-    border-color: themes.get("support-info");
-  }
-}
diff --git a/packages/carbon-addons-devenv/src/scss/prefix.scss b/packages/carbon-addons-devenv/src/scss/prefix.scss
index dde3a4f..e3efe9f 100644
--- a/packages/carbon-addons-devenv/src/scss/prefix.scss
+++ b/packages/carbon-addons-devenv/src/scss/prefix.scss
@@ -1 +1 @@
-$prefix: "bx";
+$prefix: "cds";
diff --git a/packages/carbon-addons-devenv/stories/PersonFolio.stories.js b/packages/carbon-addons-devenv/stories/PersonFolio.stories.js
index 0ceea2f..896e410 100644
--- a/packages/carbon-addons-devenv/stories/PersonFolio.stories.js
+++ b/packages/carbon-addons-devenv/stories/PersonFolio.stories.js
@@ -1,5 +1,6 @@
 import React from "react";
 import PersonFolio from "../src/react/addons_samples/PersonFolio/PersonFolio";
+import settings from "../src/react/core/settings";
 
 // 👇 We create a “template” of how args map to rendering
 const Template = (args) => (
@@ -38,27 +39,27 @@ Senior.args = {
 export const PersonFolioStory = () => {
   return (
     <div className="spm-custom-component">
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col">
+      <div className={`${settings.prefix}--grid`}>
+        <div className={`${settings.prefix}--row`}>
+          <div className={`${settings.prefix}--col`}>
             <PersonFolio firstname="Dave" surname="Bloggs" age="12" />
           </div>
         </div>
 
-        <div className="bx--row">
-          <div className="bx--col">
+        <div className={`${settings.prefix}--row`}>
+          <div className={`${settings.prefix}--col`}>
             <PersonFolio firstname="Mary" surname="Bloggs" age="24" />
           </div>
         </div>
 
-        <div className="bx--row">
-          <div className="bx--col">
+        <div className={`${settings.prefix}--row`}>
+          <div className={`${settings.prefix}--col`}>
             <PersonFolio firstname="Ann" surname="Bloggs" age="47" />
           </div>
         </div>
 
-        <div className="bx--row">
-          <div className="bx--col">
+        <div className={`${settings.prefix}--row`}>
+          <div className={`${settings.prefix}--col`}>
             <PersonFolio firstname="Peter" surname="Smith" age="73" />
           </div>
         </div>