@mindvalley/design-system 4.0.0 → 4.1.0

package/dist/tailwind/plugins/typography-gsf.js

@@ -0,0 +1,130 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const plugin_1 = __importDefault(require("tailwindcss/plugin"));
+const casing_1 = require("../../helpers/casing");
+const dimens_1 = require("../../helpers/dimens");
+const typography_1 = __importDefault(require("./tokens/b2b/typography"));
+const typography_gsf_1 = __importDefault(require("./tokens/mindvalley/typography-gsf"));
+const brandMapping = {
+    mindvalley: typography_gsf_1.default,
+    b2b: typography_1.default,
+};
+function typographyPlugin(options = {}) {
+    return ({ addUtilities, theme }) => {
+        const { casing = casing_1.CASINGS.kebabCase, breakpoints = {}, prefix = '', brands = ['mindvalley'], } = options;
+        const tabletBreakpoint = breakpoints.tablet ?? theme('screens.md', '768px');
+        const desktopBreakpoint = breakpoints.desktop ?? theme('screens.lg', '1024px');
+        const typographyClassDeclarations = {};
+        for (const brand of brands) {
+            const brandTypography = brandMapping[brand];
+            if (!brandTypography) {
+                continue;
+            }
+            const processedTypography = processTypography(brandTypography, tabletBreakpoint, desktopBreakpoint);
+            const casedTypography = convertObjectKeysToCasedClassNames(processedTypography, casing, prefix);
+            Object.assign(typographyClassDeclarations, casedTypography);
+        }
+        addUtilities(typographyClassDeclarations);
+    };
+}
+function processTypography(typography, tabletBreakpoint, desktopBreakpoint) {
+    const result = {};
+    for (const key of Object.keys(typography)) {
+        const isDesktop = key.endsWith('-desktop');
+        const isTablet = key.endsWith('-tablet');
+        const isMobile = key.endsWith('-mobile');
+        const baseTypography = typography[key];
+        const baseKey = isDesktop || isTablet || isMobile
+            ? (0, casing_1.toCamelCase)(key.replace(/-desktop$|-tablet$|-mobile$/g, ''))
+            : key;
+        if (isDesktop) {
+            const existing = result[baseKey] || {};
+            result[baseKey] = {
+                ...existing,
+                [`@media (min-width: ${desktopBreakpoint})`]: { ...baseTypography },
+            };
+        }
+        else if (isTablet) {
+            const existing = result[baseKey] || {};
+            result[baseKey] = {
+                ...existing,
+                [`@media (min-width: ${tabletBreakpoint})`]: { ...baseTypography },
+            };
+        }
+        else if (isMobile) {
+            const existing = result[baseKey] || {};
+            result[baseKey] = { ...baseTypography, ...existing };
+        }
+        else {
+            result[baseKey] = baseTypography;
+        }
+    }
+    return result;
+}
+function convertObjectKeysToCasedClassNames(typography, casing = casing_1.CASINGS.kebabCase, prefix = '') {
+    const mapKey = (key) => {
+        let className;
+        switch (casing) {
+            case casing_1.CASINGS.snakeCase:
+                className = (0, casing_1.toSnakeCase)(key);
+                break;
+            case casing_1.CASINGS.camelCase:
+                className = (0, casing_1.toCamelCase)(key);
+                break;
+            case casing_1.CASINGS.pascalCase:
+                className = (0, casing_1.toPascalCase)(key);
+                break;
+            case casing_1.CASINGS.kebabCase:
+                className = (0, casing_1.toKebabCase)(key);
+                break;
+            case casing_1.CASINGS.noCase:
+                className = (0, casing_1.toNoCase)(key);
+                break;
+            default:
+                console.error(`${casing} is currently not supported in this function, reverting to default ${casing_1.CASINGS.kebabCase}. Please raise an issue ticket here[https://github.com/mindvalley/mv-design-system]`);
+                className = (0, casing_1.toKebabCase)(key);
+        }
+        return prefix ? `.${prefix}${className}` : `.${className}`;
+    };
+    function mapVal(value) {
+        const res = {};
+        const variationSettings = [];
+        Object.keys(value).forEach((key) => {
+            const propValue = value[key];
+            if (key === 'lineHeight' && typeof propValue === 'string') {
+                res[key] = (0, dimens_1.lineHeightToRem)(propValue);
+            }
+            else if (['fontSize', 'letterSpacing'].includes(key) && typeof propValue === 'string') {
+                res[key] = (0, dimens_1.strPxToRemStr)(propValue);
+            }
+            else if (key === 'fontWidth' && typeof propValue === 'number') {
+                variationSettings.push(`"wdth" ${propValue}`);
+            }
+            else if (key === 'slant' && typeof propValue === 'number') {
+                variationSettings.push(`"slnt" ${propValue}`);
+            }
+            else if (typeof propValue === 'object' && propValue !== null) {
+                res[key] = mapVal(propValue);
+            }
+            else if (propValue !== undefined) {
+                res[key] = propValue;
+            }
+        });
+        if (variationSettings.length > 0) {
+            res.fontVariationSettings = variationSettings.join(', ');
+        }
+        return res;
+    }
+    return mapObj(typography, mapKey, mapVal);
+}
+function mapObj(obj, keyMapFn, valueMapFn) {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+        result[keyMapFn(key)] = valueMapFn(value);
+    }
+    return result;
+}
+exports.default = plugin_1.default.withOptions(typographyPlugin);

