diff --git a/.stylelintignore b/.stylelintignore
new file mode 100644
index 0000000000..beccdbbe83
--- /dev/null
+++ b/.stylelintignore
@@ -0,0 +1,2 @@
+component-generator/**
+example/**
diff --git a/README.md b/README.md
index 4a7ddfe691..edca3dee10 100644
--- a/README.md
+++ b/README.md
@@ -285,8 +285,7 @@ This will create a directory in `/src/` that will contain templates for all nece
 MyComponent
 ├── index.jsx
 ├── README.md
-├── MyComponent.scss
-├── _variables.scss
+├── index.scss
 └── MyComponent.test.jsx
 ```
 
@@ -325,11 +324,10 @@ export default MyComponent;
 ##### 4. (Optional) Add styles to your component.
 
 If your component requires additional styling (which most likely is the case), edit created SCSS style sheet in your
-component's directory `/src/MyComponent/MyComponent.scss` which by default contains an empty class for your component.
+component's directory `/src/MyComponent/index.scss` which by default contains an empty class for your component.
 
-If you wish to use SASS variables (which is the preferred way of styling the components since values can be
-easily overridden and customized by the consumers of Paragon), add them in `/src/MyComponent/_variables.scss` (this file should contain all variables specific to your component).
-This way the variables will also get automatically picked up by documentation site and displayed on your component's page.
+If you wish to use CSS variables (which is the preferred way of styling the components since values can be
+easily overridden and customized by the consumers of Paragon), you can do so by utilizing [design tokens](/tokens).
 
 **Please note that you need to follow [Paragon's CSS styling conventions](docs/decisions/0012-css-styling-conventions).**
 
diff --git a/component-generator/constants.js b/component-generator/constants.js
index 4c6b3158b7..22a81a1dda 100644
--- a/component-generator/constants.js
+++ b/component-generator/constants.js
@@ -14,10 +14,6 @@ exports.COMPONENT_FILES = [
     targetPath: path.resolve(__dirname, '../src/componentName/index.jsx'),
     templatePath: path.resolve(__dirname, './templates/index.jsx'),
   },
-  {
-    targetPath: path.resolve(__dirname, '../src/componentName/_variables.scss'),
-    templatePath: path.resolve(__dirname, './templates/_variables.scss'),
-  },
   {
     targetPath: path.resolve(__dirname, '../src/componentName/README.md'),
     templatePath: path.resolve(__dirname, './templates/README.md'),
diff --git a/component-generator/templates/_variables.scss b/component-generator/templates/_variables.scss
deleted file mode 100644
index da27744c34..0000000000
--- a/component-generator/templates/_variables.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// Put SASS variables related to your component here,
-// you can safely delete this file if you do not intend to use any variables
diff --git a/component-generator/templates/index.scss b/component-generator/templates/index.scss
index ed35fec762..bf5fbbb705 100644
--- a/component-generator/templates/index.scss
+++ b/component-generator/templates/index.scss
@@ -1,6 +1,5 @@
-// Put styles related to your component here
-
-@import "variables";
+// Put design tokens in `tokens` directory if you need to create variables related to your component,
+// you can safely delete this file if you do not intend to use any styles
 
 .pgn__css-class {
 
diff --git a/tokens/README.md b/tokens/README.md
index 8beb998d7d..f93e56f49b 100644
--- a/tokens/README.md
+++ b/tokens/README.md
@@ -1,7 +1,6 @@
 # Design Tokens
 
-This module is responsible for handling design tokens in Paragon, for rationale behind design tokens see [Scaling Paragon's styles architecture with design tokens](https://openedx.atlassian.net/wiki/spaces/BPL/pages/3630923811/Scaling+Paragon+s+styles+architecture+with+design+tokens)
-and relevant ADR(TODO: add link when we merge an ADR). 
+This module is responsible for handling design tokens in Paragon, for rationale behind design tokens see [Scaling Paragon's styles architecture with design tokens](https://openedx.atlassian.net/wiki/spaces/BPL/pages/3630923811/Scaling+Paragon+s+styles+architecture+with+design+tokens). 
 
 ## Overview
 
diff --git a/www/src/pages/tools/component-generator.mdx b/www/src/pages/tools/component-generator.mdx
index 8248c47cdc..89a4365b27 100644
--- a/www/src/pages/tools/component-generator.mdx
+++ b/www/src/pages/tools/component-generator.mdx
@@ -30,8 +30,7 @@ This will create a directory in `/src/` that will contain templates for all nece
 MyComponent
 ├── index.jsx
 ├── README.md
-├── MyComponent.scss
-├── _variables.scss
+├── index.scss
 └── MyComponent.test.jsx
 ```
 
@@ -70,11 +69,10 @@ export default MyComponent;
 ## 4. (Optional) Add styles to your component.
 
 If your component requires additional styling (which most likely is the case), edit created SCSS style sheet in your
-component's directory `/src/MyComponent/MyComponent.scss` which by default contains an empty class for your component.
+component's directory `/src/MyComponent/index.scss` which by default contains an empty class for your component.
 
-If you wish to use SASS variables (which is the preferred way of styling the components since values can be
-easily overridden and customized by the consumers of Paragon), add them in `/src/MyComponent/_variables.scss` (this file should contain all variables specific to your component).
-This way the variables will also get automatically picked up by documentation site and displayed on your component's page.
+If you wish to use CSS variables (which is the preferred way of styling the components since values can be
+easily overridden and customized by the consumers of Paragon), you can do so by utilizing [design tokens](/tokens).
 
 **Please note that you need to follow [Paragon's CSS styling conventions](https://github.com/openedx/paragon/blob/master/docs/decisions/0012-css-styling-conventions).**