diff --git a/packages/components/README.md b/packages/components/README.md
index 3908cf62..5876c228 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -11,6 +11,31 @@ See [example](../example)
 - `npm run build` in this package
 - `npm run build:components` in the root of this project
 
+### How to use components on projects
+
+#### Styles
+
+1. Install [sass](https://www.npmjs.com/package/sass) and [modern-normalize](https://www.npmjs.com/package/modern-normalize)
+2. Copy `/styles` folder to your project
+    - (Optional) If you want to preserve JS exports and functions install [polished](https://www.npmjs.com/package/polished)
+    - (Optional) If you want to preserve tests, they are written in [jest](https://www.npmjs.com/package/jest) and you must not mock `index.scss` imports (like with `moduleNameMapper` in jest config)
+3. Remove unwanted component styles from `styles/index.scss` and add yours project specific
+4. Update configs in `styles/tokens/**/index.scss` according to your project needs
+5. Import `styles/index.scss` to your project (like in `_app.tsx` in Next.js)
+6. Use styles in your components like in the examples
+
+    ```scss
+    @use '../../styles/tokens';
+
+    .my-class {
+      color: tokens.color('primary');
+    }
+    ```
+
+    ```jsx
+    const MyComponent = () => <span className="text-color-primary">text</span>
+    ```
+
 ## Principles
 
 ### Headless UI components
diff --git a/packages/components/package.json b/packages/components/package.json
index ceeb50d5..2fd62557 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -32,6 +32,7 @@
     "classnames": "^2.3.1",
     "downshift": "^6.1.7",
     "jest-axe": "^6.0.0",
+    "modern-normalize": "^1.1.0",
     "polished": "^4.1.3",
     "preact": "~10.5.14",
     "preact-render-to-string": "~5.1.19",
diff --git a/packages/components/src/components/Bar/styles/config.scss b/packages/components/src/components/Bar/styles/config.scss
index cd6837a5..a2643fe5 100644
--- a/packages/components/src/components/Bar/styles/config.scss
+++ b/packages/components/src/components/Bar/styles/config.scss
@@ -1,7 +1,7 @@
 // ---------------------------------------------
 // BAR - CONFIGURATION
 // ---------------------------------------------
-@use "../../../tokens";
+@use "../../../styles/tokens";
 
 $spacing: (
   default: tokens.space(),
diff --git a/packages/components/src/components/Bar/styles/mixins.scss b/packages/components/src/components/Bar/styles/mixins.scss
index c259af86..ade9d4ec 100644
--- a/packages/components/src/components/Bar/styles/mixins.scss
+++ b/packages/components/src/components/Bar/styles/mixins.scss
@@ -3,7 +3,7 @@
 // ---------------------------------------------
 
 @use "./config";
-@use "../../../tokens";
+@use "../../../styles/tokens";
 @use "../../../styles/utils";
 
 @mixin bar {
diff --git a/packages/components/src/components/Button/styles/config.scss b/packages/components/src/components/Button/styles/config.scss
index 4f589fe7..bf6f602a 100644
--- a/packages/components/src/components/Button/styles/config.scss
+++ b/packages/components/src/components/Button/styles/config.scss
@@ -3,7 +3,7 @@
 // ---------------------------------------------
 
 @use "sass:map";
-@use "../../../tokens";
+@use "../../../styles/tokens";
 @use "../../../styles/utils";
 @use "./../../Icon/styles/config" as icons;
 
diff --git a/packages/components/src/components/Button/styles/mixins.scss b/packages/components/src/components/Button/styles/mixins.scss
index 94af81b5..4f79d96d 100644
--- a/packages/components/src/components/Button/styles/mixins.scss
+++ b/packages/components/src/components/Button/styles/mixins.scss
@@ -6,7 +6,7 @@
 @use "sass:list";
 @use "./config";
 @use "../../../styles/utils";
-@use "../../../tokens";
+@use "../../../styles/tokens";
 
 // CONTENTS
 // Base
diff --git a/packages/components/src/components/Card/styles/config.scss b/packages/components/src/components/Card/styles/config.scss
index 383285f1..7feb04f9 100644
--- a/packages/components/src/components/Card/styles/config.scss
+++ b/packages/components/src/components/Card/styles/config.scss
@@ -1,4 +1,4 @@
-@use "../../../tokens";
+@use "../../../styles/tokens";
 
 $card: (
   default: (
diff --git a/packages/components/src/components/Card/styles/mixins.scss b/packages/components/src/components/Card/styles/mixins.scss
index 3a4f2d0b..7ab15518 100644
--- a/packages/components/src/components/Card/styles/mixins.scss
+++ b/packages/components/src/components/Card/styles/mixins.scss
@@ -1,6 +1,6 @@
 @use "sass:map";
 @use "./config";
-@use "../../../tokens";
+@use "../../../styles/tokens";
 @use "../../../styles/utils";
 
 @mixin card($card: config.$card) {
diff --git a/packages/components/src/components/DropdownMenu/styles/config.scss b/packages/components/src/components/DropdownMenu/styles/config.scss
index ba60ccff..17426677 100644
--- a/packages/components/src/components/DropdownMenu/styles/config.scss
+++ b/packages/components/src/components/DropdownMenu/styles/config.scss
@@ -2,7 +2,7 @@
 // DROPDOWN - CONFIGURATION
 // ---------------------------------------------
 
-@use "../../../tokens";
+@use "../../../styles/tokens";
 @use "../../../styles/utils.scss";
 
 $dropdown-menu-max-height: 300px;
diff --git a/packages/components/src/components/FileUploader/styles/style.scss b/packages/components/src/components/FileUploader/styles/style.scss
index 07a7aebd..dcc108f3 100644
--- a/packages/components/src/components/FileUploader/styles/style.scss
+++ b/packages/components/src/components/FileUploader/styles/style.scss
@@ -1,4 +1,4 @@
-@use "../../../tokens";
+@use "../../../styles/tokens";
 
 .file-uploader {
   &__preview-item {
diff --git a/packages/components/src/components/Label/styles/config.scss b/packages/components/src/components/Label/styles/config.scss
index 5a4ef42a..b0acb504 100644
--- a/packages/components/src/components/Label/styles/config.scss
+++ b/packages/components/src/components/Label/styles/config.scss
@@ -2,7 +2,7 @@
 // FORMS - LABEL - CONFIGURATION
 // ---------------------------------------------
 
-@use "../../../tokens";
+@use "../../../styles/tokens";
 @use "../../../styles/utils";
 
 $label: (
diff --git a/packages/components/src/components/Modal/styles/config.scss b/packages/components/src/components/Modal/styles/config.scss
index 8704dac9..d03b0e9a 100644
--- a/packages/components/src/components/Modal/styles/config.scss
+++ b/packages/components/src/components/Modal/styles/config.scss
@@ -1,5 +1,5 @@
 @use "sass:color";
-@use "../../../tokens";
+@use "../../../styles/tokens";
 @use "../../../styles/utils";
 
 $modal-overlay-z-index: 500;
diff --git a/packages/components/src/components/Modal/styles/mixins.scss b/packages/components/src/components/Modal/styles/mixins.scss
index f52d1ea7..e7ecb58b 100644
--- a/packages/components/src/components/Modal/styles/mixins.scss
+++ b/packages/components/src/components/Modal/styles/mixins.scss
@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "./config";
 @use "../../../styles/utils";
-@use "../../../tokens";
+@use "../../../styles/tokens";
 
 @mixin modal($settings: config.$modal) {
   @each $breakpoint, $props in $settings {
diff --git a/packages/components/src/components/Modal/styles/style.scss b/packages/components/src/components/Modal/styles/style.scss
index 9684058e..6c06cc49 100644
--- a/packages/components/src/components/Modal/styles/style.scss
+++ b/packages/components/src/components/Modal/styles/style.scss
@@ -1,4 +1,4 @@
-@use "../../../tokens";
+@use "../../../styles/tokens";
 @use "./mixins";
 
 .modal {
diff --git a/packages/components/src/components/Pagination/styles/style.scss b/packages/components/src/components/Pagination/styles/style.scss
index 0605c249..44712583 100644
--- a/packages/components/src/components/Pagination/styles/style.scss
+++ b/packages/components/src/components/Pagination/styles/style.scss
@@ -1,4 +1,4 @@
-@use "../../../tokens";
+@use "../../../styles/tokens";
 
 .pagination {
   margin-bottom: tokens.space();
diff --git a/packages/components/src/components/Select/styles/config.scss b/packages/components/src/components/Select/styles/config.scss
index 40e45fc0..e657bf9d 100644
--- a/packages/components/src/components/Select/styles/config.scss
+++ b/packages/components/src/components/Select/styles/config.scss
@@ -2,7 +2,7 @@
 // FORMS - SELECT - CONFIGURATION
 // ---------------------------------------------
 
-@use "../../../tokens";
+@use "../../../styles/tokens";
 @use "../../../styles/utils";
 
 $select: (
diff --git a/packages/components/src/components/Select/styles/style.scss b/packages/components/src/components/Select/styles/style.scss
index e3cc2d53..a5b70130 100644
--- a/packages/components/src/components/Select/styles/style.scss
+++ b/packages/components/src/components/Select/styles/style.scss
@@ -1,6 +1,6 @@
 @use "./config";
 @use "../../../styles/utils";
-@use "../../../tokens";
+@use "../../../styles/tokens";
 
 // Replace letters
 @function str-replace($string, $search, $replace: "") {
diff --git a/packages/components/src/components/Slider/styles/style.scss b/packages/components/src/components/Slider/styles/style.scss
index a12e7ba8..805e8293 100644
--- a/packages/components/src/components/Slider/styles/style.scss
+++ b/packages/components/src/components/Slider/styles/style.scss
@@ -1,4 +1,4 @@
-@use "../../../tokens";
+@use "../../../styles/tokens";
 @use "../../../styles/utils";
 
 :root {
diff --git a/packages/components/src/components/Table/styles/style.scss b/packages/components/src/components/Table/styles/style.scss
index bf3c8508..2a4bde1c 100644
--- a/packages/components/src/components/Table/styles/style.scss
+++ b/packages/components/src/components/Table/styles/style.scss
@@ -1,4 +1,4 @@
-@use "../../../tokens";
+@use "../../../styles/tokens";
 @use "../../../styles/utils";
 
 .table {
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 1ad274ef..1355c811 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -31,7 +31,7 @@ import {
   spaces,
   fonts,
   shadows,
-} from "./tokens";
+} from "./styles/tokens";
 
 import "./styles/utilities.scss";
 import "./styles/layout.scss";
diff --git a/packages/components/src/styles/globals.scss b/packages/components/src/styles/globals.scss
index 13e90f28..5ae24411 100644
--- a/packages/components/src/styles/globals.scss
+++ b/packages/components/src/styles/globals.scss
@@ -1,3 +1,4 @@
-@import "../tokens/colors/globals";
-@import "../tokens/space/globals";
-@import "../tokens/font/globals";
+// NOTE: tokens create css variables in the :root so make sure you are importing globals only once and preferably here so we don't pollute .css files with multiple variabile definitions
+@import "./tokens/colors/globals";
+@import "./tokens/space/globals";
+@import "./tokens/font/globals";
diff --git a/packages/components/src/styles/index.scss b/packages/components/src/styles/index.scss
index d996aa6e..26925bbd 100644
--- a/packages/components/src/styles/index.scss
+++ b/packages/components/src/styles/index.scss
@@ -1,4 +1,10 @@
+// normalize
+@import "modern-normalize/modern-normalize.css";
+
+// globals
 @import "./globals";
+
+// component styles
 @import "./../components/Bar/styles/style.scss";
 @import "./../components/Button/styles/style.scss";
 @import "./../components/Card/styles/style.scss";
@@ -10,5 +16,7 @@
 @import "./../components/Select/styles/style.scss";
 @import "./../components/Slider/styles/style.scss";
 @import "./../components/Table/styles/style.scss";
+
+// utilites and overrides
 @import "./utilities.scss";
 @import "./layout.scss";
diff --git a/packages/components/src/styles/layout.scss b/packages/components/src/styles/layout.scss
index 9959a4d3..5e0524a1 100644
--- a/packages/components/src/styles/layout.scss
+++ b/packages/components/src/styles/layout.scss
@@ -3,7 +3,7 @@
 // ---------------------------------------------
 
 @use './utils';
-@use '../tokens';
+@use './tokens';
 
 // mixin for utilities with layout targeting
 @mixin spacing-reset-classes($breakpoint: "") {
diff --git a/packages/components/src/tokens/TokensTable.tsx b/packages/components/src/styles/tokens/TokensTable.tsx
similarity index 96%
rename from packages/components/src/tokens/TokensTable.tsx
rename to packages/components/src/styles/tokens/TokensTable.tsx
index 6a11aa90..d470255f 100644
--- a/packages/components/src/tokens/TokensTable.tsx
+++ b/packages/components/src/styles/tokens/TokensTable.tsx
@@ -5,8 +5,8 @@
 import React, { useMemo } from "react";
 
 import { Table, Code } from "@lighting-beetle/lighter-styleguide";
-import flattenObject from "../utils/flattenObject";
-import { SCSSVarsMap } from "../utils/scssVarsToMap";
+import flattenObject from "../../utils/flattenObject";
+import { SCSSVarsMap } from "../../utils/scssVarsToMap";
 import { Column } from "react-table";
 
 type UsageFormatFunc = ({
diff --git a/packages/components/src/tokens/breakpoints/breakpoints.test.ts b/packages/components/src/styles/tokens/breakpoints/breakpoints.test.ts
similarity index 98%
rename from packages/components/src/tokens/breakpoints/breakpoints.test.ts
rename to packages/components/src/styles/tokens/breakpoints/breakpoints.test.ts
index 77da5dd4..da55933d 100644
--- a/packages/components/src/tokens/breakpoints/breakpoints.test.ts
+++ b/packages/components/src/styles/tokens/breakpoints/breakpoints.test.ts
@@ -5,7 +5,7 @@
 
 import { renderSync } from "sass";
 import { breakpoint } from ".";
-import scssTestImporter from "../../utils/scssTestImporter";
+import scssTestImporter from "../../../utils/scssTestImporter";
 
 function renderSass(args) {
   return renderSync({
diff --git a/packages/components/src/tokens/breakpoints/export.module.scss b/packages/components/src/styles/tokens/breakpoints/export.module.scss
similarity index 100%
rename from packages/components/src/tokens/breakpoints/export.module.scss
rename to packages/components/src/styles/tokens/breakpoints/export.module.scss
diff --git a/packages/components/src/tokens/breakpoints/index.scss b/packages/components/src/styles/tokens/breakpoints/index.scss
similarity index 98%
rename from packages/components/src/tokens/breakpoints/index.scss
rename to packages/components/src/styles/tokens/breakpoints/index.scss
index 31de4817..b079257f 100644
--- a/packages/components/src/tokens/breakpoints/index.scss
+++ b/packages/components/src/styles/tokens/breakpoints/index.scss
@@ -1,7 +1,7 @@
 @use "sass:meta";
 @use "sass:map";
 @use "sass:list";
-@use "./../../styles/utils.scss";
+@use "./../../utils.scss";
 
 $breakpoints: (
   xs: 0,
diff --git a/packages/components/src/tokens/breakpoints/index.ts b/packages/components/src/styles/tokens/breakpoints/index.ts
similarity index 87%
rename from packages/components/src/tokens/breakpoints/index.ts
rename to packages/components/src/styles/tokens/breakpoints/index.ts
index 4b79b5c4..e5aef8fe 100644
--- a/packages/components/src/tokens/breakpoints/index.ts
+++ b/packages/components/src/styles/tokens/breakpoints/index.ts
@@ -1,6 +1,6 @@
 // TODO: useBreakpoint hook can be probaly useful here
 
-import scssVarsToMap from "../../utils/scssVarsToMap";
+import scssVarsToMap from "../../../utils/scssVarsToMap";
 import breakpointsFromSCSS from "./export.module.scss";
 
 export const breakpoints = scssVarsToMap(breakpointsFromSCSS);
diff --git a/packages/components/src/tokens/colors/colors.test.ts b/packages/components/src/styles/tokens/colors/colors.test.ts
similarity index 98%
rename from packages/components/src/tokens/colors/colors.test.ts
rename to packages/components/src/styles/tokens/colors/colors.test.ts
index b6d7808c..ba7b0483 100644
--- a/packages/components/src/tokens/colors/colors.test.ts
+++ b/packages/components/src/styles/tokens/colors/colors.test.ts
@@ -5,7 +5,7 @@
 
 import { renderSync } from "sass";
 import { color, colorHex } from ".";
-import scssTestImporter from "../../utils/scssTestImporter";
+import scssTestImporter from "../../../utils/scssTestImporter";
 
 function renderSass(args) {
   return renderSync({
diff --git a/packages/components/src/tokens/colors/export.module.scss b/packages/components/src/styles/tokens/colors/export.module.scss
similarity index 100%
rename from packages/components/src/tokens/colors/export.module.scss
rename to packages/components/src/styles/tokens/colors/export.module.scss
diff --git a/packages/components/src/tokens/colors/globals.scss b/packages/components/src/styles/tokens/colors/globals.scss
similarity index 100%
rename from packages/components/src/tokens/colors/globals.scss
rename to packages/components/src/styles/tokens/colors/globals.scss
diff --git a/packages/components/src/tokens/colors/index.scss b/packages/components/src/styles/tokens/colors/index.scss
similarity index 100%
rename from packages/components/src/tokens/colors/index.scss
rename to packages/components/src/styles/tokens/colors/index.scss
diff --git a/packages/components/src/tokens/colors/index.ts b/packages/components/src/styles/tokens/colors/index.ts
similarity index 93%
rename from packages/components/src/tokens/colors/index.ts
rename to packages/components/src/styles/tokens/colors/index.ts
index be632be9..c24d7e51 100644
--- a/packages/components/src/tokens/colors/index.ts
+++ b/packages/components/src/styles/tokens/colors/index.ts
@@ -1,4 +1,4 @@
-import scssVarsToMap from "../../utils/scssVarsToMap";
+import scssVarsToMap from "../../../utils/scssVarsToMap";
 import colorsFromSCSS from "./export.module.scss";
 
 export const colors = scssVarsToMap(colorsFromSCSS);
diff --git a/packages/components/src/tokens/font/export.module.scss b/packages/components/src/styles/tokens/font/export.module.scss
similarity index 100%
rename from packages/components/src/tokens/font/export.module.scss
rename to packages/components/src/styles/tokens/font/export.module.scss
diff --git a/packages/components/src/tokens/font/globals.scss b/packages/components/src/styles/tokens/font/globals.scss
similarity index 100%
rename from packages/components/src/tokens/font/globals.scss
rename to packages/components/src/styles/tokens/font/globals.scss
diff --git a/packages/components/src/tokens/font/index.scss b/packages/components/src/styles/tokens/font/index.scss
similarity index 100%
rename from packages/components/src/tokens/font/index.scss
rename to packages/components/src/styles/tokens/font/index.scss
diff --git a/packages/components/src/tokens/font/index.ts b/packages/components/src/styles/tokens/font/index.ts
similarity index 63%
rename from packages/components/src/tokens/font/index.ts
rename to packages/components/src/styles/tokens/font/index.ts
index 5d16e775..231df89c 100644
--- a/packages/components/src/tokens/font/index.ts
+++ b/packages/components/src/styles/tokens/font/index.ts
@@ -1,4 +1,4 @@
-import scssVarsToMap from "../../utils/scssVarsToMap";
+import scssVarsToMap from "../../../utils/scssVarsToMap";
 import fontsSCSSVars from "./export.module.scss";
 
 export const fonts = scssVarsToMap(fontsSCSSVars);
diff --git a/packages/components/src/tokens/font/utilities.scss b/packages/components/src/styles/tokens/font/utilities.scss
similarity index 100%
rename from packages/components/src/tokens/font/utilities.scss
rename to packages/components/src/styles/tokens/font/utilities.scss
diff --git a/packages/components/src/tokens/index.scss b/packages/components/src/styles/tokens/index.scss
similarity index 100%
rename from packages/components/src/tokens/index.scss
rename to packages/components/src/styles/tokens/index.scss
diff --git a/packages/components/src/tokens/index.ts b/packages/components/src/styles/tokens/index.ts
similarity index 100%
rename from packages/components/src/tokens/index.ts
rename to packages/components/src/styles/tokens/index.ts
diff --git a/packages/components/src/tokens/shadows/export.module.scss b/packages/components/src/styles/tokens/shadows/export.module.scss
similarity index 100%
rename from packages/components/src/tokens/shadows/export.module.scss
rename to packages/components/src/styles/tokens/shadows/export.module.scss
diff --git a/packages/components/src/tokens/shadows/globals.scss b/packages/components/src/styles/tokens/shadows/globals.scss
similarity index 100%
rename from packages/components/src/tokens/shadows/globals.scss
rename to packages/components/src/styles/tokens/shadows/globals.scss
diff --git a/packages/components/src/tokens/shadows/index.scss b/packages/components/src/styles/tokens/shadows/index.scss
similarity index 100%
rename from packages/components/src/tokens/shadows/index.scss
rename to packages/components/src/styles/tokens/shadows/index.scss
diff --git a/packages/components/src/tokens/shadows/index.ts b/packages/components/src/styles/tokens/shadows/index.ts
similarity index 65%
rename from packages/components/src/tokens/shadows/index.ts
rename to packages/components/src/styles/tokens/shadows/index.ts
index 936a8f31..671e3237 100644
--- a/packages/components/src/tokens/shadows/index.ts
+++ b/packages/components/src/styles/tokens/shadows/index.ts
@@ -1,4 +1,4 @@
-import scssVarsToMap from "../../utils/scssVarsToMap";
+import scssVarsToMap from "../../../utils/scssVarsToMap";
 import shadowsSCSSVars from "./export.module.scss";
 
 export const shadows = scssVarsToMap(shadowsSCSSVars);
diff --git a/packages/components/src/tokens/space/export.module.scss b/packages/components/src/styles/tokens/space/export.module.scss
similarity index 100%
rename from packages/components/src/tokens/space/export.module.scss
rename to packages/components/src/styles/tokens/space/export.module.scss
diff --git a/packages/components/src/tokens/space/globals.scss b/packages/components/src/styles/tokens/space/globals.scss
similarity index 100%
rename from packages/components/src/tokens/space/globals.scss
rename to packages/components/src/styles/tokens/space/globals.scss
diff --git a/packages/components/src/tokens/space/index.scss b/packages/components/src/styles/tokens/space/index.scss
similarity index 93%
rename from packages/components/src/tokens/space/index.scss
rename to packages/components/src/styles/tokens/space/index.scss
index dcc462bf..20857d21 100644
--- a/packages/components/src/tokens/space/index.scss
+++ b/packages/components/src/styles/tokens/space/index.scss
@@ -1,7 +1,7 @@
 @use "sass:meta";
 @use "sass:map";
 @use "sass:list";
-@use "./../../styles/utils.scss";
+@use "../../utils.scss";
 
 $spaces: (
   default: 16px,
diff --git a/packages/components/src/tokens/space/index.ts b/packages/components/src/styles/tokens/space/index.ts
similarity index 82%
rename from packages/components/src/tokens/space/index.ts
rename to packages/components/src/styles/tokens/space/index.ts
index e77ca934..73faf093 100644
--- a/packages/components/src/tokens/space/index.ts
+++ b/packages/components/src/styles/tokens/space/index.ts
@@ -1,5 +1,5 @@
-import { rem } from "../../styles";
-import scssVarsToMap from "../../utils/scssVarsToMap";
+import { rem } from "../..";
+import scssVarsToMap from "../../../utils/scssVarsToMap";
 import spacesFromSCSS from "./export.module.scss";
 
 export const spaces = scssVarsToMap(spacesFromSCSS);
diff --git a/packages/components/src/tokens/space/spaces.test.ts b/packages/components/src/styles/tokens/space/spaces.test.ts
similarity index 97%
rename from packages/components/src/tokens/space/spaces.test.ts
rename to packages/components/src/styles/tokens/space/spaces.test.ts
index d1845915..efaebb84 100644
--- a/packages/components/src/tokens/space/spaces.test.ts
+++ b/packages/components/src/styles/tokens/space/spaces.test.ts
@@ -5,7 +5,7 @@
 
 import { renderSync } from "sass";
 import { space, spaceValue } from ".";
-import scssTestImporter from "../../utils/scssTestImporter";
+import scssTestImporter from "../../../utils/scssTestImporter";
 
 function renderSass(args) {
   return renderSync({
diff --git a/packages/components/src/tokens/tokens.docs.mdx b/packages/components/src/styles/tokens/tokens.docs.mdx
similarity index 100%
rename from packages/components/src/tokens/tokens.docs.mdx
rename to packages/components/src/styles/tokens/tokens.docs.mdx
diff --git a/packages/components/src/styles/utilities.scss b/packages/components/src/styles/utilities.scss
index 9983967c..4ba3364f 100644
--- a/packages/components/src/styles/utilities.scss
+++ b/packages/components/src/styles/utilities.scss
@@ -1,5 +1,5 @@
 @use './utils';
-@import "../tokens/font/utilities.scss";
+@import "./tokens/font/utilities.scss";
 
 .visually-hidden {
   @include utils.visually-hidden();
diff --git a/packages/components/src/styles/utils.scss b/packages/components/src/styles/utils.scss
index 851adb4c..2e51380b 100644
--- a/packages/components/src/styles/utils.scss
+++ b/packages/components/src/styles/utils.scss
@@ -1,7 +1,7 @@
 @use "sass:map";
 @use "sass:list";
 @use "sass:math";
-@use "../tokens/font";
+@use "./tokens/font";
 
 /// Base on -zf-map-next https://github.com/zurb/foundation-sites/blob/develop/scss/util/_breakpoint.scss
 /// Find the next key in a map.
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 11512c86..6ea3b9bd 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -6,7 +6,12 @@
     "**/*.tsx",
     "./react-table-config.d.ts"
   ],
-  "exclude": ["node_modules", "dist", "out", "src/tokens/TokensTable.tsx"],
+  "exclude": [
+    "node_modules",
+    "dist",
+    "out",
+    "src/styles/tokens/TokensTable.tsx"
+  ],
   "compilerOptions": {
     "target": "ES2018"
   },
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index c1afda32..7fe7fb6e 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -18,7 +18,6 @@
     "glob": "~7.2.0",
     "mdx-bundler": "^8.0.0",
     "micromatch": "~4.0.4",
-    "modern-normalize": "^1.1.0",
     "netlify-cms-app": "~2.15.44",
     "netlify-cms-widget-mdx": "~0.4.4",
     "next": "~12.2.5",
diff --git a/packages/design-system/src/pages/_app.tsx b/packages/design-system/src/pages/_app.tsx
index 412dff1f..b7460cbf 100644
--- a/packages/design-system/src/pages/_app.tsx
+++ b/packages/design-system/src/pages/_app.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import "modern-normalize/modern-normalize.css";
 import "components/styles.scss";
 
 function MyApp({ Component, pageProps }) {
diff --git a/packages/example-forms/package.json b/packages/example-forms/package.json
index d0657391..c65f0830 100644
--- a/packages/example-forms/package.json
+++ b/packages/example-forms/package.json
@@ -14,7 +14,6 @@
     "@lighting-beetle/next-lighter-config": "workspace:^",
     "components": "workspace:^",
     "micromatch": "~4.0.4",
-    "modern-normalize": "^1.1.0",
     "next": "~12.2.5",
     "next-transpile-modules": "~9.0.0",
     "react": "~17.0.2",
diff --git a/packages/example-forms/src/pages/_app.tsx b/packages/example-forms/src/pages/_app.tsx
index 6af685ce..65864cab 100644
--- a/packages/example-forms/src/pages/_app.tsx
+++ b/packages/example-forms/src/pages/_app.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import "modern-normalize/modern-normalize.css";
 import "components/styles.scss";
 
 export default function MyApp({ Component, pageProps }) {
diff --git a/packages/example-table/package.json b/packages/example-table/package.json
index e42efb25..d7cdf26a 100644
--- a/packages/example-table/package.json
+++ b/packages/example-table/package.json
@@ -11,7 +11,6 @@
   "dependencies": {
     "@lighting-beetle/next-lighter-config": "workspace:^",
     "components": "workspace:^",
-    "modern-normalize": "^1.1.0",
     "next": "~12.3.0",
     "next-query-params": "^4.0.0",
     "next-transpile-modules": "~8.0.0",
diff --git a/packages/example-table/src/pages/_app.tsx b/packages/example-table/src/pages/_app.tsx
index 9bc9a486..03f8693d 100644
--- a/packages/example-table/src/pages/_app.tsx
+++ b/packages/example-table/src/pages/_app.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { NextAdapter } from "next-query-params";
 import { QueryParamProvider } from "use-query-params";
-import "modern-normalize/modern-normalize.css";
 import "../components/Flats/filters/styles/style.scss";
 import "components/styles.scss";
 
diff --git a/packages/example/next.config.js b/packages/example/next.config.js
index 368a3a95..a2e4138a 100644
--- a/packages/example/next.config.js
+++ b/packages/example/next.config.js
@@ -11,5 +11,4 @@ export default createConfig({
     },
   },
   plugins: [transpileModules(["components"])],
-  analyzeBundle: true,
 });
diff --git a/packages/example/package.json b/packages/example/package.json
index 400d1423..0947256c 100644
--- a/packages/example/package.json
+++ b/packages/example/package.json
@@ -13,7 +13,6 @@
   "dependencies": {
     "@lighting-beetle/next-lighter-config": "workspace:^",
     "components": "workspace:^",
-    "modern-normalize": "^1.1.0",
     "next": "~12.2.5",
     "next-transpile-modules": "~9.0.0",
     "react": "~17.0.2",
diff --git a/packages/example/src/pages/_app.tsx b/packages/example/src/pages/_app.tsx
index 6af685ce..65864cab 100644
--- a/packages/example/src/pages/_app.tsx
+++ b/packages/example/src/pages/_app.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import "modern-normalize/modern-normalize.css";
 import "components/styles.scss";
 
 export default function MyApp({ Component, pageProps }) {
diff --git a/packages/lighter-styleguide/package.json b/packages/lighter-styleguide/package.json
index 21309089..bf07ca25 100644
--- a/packages/lighter-styleguide/package.json
+++ b/packages/lighter-styleguide/package.json
@@ -27,7 +27,6 @@
     "@types/react-table": "^7.7.5",
     "classnames": "~2.3.1",
     "gray-matter": "~4.0.3",
-    "modern-normalize": "^1.1.0",
     "next": "~12.2.5",
     "polished": "^4.1.3",
     "pretty": "~2.0.0",
diff --git a/packages/lighter-styleguide/src/pages/_app.tsx b/packages/lighter-styleguide/src/pages/_app.tsx
index 68037b0f..5b998a66 100644
--- a/packages/lighter-styleguide/src/pages/_app.tsx
+++ b/packages/lighter-styleguide/src/pages/_app.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import NextLink from "next/link";
 import Styleguide from "../components/Styleguide";
-import "modern-normalize/modern-normalize.css";
 
 const routes = [
   {
diff --git a/yarn.lock b/yarn.lock
index f71dc003..57aded97 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3196,7 +3196,6 @@ __metadata:
     esbuild-plugin-import-glob: ^0.1.1
     esbuild-plugin-svg: ~0.1.0
     gray-matter: ~4.0.3
-    modern-normalize: ^1.1.0
     next: ~12.2.5
     npm-run-all: ^4.1.5
     polished: ^4.1.3
@@ -9254,6 +9253,7 @@ __metadata:
     identity-obj-proxy: ^3.0.0
     jest: ^27.2.3
     jest-axe: ^6.0.0
+    modern-normalize: ^1.1.0
     npm-run-all: ^4.1.5
     polished: ^4.1.3
     preact: ~10.5.14
@@ -10293,7 +10293,6 @@ __metadata:
     glob: ~7.2.0
     mdx-bundler: ^8.0.0
     micromatch: ~4.0.4
-    modern-normalize: ^1.1.0
     netlify-cms-app: ~2.15.44
     netlify-cms-widget-mdx: ~0.4.4
     next: ~12.2.5
@@ -12368,7 +12367,6 @@ __metadata:
     "@lighting-beetle/next-lighter-config": "workspace:^"
     components: "workspace:^"
     micromatch: ~4.0.4
-    modern-normalize: ^1.1.0
     next: ~12.2.5
     next-transpile-modules: ~9.0.0
     react: ~17.0.2
@@ -12394,7 +12392,6 @@ __metadata:
   dependencies:
     "@lighting-beetle/next-lighter-config": "workspace:^"
     components: "workspace:^"
-    modern-normalize: ^1.1.0
     next: ~12.3.0
     next-query-params: ^4.0.0
     next-transpile-modules: ~8.0.0
@@ -12428,7 +12425,6 @@ __metadata:
   dependencies:
     "@lighting-beetle/next-lighter-config": "workspace:^"
     components: "workspace:^"
-    modern-normalize: ^1.1.0
     next: ~12.2.5
     next-transpile-modules: ~9.0.0
     react: ~17.0.2