package/docs/README.md

@@ -0,0 +1,25 @@
+# Documentation
+
+These guides cover how to use the Mindvalley Design System in your projects - from installing tokens to configuring Tailwind plugins for typography, colors, icons, and wordmarks.
+
+## Quick start
+
+New here? Start with the [Usage Guide](usage.md) for installation and basic setup.
+
+## Guides
+
+| Topic | Guide | What You'll Learn |
+|-------|-------|-------------------|
+| Colors | [Usage → Colors](usage.md#-colors) | Tailwind config, multi-brand setup, gradients |
+| Typography | [Typography Guide](typography/README.md) | Font setup, class reference, plugin options |
+| Icons | [Usage → Icons](usage.md#-icons) | Brand, UI, and category icons with sprites |
+| Wordmarks | [Usage → Wordmarks](usage.md#-wordmarks) | Trainer and topic wordmarks |
+
+## Migration
+
+- [Sharp Grotesk → Google Sans Flex](typography/migration.md) - Migrate to the new variable font system
+
+## Contributing
+
+- [Development Guide](../CONTRIBUTING.md) - Setup, commits, build process
+- [Release Process](releasing.md) - Semantic versioning and publishing

package/docs/RELEASING.md

@@ -1,13 +1,13 @@
-## Releasing 🚀
+# Releasing 🚀
 
 By default, semantic-release uses the [Angular Commit Message Conventions](https://www.conventionalcommits.org/en/v1.0.0-beta.4/) and triggers releases based on the following rules:
 
-| Commit                      | Release Type     | Semver update type               |
-|-----------------------------|------------------|----------------------------------|
-| Commit with breaking change | Breaking release | Major release e.g 1.x.x -> 2.x.x |
-| Commit with type `feat`     | Feature release  | Major release e.g 1.x.x -> 2.x.x |
-| Commit with type `fix`      | Fix Release      | Minor release e.g 1.2.x -> 1.3.x |
-| Commit with type `perf`     | Patch release    | Patch release e.g 1.x.4 -> 1.x.5 |
+| Commit                      | Release Type     | Semver update type                |
+|-----------------------------|------------------|-----------------------------------|
+| Commit with breaking change | Breaking release | Major release e.g 1.x.x -> 2.x.x  |
+| Commit with type `feat`     | Feature release  | Minor release e.g 1.2.x -> 1.3.x  |
+| Commit with type `fix`      | Fix release      | Patch release e.g 1.2.3 -> 1.2.4  |
+| Commit with type `perf`     | Performance fix  | Patch release e.g 1.2.3 -> 1.2.4  |
 
 Only the above type of commits will trigger a release.
 
@@ -23,7 +23,7 @@ More detailed explanation can be found on the [semantic release steps documentat
 
 After release and publishing, the package should be available as a [scoped npm package](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages) and is on npm as [@mindvalley/design-system](https://www.npmjs.com/package/@mindvalley/design-system).
 
-### Trusted publishing
+## Trusted publishing
 
 Releases run through the GitHub Actions workflow [`release.yml`](../.github/workflows/release.yml) using [npm trusted publishing](https://docs.npmjs.com/trusted-publishers). The workflow:
 
@@ -34,4 +34,4 @@ Releases run through the GitHub Actions workflow [`release.yml`](../.github/work
 
 If the workflow fails, re-run it from the Actions tab after addressing the underlying error. No manual npm publishing is expected under normal circumstances.
 
-Jump to the [usage guide](USAGE.md) to understand how to use the published package in your repo.
+Jump to the [usage guide](usage.md) to understand how to use the published package in your repo.

package/docs/USAGE.md

@@ -1,4 +1,6 @@
-# Installation
+# Usage guide
+
+## Installation
 
 ### Using npm or yarn
 
@@ -69,9 +71,59 @@ and override the redefined colors using the B2B-specific colors.
   }
 ```
 
-## Why the override?
+#### Tailwind v4
+
+Tailwind v4 uses a CSS-first approach and doesn't require a config file by default. However, to use the design system colors, you'll need to create a config file and load it with the `@config` directive.
+
+**Step 1: Create `tailwind.config.js`**
+
+```js
+// tailwind.config.js
+import { colors } from '@mindvalley/design-system'
+
+export default {
+  theme: {
+    colors: {
+      ...colors
+    }
+  }
+}
+```
+
+For B2B projects:
+
+```js
+// tailwind.config.js
+import { colors } from '@mindvalley/design-system'
+import { colors as b2bColors } from '@mindvalley/design-system/b2b'
+
+export default {
+  theme: {
+    colors: {
+      ...colors,
+      ...b2bColors
+    }
+  }
+}
+```
+
+**Step 2: Load the config in your CSS**
+
+```css
+/* app.css */
+@import "tailwindcss";
+@config "./tailwind.config.js";
+```
+
+**Step 3: Use color classes as normal**
+
+```html
+<div class="bg-brand-accent text-white">...</div>
+```
+
+### Why the override?
 
-Both brands share color names, but their hues and shades are distinct. For instance, the reds, blues, teals, and purples in B2B differ. Therefore, the override is necessary to guarantee that a developer working on B2B receives the specific shades associated with that brand.
+Both brands share color names, but their hues and shades differ. The override ensures B2B developers get brand-specific shades.
 
 Here is the full list of [B2B colors](https://www.figma.com/file/1EPj7v5H5JhP2d0v2h8QeC/B2B-Foundations?type=design&node-id=1-395&mode=design&t=SY5HTy1zbFO5p80n-0).
 
@@ -98,7 +150,7 @@ Will give you purple wave gradient.
 
 If you'd like other custom names, you can make [tailwindcss color customizations](https://tailwindcss.com/docs/customizing-colors#using-the-default-colors) to the provided values and use them in your code.
 
-#### 2. Using CSS-in-JS
+### 2. Using CSS-in-JS
 
 1. Install the design system. See [installation](#using-npm-or-yarn).
 2. Use the [ES module](#es-module-syntax) syntax to import your module and include it in your code.
@@ -126,104 +178,46 @@ If you'd like other custom names, you can make [tailwindcss color customizations
 
 ## 🖋️ Typography
 
-### Loading Typography Fonts
-
-Before using the typography plugin, you need to load the required fonts. The design system provides pre-generated `@font-face` declarations that you can easily import.
-
-#### Recommended Method: Package Import
+### Loading typography fonts
 
-The easiest way to load fonts is to import them directly from the package:
+Before using the typography plugin, load the required fonts:
 
-**For Mindvalley Brand:**
+**Google Sans Flex**
 
-```javascript
-import '@mindvalley/design-system/typography/mindvalley/fonts.css'
+```html
+<!-- Add to your HTML <head> -->
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wdth,wght@75..125,100..900&display=swap" rel="stylesheet">
 ```
 
-**For B2B Brand:**
+> **Note:** Google Sans Flex requires the variable font version to support width variations. Fontsource currently only offers static font weights, which won't work with this typography system.
 
-```javascript
-import '@mindvalley/design-system/typography/b2b/fonts.css'
-```
-
-**For projects using both brands:**
+**Sharp Grotesk**
 
 ```javascript
 import '@mindvalley/design-system/typography/mindvalley/fonts.css'
-import '@mindvalley/design-system/typography/b2b/fonts.css'
 ```
 
-This works in all modern JavaScript frameworks including Next.js, Vite, Webpack, and Phoenix (Elixir).
-
-> 💡 **Note**: For detailed framework-specific examples (Next.js, Vite, Phoenix, CSS-in-JS solutions, etc.), see the comprehensive [Typography Font Loading Guide](typography-fonts.md).
-
-> ⚠️ **PostCSS Users**: If you're using `@import` in SCSS/CSS files with `postcss-import`, you need to configure it to resolve from `node_modules`. See the [PostCSS configuration example](typography-fonts.md#using-with-postcss-and-scss-import-phoenix-webpack--scss) for details.
-
-#### Alternative Method: Manual CSS
-
-If you prefer more control or need to customize the font loading, you can manually add the `@font-face` declarations to your CSS:
-
-```css
-/* Font files are served via Fastly CDN under Mindvalley assets and
-   managed via platform backoffice
-   
-   Note: Each font file has a single weight baked into the font name
-   (e.g., "Sharp Grotesk Cyr Medium 20" contains Medium, "Sharp Grotesk Cyr Semibold 20" weight of 600).
-   Using font-weight: auto allows the browser to use the font's intrinsic weight.
-*/
-
-@font-face {
-  font-family: "Sharp Grotesk Cyr Medium 22";
-  font-weight: auto;
-  font-display: swap;
-  src: url("https://assets.mindvalley.com/api/v1/assets/b61f86ec-3dbd-4674-907a-f3f26f5101ce.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: "Sharp Grotesk Cyr Semibold 20";
-  font-weight: auto;
-  font-display: swap;
-  src: url("https://assets.mindvalley.com/api/v1/assets/85092275-d096-483e-a271-7d6094cafca1.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: "Sharp Grotesk Cyr Medium 20";
-  font-weight: auto;
-  font-display: swap;
-  src: url("https://assets.mindvalley.com/api/v1/assets/faf3d1e3-d18c-461e-aafa-9e56f9f16ce0.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: "Sharp Grotesk Cyr Medium 19";
-  font-weight: auto;
-  font-display: swap;
-  src: url("https://assets.mindvalley.com/api/v1/assets/9f7eea7d-ba59-4ee1-85a6-3ac45f23239c.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: "Sharp Grotesk Cyr Book 19";
-  font-weight: auto;
-  font-display: swap;
-  src: url("https://assets.mindvalley.com/api/v1/assets/0982041e-3874-48dc-bba5-a15c6fb960d1.woff2") format("woff2");
-}
-
-@font-face {
-  font-family: "Sharp Grotesk Cyr Book Itl 19";
-  font-weight: auto;
-  font-display: swap;
-  src: url("https://assets.mindvalley.com/api/v1/assets/2ba064b8-f0d5-48e4-a790-d7b90d5d2db5.woff2") format("woff2");
-}
-```
-
-Both methods are valid, but the package import is easier to maintain and ensures you always have the latest font definitions.
+> 📖 For framework-specific examples (Next.js, React, Vite, Vue, Phoenix) see the [Typography Setup Guide](typography/setup.md).
 
 ### Typography plugin (TailwindCSS)
 
-Mindvalley's engineers utilize TailwindCSS, so we provide a typography plugin to make life easier. This plugin lets developers use Figma typography class references without worrying about the underlying font sizes, line heights, font families, etc.
+We provide a TailwindCSS typography plugin that lets developers use Figma typography class names directly, without configuring font sizes, line heights, or font families manually.
+
+> ⚠️ **Important:** Typography classes are already responsive - don't add screen prefixes!
+>
+> ```html
+> <!-- ❌ Bad -->
+> <h1 class="title-bold-5 md:title-bold-3">Hello</h1>
+>
+> <!-- ✅ Good -->
+> <h1 class="title-bold-5">Hello</h1>
+> ```
 
 #### How to use it?
 
-Let's say that you are trying to codify a button from a Figma design, and you want to apply the exact same typography values (line height, font family, font size, etc.) to your code. Here are the steps you will need to go through to use the plugin.
+To match Figma typography values in your code:
 
 1. Install the design system as described in the [install section](#using-npm-or-yarn).
 
@@ -231,6 +225,20 @@ Let's say that you are trying to codify a button from a Figma design, and you wa
 
 3. Require and use the Tailwind typography plugin in your `tailwind.config.js` file.
 
+   **Google Sans Flex (Recommended):**
+
+      ```js
+      module.exports = {
+        ...
+        plugins: [
+          require('@mindvalley/design-system/dist/tailwind/plugins/typography-gsf.js')()
+        ],
+        ...
+      }
+      ```
+
+   **Sharp Grotesk (Legacy):**
+
       ```js
       module.exports = {
         ...
@@ -239,14 +247,19 @@ Let's say that you are trying to codify a button from a Figma design, and you wa
         ],
         ...
       }
+      ```
+
+   > 📖 **Migrating?** See the [GSF Migration Guide](typography/migration.md) for details on switching from Sharp Grotesk to Google Sans Flex.
 
-    ```
+   <!-- -->
+
+   > ⚠️ **Tailwind v4:** Tailwind v4 does not use js config files. To use the typography plugins see [Tailwind v4 typography Setup guide](typography/setup.md#tailwind-v4-setup) for details.
 
 4. Find the name to use by inspecting the selected text on the Figma design file.
 
 ![Getting Class Name](getting-class-name.png)
 
-5. Use the class name as follows. Remember to adjust that according to the casing option if you are not using the default.
+1. Use the class name as follows. Remember to adjust that according to the casing option if you are not using the default.
 
 ```html
 <p class="button-text">...</p>
@@ -265,7 +278,10 @@ Here is how to pass the casing:
   module.exports = {
   ...
     plugins: [
-      require('@mindvalley/design-system/dist/tailwind/plugins/typography.js')({ casing: "noCase" }),
+      // GSF plugin
+      require('@mindvalley/design-system/dist/tailwind/plugins/typography-gsf.js')({ casing: "noCase" }),
+      // Or Sharp Grotesk plugin
+      // require('@mindvalley/design-system/dist/tailwind/plugins/typography.js')({ casing: "noCase" }),
     ],
     ...
   }
@@ -280,26 +296,9 @@ Here is how to pass the casing:
   }
   ```
 
-##### Best Practices
-
-The resulting typography classes are responsive for two screen sizes: desktop and mobile/tablet.
-You don't need to add screen prefixes to the CSS classes.
-
-For example, the `title-bold-5` class includes media queries for both desktop and mobile/tablet, so there's no need to add custom media queries in the markup. Here's an example of the CSS for `title-bold-5`:
+##### Generated CSS reference
 
-###### Bad ❌
-
-```html
-<h1 class="title-bold-5 md:title-bold-3">Hello World!</h1>
-```
-
-###### Good ✅
-
-```html
-<h1 class="title-bold-5">Hello World!</h1>
-```
-
-Since the typography classes are responsive, you don't need to add media queries to the CSS classes. For example, the `title-bold-5` class includes media queries for both desktop and mobile/tablet, so there's no need to add custom media queries in the markup. Here's an example of the CSS for `title-bold-5`:
+Here's an example of the responsive CSS generated for `title-bold-5`:
 
 ```css
 .title-bold-5 {
@@ -319,7 +318,7 @@ Since the typography classes are responsive, you don't need to add media queries
 
 #### Configuring the brand
 
-The Mindvalley design system also supports multiple brands, including the core Mindvalley brand and a B2B (business-to-business) brand. Each brand has its own set of typography tokens that can be used to ensure consistency across different projects and platforms.
+The design system supports multiple brands: Mindvalley (core) and B2B. Each brand has typography tokens for consistent styling across projects.
 
 To configure the typography for a specific brand within your TailwindCSS setup, you will need to adjust your `tailwind.config.js` file to include the brand-specific typography tokens.
 
@@ -366,7 +365,7 @@ Note: B2b brand builds on top of the core brand typography with an additional sp
 
 Browse [B2B foundations figma file](https://www.figma.com/file/1EPj7v5H5JhP2d0v2h8QeC/B2B-Foundations?type=design&node-id=139-11&mode=design&t=SY5HTy1zbFO5p80n-0) to see the specific typography.
 
-#### Configuring the Prefix
+#### Configuring the prefix
 
 To customize the class names further, you can prepend a prefix to all typography class names generated by the plugin. This is particularly useful for specific naming conventions.
 
@@ -383,8 +382,9 @@ module.exports = {
   ],
   ...
 }
+```
 
-Output:
+**Output:**
 When using `mv-type--`, the generated CSS class will look like this:
 
 ```css
@@ -405,15 +405,15 @@ You'll need to make the plugin aware of the `breakingPoint` boundary between the
   ...
     theme: {
       screens: {
-        'mobile': '480px',
-        'tablet': '992px',
-        'laptop': '1024px',
-        'desktop': '1280px',
+        'sm': '480px',
+        'md': '992px',
+        'lg': '1024px',
+        'xl': '1280px',
       }
     }
     plugins: [
       /* Passing the identifier of the screen size to use as the breakingPoint */
-      require('@mindvalley/design-system/dist/tailwind/plugins/typography.js')({ breakingPoint: 'tablet'}),
+      require('@mindvalley/design-system/dist/tailwind/plugins/typography.js')({ breakingPoint: 'md'}),
     ],
     ...
   }
@@ -436,13 +436,11 @@ You'll need to make the plugin aware of the `breakingPoint` boundary between the
     }
   ```
 
-You can find the full list of typography definations here 👉 [Figma typography](https://www.figma.com/file/Gmdp0kAAYsmBgCthFjGkpY/MV-Core?node-id=5593%3A26473&t=3PPGng5xmhzaFyRe-0)
+You can find the full list of typography definitions here 👉 [Figma typography](https://www.figma.com/file/Gmdp0kAAYsmBgCthFjGkpY/MV-Core?node-id=5593%3A26473&t=3PPGng5xmhzaFyRe-0)
 
 ## ©️ Icons
 
-This guide provides detailed instructions on how to integrate and use icons within your applications.
-
-Our icon collection is meticulously organized into three distinct categories, each serving a unique purpose within your applications. Here's a breakdown of these categories:
+Icons are organized into three categories:
 
 1. **Brand Icons**: These icons are specific to branding and include logos, trademarks, etc.
 2. **UI Icons**: Designed to enhance user interface aesthetics and usability.
@@ -451,12 +449,12 @@ Our icon collection is meticulously organized into three distinct categories, ea
 All icons are available as single icons or as combined sets in an svg sprite.
 
 > A sprite is a single image file which contains multiple graphics. By using sprites, you can load multiple icons with a single HTTP request.
-
+>
 > See the [Working Figma file for icons](https://www.figma.com/file/0b2swzflgtIMoELPgj4TVI/MV-Icons?node-id=203:3)
 
 Accessing the icons for your project is a straightforward process. We provide a single npm package with different ways of accessing icons.
 
-#### Installing the icons
+### Installing the icons
 
 You will have to have the mindvalley design system npm package installed to access the icons. See the [installation guide](#using-npm-or-yarn).
 
@@ -515,10 +513,10 @@ For example:
 
 For a detailed overview of the available icons in each category and brand, refer to the following:
 
-1. [B2B Icons](icons/brands/b2b/ui-icons.md)
-2. [Mindvalley brand Icons](icons/brands/mindvalley/icons/brand-icons.md)
-3. [Mindvalley categories Icons](icons/brands/mindvalley/icons/categories.md)
-4. [Mindvalley UI Icons](icons/brands/mindvalley/icons/ui-icons.md)
+1. [B2B UI Icons](brands/b2b/icons/ui-icons.md)
+2. [Mindvalley Brand Icons](brands/mindvalley/icons/brand-icons.md)
+3. [Mindvalley Category Icons](brands/mindvalley/icons/categories.md)
+4. [Mindvalley UI Icons](brands/mindvalley/icons/ui-icons.md)
 
 b) **Legacy Method (a) (To be deprecated) - category-specific directories with no brand**
 
@@ -558,9 +556,9 @@ And here are the path conventions to follow:
 
 For a detailed overview of the available icons in each category, refer to the following:
 
-1. [Mindvalley Brand Icons](icons/brands/mindvalley/icons/brand-icons.md)
-2. [Mindvalley UI Icons](icons/brands/mindvalley/icons/ui-icons.md)
-3. [Mindvalley Categories Icons](icons/brands/mindvalley/icons/categories.md)
+1. [Brand Icons](icons/brand-icons.md)
+2. [UI Icons](icons/ui-icons.md)
+3. [Category Icons](icons/categories.md)
 
 b) **Legacy Method (b) (To be deprecated) - combined directory/sprite**
 
@@ -597,7 +595,7 @@ Below are instructions for integrating icons in different types of projects incl
 
 ##### With Vue.js
 
-There are plenty of JS libries to use here but the recommended one is [vue-svg-sprite](https://github.com/thierrymichel/vue-svg-sprite).
+There are plenty of JS libraries to use here but the recommended one is [vue-svg-sprite](https://github.com/thierrymichel/vue-svg-sprite).
 
 ##### Using vue-svg-sprite
 
@@ -728,11 +726,11 @@ And finally use the sprite using the icon id.
 <%= svg_icon "chevron-right-filled", class: "w-5 h-5 fill-current inline-block" %>
 ```
 
-> Note: You can alternatively utilize the [SvgSprite](https://hexdocs.pm/svg_sprite/SvgSprite.html) library which might be a suitable method when you are accessing the svg files via category-specific directories recommended style the icons from the package.
+> Note: You can also use the [SvgSprite](https://hexdocs.pm/svg_sprite/SvgSprite.html) library, which works well with the category-specific directory structure.
 
 💡 Tip
 
-Icon name/id and previews of the svg file you want to use are linked in the [Accessing the icons](#accessing-the-icons) sections. Here is is sample preview of brand icons:
+Icon names and previews are in the [Accessing the icons](#accessing-the-icons) section. Sample preview:
 
 ![icons previews](./icon-preview-names-ids.png)