diff --git a/bun.lockb b/bun.lockb
index cf088602..640006d5 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/ds-react-core/package.json b/packages/ds-react-core/package.json
index cee61590..c1f7f266 100644
--- a/packages/ds-react-core/package.json
+++ b/packages/ds-react-core/package.json
@@ -32,6 +32,7 @@
     "storybook": "storybook dev -p 6006 --no-open --host 0.0.0.0"
   },
   "dependencies": {
+    "@canonical/storybook-addon-baseline-grid": "^0.4.1-experimental.0",
     "@canonical/styles": "^0.4.1-experimental.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
diff --git a/packages/ds-react-core/src/index.css b/packages/ds-react-core/src/index.css
index 886796f1..019acc1f 100644
--- a/packages/ds-react-core/src/index.css
+++ b/packages/ds-react-core/src/index.css
@@ -1 +1,6 @@
 @import url("@canonical/styles");
+
+:root {
+  --baseline-height: .5rem;
+  --baseline-grid-color: orange;
+}
diff --git a/packages/storybook-addon-baseline-grid/README.md b/packages/storybook-addon-baseline-grid/README.md
index 93c3c200..526d3cc4 100644
--- a/packages/storybook-addon-baseline-grid/README.md
+++ b/packages/storybook-addon-baseline-grid/README.md
@@ -2,7 +2,45 @@
 
 Displays the baseline grid overlay in the Storybook preview.
 
-### Development scripts
+## Usage 
+
+### Installation
+
+```bash
+npm install @canonical/storybook-addon-baseline-grid
+```
+
+In your `.storybook/main.js` file, add the following:
+
+```js
+module.exports = {
+  addons: ['@canonical/storybook-addon-baseline-grid'],
+};
+```
+
+Please note that this addon does rely on ESM only and does not have a cjs build at all. This means you need a version of node >= 20 and a modern browser to use it.
+
+### Configuration
+
+By default the baseline uses defaults for the following css variables:
+
+```css
+:root {
+  --baseline-grid-color: rgba(255, 0, 0, 0.2);
+  --baseline-grid-height: .5rem;
+}
+```
+
+By providing yours in `:root` you can override these defaults, for instance 
+
+```css
+:root {
+  --baseline-grid-color: rgba(0, 0, 255, 0.2);
+  --baseline-grid-height: 1rem;
+}
+```
+
+## Development
 
 - `bun run start` runs babel in watch mode and starts Storybook
 - `bun run build` builds and packages the addon
@@ -12,15 +50,10 @@ Displays the baseline grid overlay in the Storybook preview.
 The addon logic lives mostly in following files:
 
 - `src/components/Tool.tsx` - component that renders the addon button in the toolbar and toggles the global variable that enables the baseline grid overlay
-- `src/withBaselineGrid.ts` - decorator that adds a `show-baseline-grid` CSS class name to the story based on global state
+- `src/withBaselineGrid.ts` - decorator that adds a `with-baseline-grid` CSS class name to the story based on global state The grid look is an internally defined css class that is added to the story preview iframe, and defined in this file.
 - `/src/manager.tsx` - registers the addon with Storybook manager and handles in what state of Storybook addon is enabled
 - `/src/preview.tsx` - registers the decorator with Storybook preview
 
-Current addon implementation relies on `show-baseline-grid` CSS class name being provided by the CSS (for example using our styles package).
-
-Current implementation lives in [`baseline-grid.css`](
-https://github.com/canonical/ds25/blob/main/packages/styles/src/baseline-grid.css). The size of the grid can be adjusted by changing the `--sp-unit` CSS variable.
-
 ### Storybook Addon Kit README
 
 This addon was created using the Storybook Addon Kit.
diff --git a/packages/storybook-addon-baseline-grid/src/preset.ts b/packages/storybook-addon-baseline-grid/src/preset.ts
index 9ebfc3a8..b61f140d 100644
--- a/packages/storybook-addon-baseline-grid/src/preset.ts
+++ b/packages/storybook-addon-baseline-grid/src/preset.ts
@@ -1,3 +1,5 @@
+// This entry is a node-specific file, contrary to the other files in this folder which are made to be loaded in the browser.
+
 // You can use presets to augment the Storybook configuration
 // You rarely want to do this in addons,
 // so often you want to delete this file and remove the reference to it in package.json#exports and package.json#bunder.nodeEntries
diff --git a/packages/storybook-addon-baseline-grid/src/withBaselineGrid.ts b/packages/storybook-addon-baseline-grid/src/withBaselineGrid.ts
index ecee27c1..1d8d62e1 100644
--- a/packages/storybook-addon-baseline-grid/src/withBaselineGrid.ts
+++ b/packages/storybook-addon-baseline-grid/src/withBaselineGrid.ts
@@ -10,11 +10,53 @@ export const withBaselineGrid = (StoryFn: StoryFunction<Renderer>) => {
   const [globals] = useGlobals();
   const myAddon = globals[KEY];
 
+  const utilityClassName = "with-baseline-grid";
+  const utilityTagId = "baseline-grid-style";
+  const color = "rgba(255, 0, 0, 0.2)";
+  const defaultHeight = "0.5rem";
+
+  const styleElement = `
+  :root {
+    --addon-baseline-grid-color: var(--baseline-grid-color, ${color});
+    --addon-baseline-height: var(--baseline-height, ${defaultHeight});
+  }
+  .${utilityClassName} {
+    position: relative;
+  
+    &::after {
+      background: linear-gradient(
+        to top,
+        var(--addon-baseline-grid-color),
+        var(--addon-baseline-grid-color) 1px,
+        transparent 1px,
+        transparent
+      );
+      background-size: 100% var(--addon-baseline-height);
+      bottom: 0;
+      content: "";
+      display: block;
+      left: 0;
+      pointer-events: none;
+      position: absolute;
+      right: 0;
+      top: 0;
+      z-index: 200;
+    }
+  }
+  `;
+
   useEffect(() => {
+    const styleExists = global.document.getElementById(utilityTagId);
+    if (!styleExists) {
+      const style = global.document.createElement("style");
+      style.id = utilityTagId;
+      style.textContent = styleElement;
+      global.document.head.appendChild(style);
+    }
     if (myAddon) {
-      global.document.body.classList.add("show-baseline-grid");
+      global.document.body.classList.add(utilityClassName);
     } else {
-      global.document.body.classList.remove("show-baseline-grid");
+      global.document.body.classList.remove(utilityClassName);
     }
   }, [myAddon]);
 
diff --git a/packages/styles/src/baseline-grid.css b/packages/styles/src/baseline-grid.css
deleted file mode 100644
index 84f982ab..00000000
--- a/packages/styles/src/baseline-grid.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.show-baseline-grid {
-  --color-baseline-grid: rgba(255, 0, 0, 0.2);
-  position: relative;
-
-  &::after {
-    background: linear-gradient(
-      to top,
-      var(--color-baseline-grid),
-      var(--color-baseline-grid) 1px,
-      transparent 1px,
-      transparent
-    );
-    background-size: 100% var(--sp-unit);
-    bottom: 0;
-    content: "";
-    display: block;
-    left: 0;
-    pointer-events: none;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 200;
-  }
-}
diff --git a/packages/styles/src/index.css b/packages/styles/src/index.css
index e8ec829f..1866fe2a 100644
--- a/packages/styles/src/index.css
+++ b/packages/styles/src/index.css
@@ -8,6 +8,3 @@
 /* Foundations styling */
 @import url("./typography.css");
 @import url("./intents.css");
-
-/* Debugging utilities */
-@import url("./baseline-grid.css");