diff --git a/packages/css/README.md b/packages/css/README.md
index 67c600c5a5..f7aef831a8 100644
--- a/packages/css/README.md
+++ b/packages/css/README.md
@@ -1,28 +1,71 @@
 # Shoreline CSS
 
-The `@vtex/shoreline-css` package transforms shoreline tokens into css. For
-example, theme:
+The theme files are generated programmatically using the `@vtex/shoreline-css` package.
+
+## Declaring tokens
+
+You can declare the `@theme` at-rule to declare the theme:
 
 ```css
-@theme example {
-  --space-1: 1rem;
-  --space-2: 2rem;
-  --space-3: 3rem;
-  --space-gap: var(--space-1);
+@theme <theme-name> {
+  /* css rule */
 }
 ```
 
-will convert to:
+For example:
 
-```css
-/* shoreline/styles.css */
+```css filename="tokens.css"
+@theme sunrise {
+  :where(html) {
+    --space-1: 1rem;
+    --space-2: 2rem;
+    --bg-base: #fff;
+  }
+}
+```
+
+You don't need to prefix the variables, this will be done afterwards.
+
+## Transforming tokens
+
+Use the `tokens` function to transform tokens.
 
+```ts
+import { tokens } from '@vtex/shoreline-css'
+
+tokens({
+  inputFile: 'src/tokens.css',
+  outdir: 'dist',
+  emitFile: true,
+  useCascadeLayers: true,
+  browserslistQuery: 'last 2 versions'
+})
+```
+
+This code generates the `tokens.css` file in the `outdir` folder.
+
+```css filename="dist/tokens.css"
 @layer sl-tokens {
-  :root {
+  :where(html) {
     --sl-space-1: 1rem;
     --sl-space-2: 2rem;
-    --sl-space-3: 3rem;
-    --sl-space-gap: var(--sl-space-1);
+    --sl-bg-base: #fff;
   }
 }
 ```
+
+## Bundling
+
+The `bundle` function [bundles](https://lightningcss.dev/bundling.html) existing css code with the tokens.
+
+```ts
+import { bundle } from '@vtex/shoreline-css'
+
+bundle({
+  inputFile: 'src/styles.css',
+  tokensFile: 'src/tokens.css'
+  outdir: 'dist',
+  useCascadeLayers: true,
+  browserslistQuery: 'last 2 versions'
+})
+```
diff --git a/packages/docs/pages/guides/_meta.json b/packages/docs/pages/guides/_meta.json
index 7ceeab1a80..187f0fed6b 100644
--- a/packages/docs/pages/guides/_meta.json
+++ b/packages/docs/pages/guides/_meta.json
@@ -3,7 +3,6 @@
   "layouts": "Layouts",
   "state-management": "State Management",
   "styling": "Styling",
-  "theming": "Theming",
   "composition": "Composition",
   "forms": "Forms",
   "design-migration": "Design Migration",
diff --git a/packages/docs/pages/guides/getting-started.mdx b/packages/docs/pages/guides/getting-started.mdx
index 5ae0507545..2531ddd71d 100644
--- a/packages/docs/pages/guides/getting-started.mdx
+++ b/packages/docs/pages/guides/getting-started.mdx
@@ -47,7 +47,6 @@ Now that you are all set, you can start building your project with Shoreline. Ch
 <Cards>
 
 <Card title="Styling" href="guides/styling/introduction" />
-<Card title="Theming" href="guides/theming/css-package" />
 <Card title="Components" href="../components" />
 <Card title="Foundations" href="../foundations" />
 
diff --git a/packages/docs/pages/guides/styling/introduction.mdx b/packages/docs/pages/guides/styling/introduction.mdx
index 3120c9ef35..af9cade65e 100644
--- a/packages/docs/pages/guides/styling/introduction.mdx
+++ b/packages/docs/pages/guides/styling/introduction.mdx
@@ -4,6 +4,6 @@ import { Steps } from 'nextra/components'
 
 This documentation aims to explain how the styling using shoreline components works. It is intended for developers who want to customize the look and feel of applications.
 
-By default every component doesn't have any style applied. Instead they have an architecture that respond to the `data-attributes` and `tokens` defined in the [Theme](/guides/theming/css-package).
+By default every component doesn't have any style applied. Instead they have an architecture that respond to the `data-attributes` and `tokens` defined in the Theme.
 
-In the next sections you will understand how this architecture works and how to use it to create your own styles. 
+In the next sections you will understand how this architecture works and how to use it to create your own styles.
diff --git a/packages/docs/pages/guides/theming/_meta.json b/packages/docs/pages/guides/theming/_meta.json
deleted file mode 100644
index 58063cd3b3..0000000000
--- a/packages/docs/pages/guides/theming/_meta.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "css-package": "CSS Package"
-}
diff --git a/packages/docs/pages/guides/theming/css-package.mdx b/packages/docs/pages/guides/theming/css-package.mdx
deleted file mode 100644
index 5a01481eb6..0000000000
--- a/packages/docs/pages/guides/theming/css-package.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { FileTree } from 'nextra/components'
-
-# CSS Package
-
-The theme files are generated programmatically using the `@vtex/shoreline-css` package.
-
-## Declaring tokens
-
-You can declare the `@theme` at-rule to declare the theme:
-
-```css
-@theme <theme-name> {
-  /* css rule */
-}
-```
-
-For example:
-
-```css filename="tokens.css"
-@theme sunrise {
-  :where(html) {
-    --space-1: 1rem;
-    --space-2: 2rem;
-    --bg-base: #fff;
-  }
-}
-```
-
-You don't need to prefix the variables, this will be done afterwards.
-
-## Transforming tokens
-
-Use the `tokens` function to transform tokens.
-
-```ts
-import { tokens } from '@vtex/shoreline-css'
-
-tokens({
-  inputFile: 'src/tokens.css',
-  outdir: 'dist',
-  emitFile: true,
-  useCascadeLayers: true,
-  browserslistQuery: 'last 2 versions'
-})
-```
-
-This code generates the `tokens.css` file in the `outdir` folder.
-
-```css filename="dist/tokens.css"
-@layer sl-tokens {
-  :where(html) {
-    --sl-space-1: 1rem;
-    --sl-space-2: 2rem;
-    --sl-bg-base: #fff;
-  }
-}
-```
-
-## Bundling
-
-The `bundle` function [bundles](https://lightningcss.dev/bundling.html) existing css code with the tokens.
-
-```ts
-import { bundle } from '@vtex/shoreline-css'
-
-bundle({
-  inputFile: 'src/styles.css',
-  tokensFile: 'src/tokens.css'
-  outdir: 'dist',
-  useCascadeLayers: true,
-  browserslistQuery: 'last 2 versions'
-})
-```