diff --git a/.github/workflows/generate-mistica-tokens.yml b/.github/workflows/generate-mistica-tokens.yml
index 28756e96..d45a3194 100644
--- a/.github/workflows/generate-mistica-tokens.yml
+++ b/.github/workflows/generate-mistica-tokens.yml
@@ -2,30 +2,40 @@ name: Generate Mistica Tokens
 
 on:
   workflow_dispatch:
-    inputs:
-      ref:
-        description: 'mistica-design repo changeset or branch'
-        required: false
-        default: 'production'
+
+concurrency:
+    group: ci-${{ github.ref }}
+    cancel-in-progress: true
 
 jobs:
-  get-design-tokens:
-    name: Get Design Tokens
-    runs-on: self-hosted-novum-mac
+  build:
+    name: Build & generate tokens
+    runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+
+    - name: Install dependencies
+      run: npm install
+      working-directory: scripts/mistica-skin-generator
 
-      - name: Generate Skin
-        run: make skin ref=${{github.event.inputs.ref}}
+    - name: Generate tokens
+      run: npm run generate
+      working-directory: scripts/mistica-skin-generator
 
-      - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v4
-        with:
-          token: ${{ secrets.NOVUM_PRIVATE_REPOS }}
-          add-paths: 'Sources/MisticaCommon/*'
-          commit-message: 'feat(skin): update design tokens'
-          title: 'feat(skin): update design tokens from mistica-design branch: ${{github.event.inputs.ref}}'
-          branch: 'import-design-tokens'
-          team-reviewers: 'ios'
-          delete-branch: true
+    - name: Create Pull Request
+      id: create_pr
+      uses: peter-evans/create-pull-request@v6
+      with:
+        token: ${{ secrets.NOVUM_PRIVATE_REPOS }}
+        add-paths: 'Sources/MisticaCommon/*'
+        commit-message: 'feat(skin): update design tokens'
+        title: 'feat(skin): update design tokens from mistica-design'
+        branch: 'import-design-tokens'
+        team-reviewers: 'ios'
+        delete-branch: true
+    - name: Show URL in summary annotation
+      run: echo '::notice::Pull Request generated ${{ steps.create_pr.outputs.pull-request-url }}'
\ No newline at end of file
diff --git a/.github/workflows/mistica-skin-generator-tests.yml b/.github/workflows/mistica-skin-generator-tests.yml
new file mode 100644
index 00000000..b9b43fa4
--- /dev/null
+++ b/.github/workflows/mistica-skin-generator-tests.yml
@@ -0,0 +1,30 @@
+name: Mistica skin generator tests
+
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - 'scripts/mistica-skin-generator/**'
+
+concurrency:
+    group: ci-${{ github.ref }}
+    cancel-in-progress: true
+
+jobs:
+  build:
+    name: Build & execute tests
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v4
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v4
+
+    - name: Install dependencies
+      run: npm install
+      working-directory: scripts/mistica-skin-generator
+
+    - name: Run tests
+      run: npm run test
+      working-directory: scripts/mistica-skin-generator
diff --git a/.gitignore b/.gitignore
index db5102e2..074bb094 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,3 +50,8 @@ fastlane/test_output
 # ci
 .ruby-version
 vendor/
+
+# Mistica skin generator
+scripts/mistica-skin-generator/.vscode
+scripts/mistica-skin-generator/node_modules
+scripts/mistica-skin-generator/package-lock.json
diff --git a/.hygen.js b/.hygen.js
deleted file mode 100644
index fe969d84..00000000
--- a/.hygen.js
+++ /dev/null
@@ -1,30 +0,0 @@
-const fs = require('fs')
-
-module.exports = {
-  helpers: {
-    colorFromString: (s,className) => {
-        if (s.includes("rgba")) {
-          let splitted = s.replace("rgba({","").replace("}, ",",").replace(")","").replace(" ","").split(",")
-          let colorName = splitted[0]
-          let alphaComponent = splitted[1]
-          return className + "Colors." + colorName + ".withAlphaComponent(" + alphaComponent + ")"
-        } else {
-          let colorName = s.replace("{","").replace("}","")
-          return className + "Colors." + colorName
-        }
-    },
-    replaceDashes: (string) => {
-      return string.replace("-","_")
-    },
-    params: (json) => {
-      let jsonData = {}
-      if (json) {
-        let rawdata = fs.readFileSync(json);
-        jsonData = JSON.parse(rawdata);
-      }
-      return {
-        jsonData
-      }
-    },
-  },
-}
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 00000000..9d9323cc
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,6 @@
+{
+    "recommendations": [
+        "esbenp.prettier-vscode",
+        "dbaeumer.vscode-eslint"
+    ]
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..4c0c56ce
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+    "eslint.workingDirectories": [
+        "scripts/mistica-skin-generator"
+    ]
+}
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index b8f011c4..0bd0da40 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -113,7 +113,7 @@ In order to automatise this, we can execute this [GitHub action](.github/.workfl
 You can also execute it manually using the actions defined in the [Makefile](Makefile).
 Example:
 ```bash
-make skin ref=production
+make skin
 ```
 
 ## Testing
diff --git a/Makefile b/Makefile
index 91914cea..f843fa37 100644
--- a/Makefile
+++ b/Makefile
@@ -1,4 +1,4 @@
-.PHONY: help setup format test simulator archive export clean skinGeneratorSetup colorPaletteGeneration cornerRadiusGeneration fontWeightsGeneration fontSizesGeneration skin
+.PHONY: help setup format test simulator archive export clean  skin
 
 # Simulator
 OS_VERSION := 17.2
@@ -22,38 +22,14 @@ BUILD_PATH := $(ROOT_DIR)/build
 EXPORTED_OPTIONS_PATH := $(ROOT_DIR)/enterprise.plist
 ARCHIVE_PATH := $(TMP_ROOT_PATH)/ios.xcarchive
 XCODEBUILD := set -o pipefail && xcodebuild
-MISTICA_DESIGN_PATH := $(ROOT_DIR)/tmp/mistica-design
 MISTICA_DESIGN_TOKENS_PATH := /tokens
 MISTICA_DESIGN_URL := https://raw.githubusercontent.com/Telefonica/mistica-design/$(ref)/tokens
 
-#Skin tokens config
-#These variables will be used to get the json file from mistica design repository and later to create the appropiate file and class/struct names. If a new brand/skin needs to be added, it should be added here. All of the brand names should be in lowercase.
-Movistar:= movistar
-Blau:= blau
-O2:= o2
-O2New:= o2-new
-Vivo:= vivo
-VivoNew:= vivo-new
-Telefonica:= telefonica
-TU:= tu
-BRAND_FILES:= $(Movistar) $(Blau) $(O2) $(O2New) $(Vivo) $(VivoNew) $(Telefonica) $(TU) # List of all the brand names that will be procesed.
-
 # Xcode
 ifneq ($(origin GITHUB_ACTION),undefined)
 export DEVELOPER_DIR=/Applications/Xcode-15.2.app/Contents/Developer
 endif
 
-# TokenGenerator func to be used in all token generators.
-define tokenGenerator
-	@echo "Generating Mistica $(2) interfaces"
-	hygen $(1) Mistica$(2) --json $(MISTICA_DESIGN_PATH)$(MISTICA_DESIGN_TOKENS_PATH)/$(Movistar).json
-
-	for key in $(BRAND_FILES) ; do \
-		echo "Generating $$key $(2) palette"; \
-		hygen $(1) Brand$(2) --name $$key --json $(MISTICA_DESIGN_PATH)$(MISTICA_DESIGN_TOKENS_PATH)/$$key.json ; \
-	done
-endef
-
 # Targets
 help:
 	@echo "Please use \`make <target>' where <target> is one of"
@@ -61,14 +37,9 @@ help:
 	@echo "  format    				to execute swiftformat in Sources directory"
 	@echo "  test     				to build and test the main target"
 	@echo "  simulator				to install the simulator for testing"
-	@echo "  export				to export the archived project as an .ipa"
+	@echo "  export					to export the archived project as an .ipa"
 	@echo "  clean    				to remove all temporal files"
-	@echo "  skinGeneratorSetup    		to setup skin dependencies"
-	@echo "  colorPaletteGeneration ref=<ref>  	to setup and regenerate MisticaColors with new palettes from mistica design where <ref> is the branch from mistica-design repository from where we want to generate the tokens"
-	@echo "  cornerRadiusGeneration ref=<ref> 	to setup and regenerate MisticaCornerRadius with new palettes from mistica design where <ref> is the branch from mistica-design repository from where we want to generate the tokens"
-	@echo "  fontWeightsGeneration ref=<ref> 	to setup and regenerate MisticaFontWeights with new palettes from mistica design where <ref> is the branch from mistica-design repository from where we want to generate the tokens"
-	@echo "  fontSizesGeneration ref=<ref> 	to setup and regenerate MisticaFontSizes with new palettes from mistica design where <ref> is the branch from mistica-design repository from where we want to generate the tokens"
-	@echo "  skin ref=<ref>			to setup, regenerate and format tokens from mistica design where <ref> is the branch from mistica-design repository from where we want to generate the tokens"
+	@echo "  skin					to regenerate and format tokens from mistica design"
 
 trace:
 	@echo "Current xcodebuild configuration"
@@ -85,9 +56,9 @@ setup: trace
 	@brew ls xcbeautify --versions || brew install xcbeautify
 
 skinGeneratorSetup:
-	@echo "Installing tokens generators dependencies"
+	@echo "Installing tokens generator dependencies"
 	@brew ls node --versions || brew install node
-	@brew ls hygen --versions || (brew tap jondot/tap && brew install hygen)
+	cd scripts/mistica-skin-generator && npm install
 
 format:
 	Scripts/swiftformat .
@@ -131,25 +102,8 @@ export: clean setup
 
 	@rm -rf "$(TMP_ROOT_PATH)"
 
-getMisticaDesignTokenFiles:
-	@echo "Obtaining mistica token files"
-	for key in $(BRAND_FILES) ; do \
-		curl -o $(MISTICA_DESIGN_PATH)$(MISTICA_DESIGN_TOKENS_PATH)/$$key.json --create-dirs $(MISTICA_DESIGN_URL)/$$key.json ; \
-	done
-
-colorPaletteGeneration: skinGeneratorSetup getMisticaDesignTokenFiles
-	$(call tokenGenerator,ColorTokenGenerator,Colors)
-
-cornerRadiusGeneration: skinGeneratorSetup getMisticaDesignTokenFiles
-	$(call tokenGenerator,CornerRadiusTokenGenerator,CornerRadius)
-
-fontWeightsGeneration: skinGeneratorSetup getMisticaDesignTokenFiles
-	$(call tokenGenerator,FontWeightsTokenGenerator,FontWeights)
-
-fontSizesGeneration: skinGeneratorSetup getMisticaDesignTokenFiles
-	$(call tokenGenerator,FontSizesTokenGenerator,FontSizes)
-
-removeMisticaDesignTokenFolder:
-	rm -rf $(MISTICA_DESIGN_PATH)
+tokensGeneration:
+	@echo "Executing tokens generation tool..."
+	cd scripts/mistica-skin-generator && npm run generate
 
-skin: colorPaletteGeneration cornerRadiusGeneration fontWeightsGeneration fontSizesGeneration removeMisticaDesignTokenFolder format
+skin:  tokensGeneration format
diff --git a/Sources/MisticaCommon/Colors/ColorToolkit+UIColor.swift b/Sources/MisticaCommon/Colors/ColorToolkit+UIColor.swift
index 33bcbe75..dfb20c27 100644
--- a/Sources/MisticaCommon/Colors/ColorToolkit+UIColor.swift
+++ b/Sources/MisticaCommon/Colors/ColorToolkit+UIColor.swift
@@ -644,12 +644,3 @@ public extension UIColor {
         MisticaConfig.currentColors.tagBackgroundError
     }
 }
-
-public extension BrandStyle {
-    var preferredStatusBarStyle: UIStatusBarStyle {
-        switch self {
-        case .movistar, .vivo, .o2, .o2New, .blau, .custom, .vivoNew, .tu, .telefonica:
-            return .lightContent
-        }
-    }
-}
diff --git a/Sources/MisticaCommon/Extensions/BrandStyle+UIStatusBarStyle.swift b/Sources/MisticaCommon/Extensions/BrandStyle+UIStatusBarStyle.swift
new file mode 100644
index 00000000..085ad3ec
--- /dev/null
+++ b/Sources/MisticaCommon/Extensions/BrandStyle+UIStatusBarStyle.swift
@@ -0,0 +1,18 @@
+//
+//  BrandStyle+UIStatusBarStyle.swift
+//
+//  Made with ❤️ by Novum
+//
+//  Copyright © Telefonica. All rights reserved.
+//
+
+import UIKit
+
+public extension BrandStyle {
+    var preferredStatusBarStyle: UIStatusBarStyle {
+        switch self {
+        case .movistar, .vivo, .o2, .o2New, .blau, .custom, .vivoNew, .tu, .telefonica:
+            return .lightContent
+        }
+    }
+}
diff --git a/_templates/ColorTokenGenerator/BrandColors/BrandColorsAction.ejs.t b/_templates/ColorTokenGenerator/BrandColors/BrandColorsAction.ejs.t
deleted file mode 100644
index aad959c0..00000000
--- a/_templates/ColorTokenGenerator/BrandColors/BrandColorsAction.ejs.t
+++ /dev/null
@@ -1,48 +0,0 @@
----
-to: Sources/MisticaCommon/Colors/<%= h.inflection.camelize(h.replaceDashes(name)) %>ColorPalette.swift
-force: true
----
-<%# 
-to: The path where the file will be create
-force: If the file can be overwritten or not
--%>
-
-<%# We need to capitalize the brand name we receive. To do this we used the helper object provided by hygen. -%>
-<%_
-let className = h.inflection.camelize(h.replaceDashes(name))
-let jsonObject = h.params(json)
--%>
-
-// Generated using Make
-// DO NOT EDIT
-
-import UIKit
-
-struct <%= className %>Colors: MisticaColors {
-	static let palette = <%= className %>ColorPalette()
-
-	<%_ Object.keys(jsonObject.jsonData.light).forEach(function(key) { -%>
-	    <%_ if (jsonObject.jsonData.light[key].type === "color") { -%>
-			<%_ let lightColorString = jsonObject.jsonData.light[key].value -%>
-			<%_ let darkColorString = jsonObject.jsonData.dark[key].value -%>
-			<%_ var lightColor = h.colorFromString(lightColorString, className) -%>
-			<%_ var darkColor = h.colorFromString(darkColorString, className) -%>
-			<%_ if (!!lightColor & !!darkColor) { -%>
-				<%_ if (lightColor == darkColor) { -%>
-		let <%= key %> = <%= lightColor %>
-				<%_ } else { -%>
-		let <%= key %> = <%= lightColor %> | <%= darkColor %>
-				<%_ } -%>
-			<%_ } -%>
-		<%_ } -%>	
-	<%_ }); -%>
-}
-
-public struct <%= className %>ColorPalette {
-    public init() {}
-    <%_ Object.keys(jsonObject.jsonData.global.palette).forEach(function(key) { -%>
-        <%_ if (jsonObject.jsonData.global.palette[key].type === "color") { -%>
-    public let <%= key %> = UIColor(hex:"<%= jsonObject.jsonData.global.palette[key].value %>")!
-        <%_ } -%>
-    <%_ }); -%>
-}
diff --git a/_templates/ColorTokenGenerator/MisticaColors/MisticaColorsAction.ejs.t b/_templates/ColorTokenGenerator/MisticaColors/MisticaColorsAction.ejs.t
deleted file mode 100644
index 300da36a..00000000
--- a/_templates/ColorTokenGenerator/MisticaColors/MisticaColorsAction.ejs.t
+++ /dev/null
@@ -1,25 +0,0 @@
----
-to: Sources/MisticaCommon/Colors/MisticaColors.swift
-force: true
----
-<%# 
-to: The path where the file will be create
-force: If the file can be overwritten or not
--%>
-
-<%_
-let jsonObject = h.params(json)
--%>
-
-// Generated using Make
-// DO NOT EDIT
-
-import UIKit
-
-public protocol MisticaColors {
-<% Object.keys(jsonObject.jsonData.light).forEach(function(key) { -%>
-        <%_ if (jsonObject.jsonData.light[key].type === "color") { -%>
-            var <%= key %>: UIColor { get }
-        <%_ } -%>
-<% }); -%>
-}
diff --git a/_templates/ColorTokenGenerator/MisticaColors/ToolkitColorsAction.ejs.t b/_templates/ColorTokenGenerator/MisticaColors/ToolkitColorsAction.ejs.t
deleted file mode 100644
index 106780e0..00000000
--- a/_templates/ColorTokenGenerator/MisticaColors/ToolkitColorsAction.ejs.t
+++ /dev/null
@@ -1,33 +0,0 @@
----
-to: Sources/MisticaCommon/Colors/ColorToolkit+Color.swift
-force: true
----
-<%#
-to: The path where the file will be create
-force: If the file can be overwritten or not
--%>
-
-<%_
-let jsonObject = h.params(json)
--%>
-
-// Generated using Make
-// DO NOT EDIT
-
-import SwiftUI
-
-public extension Color {
-<% Object.keys(jsonObject.jsonData.light).forEach(function(key) { -%>
-    <%_ if (jsonObject.jsonData.light[key].type === "color") { -%>
-        static var <%= key %>: Color {
-            MisticaConfig.currentColors.<%= key %>.color
-        }
-    <%_ } -%>
-<% }); -%>
-}
-
-private extension UIColor {
-    var color: Color {
-        Color(self)
-    }
-}
diff --git a/_templates/ColorTokenGenerator/MisticaColors/UIToolkitColorsAction.ejs.t b/_templates/ColorTokenGenerator/MisticaColors/UIToolkitColorsAction.ejs.t
deleted file mode 100644
index 587a8303..00000000
--- a/_templates/ColorTokenGenerator/MisticaColors/UIToolkitColorsAction.ejs.t
+++ /dev/null
@@ -1,37 +0,0 @@
----
-to: Sources/MisticaCommon/Colors/ColorToolkit+UIColor.swift
-force: true
----
-<%#
-to: The path where the file will be create
-force: If the file can be overwritten or not
--%>
-
-<%_
-let jsonObject = h.params(json)
--%>
-
-// Generated using Make
-// DO NOT EDIT
-
-import UIKit
-
-public extension UIColor {
-<% Object.keys(jsonObject.jsonData.light).forEach(function(key) { -%>
-    <%_ if (jsonObject.jsonData.light[key].type === "color") { -%>
-        @objc(<%= key %>Color)
-        static var <%= key %>: UIColor {
-            MisticaConfig.currentColors.<%= key %>
-        }
-    <%_ } -%>
-<% }); -%>
-}
-
-public extension BrandStyle {
-    var preferredStatusBarStyle: UIStatusBarStyle {
-        switch self {
-        case .movistar, .vivo, .o2, .o2New, .blau, .custom, .vivoNew, .telefonica:
-            return .lightContent
-        }
-    }
-}
diff --git a/_templates/CornerRadiusTokenGenerator/BrandCornerRadius/BrandCornerRadiusAction.ejs.t b/_templates/CornerRadiusTokenGenerator/BrandCornerRadius/BrandCornerRadiusAction.ejs.t
deleted file mode 100644
index 9350bde3..00000000
--- a/_templates/CornerRadiusTokenGenerator/BrandCornerRadius/BrandCornerRadiusAction.ejs.t
+++ /dev/null
@@ -1,30 +0,0 @@
----
-to: Sources/MisticaCommon/Radius/Brands/<%= h.inflection.camelize(h.replaceDashes(name)) %>CornerRadius.swift
-force: true
----
-<%# 
-to: The path where the file will be create
-force: If the file can be overwritten or not
--%>
-
-<%# We need to capitalize the brand name we receive. To do this we used the helper object provided by hygen. -%>
-<%_
-let className = h.inflection.camelize(h.replaceDashes(name))
-let jsonObject = h.params(json)
--%>
-
-// Generated using Make
-// DO NOT EDIT
-
-import Foundation
-
-struct <%= className %>CornerRadius: MisticaCornerRadius {
-	<%_ Object.keys(jsonObject.jsonData.radius).forEach(function(key) { -%>
-		<%_ let value = jsonObject.jsonData.radius[key].value -%>
-		<%_ if (value == "circle" || value == "999") { -%>
-	var <%= key %>: CGFloat = MisticaRadiusConstants.roundedRadius
-		<%_ } else { -%>
-	var <%= key %>: CGFloat = <%= value %>
-		<%_ } -%>
-	<%_ }); -%>
-}
diff --git a/_templates/CornerRadiusTokenGenerator/MisticaCornerRadius/MisticaCornerRadiusAction.ejs.t b/_templates/CornerRadiusTokenGenerator/MisticaCornerRadius/MisticaCornerRadiusAction.ejs.t
deleted file mode 100644
index 02bb1677..00000000
--- a/_templates/CornerRadiusTokenGenerator/MisticaCornerRadius/MisticaCornerRadiusAction.ejs.t
+++ /dev/null
@@ -1,27 +0,0 @@
----
-to: Sources/MisticaCommon/Radius/MisticaCornerRadius.swift
-force: true
----
-<%# 
-to: The path where the file will be create
-force: If the file can be overwritten or not
--%>
-
-<%_ 
-let jsonObject = h.params(json)
--%>
-
-// Generated using Make
-// DO NOT EDIT
-
-import Foundation
-
-public enum MisticaRadiusConstants {
-    static let roundedRadius: CGFloat = 999.0
-}
-
-public protocol MisticaCornerRadius {
-<%_ Object.keys(jsonObject.jsonData.radius).forEach(function(key) { -%>
-  var <%= key %>: CGFloat { get }
-<%_ }); -%>
-}
diff --git a/_templates/FontSizesTokenGenerator/BrandFontSizes/BrandFontSizesAction.ejs.t b/_templates/FontSizesTokenGenerator/BrandFontSizes/BrandFontSizesAction.ejs.t
deleted file mode 100644
index b448d63d..00000000
--- a/_templates/FontSizesTokenGenerator/BrandFontSizes/BrandFontSizesAction.ejs.t
+++ /dev/null
@@ -1,26 +0,0 @@
----
-to: Sources/MisticaCommon/Fonts/Brands/<%= h.inflection.camelize(h.replaceDashes(name)) %>FontSizes.swift
-force: true
----
-<%#
-to: The path where the file will be create
-force: If the file can be overwritten or not
--%>
-
-<%# We need to capitalize the brand name we receive. To do this we used the helper object provided by hygen. -%>
-<%_
-let className = h.inflection.camelize(h.replaceDashes(name))
-let jsonObject = h.params(json)
--%>
-
-// Generated using Make
-// DO NOT EDIT
-
-import Foundation
-
-struct <%= className %>FontSizes: MisticaFontSizes {
-  <%_ Object.keys(jsonObject.jsonData.text.size).forEach(function(key) { -%>
-    <%_ let value = jsonObject.jsonData.text.size[key].value.mobile -%>
-    public var <%= key %>: CGFloat = <%= value %>
-  <%_ }); -%>
-}
diff --git a/_templates/FontSizesTokenGenerator/MisticaFontSizes/MisticaFontSizesAction.ejs.t b/_templates/FontSizesTokenGenerator/MisticaFontSizes/MisticaFontSizesAction.ejs.t
deleted file mode 100644
index d33622e8..00000000
--- a/_templates/FontSizesTokenGenerator/MisticaFontSizes/MisticaFontSizesAction.ejs.t
+++ /dev/null
@@ -1,24 +0,0 @@
----
-to: Sources/MisticaCommon/Fonts/MisticaFontSizes.swift
-force: true
----
-<%#
-to: The path where the file will be create
-force: If the file can be overwritten or not
--%>
-
-<%_
-let jsonObject = h.params(json)
--%>
-
-// Generated using Make
-// DO NOT EDIT
-
-import UIKit
-
-public protocol MisticaFontSizes {
-<%_ Object.keys(jsonObject.jsonData.text.size).forEach(function(key) { -%>
-  <%# We use the helper object to use some additional functions to fit the pattern we need. -%>
-  var <%= key %>: CGFloat { get }
-<%_ }); -%>
-}
diff --git a/_templates/FontWeightsTokenGenerator/BrandFontWeights/BrandFontWeightsAction.ejs.t b/_templates/FontWeightsTokenGenerator/BrandFontWeights/BrandFontWeightsAction.ejs.t
deleted file mode 100644
index 553d111a..00000000
--- a/_templates/FontWeightsTokenGenerator/BrandFontWeights/BrandFontWeightsAction.ejs.t
+++ /dev/null
@@ -1,26 +0,0 @@
----
-to: Sources/MisticaCommon/Fonts/Brands/<%= h.inflection.camelize(h.replaceDashes(name)) %>FontWeights.swift
-force: true
----
-<%# 
-to: The path where the file will be create
-force: If the file can be overwritten or not
--%>
-
-<%# We need to capitalize the brand name we receive. To do this we used the helper object provided by hygen. -%>
-<%_
-let className = h.inflection.camelize(h.replaceDashes(name))
-let jsonObject = h.params(json)
--%>
-
-// Generated using Make
-// DO NOT EDIT
-
-import Foundation
-
-struct <%= className %>FontWeights: MisticaFontWeights {
-  <%_ Object.keys(jsonObject.jsonData.text.weight).forEach(function(key) { -%>
-    <%_ let value = jsonObject.jsonData.text.weight[key].value -%>
-    public var <%= key %>: MisticaFontWeightType = .<%= value %>
-  <%_ }); -%>
-}
diff --git a/_templates/FontWeightsTokenGenerator/MisticaFontWeights/MisticaFontWeightsAction.ejs.t b/_templates/FontWeightsTokenGenerator/MisticaFontWeights/MisticaFontWeightsAction.ejs.t
deleted file mode 100644
index 295b7c79..00000000
--- a/_templates/FontWeightsTokenGenerator/MisticaFontWeights/MisticaFontWeightsAction.ejs.t
+++ /dev/null
@@ -1,24 +0,0 @@
----
-to: Sources/MisticaCommon/Fonts/MisticaFontWeights.swift
-force: true
----
-<%# 
-to: The path where the file will be create
-force: If the file can be overwritten or not
--%>
-
-<%_ 
-let jsonObject = h.params(json)
--%>
-
-// Generated using Make
-// DO NOT EDIT
-
-import UIKit
-
-public protocol MisticaFontWeights {
-<%_ Object.keys(jsonObject.jsonData.text.weight).forEach(function(key) { -%>
-  <%# We use the helper object to use some additional functions to fit the pattern we need. -%>
-  var <%= key %>: MisticaFontWeightType { get }
-<%_ }); -%>
-}
diff --git a/scripts/mistica-skin-generator/.eslintrc.yml b/scripts/mistica-skin-generator/.eslintrc.yml
new file mode 100644
index 00000000..25930130
--- /dev/null
+++ b/scripts/mistica-skin-generator/.eslintrc.yml
@@ -0,0 +1,13 @@
+root: true
+env:
+    node: true
+    es6: true
+extends:
+    - '@telefonica/eslint-config'
+settings:
+    react:
+        version: '18.0.0' # although this project doesn't use react, we need to set this to avoid warnings
+rules:
+    import/extensions:
+        - error
+        - js: always
diff --git a/scripts/mistica-skin-generator/.prettierignore b/scripts/mistica-skin-generator/.prettierignore
new file mode 100644
index 00000000..cce02790
--- /dev/null
+++ b/scripts/mistica-skin-generator/.prettierignore
@@ -0,0 +1,2 @@
+package.json
+package-lock.json
diff --git a/scripts/mistica-skin-generator/README.md b/scripts/mistica-skin-generator/README.md
new file mode 100644
index 00000000..9123a8a0
--- /dev/null
+++ b/scripts/mistica-skin-generator/README.md
@@ -0,0 +1,54 @@
+# Mistica skin generator
+
+This utility is designed to generate code using Node.js. It offers two main commands for its use:
+`npm run test` to run the tests and `npm run generate` to execute the code generation tool.
+
+## Requirements
+
+- Node.js
+- npm
+
+## Installation
+
+To use this utility, execute:
+
+```bash
+npm install
+```
+
+## Token generation
+
+Execute:
+
+```bash
+npm run generate
+```
+
+It will get the tokens from `mistica-design` repository and generate the Swift code inside the `mistica-ios`
+project.
+
+## Testing tool
+
+Execute:
+
+```bash
+npm run test
+```
+
+or
+
+```bash
+npm run test:watch
+```
+
+It will check if the tool works properly executing its tests. Useful to contribute here.
+
+## Troubleshooting
+
+### I want to add a new brand
+
+To add a new brand, just add a new element to [`BRANDS`](index.js).
+
+### I want to get tokens from a different mistica-design branch
+
+To get them, just change the [`BRANCH` value](index.js).
diff --git a/scripts/mistica-skin-generator/generators/colors/__tests__/__snapshots__/brand-colors-generator.test.js.snap b/scripts/mistica-skin-generator/generators/colors/__tests__/__snapshots__/brand-colors-generator.test.js.snap
new file mode 100644
index 00000000..2a17bbaf
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/__tests__/__snapshots__/brand-colors-generator.test.js.snap
@@ -0,0 +1,349 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generateBrandColors 1`] = `
+"
+// Generated using Make
+// DO NOT EDIT
+
+import UIKit
+
+struct Brand1Colors: MisticaColors {
+    static let palette = Brand1ColorPalette()
+
+     let background = Brand1Colors.palette.white | Brand1Colors.palette.darkModeBlack
+
+     let backgroundAlternative = Brand1Colors.palette.grey20 | Brand1Colors.palette.darkModeBlack
+
+     let backgroundBrand = MisticaColor.gradient(MisticaGradient(
+        colors:
+        [
+            Brand1Colors.palette.darkBlue | Brand1Colors.palette.darkModeBlack,
+            Brand1Colors.palette.beyondBlue | Brand1Colors.palette.darkModeBlack,
+            Brand1Colors.palette.beyondBlue45 | Brand1Colors.palette.darkModeBlack
+        ],
+        stops: [0,0.64,1],
+        angle: 180
+    ))
+
+     let backgroundBrandSecondary = Brand1Colors.palette.beyondBlue | Brand1Colors.palette.darkModeBlack
+
+     let backgroundContainer = Brand1Colors.palette.white | Brand1Colors.palette.darkModeGrey
+
+     let backgroundContainerError = Brand1Colors.palette.o2Red10 | Brand1Colors.palette.darkModeGrey
+
+     let backgroundContainerHover = Brand1Colors.palette.darkModeBlack.withAlphaComponent(0.03) | Brand1Colors.palette.white.withAlphaComponent(0.03)
+
+     let backgroundContainerPressed = Brand1Colors.palette.darkModeBlack.withAlphaComponent(0.05) | Brand1Colors.palette.white.withAlphaComponent(0.05)
+
+     let backgroundContainerBrand = MisticaColor.gradient(MisticaGradient(
+        colors:
+        [
+            Brand1Colors.palette.darkBlue | Brand1Colors.palette.darkModeGrey,
+            Brand1Colors.palette.beyondBlue | Brand1Colors.palette.darkModeGrey,
+            Brand1Colors.palette.beyondBlue45 | Brand1Colors.palette.darkModeGrey
+        ],
+        stops: [0,0.64,1],
+        angle: 180
+    ))
+
+     let backgroundContainerBrandHover = Brand1Colors.palette.darkModeBlack.withAlphaComponent(0.2) | Brand1Colors.palette.white.withAlphaComponent(0.03)
+
+     let backgroundContainerBrandPressed = Brand1Colors.palette.darkModeBlack.withAlphaComponent(0.4) | Brand1Colors.palette.white.withAlphaComponent(0.05)
+
+     let backgroundContainerBrandOverInverse = Brand1Colors.palette.beyondBlue70 | Brand1Colors.palette.darkModeGrey
+
+     let backgroundContainerAlternative = Brand1Colors.palette.grey20 | Brand1Colors.palette.darkModeGrey
+
+     let backgroundOverlay = Brand1Colors.palette.black.withAlphaComponent(0.6) | Brand1Colors.palette.darkModeGrey.withAlphaComponent(0.8)
+
+     let backgroundSkeleton = Brand1Colors.palette.grey30 | Brand1Colors.palette.darkModeGrey6
+
+     let backgroundSkeletonInverse = Brand1Colors.palette.beyondBlue70 | Brand1Colors.palette.darkModeGrey6
+
+     let backgroundBrandTop = Brand1Colors.palette.darkBlue | Brand1Colors.palette.darkModeBlack
+
+     let backgroundBrandBottom = Brand1Colors.palette.beyondBlue45 | Brand1Colors.palette.darkModeBlack
+
+     let appBarBackground = Brand1Colors.palette.white | Brand1Colors.palette.darkModeGrey
+
+     let navigationBarBackground = Brand1Colors.palette.darkBlue | Brand1Colors.palette.darkModeBlack
+
+     let skeletonWave = Brand1Colors.palette.grey30 | Brand1Colors.palette.grey80
+
+     let borderLow = Brand1Colors.palette.grey20 | Brand1Colors.palette.darkModeBlack
+
+     let border = Brand1Colors.palette.grey30 | Brand1Colors.palette.darkModeGrey
+
+     let borderHigh = Brand1Colors.palette.grey80 | Brand1Colors.palette.grey45
+
+     let borderSelected = Brand1Colors.palette.beyondBlue | Brand1Colors.palette.beyondBlue30
+
+     let coverBackgroundHover = Brand1Colors.palette.darkModeBlack.withAlphaComponent(0.25)
+
+     let coverBackgroundPressed = Brand1Colors.palette.darkModeBlack.withAlphaComponent(0.35)
+
+     let buttonDangerBackground = Brand1Colors.palette.o2Red60
+
+     let buttonDangerBackgroundSelected = Brand1Colors.palette.o2Red65
+
+     let buttonDangerBackgroundHover = Brand1Colors.palette.o2Red65
+
+     let buttonLinkDangerBackgroundSelected = Brand1Colors.palette.o2Red10 | Brand1Colors.palette.white.withAlphaComponent(0.08)
+
+     let buttonLinkDangerBackgroundInverse = Brand1Colors.palette.white | Brand1Colors.palette.white.withAlphaComponent(0)
+
+     let buttonLinkDangerBackgroundInverseSelected = Brand1Colors.palette.o2Red10 | Brand1Colors.palette.white.withAlphaComponent(0.08)
+
+     let buttonLinkBackgroundSelected = Brand1Colors.palette.beyondBlue10 | Brand1Colors.palette.white.withAlphaComponent(0.08)
+
+     let buttonLinkBackgroundInverseSelected = Brand1Colors.palette.white.withAlphaComponent(0.08)
+
+     let buttonPrimaryBackground = Brand1Colors.palette.beyondBlue | Brand1Colors.palette.darkModeBeyondBlue
+
+     let buttonPrimaryBackgroundInverse = Brand1Colors.palette.white | Brand1Colors.palette.darkModeBeyondBlue
+
+     let buttonPrimaryBackgroundSelected = Brand1Colors.palette.beyondBlue70 | Brand1Colors.palette.beyondBlue55
+
+     let buttonPrimaryBackgroundHover = Brand1Colors.palette.beyondBlue70 | Brand1Colors.palette.beyondBlue55
+
+     let buttonPrimaryBackgroundInverseSelected = Brand1Colors.palette.beyondBlue30 | Brand1Colors.palette.beyondBlue55
+
+     let buttonSecondaryBorder = Brand1Colors.palette.beyondBlue | Brand1Colors.palette.white
+
+     let buttonSecondaryBorderSelected = Brand1Colors.palette.beyondBlue70 | Brand1Colors.palette.white
+
+     let buttonSecondaryBackgroundHover = Brand1Colors.palette.beyondBlue10 | Brand1Colors.palette.white.withAlphaComponent(0.15)
+
+     let buttonSecondaryBackgroundSelected = Brand1Colors.palette.beyondBlue10 | Brand1Colors.palette.white.withAlphaComponent(0.15)
+
+     let buttonSecondaryBorderInverse = Brand1Colors.palette.white
+
+     let buttonSecondaryBorderInverseSelected = Brand1Colors.palette.beyondBlue30 | Brand1Colors.palette.white
+
+     let buttonSecondaryBackgroundInverseHover = Brand1Colors.palette.white.withAlphaComponent(0.15)
+
+     let buttonSecondaryBackgroundInverseSelected = Brand1Colors.palette.white.withAlphaComponent(0.15)
+
+     let textButtonPrimary = Brand1Colors.palette.white
+
+     let textButtonPrimaryInverse = Brand1Colors.palette.beyondBlue | Brand1Colors.palette.white
+
+     let textButtonPrimaryInverseSelected = Brand1Colors.palette.beyondBlue70 | Brand1Colors.palette.white
+
+     let textButtonSecondary = Brand1Colors.palette.beyondBlue | Brand1Colors.palette.grey30
+
+     let textButtonSecondarySelected = Brand1Colors.palette.beyondBlue70 | Brand1Colors.palette.grey30
+
+     let textButtonSecondaryInverse = Brand1Colors.palette.white | Brand1Colors.palette.grey30
+
+     let textButtonSecondaryInverseSelected = Brand1Colors.palette.white | Brand1Colors.palette.grey30
+
+     let textLink = Brand1Colors.palette.beyondBlue | Brand1Colors.palette.beyondBlue40
+
+     let textLinkInverse = Brand1Colors.palette.white | Brand1Colors.palette.beyondBlue40
+
+     let textLinkDanger = Brand1Colors.palette.o2Red65 | Brand1Colors.palette.o2Red45
+
+     let textLinkSnackbar = Brand1Colors.palette.beyondBlue30
+
+     let textActivated = Brand1Colors.palette.beyondBlue | Brand1Colors.palette.beyondBlue30
+
+     let textBrand = Brand1Colors.palette.beyondBlue | Brand1Colors.palette.beyondBlue30
+
+     let control = Brand1Colors.palette.grey45
+
+     let controlActivated = Brand1Colors.palette.beyondBlue | Brand1Colors.palette.darkModeBeyondBlue
+
+     let controlInverse = Brand1Colors.palette.white | Brand1Colors.palette.grey45
+
+     let controlActivatedInverse = Brand1Colors.palette.white | Brand1Colors.palette.darkModeBeyondBlue
+
+     let controlError = Brand1Colors.palette.o2Red60 | Brand1Colors.palette.o2Red45
+
+     let barTrack = Brand1Colors.palette.grey30 | Brand1Colors.palette.darkModeGrey6
+
+     let loadingBar = Brand1Colors.palette.beyondBlue | Brand1Colors.palette.darkModeBeyondBlue
+
+     let loadingBarBackground = Brand1Colors.palette.grey20 | Brand1Colors.palette.darkModeGrey6
+
+     let toggleAndroidInactive = Brand1Colors.palette.grey30 | Brand1Colors.palette.grey20
+
+     let toggleAndroidBackgroundActive = Brand1Colors.palette.beyondBlue15
+
+     let iosControlKnob = Brand1Colors.palette.white | Brand1Colors.palette.grey30
+
+     let divider = Brand1Colors.palette.grey30 | Brand1Colors.palette.white.withAlphaComponent(0.1)
+
+     let dividerInverse = Brand1Colors.palette.white.withAlphaComponent(0.2) | Brand1Colors.palette.white.withAlphaComponent(0.1)
+
+     let navigationBarDivider = Brand1Colors.palette.darkBlue | Brand1Colors.palette.darkModeBlack
+
+     let badge = Brand1Colors.palette.o2Red65
+
+     let feedbackErrorBackground = Brand1Colors.palette.o2Red60
+
+     let feedbackInfoBackground = Brand1Colors.palette.black | Brand1Colors.palette.darkModeGrey6
+
+     let brand = Brand1Colors.palette.beyondBlue | Brand1Colors.palette.beyondBlue30
+
+     let brandHigh = Brand1Colors.palette.beyondBlue70 | Brand1Colors.palette.white.withAlphaComponent(0.05)
+
+     let inverse = Brand1Colors.palette.white | Brand1Colors.palette.grey30
+
+     let neutralHigh = Brand1Colors.palette.black | Brand1Colors.palette.grey30
+
+     let neutralMedium = Brand1Colors.palette.grey60
+
+     let neutralMediumInverse = Brand1Colors.palette.grey60
+
+     let neutralLow = Brand1Colors.palette.grey20 | Brand1Colors.palette.grey80
+
+     let neutralLowAlternative = Brand1Colors.palette.grey30 | Brand1Colors.palette.grey80
+
+     let textPrimary = Brand1Colors.palette.black | Brand1Colors.palette.grey30
+
+     let textPrimaryInverse = Brand1Colors.palette.white | Brand1Colors.palette.grey30
+
+     let textSecondary = Brand1Colors.palette.grey60 | Brand1Colors.palette.grey45
+
+     let textSecondaryInverse = Brand1Colors.palette.beyondBlue10 | Brand1Colors.palette.grey45
+
+     let success = Brand1Colors.palette.o2Green
+
+     let warning = Brand1Colors.palette.o2Orange
+
+     let error = Brand1Colors.palette.o2Red65 | Brand1Colors.palette.o2Red45
+
+     let textError = Brand1Colors.palette.o2Red65 | Brand1Colors.palette.o2Red45
+
+     let textErrorInverse = Brand1Colors.palette.white | Brand1Colors.palette.o2Red45
+
+     let promo = Brand1Colors.palette.o2Pink
+
+     let highlight = Brand1Colors.palette.o2Pink80 | Brand1Colors.palette.o2Pink
+
+     let successLow = Brand1Colors.palette.o2Green10 | Brand1Colors.palette.darkModeGrey6
+
+     let warningLow = Brand1Colors.palette.o2Orange10 | Brand1Colors.palette.darkModeGrey6
+
+     let errorLow = Brand1Colors.palette.o2Red10 | Brand1Colors.palette.darkModeGrey6
+
+     let promoLow = Brand1Colors.palette.o2Pink15 | Brand1Colors.palette.darkModeGrey6
+
+     let brandLow = Brand1Colors.palette.beyondBlue10 | Brand1Colors.palette.darkModeGrey6
+
+     let successHigh = Brand1Colors.palette.o2Green80 | Brand1Colors.palette.o2Green40
+
+     let warningHigh = Brand1Colors.palette.o2Orange75 | Brand1Colors.palette.o2Orange40
+
+     let errorHigh = Brand1Colors.palette.o2Red65 | Brand1Colors.palette.o2Red40
+
+     let promoHigh = Brand1Colors.palette.o2Pink80 | Brand1Colors.palette.o2Pink30
+
+     let successHighInverse = Brand1Colors.palette.o2Green80
+
+     let warningHighInverse = Brand1Colors.palette.o2Orange75
+
+     let errorHighInverse = Brand1Colors.palette.o2Red65
+
+     let promoHighInverse = Brand1Colors.palette.o2Pink80 | Brand1Colors.palette.o2Pink
+
+     let textNavigationBarPrimary = Brand1Colors.palette.white | Brand1Colors.palette.grey30
+
+     let textNavigationBarSecondary = Brand1Colors.palette.beyondBlue30 | Brand1Colors.palette.grey45
+
+     let textNavigationSearchBarHint = Brand1Colors.palette.beyondBlue30 | Brand1Colors.palette.grey45
+
+     let textNavigationSearchBarText = Brand1Colors.palette.white | Brand1Colors.palette.grey30
+
+     let textAppBar = Brand1Colors.palette.grey60 | Brand1Colors.palette.grey45
+
+     let textAppBarSelected = Brand1Colors.palette.beyondBlue | Brand1Colors.palette.beyondBlue40
+
+     let customTabsBackground = Brand1Colors.palette.beyondBlue | Brand1Colors.palette.darkModeBlack
+
+     let tagTextPromo = Brand1Colors.palette.o2Pink80 | Brand1Colors.palette.o2Pink
+
+     let tagTextActive = Brand1Colors.palette.beyondBlue | Brand1Colors.palette.beyondBlue30
+
+     let tagTextInactive = Brand1Colors.palette.grey60 | Brand1Colors.palette.grey40
+
+     let tagTextSuccess = Brand1Colors.palette.o2Green80 | Brand1Colors.palette.o2Green
+
+     let tagTextWarning = Brand1Colors.palette.o2Orange75 | Brand1Colors.palette.o2Orange
+
+     let tagTextError = Brand1Colors.palette.o2Red65 | Brand1Colors.palette.o2Red45
+
+     let tagBackgroundPromo = Brand1Colors.palette.o2Pink15 | Brand1Colors.palette.darkModeGrey6
+
+     let tagBackgroundActive = Brand1Colors.palette.beyondBlue10 | Brand1Colors.palette.darkModeGrey6
+
+     let tagBackgroundInactive = Brand1Colors.palette.grey20 | Brand1Colors.palette.darkModeGrey6
+
+     let tagBackgroundSuccess = Brand1Colors.palette.o2Green10 | Brand1Colors.palette.darkModeGrey6
+
+     let tagBackgroundWarning = Brand1Colors.palette.o2Orange10 | Brand1Colors.palette.darkModeGrey6
+
+     let tagBackgroundError = Brand1Colors.palette.o2Red10 | Brand1Colors.palette.darkModeGrey6
+
+     let cardContentOverlay = MisticaColor.gradient(MisticaGradient(
+        colors:
+        [
+            Brand1Colors.palette.beyondBlue.withAlphaComponent(0) | Brand1Colors.palette.black.withAlphaComponent(0),
+            Brand1Colors.palette.beyondBlue.withAlphaComponent(0.4) | Brand1Colors.palette.black.withAlphaComponent(0.4),
+            Brand1Colors.palette.beyondBlue.withAlphaComponent(1) | Brand1Colors.palette.black.withAlphaComponent(0.7)
+        ],
+        stops: [0,0.3,1],
+        angle: 180
+    ))
+}
+
+public struct Brand1ColorPalette {
+    public init() {}
+    public let beyondBlue = UIColor(hex: "#0050FF")!
+    public let beyondBlue10 = UIColor(hex: "#E5EDFF")!
+    public let beyondBlue15 = UIColor(hex: "#CCDCFF")!
+    public let beyondBlue30 = UIColor(hex: "#80A7FF")!
+    public let beyondBlue40 = UIColor(hex: "#4D84FF")!
+    public let beyondBlue45 = UIColor(hex: "#0A73EB")!
+    public let beyondBlue55 = UIColor(hex: "#0044D9")!
+    public let beyondBlue70 = UIColor(hex: "#0038B2")!
+    public let beyondBlue90 = UIColor(hex: "#001033")!
+    public let darkBlue = UIColor(hex: "#00008C")!
+    public let o2BlueLight = UIColor(hex: "#82DCFA")!
+    public let o2BlueLight30 = UIColor(hex: "#C0EEFD")!
+    public let o2BlueLight35 = UIColor(hex: "#B4EAFC")!
+    public let o2Green = UIColor(hex: "#00DC7D")!
+    public let o2Green10 = UIColor(hex: "#E5FBF2")!
+    public let o2Green40 = UIColor(hex: "#4CE7A4")!
+    public let o2Green80 = UIColor(hex: "#006338")!
+    public let o2Yellow = UIColor(hex: "#FADC00")!
+    public let o2Orange = UIColor(hex: "#FFA55A")!
+    public let o2Orange10 = UIColor(hex: "#FFF6EE")!
+    public let o2Orange40 = UIColor(hex: "#FFC08B")!
+    public let o2Orange75 = UIColor(hex: "#996336")!
+    public let o2Pink = UIColor(hex: "#FA96FF")!
+    public let o2Pink15 = UIColor(hex: "#FEEAFF")!
+    public let o2Pink30 = UIColor(hex: "#FDCAFF")!
+    public let o2Pink80 = UIColor(hex: "#704373")!
+    public let o2Red = UIColor(hex: "#FF5A5A")!
+    public let o2Red10 = UIColor(hex: "#FFEEEE")!
+    public let o2Red20 = UIColor(hex: "#FFCDCD")!
+    public let o2Red40 = UIColor(hex: "#FF8B8B")!
+    public let o2Red45 = UIColor(hex: "#FF7B7B")!
+    public let o2Red60 = UIColor(hex: "#CC4848")!
+    public let o2Red65 = UIColor(hex: "#BF4444")!
+    public let grey20 = UIColor(hex: "#F3F3F5")!
+    public let grey30 = UIColor(hex: "#D9D9DD")!
+    public let grey40 = UIColor(hex: "#B4B4BE")!
+    public let grey45 = UIColor(hex: "#8C8C9A")!
+    public let grey60 = UIColor(hex: "#6E6E77")!
+    public let grey80 = UIColor(hex: "#3C3C46")!
+    public let black = UIColor(hex: "#00001E")!
+    public let white = UIColor(hex: "#FFFFFF")!
+    public let darkModeBlack = UIColor(hex: "#00001C")!
+    public let darkModeGrey = UIColor(hex: "#08132B")!
+    public let darkModeGrey6 = UIColor(hex: "#14213D")!
+    public let darkModeBeyondBlue = UIColor(hex: "#1A62FF")!
+}"
+`;
diff --git a/scripts/mistica-skin-generator/generators/colors/__tests__/__snapshots__/color-toolkit-generator.test.js.snap b/scripts/mistica-skin-generator/generators/colors/__tests__/__snapshots__/color-toolkit-generator.test.js.snap
new file mode 100644
index 00000000..0ee4dea7
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/__tests__/__snapshots__/color-toolkit-generator.test.js.snap
@@ -0,0 +1,399 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generateColorToolkit 1`] = `
+"
+// Generated using Make
+// DO NOT EDIT
+
+import SwiftUI
+
+public extension Color {
+    static var background: Color {
+        MisticaConfig.currentColors.background.color
+    }
+    static var backgroundAlternative: Color {
+        MisticaConfig.currentColors.backgroundAlternative.color
+    }
+    static var backgroundBrandSecondary: Color {
+        MisticaConfig.currentColors.backgroundBrandSecondary.color
+    }
+    static var backgroundContainer: Color {
+        MisticaConfig.currentColors.backgroundContainer.color
+    }
+    static var backgroundContainerError: Color {
+        MisticaConfig.currentColors.backgroundContainerError.color
+    }
+    static var backgroundContainerHover: Color {
+        MisticaConfig.currentColors.backgroundContainerHover.color
+    }
+    static var backgroundContainerPressed: Color {
+        MisticaConfig.currentColors.backgroundContainerPressed.color
+    }
+    static var backgroundContainerBrandHover: Color {
+        MisticaConfig.currentColors.backgroundContainerBrandHover.color
+    }
+    static var backgroundContainerBrandPressed: Color {
+        MisticaConfig.currentColors.backgroundContainerBrandPressed.color
+    }
+    static var backgroundContainerBrandOverInverse: Color {
+        MisticaConfig.currentColors.backgroundContainerBrandOverInverse.color
+    }
+    static var backgroundContainerAlternative: Color {
+        MisticaConfig.currentColors.backgroundContainerAlternative.color
+    }
+    static var backgroundOverlay: Color {
+        MisticaConfig.currentColors.backgroundOverlay.color
+    }
+    static var backgroundSkeleton: Color {
+        MisticaConfig.currentColors.backgroundSkeleton.color
+    }
+    static var backgroundSkeletonInverse: Color {
+        MisticaConfig.currentColors.backgroundSkeletonInverse.color
+    }
+    static var backgroundBrandTop: Color {
+        MisticaConfig.currentColors.backgroundBrandTop.color
+    }
+    static var backgroundBrandBottom: Color {
+        MisticaConfig.currentColors.backgroundBrandBottom.color
+    }
+    static var appBarBackground: Color {
+        MisticaConfig.currentColors.appBarBackground.color
+    }
+    static var navigationBarBackground: Color {
+        MisticaConfig.currentColors.navigationBarBackground.color
+    }
+    static var skeletonWave: Color {
+        MisticaConfig.currentColors.skeletonWave.color
+    }
+    static var borderLow: Color {
+        MisticaConfig.currentColors.borderLow.color
+    }
+    static var border: Color {
+        MisticaConfig.currentColors.border.color
+    }
+    static var borderHigh: Color {
+        MisticaConfig.currentColors.borderHigh.color
+    }
+    static var borderSelected: Color {
+        MisticaConfig.currentColors.borderSelected.color
+    }
+    static var coverBackgroundHover: Color {
+        MisticaConfig.currentColors.coverBackgroundHover.color
+    }
+    static var coverBackgroundPressed: Color {
+        MisticaConfig.currentColors.coverBackgroundPressed.color
+    }
+    static var buttonDangerBackground: Color {
+        MisticaConfig.currentColors.buttonDangerBackground.color
+    }
+    static var buttonDangerBackgroundSelected: Color {
+        MisticaConfig.currentColors.buttonDangerBackgroundSelected.color
+    }
+    static var buttonDangerBackgroundHover: Color {
+        MisticaConfig.currentColors.buttonDangerBackgroundHover.color
+    }
+    static var buttonLinkDangerBackgroundSelected: Color {
+        MisticaConfig.currentColors.buttonLinkDangerBackgroundSelected.color
+    }
+    static var buttonLinkDangerBackgroundInverse: Color {
+        MisticaConfig.currentColors.buttonLinkDangerBackgroundInverse.color
+    }
+    static var buttonLinkDangerBackgroundInverseSelected: Color {
+        MisticaConfig.currentColors.buttonLinkDangerBackgroundInverseSelected.color
+    }
+    static var buttonLinkBackgroundSelected: Color {
+        MisticaConfig.currentColors.buttonLinkBackgroundSelected.color
+    }
+    static var buttonLinkBackgroundInverseSelected: Color {
+        MisticaConfig.currentColors.buttonLinkBackgroundInverseSelected.color
+    }
+    static var buttonPrimaryBackground: Color {
+        MisticaConfig.currentColors.buttonPrimaryBackground.color
+    }
+    static var buttonPrimaryBackgroundInverse: Color {
+        MisticaConfig.currentColors.buttonPrimaryBackgroundInverse.color
+    }
+    static var buttonPrimaryBackgroundSelected: Color {
+        MisticaConfig.currentColors.buttonPrimaryBackgroundSelected.color
+    }
+    static var buttonPrimaryBackgroundHover: Color {
+        MisticaConfig.currentColors.buttonPrimaryBackgroundHover.color
+    }
+    static var buttonPrimaryBackgroundInverseSelected: Color {
+        MisticaConfig.currentColors.buttonPrimaryBackgroundInverseSelected.color
+    }
+    static var buttonSecondaryBorder: Color {
+        MisticaConfig.currentColors.buttonSecondaryBorder.color
+    }
+    static var buttonSecondaryBorderSelected: Color {
+        MisticaConfig.currentColors.buttonSecondaryBorderSelected.color
+    }
+    static var buttonSecondaryBackgroundHover: Color {
+        MisticaConfig.currentColors.buttonSecondaryBackgroundHover.color
+    }
+    static var buttonSecondaryBackgroundSelected: Color {
+        MisticaConfig.currentColors.buttonSecondaryBackgroundSelected.color
+    }
+    static var buttonSecondaryBorderInverse: Color {
+        MisticaConfig.currentColors.buttonSecondaryBorderInverse.color
+    }
+    static var buttonSecondaryBorderInverseSelected: Color {
+        MisticaConfig.currentColors.buttonSecondaryBorderInverseSelected.color
+    }
+    static var buttonSecondaryBackgroundInverseHover: Color {
+        MisticaConfig.currentColors.buttonSecondaryBackgroundInverseHover.color
+    }
+    static var buttonSecondaryBackgroundInverseSelected: Color {
+        MisticaConfig.currentColors.buttonSecondaryBackgroundInverseSelected.color
+    }
+    static var textButtonPrimary: Color {
+        MisticaConfig.currentColors.textButtonPrimary.color
+    }
+    static var textButtonPrimaryInverse: Color {
+        MisticaConfig.currentColors.textButtonPrimaryInverse.color
+    }
+    static var textButtonPrimaryInverseSelected: Color {
+        MisticaConfig.currentColors.textButtonPrimaryInverseSelected.color
+    }
+    static var textButtonSecondary: Color {
+        MisticaConfig.currentColors.textButtonSecondary.color
+    }
+    static var textButtonSecondarySelected: Color {
+        MisticaConfig.currentColors.textButtonSecondarySelected.color
+    }
+    static var textButtonSecondaryInverse: Color {
+        MisticaConfig.currentColors.textButtonSecondaryInverse.color
+    }
+    static var textButtonSecondaryInverseSelected: Color {
+        MisticaConfig.currentColors.textButtonSecondaryInverseSelected.color
+    }
+    static var textLink: Color {
+        MisticaConfig.currentColors.textLink.color
+    }
+    static var textLinkInverse: Color {
+        MisticaConfig.currentColors.textLinkInverse.color
+    }
+    static var textLinkDanger: Color {
+        MisticaConfig.currentColors.textLinkDanger.color
+    }
+    static var textLinkSnackbar: Color {
+        MisticaConfig.currentColors.textLinkSnackbar.color
+    }
+    static var textActivated: Color {
+        MisticaConfig.currentColors.textActivated.color
+    }
+    static var textBrand: Color {
+        MisticaConfig.currentColors.textBrand.color
+    }
+    static var control: Color {
+        MisticaConfig.currentColors.control.color
+    }
+    static var controlActivated: Color {
+        MisticaConfig.currentColors.controlActivated.color
+    }
+    static var controlInverse: Color {
+        MisticaConfig.currentColors.controlInverse.color
+    }
+    static var controlActivatedInverse: Color {
+        MisticaConfig.currentColors.controlActivatedInverse.color
+    }
+    static var controlError: Color {
+        MisticaConfig.currentColors.controlError.color
+    }
+    static var barTrack: Color {
+        MisticaConfig.currentColors.barTrack.color
+    }
+    static var loadingBar: Color {
+        MisticaConfig.currentColors.loadingBar.color
+    }
+    static var loadingBarBackground: Color {
+        MisticaConfig.currentColors.loadingBarBackground.color
+    }
+    static var toggleAndroidInactive: Color {
+        MisticaConfig.currentColors.toggleAndroidInactive.color
+    }
+    static var toggleAndroidBackgroundActive: Color {
+        MisticaConfig.currentColors.toggleAndroidBackgroundActive.color
+    }
+    static var iosControlKnob: Color {
+        MisticaConfig.currentColors.iosControlKnob.color
+    }
+    static var divider: Color {
+        MisticaConfig.currentColors.divider.color
+    }
+    static var dividerInverse: Color {
+        MisticaConfig.currentColors.dividerInverse.color
+    }
+    static var navigationBarDivider: Color {
+        MisticaConfig.currentColors.navigationBarDivider.color
+    }
+    static var badge: Color {
+        MisticaConfig.currentColors.badge.color
+    }
+    static var feedbackErrorBackground: Color {
+        MisticaConfig.currentColors.feedbackErrorBackground.color
+    }
+    static var feedbackInfoBackground: Color {
+        MisticaConfig.currentColors.feedbackInfoBackground.color
+    }
+    static var brand: Color {
+        MisticaConfig.currentColors.brand.color
+    }
+    static var brandHigh: Color {
+        MisticaConfig.currentColors.brandHigh.color
+    }
+    static var inverse: Color {
+        MisticaConfig.currentColors.inverse.color
+    }
+    static var neutralHigh: Color {
+        MisticaConfig.currentColors.neutralHigh.color
+    }
+    static var neutralMedium: Color {
+        MisticaConfig.currentColors.neutralMedium.color
+    }
+    static var neutralMediumInverse: Color {
+        MisticaConfig.currentColors.neutralMediumInverse.color
+    }
+    static var neutralLow: Color {
+        MisticaConfig.currentColors.neutralLow.color
+    }
+    static var neutralLowAlternative: Color {
+        MisticaConfig.currentColors.neutralLowAlternative.color
+    }
+    static var textPrimary: Color {
+        MisticaConfig.currentColors.textPrimary.color
+    }
+    static var textPrimaryInverse: Color {
+        MisticaConfig.currentColors.textPrimaryInverse.color
+    }
+    static var textSecondary: Color {
+        MisticaConfig.currentColors.textSecondary.color
+    }
+    static var textSecondaryInverse: Color {
+        MisticaConfig.currentColors.textSecondaryInverse.color
+    }
+    static var success: Color {
+        MisticaConfig.currentColors.success.color
+    }
+    static var warning: Color {
+        MisticaConfig.currentColors.warning.color
+    }
+    static var error: Color {
+        MisticaConfig.currentColors.error.color
+    }
+    static var textError: Color {
+        MisticaConfig.currentColors.textError.color
+    }
+    static var textErrorInverse: Color {
+        MisticaConfig.currentColors.textErrorInverse.color
+    }
+    static var promo: Color {
+        MisticaConfig.currentColors.promo.color
+    }
+    static var highlight: Color {
+        MisticaConfig.currentColors.highlight.color
+    }
+    static var successLow: Color {
+        MisticaConfig.currentColors.successLow.color
+    }
+    static var warningLow: Color {
+        MisticaConfig.currentColors.warningLow.color
+    }
+    static var errorLow: Color {
+        MisticaConfig.currentColors.errorLow.color
+    }
+    static var promoLow: Color {
+        MisticaConfig.currentColors.promoLow.color
+    }
+    static var brandLow: Color {
+        MisticaConfig.currentColors.brandLow.color
+    }
+    static var successHigh: Color {
+        MisticaConfig.currentColors.successHigh.color
+    }
+    static var warningHigh: Color {
+        MisticaConfig.currentColors.warningHigh.color
+    }
+    static var errorHigh: Color {
+        MisticaConfig.currentColors.errorHigh.color
+    }
+    static var promoHigh: Color {
+        MisticaConfig.currentColors.promoHigh.color
+    }
+    static var successHighInverse: Color {
+        MisticaConfig.currentColors.successHighInverse.color
+    }
+    static var warningHighInverse: Color {
+        MisticaConfig.currentColors.warningHighInverse.color
+    }
+    static var errorHighInverse: Color {
+        MisticaConfig.currentColors.errorHighInverse.color
+    }
+    static var promoHighInverse: Color {
+        MisticaConfig.currentColors.promoHighInverse.color
+    }
+    static var textNavigationBarPrimary: Color {
+        MisticaConfig.currentColors.textNavigationBarPrimary.color
+    }
+    static var textNavigationBarSecondary: Color {
+        MisticaConfig.currentColors.textNavigationBarSecondary.color
+    }
+    static var textNavigationSearchBarHint: Color {
+        MisticaConfig.currentColors.textNavigationSearchBarHint.color
+    }
+    static var textNavigationSearchBarText: Color {
+        MisticaConfig.currentColors.textNavigationSearchBarText.color
+    }
+    static var textAppBar: Color {
+        MisticaConfig.currentColors.textAppBar.color
+    }
+    static var textAppBarSelected: Color {
+        MisticaConfig.currentColors.textAppBarSelected.color
+    }
+    static var customTabsBackground: Color {
+        MisticaConfig.currentColors.customTabsBackground.color
+    }
+    static var tagTextPromo: Color {
+        MisticaConfig.currentColors.tagTextPromo.color
+    }
+    static var tagTextActive: Color {
+        MisticaConfig.currentColors.tagTextActive.color
+    }
+    static var tagTextInactive: Color {
+        MisticaConfig.currentColors.tagTextInactive.color
+    }
+    static var tagTextSuccess: Color {
+        MisticaConfig.currentColors.tagTextSuccess.color
+    }
+    static var tagTextWarning: Color {
+        MisticaConfig.currentColors.tagTextWarning.color
+    }
+    static var tagTextError: Color {
+        MisticaConfig.currentColors.tagTextError.color
+    }
+    static var tagBackgroundPromo: Color {
+        MisticaConfig.currentColors.tagBackgroundPromo.color
+    }
+    static var tagBackgroundActive: Color {
+        MisticaConfig.currentColors.tagBackgroundActive.color
+    }
+    static var tagBackgroundInactive: Color {
+        MisticaConfig.currentColors.tagBackgroundInactive.color
+    }
+    static var tagBackgroundSuccess: Color {
+        MisticaConfig.currentColors.tagBackgroundSuccess.color
+    }
+    static var tagBackgroundWarning: Color {
+        MisticaConfig.currentColors.tagBackgroundWarning.color
+    }
+    static var tagBackgroundError: Color {
+        MisticaConfig.currentColors.tagBackgroundError.color
+    }
+}
+
+private extension UIColor {
+    var color: Color {
+        Color(self)
+    }
+}"
+`;
diff --git a/scripts/mistica-skin-generator/generators/colors/__tests__/__snapshots__/mistica-color-generator.test.js.snap b/scripts/mistica-skin-generator/generators/colors/__tests__/__snapshots__/mistica-color-generator.test.js.snap
new file mode 100644
index 00000000..b36d1cee
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/__tests__/__snapshots__/mistica-color-generator.test.js.snap
@@ -0,0 +1,27 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generateMisticaColor 1`] = `
+"
+// Generated using Make
+// DO NOT EDIT
+
+import UIKit
+
+public enum MisticaColor {
+    case solid(UIColor)
+    case gradient(MisticaGradient)
+}
+
+public extension MisticaColor {
+    static var backgroundBrand: MisticaColor {
+        MisticaConfig.currentColors.backgroundBrand
+    }
+    static var backgroundContainerBrand: MisticaColor {
+        MisticaConfig.currentColors.backgroundContainerBrand
+    }
+    static var cardContentOverlay: MisticaColor {
+        MisticaConfig.currentColors.cardContentOverlay
+    }
+}
+"
+`;
diff --git a/scripts/mistica-skin-generator/generators/colors/__tests__/__snapshots__/mistica-colors-generator.test.js.snap b/scripts/mistica-skin-generator/generators/colors/__tests__/__snapshots__/mistica-colors-generator.test.js.snap
new file mode 100644
index 00000000..8c2b9153
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/__tests__/__snapshots__/mistica-colors-generator.test.js.snap
@@ -0,0 +1,143 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generateMisticaColors 1`] = `
+"
+// Generated using Make
+// DO NOT EDIT
+
+import UIKit
+
+public protocol MisticaColors {
+    var background: UIColor { get }
+    var backgroundAlternative: UIColor { get }
+    var backgroundBrand: MisticaColor { get }
+    var backgroundBrandSecondary: UIColor { get }
+    var backgroundContainer: UIColor { get }
+    var backgroundContainerError: UIColor { get }
+    var backgroundContainerHover: UIColor { get }
+    var backgroundContainerPressed: UIColor { get }
+    var backgroundContainerBrand: MisticaColor { get }
+    var backgroundContainerBrandHover: UIColor { get }
+    var backgroundContainerBrandPressed: UIColor { get }
+    var backgroundContainerBrandOverInverse: UIColor { get }
+    var backgroundContainerAlternative: UIColor { get }
+    var backgroundOverlay: UIColor { get }
+    var backgroundSkeleton: UIColor { get }
+    var backgroundSkeletonInverse: UIColor { get }
+    var backgroundBrandTop: UIColor { get }
+    var backgroundBrandBottom: UIColor { get }
+    var appBarBackground: UIColor { get }
+    var navigationBarBackground: UIColor { get }
+    var skeletonWave: UIColor { get }
+    var borderLow: UIColor { get }
+    var border: UIColor { get }
+    var borderHigh: UIColor { get }
+    var borderSelected: UIColor { get }
+    var coverBackgroundHover: UIColor { get }
+    var coverBackgroundPressed: UIColor { get }
+    var buttonDangerBackground: UIColor { get }
+    var buttonDangerBackgroundSelected: UIColor { get }
+    var buttonDangerBackgroundHover: UIColor { get }
+    var buttonLinkDangerBackgroundSelected: UIColor { get }
+    var buttonLinkDangerBackgroundInverse: UIColor { get }
+    var buttonLinkDangerBackgroundInverseSelected: UIColor { get }
+    var buttonLinkBackgroundSelected: UIColor { get }
+    var buttonLinkBackgroundInverseSelected: UIColor { get }
+    var buttonPrimaryBackground: UIColor { get }
+    var buttonPrimaryBackgroundInverse: UIColor { get }
+    var buttonPrimaryBackgroundSelected: UIColor { get }
+    var buttonPrimaryBackgroundHover: UIColor { get }
+    var buttonPrimaryBackgroundInverseSelected: UIColor { get }
+    var buttonSecondaryBorder: UIColor { get }
+    var buttonSecondaryBorderSelected: UIColor { get }
+    var buttonSecondaryBackgroundHover: UIColor { get }
+    var buttonSecondaryBackgroundSelected: UIColor { get }
+    var buttonSecondaryBorderInverse: UIColor { get }
+    var buttonSecondaryBorderInverseSelected: UIColor { get }
+    var buttonSecondaryBackgroundInverseHover: UIColor { get }
+    var buttonSecondaryBackgroundInverseSelected: UIColor { get }
+    var textButtonPrimary: UIColor { get }
+    var textButtonPrimaryInverse: UIColor { get }
+    var textButtonPrimaryInverseSelected: UIColor { get }
+    var textButtonSecondary: UIColor { get }
+    var textButtonSecondarySelected: UIColor { get }
+    var textButtonSecondaryInverse: UIColor { get }
+    var textButtonSecondaryInverseSelected: UIColor { get }
+    var textLink: UIColor { get }
+    var textLinkInverse: UIColor { get }
+    var textLinkDanger: UIColor { get }
+    var textLinkSnackbar: UIColor { get }
+    var textActivated: UIColor { get }
+    var textBrand: UIColor { get }
+    var control: UIColor { get }
+    var controlActivated: UIColor { get }
+    var controlInverse: UIColor { get }
+    var controlActivatedInverse: UIColor { get }
+    var controlError: UIColor { get }
+    var barTrack: UIColor { get }
+    var loadingBar: UIColor { get }
+    var loadingBarBackground: UIColor { get }
+    var toggleAndroidInactive: UIColor { get }
+    var toggleAndroidBackgroundActive: UIColor { get }
+    var iosControlKnob: UIColor { get }
+    var divider: UIColor { get }
+    var dividerInverse: UIColor { get }
+    var navigationBarDivider: UIColor { get }
+    var badge: UIColor { get }
+    var feedbackErrorBackground: UIColor { get }
+    var feedbackInfoBackground: UIColor { get }
+    var brand: UIColor { get }
+    var brandHigh: UIColor { get }
+    var inverse: UIColor { get }
+    var neutralHigh: UIColor { get }
+    var neutralMedium: UIColor { get }
+    var neutralMediumInverse: UIColor { get }
+    var neutralLow: UIColor { get }
+    var neutralLowAlternative: UIColor { get }
+    var textPrimary: UIColor { get }
+    var textPrimaryInverse: UIColor { get }
+    var textSecondary: UIColor { get }
+    var textSecondaryInverse: UIColor { get }
+    var success: UIColor { get }
+    var warning: UIColor { get }
+    var error: UIColor { get }
+    var textError: UIColor { get }
+    var textErrorInverse: UIColor { get }
+    var promo: UIColor { get }
+    var highlight: UIColor { get }
+    var successLow: UIColor { get }
+    var warningLow: UIColor { get }
+    var errorLow: UIColor { get }
+    var promoLow: UIColor { get }
+    var brandLow: UIColor { get }
+    var successHigh: UIColor { get }
+    var warningHigh: UIColor { get }
+    var errorHigh: UIColor { get }
+    var promoHigh: UIColor { get }
+    var successHighInverse: UIColor { get }
+    var warningHighInverse: UIColor { get }
+    var errorHighInverse: UIColor { get }
+    var promoHighInverse: UIColor { get }
+    var textNavigationBarPrimary: UIColor { get }
+    var textNavigationBarSecondary: UIColor { get }
+    var textNavigationSearchBarHint: UIColor { get }
+    var textNavigationSearchBarText: UIColor { get }
+    var textAppBar: UIColor { get }
+    var textAppBarSelected: UIColor { get }
+    var customTabsBackground: UIColor { get }
+    var tagTextPromo: UIColor { get }
+    var tagTextActive: UIColor { get }
+    var tagTextInactive: UIColor { get }
+    var tagTextSuccess: UIColor { get }
+    var tagTextWarning: UIColor { get }
+    var tagTextError: UIColor { get }
+    var tagBackgroundPromo: UIColor { get }
+    var tagBackgroundActive: UIColor { get }
+    var tagBackgroundInactive: UIColor { get }
+    var tagBackgroundSuccess: UIColor { get }
+    var tagBackgroundWarning: UIColor { get }
+    var tagBackgroundError: UIColor { get }
+    var cardContentOverlay: MisticaColor { get }
+}
+"
+`;
diff --git a/scripts/mistica-skin-generator/generators/colors/__tests__/__snapshots__/uicolor-toolkit-generator.test.js.snap b/scripts/mistica-skin-generator/generators/colors/__tests__/__snapshots__/uicolor-toolkit-generator.test.js.snap
new file mode 100644
index 00000000..67494466
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/__tests__/__snapshots__/uicolor-toolkit-generator.test.js.snap
@@ -0,0 +1,393 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generateUIColorToolkit 1`] = `
+"
+// Generated using Make
+// DO NOT EDIT
+
+import UIKit
+
+public extension UIColor {
+    static var background: UIColor {
+        MisticaConfig.currentColors.background
+    }
+    static var backgroundAlternative: UIColor {
+        MisticaConfig.currentColors.backgroundAlternative
+    }
+    static var backgroundBrandSecondary: UIColor {
+        MisticaConfig.currentColors.backgroundBrandSecondary
+    }
+    static var backgroundContainer: UIColor {
+        MisticaConfig.currentColors.backgroundContainer
+    }
+    static var backgroundContainerError: UIColor {
+        MisticaConfig.currentColors.backgroundContainerError
+    }
+    static var backgroundContainerHover: UIColor {
+        MisticaConfig.currentColors.backgroundContainerHover
+    }
+    static var backgroundContainerPressed: UIColor {
+        MisticaConfig.currentColors.backgroundContainerPressed
+    }
+    static var backgroundContainerBrandHover: UIColor {
+        MisticaConfig.currentColors.backgroundContainerBrandHover
+    }
+    static var backgroundContainerBrandPressed: UIColor {
+        MisticaConfig.currentColors.backgroundContainerBrandPressed
+    }
+    static var backgroundContainerBrandOverInverse: UIColor {
+        MisticaConfig.currentColors.backgroundContainerBrandOverInverse
+    }
+    static var backgroundContainerAlternative: UIColor {
+        MisticaConfig.currentColors.backgroundContainerAlternative
+    }
+    static var backgroundOverlay: UIColor {
+        MisticaConfig.currentColors.backgroundOverlay
+    }
+    static var backgroundSkeleton: UIColor {
+        MisticaConfig.currentColors.backgroundSkeleton
+    }
+    static var backgroundSkeletonInverse: UIColor {
+        MisticaConfig.currentColors.backgroundSkeletonInverse
+    }
+    static var backgroundBrandTop: UIColor {
+        MisticaConfig.currentColors.backgroundBrandTop
+    }
+    static var backgroundBrandBottom: UIColor {
+        MisticaConfig.currentColors.backgroundBrandBottom
+    }
+    static var appBarBackground: UIColor {
+        MisticaConfig.currentColors.appBarBackground
+    }
+    static var navigationBarBackground: UIColor {
+        MisticaConfig.currentColors.navigationBarBackground
+    }
+    static var skeletonWave: UIColor {
+        MisticaConfig.currentColors.skeletonWave
+    }
+    static var borderLow: UIColor {
+        MisticaConfig.currentColors.borderLow
+    }
+    static var border: UIColor {
+        MisticaConfig.currentColors.border
+    }
+    static var borderHigh: UIColor {
+        MisticaConfig.currentColors.borderHigh
+    }
+    static var borderSelected: UIColor {
+        MisticaConfig.currentColors.borderSelected
+    }
+    static var coverBackgroundHover: UIColor {
+        MisticaConfig.currentColors.coverBackgroundHover
+    }
+    static var coverBackgroundPressed: UIColor {
+        MisticaConfig.currentColors.coverBackgroundPressed
+    }
+    static var buttonDangerBackground: UIColor {
+        MisticaConfig.currentColors.buttonDangerBackground
+    }
+    static var buttonDangerBackgroundSelected: UIColor {
+        MisticaConfig.currentColors.buttonDangerBackgroundSelected
+    }
+    static var buttonDangerBackgroundHover: UIColor {
+        MisticaConfig.currentColors.buttonDangerBackgroundHover
+    }
+    static var buttonLinkDangerBackgroundSelected: UIColor {
+        MisticaConfig.currentColors.buttonLinkDangerBackgroundSelected
+    }
+    static var buttonLinkDangerBackgroundInverse: UIColor {
+        MisticaConfig.currentColors.buttonLinkDangerBackgroundInverse
+    }
+    static var buttonLinkDangerBackgroundInverseSelected: UIColor {
+        MisticaConfig.currentColors.buttonLinkDangerBackgroundInverseSelected
+    }
+    static var buttonLinkBackgroundSelected: UIColor {
+        MisticaConfig.currentColors.buttonLinkBackgroundSelected
+    }
+    static var buttonLinkBackgroundInverseSelected: UIColor {
+        MisticaConfig.currentColors.buttonLinkBackgroundInverseSelected
+    }
+    static var buttonPrimaryBackground: UIColor {
+        MisticaConfig.currentColors.buttonPrimaryBackground
+    }
+    static var buttonPrimaryBackgroundInverse: UIColor {
+        MisticaConfig.currentColors.buttonPrimaryBackgroundInverse
+    }
+    static var buttonPrimaryBackgroundSelected: UIColor {
+        MisticaConfig.currentColors.buttonPrimaryBackgroundSelected
+    }
+    static var buttonPrimaryBackgroundHover: UIColor {
+        MisticaConfig.currentColors.buttonPrimaryBackgroundHover
+    }
+    static var buttonPrimaryBackgroundInverseSelected: UIColor {
+        MisticaConfig.currentColors.buttonPrimaryBackgroundInverseSelected
+    }
+    static var buttonSecondaryBorder: UIColor {
+        MisticaConfig.currentColors.buttonSecondaryBorder
+    }
+    static var buttonSecondaryBorderSelected: UIColor {
+        MisticaConfig.currentColors.buttonSecondaryBorderSelected
+    }
+    static var buttonSecondaryBackgroundHover: UIColor {
+        MisticaConfig.currentColors.buttonSecondaryBackgroundHover
+    }
+    static var buttonSecondaryBackgroundSelected: UIColor {
+        MisticaConfig.currentColors.buttonSecondaryBackgroundSelected
+    }
+    static var buttonSecondaryBorderInverse: UIColor {
+        MisticaConfig.currentColors.buttonSecondaryBorderInverse
+    }
+    static var buttonSecondaryBorderInverseSelected: UIColor {
+        MisticaConfig.currentColors.buttonSecondaryBorderInverseSelected
+    }
+    static var buttonSecondaryBackgroundInverseHover: UIColor {
+        MisticaConfig.currentColors.buttonSecondaryBackgroundInverseHover
+    }
+    static var buttonSecondaryBackgroundInverseSelected: UIColor {
+        MisticaConfig.currentColors.buttonSecondaryBackgroundInverseSelected
+    }
+    static var textButtonPrimary: UIColor {
+        MisticaConfig.currentColors.textButtonPrimary
+    }
+    static var textButtonPrimaryInverse: UIColor {
+        MisticaConfig.currentColors.textButtonPrimaryInverse
+    }
+    static var textButtonPrimaryInverseSelected: UIColor {
+        MisticaConfig.currentColors.textButtonPrimaryInverseSelected
+    }
+    static var textButtonSecondary: UIColor {
+        MisticaConfig.currentColors.textButtonSecondary
+    }
+    static var textButtonSecondarySelected: UIColor {
+        MisticaConfig.currentColors.textButtonSecondarySelected
+    }
+    static var textButtonSecondaryInverse: UIColor {
+        MisticaConfig.currentColors.textButtonSecondaryInverse
+    }
+    static var textButtonSecondaryInverseSelected: UIColor {
+        MisticaConfig.currentColors.textButtonSecondaryInverseSelected
+    }
+    static var textLink: UIColor {
+        MisticaConfig.currentColors.textLink
+    }
+    static var textLinkInverse: UIColor {
+        MisticaConfig.currentColors.textLinkInverse
+    }
+    static var textLinkDanger: UIColor {
+        MisticaConfig.currentColors.textLinkDanger
+    }
+    static var textLinkSnackbar: UIColor {
+        MisticaConfig.currentColors.textLinkSnackbar
+    }
+    static var textActivated: UIColor {
+        MisticaConfig.currentColors.textActivated
+    }
+    static var textBrand: UIColor {
+        MisticaConfig.currentColors.textBrand
+    }
+    static var control: UIColor {
+        MisticaConfig.currentColors.control
+    }
+    static var controlActivated: UIColor {
+        MisticaConfig.currentColors.controlActivated
+    }
+    static var controlInverse: UIColor {
+        MisticaConfig.currentColors.controlInverse
+    }
+    static var controlActivatedInverse: UIColor {
+        MisticaConfig.currentColors.controlActivatedInverse
+    }
+    static var controlError: UIColor {
+        MisticaConfig.currentColors.controlError
+    }
+    static var barTrack: UIColor {
+        MisticaConfig.currentColors.barTrack
+    }
+    static var loadingBar: UIColor {
+        MisticaConfig.currentColors.loadingBar
+    }
+    static var loadingBarBackground: UIColor {
+        MisticaConfig.currentColors.loadingBarBackground
+    }
+    static var toggleAndroidInactive: UIColor {
+        MisticaConfig.currentColors.toggleAndroidInactive
+    }
+    static var toggleAndroidBackgroundActive: UIColor {
+        MisticaConfig.currentColors.toggleAndroidBackgroundActive
+    }
+    static var iosControlKnob: UIColor {
+        MisticaConfig.currentColors.iosControlKnob
+    }
+    static var divider: UIColor {
+        MisticaConfig.currentColors.divider
+    }
+    static var dividerInverse: UIColor {
+        MisticaConfig.currentColors.dividerInverse
+    }
+    static var navigationBarDivider: UIColor {
+        MisticaConfig.currentColors.navigationBarDivider
+    }
+    static var badge: UIColor {
+        MisticaConfig.currentColors.badge
+    }
+    static var feedbackErrorBackground: UIColor {
+        MisticaConfig.currentColors.feedbackErrorBackground
+    }
+    static var feedbackInfoBackground: UIColor {
+        MisticaConfig.currentColors.feedbackInfoBackground
+    }
+    static var brand: UIColor {
+        MisticaConfig.currentColors.brand
+    }
+    static var brandHigh: UIColor {
+        MisticaConfig.currentColors.brandHigh
+    }
+    static var inverse: UIColor {
+        MisticaConfig.currentColors.inverse
+    }
+    static var neutralHigh: UIColor {
+        MisticaConfig.currentColors.neutralHigh
+    }
+    static var neutralMedium: UIColor {
+        MisticaConfig.currentColors.neutralMedium
+    }
+    static var neutralMediumInverse: UIColor {
+        MisticaConfig.currentColors.neutralMediumInverse
+    }
+    static var neutralLow: UIColor {
+        MisticaConfig.currentColors.neutralLow
+    }
+    static var neutralLowAlternative: UIColor {
+        MisticaConfig.currentColors.neutralLowAlternative
+    }
+    static var textPrimary: UIColor {
+        MisticaConfig.currentColors.textPrimary
+    }
+    static var textPrimaryInverse: UIColor {
+        MisticaConfig.currentColors.textPrimaryInverse
+    }
+    static var textSecondary: UIColor {
+        MisticaConfig.currentColors.textSecondary
+    }
+    static var textSecondaryInverse: UIColor {
+        MisticaConfig.currentColors.textSecondaryInverse
+    }
+    static var success: UIColor {
+        MisticaConfig.currentColors.success
+    }
+    static var warning: UIColor {
+        MisticaConfig.currentColors.warning
+    }
+    static var error: UIColor {
+        MisticaConfig.currentColors.error
+    }
+    static var textError: UIColor {
+        MisticaConfig.currentColors.textError
+    }
+    static var textErrorInverse: UIColor {
+        MisticaConfig.currentColors.textErrorInverse
+    }
+    static var promo: UIColor {
+        MisticaConfig.currentColors.promo
+    }
+    static var highlight: UIColor {
+        MisticaConfig.currentColors.highlight
+    }
+    static var successLow: UIColor {
+        MisticaConfig.currentColors.successLow
+    }
+    static var warningLow: UIColor {
+        MisticaConfig.currentColors.warningLow
+    }
+    static var errorLow: UIColor {
+        MisticaConfig.currentColors.errorLow
+    }
+    static var promoLow: UIColor {
+        MisticaConfig.currentColors.promoLow
+    }
+    static var brandLow: UIColor {
+        MisticaConfig.currentColors.brandLow
+    }
+    static var successHigh: UIColor {
+        MisticaConfig.currentColors.successHigh
+    }
+    static var warningHigh: UIColor {
+        MisticaConfig.currentColors.warningHigh
+    }
+    static var errorHigh: UIColor {
+        MisticaConfig.currentColors.errorHigh
+    }
+    static var promoHigh: UIColor {
+        MisticaConfig.currentColors.promoHigh
+    }
+    static var successHighInverse: UIColor {
+        MisticaConfig.currentColors.successHighInverse
+    }
+    static var warningHighInverse: UIColor {
+        MisticaConfig.currentColors.warningHighInverse
+    }
+    static var errorHighInverse: UIColor {
+        MisticaConfig.currentColors.errorHighInverse
+    }
+    static var promoHighInverse: UIColor {
+        MisticaConfig.currentColors.promoHighInverse
+    }
+    static var textNavigationBarPrimary: UIColor {
+        MisticaConfig.currentColors.textNavigationBarPrimary
+    }
+    static var textNavigationBarSecondary: UIColor {
+        MisticaConfig.currentColors.textNavigationBarSecondary
+    }
+    static var textNavigationSearchBarHint: UIColor {
+        MisticaConfig.currentColors.textNavigationSearchBarHint
+    }
+    static var textNavigationSearchBarText: UIColor {
+        MisticaConfig.currentColors.textNavigationSearchBarText
+    }
+    static var textAppBar: UIColor {
+        MisticaConfig.currentColors.textAppBar
+    }
+    static var textAppBarSelected: UIColor {
+        MisticaConfig.currentColors.textAppBarSelected
+    }
+    static var customTabsBackground: UIColor {
+        MisticaConfig.currentColors.customTabsBackground
+    }
+    static var tagTextPromo: UIColor {
+        MisticaConfig.currentColors.tagTextPromo
+    }
+    static var tagTextActive: UIColor {
+        MisticaConfig.currentColors.tagTextActive
+    }
+    static var tagTextInactive: UIColor {
+        MisticaConfig.currentColors.tagTextInactive
+    }
+    static var tagTextSuccess: UIColor {
+        MisticaConfig.currentColors.tagTextSuccess
+    }
+    static var tagTextWarning: UIColor {
+        MisticaConfig.currentColors.tagTextWarning
+    }
+    static var tagTextError: UIColor {
+        MisticaConfig.currentColors.tagTextError
+    }
+    static var tagBackgroundPromo: UIColor {
+        MisticaConfig.currentColors.tagBackgroundPromo
+    }
+    static var tagBackgroundActive: UIColor {
+        MisticaConfig.currentColors.tagBackgroundActive
+    }
+    static var tagBackgroundInactive: UIColor {
+        MisticaConfig.currentColors.tagBackgroundInactive
+    }
+    static var tagBackgroundSuccess: UIColor {
+        MisticaConfig.currentColors.tagBackgroundSuccess
+    }
+    static var tagBackgroundWarning: UIColor {
+        MisticaConfig.currentColors.tagBackgroundWarning
+    }
+    static var tagBackgroundError: UIColor {
+        MisticaConfig.currentColors.tagBackgroundError
+    }
+}"
+`;
diff --git a/scripts/mistica-skin-generator/generators/colors/__tests__/brand-colors-generator.test.js b/scripts/mistica-skin-generator/generators/colors/__tests__/brand-colors-generator.test.js
new file mode 100644
index 00000000..8252fd06
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/__tests__/brand-colors-generator.test.js
@@ -0,0 +1,35 @@
+import fs from 'fs';
+import {resolve} from 'path';
+import {reduceColors} from '../reduce-colors.js';
+import {generateBrandColors} from '../brand-colors-generator.js';
+
+test('generateBrandColors', () => {
+    const getTokensFromFile = (file) => JSON.parse(fs.readFileSync(resolve(__dirname, file), 'utf-8'));
+    const brandsWithTokens = [
+        {
+            brand: {
+                id: 'brand1',
+                prefix: 'Brand1',
+                misticaDesignFileName: 'brand-1',
+            },
+            tokens: getTokensFromFile('brand1-tokens.json'),
+        },
+        {
+            brand: {
+                id: 'brand2',
+                prefix: 'Brand2',
+                misticaDesignFileName: 'brand-2',
+            },
+            tokens: getTokensFromFile('brand2-tokens.json'),
+        },
+    ];
+
+    const colors = reduceColors(brandsWithTokens);
+    const result = generateBrandColors(
+        brandsWithTokens[0].brand,
+        colors,
+        brandsWithTokens[0].tokens.global.palette
+    );
+
+    expect(result).toMatchSnapshot();
+});
diff --git a/scripts/mistica-skin-generator/generators/colors/__tests__/brand1-tokens.json b/scripts/mistica-skin-generator/generators/colors/__tests__/brand1-tokens.json
new file mode 100644
index 00000000..f6b15673
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/__tests__/brand1-tokens.json
@@ -0,0 +1,1438 @@
+{
+    "light": {
+        "background": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundAlternative": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "backgroundBrand": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {"value": "{palette.darkBlue}", "stop": 0},
+                    {"value": "{palette.beyondBlue}", "stop": 0.64},
+                    {"value": "{palette.beyondBlue45}", "stop": 1}
+                ]
+            },
+            "description": "o2Gradient"
+        },
+        "backgroundBrandSecondary": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "backgroundContainer": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerError": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "backgroundContainerHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.03)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.05)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerBrand": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {"value": "{palette.darkBlue}", "stop": 0},
+                    {"value": "{palette.beyondBlue}", "stop": 0.64},
+                    {"value": "{palette.beyondBlue45}", "stop": 1}
+                ]
+            },
+            "description": "o2Gradient"
+        },
+        "backgroundContainerBrandHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.2)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerBrandPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.4)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerBrandOverInverse": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "backgroundContainerAlternative": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "backgroundOverlay": {
+            "value": "rgba({palette.black}, 0.6)",
+            "type": "color",
+            "description": "black"
+        },
+        "backgroundSkeleton": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "backgroundSkeletonInverse": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "backgroundBrandTop": {
+            "value": "{palette.darkBlue}",
+            "type": "color",
+            "description": "darkBlue"
+        },
+        "backgroundBrandBottom": {
+            "value": "{palette.beyondBlue45}",
+            "type": "color",
+            "description": "beyondBlue45"
+        },
+        "appBarBackground": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "navigationBarBackground": {
+            "value": "{palette.darkBlue}",
+            "type": "color",
+            "description": "darkBlue"
+        },
+        "skeletonWave": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "borderLow": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "border": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "borderHigh": {
+            "value": "{palette.grey80}",
+            "type": "color",
+            "description": "grey80"
+        },
+        "borderSelected": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "coverBackgroundHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.25)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "coverBackgroundPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.35)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "buttonDangerBackground": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "buttonDangerBackgroundSelected": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "buttonDangerBackgroundHover": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "buttonLinkDangerBackgroundSelected": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "buttonLinkDangerBackgroundInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkDangerBackgroundInverseSelected": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "buttonLinkBackgroundSelected": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "buttonLinkBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonPrimaryBackground": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "buttonPrimaryBackgroundInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonPrimaryBackgroundSelected": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "buttonPrimaryBackgroundHover": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "buttonPrimaryBackgroundInverseSelected": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "buttonSecondaryBorder": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "buttonSecondaryBorderSelected": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "buttonSecondaryBackgroundHover": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "buttonSecondaryBackgroundSelected": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "buttonSecondaryBorderInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderInverseSelected": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "buttonSecondaryBackgroundInverseHover": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimary": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimaryInverse": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "textButtonPrimaryInverseSelected": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "textButtonSecondary": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "textButtonSecondarySelected": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "textButtonSecondaryInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonSecondaryInverseSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textLink": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "textLinkInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textLinkDanger": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "textLinkSnackbar": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textActivated": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "textBrand": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "control": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "controlActivated": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "controlInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "controlActivatedInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "controlError": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "barTrack": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "loadingBar": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "loadingBarBackground": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "toggleAndroidInactive": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "toggleAndroidBackgroundActive": {
+            "value": "{palette.beyondBlue15}",
+            "type": "color",
+            "description": "beyondBlue15"
+        },
+        "iosControlKnob": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "divider": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "dividerInverse": {
+            "value": "rgba({palette.white}, 0.2)",
+            "type": "color",
+            "description": "white"
+        },
+        "navigationBarDivider": {
+            "value": "{palette.darkBlue}",
+            "type": "color",
+            "description": "darkBlue"
+        },
+        "badge": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "feedbackErrorBackground": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "feedbackInfoBackground": {
+            "value": "{palette.black}",
+            "type": "color",
+            "description": "black"
+        },
+        "brand": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "brandHigh": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "inverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "neutralHigh": {
+            "value": "{palette.black}",
+            "type": "color",
+            "description": "black"
+        },
+        "neutralMedium": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "neutralMediumInverse": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "neutralLow": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "neutralLowAlternative": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textPrimary": {
+            "value": "{palette.black}",
+            "type": "color",
+            "description": "black"
+        },
+        "textPrimaryInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textSecondary": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "textSecondaryInverse": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "success": {
+            "value": "{palette.o2Green}",
+            "type": "color",
+            "description": "o2Green"
+        },
+        "warning": {
+            "value": "{palette.o2Orange}",
+            "type": "color",
+            "description": "o2Orange"
+        },
+        "error": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "textError": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "textErrorInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "promo": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "highlight": {
+            "value": "{palette.o2Pink80}",
+            "type": "color",
+            "description": "o2Pink80"
+        },
+        "successLow": {
+            "value": "{palette.o2Green10}",
+            "type": "color",
+            "description": "o2Green10"
+        },
+        "warningLow": {
+            "value": "{palette.o2Orange10}",
+            "type": "color",
+            "description": "o2Orange10"
+        },
+        "errorLow": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "promoLow": {
+            "value": "{palette.o2Pink15}",
+            "type": "color",
+            "description": "o2Pink15"
+        },
+        "brandLow": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "successHigh": {
+            "value": "{palette.o2Green80}",
+            "type": "color",
+            "description": "o2Green80"
+        },
+        "warningHigh": {
+            "value": "{palette.o2Orange75}",
+            "type": "color",
+            "description": "o2Orange75"
+        },
+        "errorHigh": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "promoHigh": {
+            "value": "{palette.o2Pink80}",
+            "type": "color",
+            "description": "o2Pink80"
+        },
+        "successHighInverse": {
+            "value": "{palette.o2Green80}",
+            "type": "color",
+            "description": "o2Green80"
+        },
+        "warningHighInverse": {
+            "value": "{palette.o2Orange75}",
+            "type": "color",
+            "description": "o2Orange75"
+        },
+        "errorHighInverse": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "promoHighInverse": {
+            "value": "{palette.o2Pink80}",
+            "type": "color",
+            "description": "o2Pink80"
+        },
+        "textNavigationBarPrimary": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textNavigationBarSecondary": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textNavigationSearchBarHint": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textNavigationSearchBarText": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textAppBar": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "textAppBarSelected": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "customTabsBackground": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "tagTextPromo": {
+            "value": "{palette.o2Pink80}",
+            "type": "color",
+            "description": "o2Pink80"
+        },
+        "tagTextActive": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "tagTextInactive": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "tagTextSuccess": {
+            "value": "{palette.o2Green80}",
+            "type": "color",
+            "description": "o2Green80"
+        },
+        "tagTextWarning": {
+            "value": "{palette.o2Orange75}",
+            "type": "color",
+            "description": "o2Orange75"
+        },
+        "tagTextError": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "tagBackgroundPromo": {
+            "value": "{palette.o2Pink15}",
+            "type": "color",
+            "description": "o2Pink15"
+        },
+        "tagBackgroundActive": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "tagBackgroundInactive": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "tagBackgroundSuccess": {
+            "value": "{palette.o2Green10}",
+            "type": "color",
+            "description": "o2Green10"
+        },
+        "tagBackgroundWarning": {
+            "value": "{palette.o2Orange10}",
+            "type": "color",
+            "description": "o2Orange10"
+        },
+        "tagBackgroundError": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "cardContentOverlay": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {"value": "rgba({palette.beyondBlue}, 0)", "stop": 0},
+                    {"value": "rgba({palette.beyondBlue}, 0.4)", "stop": 0.3},
+                    {"value": "rgba({palette.beyondBlue}, 1)", "stop": 1}
+                ]
+            },
+            "description": "grey6"
+        }
+    },
+    "dark": {
+        "background": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundAlternative": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundBrand": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundBrandSecondary": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainer": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerError": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerHover": {
+            "value": "rgba({palette.white}, 0.03)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerPressed": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerBrand": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerBrandHover": {
+            "value": "rgba({palette.white}, 0.03)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerBrandPressed": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerBrandOverInverse": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerAlternative": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundOverlay": {
+            "value": "rgba({palette.darkModeGrey}, 0.8)",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundSkeleton": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "backgroundSkeletonInverse": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "backgroundBrandTop": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundBrandBottom": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "appBarBackground": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "navigationBarBackground": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "skeletonWave": {
+            "value": "{palette.grey80}",
+            "type": "color",
+            "description": "grey80"
+        },
+        "borderLow": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "border": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "borderHigh": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "borderSelected": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "coverBackgroundHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.25)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "coverBackgroundPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.35)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "buttonDangerBackground": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "buttonDangerBackgroundSelected": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "buttonDangerBackgroundHover": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "buttonLinkDangerBackgroundSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkDangerBackgroundInverse": {
+            "value": "rgba({palette.white}, 0)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkDangerBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkBackgroundSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonPrimaryBackground": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "buttonPrimaryBackgroundInverse": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "buttonPrimaryBackgroundSelected": {
+            "value": "{palette.beyondBlue55}",
+            "type": "color",
+            "description": "beyondBlue55"
+        },
+        "buttonPrimaryBackgroundHover": {
+            "value": "{palette.beyondBlue55}",
+            "type": "color",
+            "description": "beyondBlue55"
+        },
+        "buttonPrimaryBackgroundInverseSelected": {
+            "value": "{palette.beyondBlue55}",
+            "type": "color",
+            "description": "beyondBlue55"
+        },
+        "buttonSecondaryBackgroundSelected": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorder": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderInverseSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundHover": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundInverseHover": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimary": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimaryInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimaryInverseSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonSecondary": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textButtonSecondarySelected": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textButtonSecondaryInverse": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textButtonSecondaryInverseSelected": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textLink": {
+            "value": "{palette.beyondBlue40}",
+            "type": "color",
+            "description": "beyondBlue40"
+        },
+        "textLinkInverse": {
+            "value": "{palette.beyondBlue40}",
+            "type": "color",
+            "description": "beyondBlue40"
+        },
+        "textLinkDanger": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "textLinkSnackbar": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textActivated": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textBrand": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "control": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "controlActivated": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "controlInverse": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "controlActivatedInverse": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "controlError": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "barTrack": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "loadingBar": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "loadingBarBackground": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "toggleAndroidInactive": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "toggleAndroidBackgroundActive": {
+            "value": "{palette.beyondBlue15}",
+            "type": "color",
+            "description": "beyondBlue15"
+        },
+        "iosControlKnob": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "badge": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "feedbackErrorBackground": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "feedbackInfoBackground": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "divider": {
+            "value": "rgba({palette.white}, 0.1)",
+            "type": "color",
+            "description": "white"
+        },
+        "dividerInverse": {
+            "value": "rgba({palette.white}, 0.1)",
+            "type": "color",
+            "description": "white"
+        },
+        "navigationBarDivider": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "brand": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "brandHigh": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "inverse": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "neutralHigh": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "neutralMedium": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "neutralMediumInverse": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "neutralLow": {
+            "value": "{palette.grey80}",
+            "type": "color",
+            "description": "grey80"
+        },
+        "neutralLowAlternative": {
+            "value": "{palette.grey80}",
+            "type": "color",
+            "description": "grey80"
+        },
+        "textPrimary": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textPrimaryInverse": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textSecondary": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "textSecondaryInverse": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "success": {
+            "value": "{palette.o2Green}",
+            "type": "color",
+            "description": "o2Green"
+        },
+        "warning": {
+            "value": "{palette.o2Orange}",
+            "type": "color",
+            "description": "o2Orange"
+        },
+        "error": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "textError": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "textErrorInverse": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "promo": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "highlight": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "successLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "warningLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "errorLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "promoLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "brandLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "successHigh": {
+            "value": "{palette.o2Green40}",
+            "type": "color",
+            "description": "o2Green40"
+        },
+        "warningHigh": {
+            "value": "{palette.o2Orange40}",
+            "type": "color",
+            "description": "o2Orange40"
+        },
+        "errorHigh": {
+            "value": "{palette.o2Red40}",
+            "type": "color",
+            "description": "o2Red40"
+        },
+        "promoHigh": {
+            "value": "{palette.o2Pink30}",
+            "type": "color",
+            "description": "o2Pink30"
+        },
+        "successHighInverse": {
+            "value": "{palette.o2Green80}",
+            "type": "color",
+            "description": "o2Green80"
+        },
+        "warningHighInverse": {
+            "value": "{palette.o2Orange75}",
+            "type": "color",
+            "description": "o2Orange75"
+        },
+        "errorHighInverse": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "promoHighInverse": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "textNavigationBarPrimary": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textNavigationBarSecondary": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "textNavigationSearchBarHint": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "textNavigationSearchBarText": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textAppBar": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "textAppBarSelected": {
+            "value": "{palette.beyondBlue40}",
+            "type": "color",
+            "description": "beyondBlue40"
+        },
+        "customTabsBackground": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "tagTextPromo": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "tagTextActive": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "tagTextInactive": {
+            "value": "{palette.grey40}",
+            "type": "color",
+            "description": "grey40"
+        },
+        "tagTextSuccess": {
+            "value": "{palette.o2Green}",
+            "type": "color",
+            "description": "o2Green"
+        },
+        "tagTextWarning": {
+            "value": "{palette.o2Orange}",
+            "type": "color",
+            "description": "o2Orange"
+        },
+        "tagTextError": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "tagBackgroundPromo": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundActive": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundInactive": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundSuccess": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundWarning": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundError": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "cardContentOverlay": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {"value": "rgba({palette.black}, 0)", "stop": 0},
+                    {"value": "rgba({palette.black}, 0.4)", "stop": 0.3},
+                    {"value": "rgba({palette.black}, 0.7)", "stop": 1}
+                ]
+            },
+            "description": "grey6"
+        }
+    },
+    "radius": {
+        "avatar": {"value": "circle", "type": "borderRadius"},
+        "bar": {"value": "999", "type": "borderRadius"},
+        "button": {"value": "999", "type": "borderRadius"},
+        "checkbox": {"value": "2", "type": "borderRadius"},
+        "container": {"value": "16", "type": "borderRadius"},
+        "indicator": {"value": "999", "type": "borderRadius"},
+        "input": {"value": "12", "type": "borderRadius"},
+        "legacyDisplay": {"value": "16", "type": "borderRadius"},
+        "popup": {"value": "8", "type": "borderRadius"},
+        "sheet": {"value": "16", "type": "borderRadius"},
+        "mediaSmall": {"value": "8", "type": "borderRadius"}
+    },
+    "text": {
+        "weight": {
+            "cardTitle": {"value": "medium", "type": "typography"},
+            "button": {"value": "medium", "type": "typography"},
+            "tabsLabel": {"value": "medium", "type": "typography"},
+            "link": {"value": "medium", "type": "typography"},
+            "title1": {"value": "medium", "type": "typography"},
+            "title2": {"value": "bold", "type": "typography"},
+            "indicator": {"value": "medium", "type": "typography"},
+            "navigationBar": {"value": "medium", "type": "typography"},
+            "text5": {"value": "bold", "type": "typography"},
+            "text6": {"value": "bold", "type": "typography"},
+            "text7": {"value": "bold", "type": "typography"},
+            "text8": {"value": "bold", "type": "typography"},
+            "text9": {"value": "bold", "type": "typography"},
+            "text10": {"value": "bold", "type": "typography"}
+        },
+        "size": {
+            "tabsLabel": {
+                "value": {"mobile": 16, "desktop": 18},
+                "type": "typography"
+            },
+            "title2": {
+                "value": {"mobile": 20, "desktop": 28},
+                "type": "typography"
+            }
+        },
+        "lineHeight": {
+            "tabsLabel": {
+                "value": {"mobile": 24, "desktop": 24},
+                "type": "typography"
+            },
+            "title2": {
+                "value": {"mobile": 24, "desktop": 32},
+                "type": "typography"
+            }
+        }
+    },
+    "themeVariant": {
+        "successFeedback": {"value": "inverse", "type": "themeVariant"},
+        "brandLoadingScreen": {"value": "inverse", "type": "themeVariant"}
+    },
+    "global": {
+        "palette": {
+            "beyondBlue": {"value": "#0050FF", "type": "color"},
+            "beyondBlue10": {"value": "#E5EDFF", "type": "color"},
+            "beyondBlue15": {"value": "#CCDCFF", "type": "color"},
+            "beyondBlue30": {"value": "#80A7FF", "type": "color"},
+            "beyondBlue40": {"value": "#4D84FF", "type": "color"},
+            "beyondBlue45": {"value": "#0A73EB", "type": "color"},
+            "beyondBlue55": {"value": "#0044D9", "type": "color"},
+            "beyondBlue70": {"value": "#0038B2", "type": "color"},
+            "beyondBlue90": {"value": "#001033", "type": "color"},
+            "darkBlue": {"value": "#00008C", "type": "color"},
+            "o2BlueLight": {"value": "#82DCFA", "type": "color"},
+            "o2BlueLight30": {"value": "#C0EEFD", "type": "color"},
+            "o2BlueLight35": {"value": "#B4EAFC", "type": "color"},
+            "o2Green": {"value": "#00DC7D", "type": "color"},
+            "o2Green10": {"value": "#E5FBF2", "type": "color"},
+            "o2Green40": {"value": "#4CE7A4", "type": "color"},
+            "o2Green80": {"value": "#006338", "type": "color"},
+            "o2Yellow": {"value": "#FADC00", "type": "color"},
+            "o2Orange": {"value": "#FFA55A", "type": "color"},
+            "o2Orange10": {"value": "#FFF6EE", "type": "color"},
+            "o2Orange40": {"value": "#FFC08B", "type": "color"},
+            "o2Orange75": {"value": "#996336", "type": "color"},
+            "o2Pink": {"value": "#FA96FF", "type": "color"},
+            "o2Pink15": {"value": "#FEEAFF", "type": "color"},
+            "o2Pink30": {"value": "#FDCAFF", "type": "color"},
+            "o2Pink80": {"value": "#704373", "type": "color"},
+            "o2Red": {"value": "#FF5A5A", "type": "color"},
+            "o2Red10": {"value": "#FFEEEE", "type": "color"},
+            "o2Red20": {"value": "#FFCDCD", "type": "color"},
+            "o2Red40": {"value": "#FF8B8B", "type": "color"},
+            "o2Red45": {"value": "#FF7B7B", "type": "color"},
+            "o2Red60": {"value": "#CC4848", "type": "color"},
+            "o2Red65": {"value": "#BF4444", "type": "color"},
+            "grey20": {"value": "#F3F3F5", "type": "color"},
+            "grey30": {"value": "#D9D9DD", "type": "color"},
+            "grey40": {"value": "#B4B4BE", "type": "color"},
+            "grey45": {"value": "#8C8C9A", "type": "color"},
+            "grey60": {"value": "#6E6E77", "type": "color"},
+            "grey80": {"value": "#3C3C46", "type": "color"},
+            "black": {"value": "#00001E", "type": "color"},
+            "white": {"value": "#FFFFFF", "type": "color"},
+            "darkModeBlack": {"value": "#00001C", "type": "color"},
+            "darkModeGrey": {"value": "#08132B", "type": "color"},
+            "darkModeGrey6": {"value": "#14213D", "type": "color"},
+            "darkModeBeyondBlue": {"value": "#1A62FF", "type": "color"}
+        }
+    }
+}
diff --git a/scripts/mistica-skin-generator/generators/colors/__tests__/brand2-tokens.json b/scripts/mistica-skin-generator/generators/colors/__tests__/brand2-tokens.json
new file mode 100644
index 00000000..001eaaa7
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/__tests__/brand2-tokens.json
@@ -0,0 +1,1630 @@
+{
+    "light": {
+        "background": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundAlternative": {
+            "value": "{palette.grey1}",
+            "type": "color",
+            "description": "grey1"
+        },
+        "backgroundBrand": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "backgroundBrandSecondary": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "backgroundContainer": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerError": {
+            "value": "{palette.pepperLight10}",
+            "type": "color",
+            "description": "pepperLight10"
+        },
+        "backgroundContainerHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.03)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.05)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerBrand": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "backgroundContainerBrandHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.2)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerBrandPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.4)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerBrandOverInverse": {
+            "value": "{palette.vivoPurpleDark}",
+            "type": "color",
+            "description": "vivoPurpleDark"
+        },
+        "backgroundContainerAlternative": {
+            "value": "{palette.grey1}",
+            "type": "color",
+            "description": "grey1"
+        },
+        "backgroundOverlay": {
+            "value": "rgba({palette.grey6}, 0.6)",
+            "type": "color",
+            "description": "grey6"
+        },
+        "backgroundSkeleton": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "backgroundSkeletonInverse": {
+            "value": "{palette.vivoPurpleDark}",
+            "type": "color",
+            "description": "vivoPurpleDark"
+        },
+        "backgroundBrandTop": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "backgroundBrandBottom": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "appBarBackground": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "navigationBarBackground": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "skeletonWave": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "borderLow": {
+            "value": "{palette.grey1}",
+            "type": "color",
+            "description": "grey1"
+        },
+        "border": {
+            "value": "{palette.grey3}",
+            "type": "color",
+            "description": "grey3"
+        },
+        "borderHigh": {
+            "value": "{palette.grey5}",
+            "type": "color",
+            "description": "grey5"
+        },
+        "borderSelected": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "coverBackgroundHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.25)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "coverBackgroundPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.35)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "buttonDangerBackground": {
+            "value": "{palette.pepper}",
+            "type": "color",
+            "description": "pepper"
+        },
+        "buttonDangerBackgroundSelected": {
+            "value": "{palette.pepperDark}",
+            "type": "color",
+            "description": "pepperDark"
+        },
+        "buttonDangerBackgroundHover": {
+            "value": "{palette.pepperDark}",
+            "type": "color",
+            "description": "pepperDark"
+        },
+        "buttonLinkDangerBackgroundSelected": {
+            "value": "{palette.pepperLight10}",
+            "type": "color",
+            "description": "pepperLight10"
+        },
+        "buttonLinkDangerBackgroundInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkDangerBackgroundInverseSelected": {
+            "value": "{palette.pepperLight10}",
+            "type": "color",
+            "description": "pepperLight10"
+        },
+        "buttonLinkBackgroundSelected": {
+            "value": "{palette.vivoPurpleLight10}",
+            "type": "color",
+            "description": "vivoPurpleLight10"
+        },
+        "buttonLinkBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.1)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonPrimaryBackground": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "buttonPrimaryBackgroundInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonPrimaryBackgroundSelected": {
+            "value": "{palette.vivoPurpleDark}",
+            "type": "color",
+            "description": "vivoPurpleDark"
+        },
+        "buttonPrimaryBackgroundHover": {
+            "value": "{palette.vivoPurpleDark}",
+            "type": "color",
+            "description": "vivoPurpleDark"
+        },
+        "buttonPrimaryBackgroundInverseSelected": {
+            "value": "{palette.vivoPurpleLight50}",
+            "type": "color",
+            "description": "vivoPurpleLight50"
+        },
+        "buttonSecondaryBorder": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "buttonSecondaryBorderSelected": {
+            "value": "{palette.vivoPurpleDark}",
+            "type": "color",
+            "description": "vivoPurpleDark"
+        },
+        "buttonSecondaryBackgroundHover": {
+            "value": "{palette.vivoPurpleLight10}",
+            "type": "color",
+            "description": "vivoPurpleLight10"
+        },
+        "buttonSecondaryBackgroundSelected": {
+            "value": "{palette.vivoPurpleLight10}",
+            "type": "color",
+            "description": "vivoPurpleLight10"
+        },
+        "buttonSecondaryBorderInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderInverseSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundInverseHover": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimary": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimaryInverse": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "textButtonPrimaryInverseSelected": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "textButtonSecondary": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "textButtonSecondarySelected": {
+            "value": "{palette.vivoPurpleDark}",
+            "type": "color",
+            "description": "vivoPurpleDark"
+        },
+        "textButtonSecondaryInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonSecondaryInverseSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textLink": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "textLinkInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textLinkDanger": {
+            "value": "{palette.pepper}",
+            "type": "color",
+            "description": "pepper"
+        },
+        "textLinkSnackbar": {
+            "value": "{palette.vivoPurpleLight50}",
+            "type": "color",
+            "description": "vivoPurpleLight50"
+        },
+        "textActivated": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "textBrand": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "control": {
+            "value": "{palette.grey3}",
+            "type": "color",
+            "description": "grey3"
+        },
+        "controlActivated": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "controlInverse": {
+            "value": "{palette.vivoPurpleLight50}",
+            "type": "color",
+            "description": "vivoPurpleLight50"
+        },
+        "controlActivatedInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "controlError": {
+            "value": "{palette.pepper}",
+            "type": "color",
+            "description": "pepper"
+        },
+        "barTrack": {
+            "value": "{palette.grey3}",
+            "type": "color",
+            "description": "grey3"
+        },
+        "loadingBar": {
+            "value": "{palette.pink}",
+            "type": "color",
+            "description": "pink"
+        },
+        "loadingBarBackground": {
+            "value": "{palette.pepperLight30}",
+            "type": "color",
+            "description": "pepperLight30"
+        },
+        "toggleAndroidInactive": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "toggleAndroidBackgroundActive": {
+            "value": "{palette.vivoPurpleLight20}",
+            "type": "color",
+            "description": "vivoPurpleLight20"
+        },
+        "iosControlKnob": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "divider": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "dividerInverse": {
+            "value": "rgba({palette.white}, 0.2)",
+            "type": "color",
+            "description": "white"
+        },
+        "navigationBarDivider": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "badge": {
+            "value": "{palette.pepperDark}",
+            "type": "color",
+            "description": "pepperDark"
+        },
+        "feedbackErrorBackground": {
+            "value": "{palette.pepper}",
+            "type": "color",
+            "description": "pepper"
+        },
+        "feedbackInfoBackground": {
+            "value": "{palette.grey6}",
+            "type": "color",
+            "description": "grey6"
+        },
+        "brand": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "brandHigh": {
+            "value": "{palette.vivoPurpleDark}",
+            "type": "color",
+            "description": "vivoPurpleDark"
+        },
+        "inverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "neutralHigh": {
+            "value": "{palette.grey6}",
+            "type": "color",
+            "description": "grey6"
+        },
+        "neutralMedium": {
+            "value": "{palette.grey5}",
+            "type": "color",
+            "description": "grey5"
+        },
+        "neutralMediumInverse": {
+            "value": "{palette.grey5}",
+            "type": "color",
+            "description": "grey5"
+        },
+        "neutralLow": {
+            "value": "{palette.grey1}",
+            "type": "color",
+            "description": "grey1"
+        },
+        "neutralLowAlternative": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "textPrimary": {
+            "value": "{palette.grey6}",
+            "type": "color",
+            "description": "grey6"
+        },
+        "textPrimaryInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textSecondary": {
+            "value": "{palette.grey5}",
+            "type": "color",
+            "description": "grey5"
+        },
+        "textSecondaryInverse": {
+            "value": "{palette.vivoPurpleLight20}",
+            "type": "color",
+            "description": "vivoPurpleLight20"
+        },
+        "success": {
+            "value": "{palette.vivoGreen}",
+            "type": "color",
+            "description": "vivoGreen"
+        },
+        "warning": {
+            "value": "{palette.orange}",
+            "type": "color",
+            "description": "orange"
+        },
+        "error": {
+            "value": "{palette.pepper}",
+            "type": "color",
+            "description": "pepper"
+        },
+        "textError": {
+            "value": "{palette.pepper}",
+            "type": "color",
+            "description": "pepper"
+        },
+        "textErrorInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "promo": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "highlight": {
+            "value": "{palette.pink}",
+            "type": "color",
+            "description": "pink"
+        },
+        "successLow": {
+            "value": "{palette.vivoGreenLight10}",
+            "type": "color",
+            "description": "vivoGreenLight10"
+        },
+        "warningLow": {
+            "value": "{palette.orangeLight10}",
+            "type": "color",
+            "description": "orangeLight10"
+        },
+        "errorLow": {
+            "value": "{palette.pepperLight10}",
+            "type": "color",
+            "description": "pepperLight10"
+        },
+        "promoLow": {
+            "value": "{palette.vivoPurpleLight10}",
+            "type": "color",
+            "description": "vivoPurpleLight10"
+        },
+        "brandLow": {
+            "value": "{palette.vivoPurpleLight10}",
+            "type": "color",
+            "description": "vivoPurpleLight10"
+        },
+        "successHigh": {
+            "value": "{palette.vivoGreenDark}",
+            "type": "color",
+            "description": "vivoGreenDark"
+        },
+        "warningHigh": {
+            "value": "{palette.orangeDark}",
+            "type": "color",
+            "description": "orangeDark"
+        },
+        "errorHigh": {
+            "value": "{palette.pepperDark80}",
+            "type": "color",
+            "description": "pepperDark80"
+        },
+        "promoHigh": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "successHighInverse": {
+            "value": "{palette.vivoGreenDark}",
+            "type": "color",
+            "description": "vivoGreenDark"
+        },
+        "warningHighInverse": {
+            "value": "{palette.orangeDark}",
+            "type": "color",
+            "description": "orangeDark"
+        },
+        "errorHighInverse": {
+            "value": "{palette.pepperDark80}",
+            "type": "color",
+            "description": "pepperDark80"
+        },
+        "promoHighInverse": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "textNavigationBarPrimary": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textNavigationBarSecondary": {
+            "value": "{palette.vivoPurpleLight50}",
+            "type": "color",
+            "description": "vivoPurpleLight50"
+        },
+        "textNavigationSearchBarHint": {
+            "value": "{palette.vivoPurpleLight50}",
+            "type": "color",
+            "description": "vivoPurpleLight50"
+        },
+        "textNavigationSearchBarText": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textAppBar": {
+            "value": "{palette.grey4}",
+            "type": "color",
+            "description": "grey4"
+        },
+        "textAppBarSelected": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "customTabsBackground": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "tagTextPromo": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "tagTextActive": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "tagTextInactive": {
+            "value": "{palette.grey5}",
+            "type": "color",
+            "description": "grey5"
+        },
+        "tagTextSuccess": {
+            "value": "{palette.vivoGreenDark}",
+            "type": "color",
+            "description": "vivoGreenDark"
+        },
+        "tagTextWarning": {
+            "value": "{palette.orangeDark}",
+            "type": "color",
+            "description": "orangeDark"
+        },
+        "tagTextError": {
+            "value": "{palette.pepperDark80}",
+            "type": "color",
+            "description": "pepperDark80"
+        },
+        "tagBackgroundPromo": {
+            "value": "{palette.vivoPurpleLight10}",
+            "type": "color",
+            "description": "vivoPurpleLight10"
+        },
+        "tagBackgroundActive": {
+            "value": "{palette.vivoPurpleLight10}",
+            "type": "color",
+            "description": "vivoPurpleLight10"
+        },
+        "tagBackgroundInactive": {
+            "value": "{palette.grey1}",
+            "type": "color",
+            "description": "grey1"
+        },
+        "tagBackgroundSuccess": {
+            "value": "{palette.vivoGreenLight10}",
+            "type": "color",
+            "description": "vivoGreenLight10"
+        },
+        "tagBackgroundWarning": {
+            "value": "{palette.orangeLight10}",
+            "type": "color",
+            "description": "orangeLight10"
+        },
+        "tagBackgroundError": {
+            "value": "{palette.pepperLight10}",
+            "type": "color",
+            "description": "pepperLight10"
+        },
+        "cardContentOverlay": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {
+                        "value": "rgba({palette.grey6}, 0)",
+                        "stop": 0
+                    },
+                    {
+                        "value": "rgba({palette.grey6}, 0.4)",
+                        "stop": 0.3
+                    },
+                    {
+                        "value": "rgba({palette.grey6}, 0.7)",
+                        "stop": 1
+                    }
+                ]
+            },
+            "description": "grey6"
+        }
+    },
+    "dark": {
+        "background": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundAlternative": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundBrand": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundBrandSecondary": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainer": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerError": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerHover": {
+            "value": "rgba({palette.white}, 0.03)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerPressed": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerBrand": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerBrandHover": {
+            "value": "rgba({palette.white}, 0.03)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerBrandPressed": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerBrandOverInverse": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerAlternative": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundOverlay": {
+            "value": "rgba({palette.darkModeGrey}, 0.8)",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundSkeleton": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "backgroundSkeletonInverse": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "backgroundBrandTop": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundBrandBottom": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "appBarBackground": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "navigationBarBackground": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "skeletonWave": {
+            "value": "{palette.grey5}",
+            "type": "color",
+            "description": "grey5"
+        },
+        "borderLow": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "border": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "borderHigh": {
+            "value": "{palette.grey5}",
+            "type": "color",
+            "description": "grey5"
+        },
+        "borderSelected": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "coverBackgroundHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.25)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "coverBackgroundPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.35)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "buttonDangerBackground": {
+            "value": "{palette.pepper}",
+            "type": "color",
+            "description": "pepper"
+        },
+        "buttonDangerBackgroundSelected": {
+            "value": "{palette.pepperDark}",
+            "type": "color",
+            "description": "pepperDark"
+        },
+        "buttonDangerBackgroundHover": {
+            "value": "{palette.pepperDark}",
+            "type": "color",
+            "description": "pepperDark"
+        },
+        "buttonLinkDangerBackgroundSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkDangerBackgroundInverse": {
+            "value": "rgba({palette.white}, 0)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkDangerBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkBackgroundSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonPrimaryBackground": {
+            "value": "{palette.vivoPurpleLight80}",
+            "type": "color",
+            "description": "vivoPurpleLight80"
+        },
+        "buttonPrimaryBackgroundInverse": {
+            "value": "{palette.vivoPurpleLight80}",
+            "type": "color",
+            "description": "vivoPurpleLight80"
+        },
+        "buttonPrimaryBackgroundSelected": {
+            "value": "{palette.vivoPurpleDark}",
+            "type": "color",
+            "description": "vivoPurpleDark"
+        },
+        "buttonPrimaryBackgroundHover": {
+            "value": "{palette.vivoPurpleDark}",
+            "type": "color",
+            "description": "vivoPurpleDark"
+        },
+        "buttonPrimaryBackgroundInverseSelected": {
+            "value": "{palette.vivoPurpleDark}",
+            "type": "color",
+            "description": "vivoPurpleDark"
+        },
+        "buttonSecondaryBackgroundHover": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundSelected": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorder": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderInverseSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundInverseHover": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimary": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "textButtonPrimaryInverse": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "textButtonPrimaryInverseSelected": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "textButtonSecondary": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "textButtonSecondarySelected": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "textButtonSecondaryInverse": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "textButtonSecondaryInverseSelected": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "textLink": {
+            "value": "{palette.vivoPurpleLight50}",
+            "type": "color",
+            "description": "vivoPurpleLight50"
+        },
+        "textLinkInverse": {
+            "value": "{palette.vivoPurpleLight50}",
+            "type": "color",
+            "description": "vivoPurpleLight50"
+        },
+        "textLinkDanger": {
+            "value": "{palette.pepper}",
+            "type": "color",
+            "description": "pepper"
+        },
+        "textLinkSnackbar": {
+            "value": "{palette.vivoPurpleLight50}",
+            "type": "color",
+            "description": "vivoPurpleLight50"
+        },
+        "textActivated": {
+            "value": "{palette.vivoPurpleLight80}",
+            "type": "color",
+            "description": "vivoPurpleLight80"
+        },
+        "textBrand": {
+            "value": "{palette.vivoPurpleLight80}",
+            "type": "color",
+            "description": "vivoPurpleLight80"
+        },
+        "control": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "controlActivated": {
+            "value": "{palette.vivoPurpleLight80}",
+            "type": "color",
+            "description": "vivoPurpleLight80"
+        },
+        "controlInverse": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "controlActivatedInverse": {
+            "value": "{palette.vivoPurpleLight80}",
+            "type": "color",
+            "description": "vivoPurpleLight80"
+        },
+        "controlError": {
+            "value": "{palette.pepper}",
+            "type": "color",
+            "description": "pepper"
+        },
+        "barTrack": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "loadingBar": {
+            "value": "{palette.vivoPurpleLight80}",
+            "type": "color",
+            "description": "vivoPurpleLight80"
+        },
+        "loadingBarBackground": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "toggleAndroidInactive": {
+            "value": "{palette.grey4}",
+            "type": "color",
+            "description": "grey4"
+        },
+        "toggleAndroidBackgroundActive": {
+            "value": "{palette.vivoPurpleLight50}",
+            "type": "color",
+            "description": "vivoPurpleLight50"
+        },
+        "iosControlKnob": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "divider": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "dividerInverse": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "navigationBarDivider": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "badge": {
+            "value": "{palette.pepperDark}",
+            "type": "color",
+            "description": "pepperDark"
+        },
+        "feedbackErrorBackground": {
+            "value": "{palette.pepper}",
+            "type": "color",
+            "description": "pepper"
+        },
+        "feedbackInfoBackground": {
+            "value": "{palette.grey6}",
+            "type": "color",
+            "description": "grey6"
+        },
+        "brand": {
+            "value": "{palette.vivoPurpleLight80}",
+            "type": "color",
+            "description": "vivoPurpleLight80"
+        },
+        "brandHigh": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "inverse": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "neutralHigh": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "neutralMedium": {
+            "value": "{palette.grey5}",
+            "type": "color",
+            "description": "grey5"
+        },
+        "neutralMediumInverse": {
+            "value": "{palette.grey5}",
+            "type": "color",
+            "description": "grey5"
+        },
+        "neutralLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "neutralLowAlternative": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "textPrimary": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "textPrimaryInverse": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "textSecondary": {
+            "value": "{palette.grey4}",
+            "type": "color",
+            "description": "grey4"
+        },
+        "textSecondaryInverse": {
+            "value": "{palette.grey4}",
+            "type": "color",
+            "description": "grey4"
+        },
+        "success": {
+            "value": "{palette.vivoGreen}",
+            "type": "color",
+            "description": "vivoGreen"
+        },
+        "warning": {
+            "value": "{palette.orange}",
+            "type": "color",
+            "description": "orange"
+        },
+        "error": {
+            "value": "{palette.pepper}",
+            "type": "color",
+            "description": "pepper"
+        },
+        "textError": {
+            "value": "{palette.pepper}",
+            "type": "color",
+            "description": "pepper"
+        },
+        "textErrorInverse": {
+            "value": "{palette.pepper}",
+            "type": "color",
+            "description": "pepper"
+        },
+        "promo": {
+            "value": "{palette.vivoPurpleLight80}",
+            "type": "color",
+            "description": "vivoPurpleLight80"
+        },
+        "highlight": {
+            "value": "{palette.pink}",
+            "type": "color",
+            "description": "pink"
+        },
+        "successLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "warningLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "errorLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "promoLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "brandLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "successHigh": {
+            "value": "{palette.vivoGreenLight30}",
+            "type": "color",
+            "description": "vivoGreenLight30"
+        },
+        "warningHigh": {
+            "value": "{palette.orangeLight40}",
+            "type": "color",
+            "description": "orangeLight40"
+        },
+        "errorHigh": {
+            "value": "{palette.pepperLight40}",
+            "type": "color",
+            "description": "pepperLight40"
+        },
+        "promoHigh": {
+            "value": "{palette.vivoPurpleLight50}",
+            "type": "color",
+            "description": "vivoPurpleLight50"
+        },
+        "successHighInverse": {
+            "value": "{palette.vivoGreenDark}",
+            "type": "color",
+            "description": "vivoGreenDark"
+        },
+        "warningHighInverse": {
+            "value": "{palette.orangeDark}",
+            "type": "color",
+            "description": "orangeDark"
+        },
+        "errorHighInverse": {
+            "value": "{palette.pepperDark80}",
+            "type": "color",
+            "description": "pepperDark80"
+        },
+        "promoHighInverse": {
+            "value": "{palette.vivoPurple}",
+            "type": "color",
+            "description": "vivoPurple"
+        },
+        "textNavigationBarPrimary": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "textNavigationBarSecondary": {
+            "value": "{palette.grey4}",
+            "type": "color",
+            "description": "grey4"
+        },
+        "textNavigationSearchBarHint": {
+            "value": "{palette.grey4}",
+            "type": "color",
+            "description": "grey4"
+        },
+        "textNavigationSearchBarText": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "textAppBar": {
+            "value": "{palette.grey5}",
+            "type": "color",
+            "description": "grey5"
+        },
+        "textAppBarSelected": {
+            "value": "{palette.grey2}",
+            "type": "color",
+            "description": "grey2"
+        },
+        "customTabsBackground": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "tagTextPromo": {
+            "value": "{palette.vivoPurpleLight50}",
+            "type": "color",
+            "description": "vivoPurpleLight50"
+        },
+        "tagTextActive": {
+            "value": "{palette.vivoPurpleLight80}",
+            "type": "color",
+            "description": "vivoPurpleLight80"
+        },
+        "tagTextInactive": {
+            "value": "{palette.grey5}",
+            "type": "color",
+            "description": "grey5"
+        },
+        "tagTextSuccess": {
+            "value": "{palette.vivoGreenLight30}",
+            "type": "color",
+            "description": "vivoGreenLight30"
+        },
+        "tagTextWarning": {
+            "value": "{palette.orangeLight40}",
+            "type": "color",
+            "description": "orangeLight40"
+        },
+        "tagTextError": {
+            "value": "{palette.pepperLight40}",
+            "type": "color",
+            "description": "pepperLight40"
+        },
+        "tagBackgroundPromo": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundActive": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundInactive": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundSuccess": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundWarning": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundError": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "cardContentOverlay": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {
+                        "value": "rgba({palette.grey6}, 0)",
+                        "stop": 0
+                    },
+                    {
+                        "value": "rgba({palette.grey6}, 0.4)",
+                        "stop": 0.3
+                    },
+                    {
+                        "value": "rgba({palette.grey6}, 0.7)",
+                        "stop": 1
+                    }
+                ]
+            },
+            "description": "grey6"
+        }
+    },
+    "radius": {
+        "avatar": {
+            "value": "circle",
+            "type": "borderRadius"
+        },
+        "bar": {
+            "value": "999",
+            "type": "borderRadius"
+        },
+        "button": {
+            "value": "4",
+            "type": "borderRadius"
+        },
+        "checkbox": {
+            "value": "2",
+            "type": "borderRadius"
+        },
+        "container": {
+            "value": "8",
+            "type": "borderRadius"
+        },
+        "indicator": {
+            "value": "999",
+            "type": "borderRadius"
+        },
+        "input": {
+            "value": "8",
+            "type": "borderRadius"
+        },
+        "legacyDisplay": {
+            "value": "16",
+            "type": "borderRadius"
+        },
+        "popup": {
+            "value": "8",
+            "type": "borderRadius"
+        },
+        "sheet": {
+            "value": "8",
+            "type": "borderRadius"
+        },
+        "mediaSmall": {
+            "value": "8",
+            "type": "borderRadius"
+        }
+    },
+    "text": {
+        "weight": {
+            "cardTitle": {
+                "value": "regular",
+                "type": "typography"
+            },
+            "button": {
+                "value": "medium",
+                "type": "typography"
+            },
+            "tabsLabel": {
+                "value": "medium",
+                "type": "typography"
+            },
+            "link": {
+                "value": "medium",
+                "type": "typography"
+            },
+            "title1": {
+                "value": "medium",
+                "type": "typography"
+            },
+            "title2": {
+                "value": "light",
+                "type": "typography"
+            },
+            "indicator": {
+                "value": "medium",
+                "type": "typography"
+            },
+            "navigationBar": {
+                "value": "medium",
+                "type": "typography"
+            },
+            "text5": {
+                "value": "light",
+                "type": "typography"
+            },
+            "text6": {
+                "value": "light",
+                "type": "typography"
+            },
+            "text7": {
+                "value": "light",
+                "type": "typography"
+            },
+            "text8": {
+                "value": "light",
+                "type": "typography"
+            },
+            "text9": {
+                "value": "light",
+                "type": "typography"
+            },
+            "text10": {
+                "value": "light",
+                "type": "typography"
+            }
+        },
+        "size": {
+            "tabsLabel": {
+                "value": {
+                    "mobile": 16,
+                    "desktop": 18
+                },
+                "type": "typography"
+            },
+            "title2": {
+                "value": {
+                    "mobile": 20,
+                    "desktop": 28
+                },
+                "type": "typography"
+            }
+        },
+        "lineHeight": {
+            "tabsLabel": {
+                "value": {
+                    "mobile": 24,
+                    "desktop": 24
+                },
+                "type": "typography"
+            },
+            "title2": {
+                "value": {
+                    "mobile": 24,
+                    "desktop": 32
+                },
+                "type": "typography"
+            }
+        }
+    },
+    "themeVariant": {
+        "successFeedback": {
+            "value": "inverse",
+            "type": "themeVariant"
+        },
+        "brandLoadingScreen": {
+            "value": "inverse",
+            "type": "themeVariant"
+        }
+    },
+    "global": {
+        "palette": {
+            "vivoPurple": {
+                "value": "#660099",
+                "type": "color"
+            },
+            "vivoPurpleDark": {
+                "value": "#461E5F",
+                "type": "color"
+            },
+            "vivoPurpleLight10": {
+                "value": "#EFE5F4",
+                "type": "color"
+            },
+            "vivoPurpleLight20": {
+                "value": "#E0CCEB",
+                "type": "color"
+            },
+            "vivoPurpleLight50": {
+                "value": "#B280CC",
+                "type": "color"
+            },
+            "vivoPurpleLight80": {
+                "value": "#8433AD",
+                "type": "color"
+            },
+            "vivoPurpleLight90": {
+                "value": "#751AA3",
+                "type": "color"
+            },
+            "vivoGreen": {
+                "value": "#99CC33",
+                "type": "color"
+            },
+            "vivoGreenDark": {
+                "value": "#225C3D",
+                "type": "color"
+            },
+            "vivoGreenLight10": {
+                "value": "#EDF8E8",
+                "type": "color"
+            },
+            "vivoGreen25": {
+                "value": "#D6EBAD",
+                "type": "color"
+            },
+            "vivoGreenLight30": {
+                "value": "#91AE9E",
+                "type": "color"
+            },
+            "vivoBlue": {
+                "value": "#00ABDB",
+                "type": "color"
+            },
+            "orange": {
+                "value": "#FF9900",
+                "type": "color"
+            },
+            "orange25": {
+                "value": "#FFD699",
+                "type": "color"
+            },
+            "orangeDark": {
+                "value": "#972A1D",
+                "type": "color"
+            },
+            "orangeLight10": {
+                "value": "#FFEFE1",
+                "type": "color"
+            },
+            "orangeLight40": {
+                "value": "#FFB84C",
+                "type": "color"
+            },
+            "pink": {
+                "value": "#EB3D7D",
+                "type": "color"
+            },
+            "pepper": {
+                "value": "#CC1F59",
+                "type": "color"
+            },
+            "pepperDark": {
+                "value": "#B71D63",
+                "type": "color"
+            },
+            "pepperDark80": {
+                "value": "#8F2052",
+                "type": "color"
+            },
+            "pepperLight10": {
+                "value": "#FCE4EF",
+                "type": "color"
+            },
+            "pepperLight30": {
+                "value": "#F7B1CB",
+                "type": "color"
+            },
+            "pepperLight40": {
+                "value": "#DB628B",
+                "type": "color"
+            },
+            "grey1": {
+                "value": "#F6F6F6",
+                "type": "color"
+            },
+            "grey2": {
+                "value": "#EEEEEE",
+                "type": "color"
+            },
+            "grey3": {
+                "value": "#DDDDDD",
+                "type": "color"
+            },
+            "grey4": {
+                "value": "#999999",
+                "type": "color"
+            },
+            "grey5": {
+                "value": "#666666",
+                "type": "color"
+            },
+            "grey6": {
+                "value": "#000000",
+                "type": "color"
+            },
+            "white": {
+                "value": "#FFFFFF",
+                "type": "color"
+            },
+            "darkModeBlack": {
+                "value": "#191919",
+                "type": "color"
+            },
+            "darkModeGrey": {
+                "value": "#242424",
+                "type": "color"
+            },
+            "darkModeGrey6": {
+                "value": "#313235",
+                "type": "color"
+            }
+        }
+    }
+}
diff --git a/scripts/mistica-skin-generator/generators/colors/__tests__/color-toolkit-generator.test.js b/scripts/mistica-skin-generator/generators/colors/__tests__/color-toolkit-generator.test.js
new file mode 100644
index 00000000..d40aacbf
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/__tests__/color-toolkit-generator.test.js
@@ -0,0 +1,31 @@
+import fs from 'fs';
+import {resolve} from 'path';
+import {reduceColors} from '../reduce-colors.js';
+import {generateColorToolkit} from '../color-toolkit-generator.js';
+
+test('generateColorToolkit', () => {
+    const getTokensFromFile = (file) => JSON.parse(fs.readFileSync(resolve(__dirname, file), 'utf-8'));
+    const brandsWithTokens = [
+        {
+            brand: {
+                id: 'brand1',
+                prefix: 'Brand1',
+                misticaDesignFileName: 'brand-1',
+            },
+            tokens: getTokensFromFile('brand1-tokens.json'),
+        },
+        {
+            brand: {
+                id: 'brand2',
+                prefix: 'Brand2',
+                misticaDesignFileName: 'brand-2',
+            },
+            tokens: getTokensFromFile('brand2-tokens.json'),
+        },
+    ];
+
+    const colors = reduceColors(brandsWithTokens);
+    const result = generateColorToolkit(colors);
+
+    expect(result).toMatchSnapshot();
+});
diff --git a/scripts/mistica-skin-generator/generators/colors/__tests__/mistica-color-generator.test.js b/scripts/mistica-skin-generator/generators/colors/__tests__/mistica-color-generator.test.js
new file mode 100644
index 00000000..f07b47af
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/__tests__/mistica-color-generator.test.js
@@ -0,0 +1,31 @@
+import fs from 'fs';
+import {resolve} from 'path';
+import {reduceColors} from '../reduce-colors.js';
+import {generateMisticaColor} from '../mistica-color-generator.js';
+
+test('generateMisticaColor', () => {
+    const getTokensFromFile = (file) => JSON.parse(fs.readFileSync(resolve(__dirname, file), 'utf-8'));
+    const brandsWithTokens = [
+        {
+            brand: {
+                id: 'brand1',
+                prefix: 'Brand1',
+                misticaDesignFileName: 'brand-1',
+            },
+            tokens: getTokensFromFile('brand1-tokens.json'),
+        },
+        {
+            brand: {
+                id: 'brand2',
+                prefix: 'Brand2',
+                misticaDesignFileName: 'brand-2',
+            },
+            tokens: getTokensFromFile('brand2-tokens.json'),
+        },
+    ];
+
+    const colors = reduceColors(brandsWithTokens);
+    const result = generateMisticaColor(colors);
+
+    expect(result).toMatchSnapshot();
+});
diff --git a/scripts/mistica-skin-generator/generators/colors/__tests__/mistica-colors-generator.test.js b/scripts/mistica-skin-generator/generators/colors/__tests__/mistica-colors-generator.test.js
new file mode 100644
index 00000000..7000cdb4
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/__tests__/mistica-colors-generator.test.js
@@ -0,0 +1,31 @@
+import fs from 'fs';
+import {resolve} from 'path';
+import {reduceColors} from '../reduce-colors.js';
+import {generateMisticaColors} from '../mistica-colors-generator.js';
+
+test('generateMisticaColors', () => {
+    const getTokensFromFile = (file) => JSON.parse(fs.readFileSync(resolve(__dirname, file), 'utf-8'));
+    const brandsWithTokens = [
+        {
+            brand: {
+                id: 'brand1',
+                prefix: 'Brand1',
+                misticaDesignFileName: 'brand-1',
+            },
+            tokens: getTokensFromFile('brand1-tokens.json'),
+        },
+        {
+            brand: {
+                id: 'brand2',
+                prefix: 'Brand2',
+                misticaDesignFileName: 'brand-2',
+            },
+            tokens: getTokensFromFile('brand2-tokens.json'),
+        },
+    ];
+
+    const colors = reduceColors(brandsWithTokens);
+    const result = generateMisticaColors(colors);
+
+    expect(result).toMatchSnapshot();
+});
diff --git a/scripts/mistica-skin-generator/generators/colors/__tests__/uicolor-toolkit-generator.test.js b/scripts/mistica-skin-generator/generators/colors/__tests__/uicolor-toolkit-generator.test.js
new file mode 100644
index 00000000..51218ae0
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/__tests__/uicolor-toolkit-generator.test.js
@@ -0,0 +1,31 @@
+import fs from 'fs';
+import {resolve} from 'path';
+import {reduceColors} from '../reduce-colors.js';
+import {generateUIColorToolkit} from '../uicolor-toolkit-generator.js';
+
+test('generateUIColorToolkit', () => {
+    const getTokensFromFile = (file) => JSON.parse(fs.readFileSync(resolve(__dirname, file), 'utf-8'));
+    const brandsWithTokens = [
+        {
+            brand: {
+                id: 'brand1',
+                prefix: 'Brand1',
+                misticaDesignFileName: 'brand-1',
+            },
+            tokens: getTokensFromFile('brand1-tokens.json'),
+        },
+        {
+            brand: {
+                id: 'brand2',
+                prefix: 'Brand2',
+                misticaDesignFileName: 'brand-2',
+            },
+            tokens: getTokensFromFile('brand2-tokens.json'),
+        },
+    ];
+
+    const colors = reduceColors(brandsWithTokens);
+    const result = generateUIColorToolkit(colors);
+
+    expect(result).toMatchSnapshot();
+});
diff --git a/scripts/mistica-skin-generator/generators/colors/brand-colors-generator.js b/scripts/mistica-skin-generator/generators/colors/brand-colors-generator.js
new file mode 100644
index 00000000..e22cc9c8
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/brand-colors-generator.js
@@ -0,0 +1,121 @@
+import {MISTICA_COLOR, UI_COLOR} from './reduce-colors.js';
+
+const mapSolidColor = (prefix, value) => {
+    if (value.includes('rgb')) {
+        return value.replace(
+            /rgba\(\{([a-zA-Z0-9.]+)\},\s*([0-9.]+)\)/,
+            `${prefix}Colors.$1.withAlphaComponent($2)`
+        );
+    } else {
+        return `${prefix}Colors.${value.replace(/{|}/g, '')}`;
+    }
+};
+
+const mapSolidColors = (prefix, lightValue, darkValue) => {
+    const lightColor = mapSolidColor(prefix, lightValue);
+    const darkColor = mapSolidColor(prefix, darkValue);
+    if (lightColor !== darkColor) {
+        return `${mapSolidColor(prefix, lightValue)} | ${mapSolidColor(prefix, darkValue)}`;
+    } else {
+        return mapSolidColor(prefix, lightValue);
+    }
+};
+
+const mapStops = (colors) => colors.map((color) => color.stop);
+
+const mapGradientColor = (prefix, lightType, lightValue, darkType, darkValue) => {
+    const angle = lightValue.angle || darkValue.angle;
+    const stops = mapStops(lightValue.colors) || mapStops(lightValue.colorsdarkValue.colors);
+    const colors = [];
+    const colorsLength = Math.max(lightValue.colors?.length || 0, darkValue.colors?.length || 0);
+    for (let colorIndex = 0; colorIndex < colorsLength; colorIndex++) {
+        const lightColor = lightType === UI_COLOR ? lightValue : lightValue.colors[colorIndex].value;
+        const darkColor = darkType === UI_COLOR ? darkValue : darkValue.colors[colorIndex].value;
+        colors.push(mapSolidColors(prefix, lightColor, darkColor));
+    }
+    return `MisticaColor.gradient(MisticaGradient(
+        colors:
+        [
+${colors.map((color) => `            ${color}`).join(',\n')}
+        ],
+        stops: ${JSON.stringify(stops)},
+        angle: ${angle}
+    ))`;
+};
+
+const mapColor = (prefix, tokenProp) => {
+    switch (tokenProp.commonType) {
+        case MISTICA_COLOR:
+            if (tokenProp.lightType === UI_COLOR && tokenProp.darkType === UI_COLOR) {
+                return `MisticaColor.solid(${mapSolidColors(
+                    prefix,
+                    tokenProp.lightValue,
+                    tokenProp.darkValue
+                )})`;
+            } else {
+                return mapGradientColor(
+                    prefix,
+                    tokenProp.lightType,
+                    tokenProp.lightValue,
+                    tokenProp.darkType,
+                    tokenProp.darkValue
+                );
+            }
+        case UI_COLOR:
+            return mapSolidColors(prefix, tokenProp.lightValue, tokenProp.darkValue);
+        default:
+            throw `Unexpected type: ${tokenProp.commonType}`;
+    }
+};
+
+const template = (prefix, paletteProps, tokenProps) => `
+// Generated using Make
+// DO NOT EDIT
+
+import UIKit
+
+struct ${prefix}Colors: MisticaColors {
+    static let palette = ${prefix}ColorPalette()
+
+${tokenProps.map((tokenProp) => `     let ${tokenProp.name} = ${mapColor(prefix, tokenProp)}`).join('\n\n')}
+}
+
+public struct ${prefix}ColorPalette {
+    public init() {}
+${paletteProps
+    .map((paletteProp) => `    public let ${paletteProp.name} = UIColor(hex: "${paletteProp.hex}")!`)
+    .join('\n')}
+}`;
+
+/**
+ *
+ * @param {{id: string; prefix: string}} brand
+ * @param {{[id: string]: {commonType: string; darkType: {[brandId: string]: string}; darkValue: {[brandId: string]: any}; lightType: {[brandId: string]: string}; lightValue: {[brandId: string]: any}}}} colors
+ * @param {{[id: string]: {value: string; type: string}}} palette
+ * @returns string
+ */
+export const generateBrandColors = (brand, colors, palette) => {
+    const paletteProps = Object.entries(palette)
+        .filter(([name, color]) => {
+            if (color.type === 'color') {
+                return true;
+            } else {
+                throw `Unknown color type ${name} in ${brand.id} palette`;
+            }
+        })
+        .map(([name, hex]) => ({
+            name,
+            hex: hex.value,
+        }));
+
+    const tokenProps = Object.entries(colors).map(([colorId, color]) => ({
+        name: colorId,
+        darkValue: color.darkValue[brand.id],
+        lightValue: color.lightValue[brand.id],
+        darkType: color.darkType[brand.id],
+        lightType: color.lightType[brand.id],
+        commonType: color.commonType,
+    }));
+
+    return template(brand.prefix, paletteProps, tokenProps);
+};
diff --git a/scripts/mistica-skin-generator/generators/colors/color-toolkit-generator.js b/scripts/mistica-skin-generator/generators/colors/color-toolkit-generator.js
new file mode 100644
index 00000000..7cb07644
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/color-toolkit-generator.js
@@ -0,0 +1,34 @@
+import {UI_COLOR} from './reduce-colors.js';
+
+const template = (props) => `
+// Generated using Make
+// DO NOT EDIT
+
+import SwiftUI
+
+public extension Color {
+${props
+    .map(
+        ([color]) => `    static var ${color}: Color {
+        MisticaConfig.currentColors.${color}.color
+    }`
+    )
+    .join('\n')}
+}
+
+private extension UIColor {
+    var color: Color {
+        Color(self)
+    }
+}`;
+
+/**
+ *
+ * @param {{[id: string]: {commonType: string; darkType: {[brandId: string]: string}; darkValue: {[brandId: string]: any}; lightType: {[brandId: string]: string}; lightValue: {[brandId: string]: any}}}} colors
+ * @returns string
+ */
+export const generateColorToolkit = (colors) => {
+    const misticaColors = Object.entries(colors).filter(([, color]) => color.commonType === UI_COLOR);
+
+    return template(misticaColors);
+};
diff --git a/scripts/mistica-skin-generator/generators/colors/mistica-color-generator.js b/scripts/mistica-skin-generator/generators/colors/mistica-color-generator.js
new file mode 100644
index 00000000..bbc14493
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/mistica-color-generator.js
@@ -0,0 +1,34 @@
+import {MISTICA_COLOR} from './reduce-colors.js';
+
+const template = (props) => `
+// Generated using Make
+// DO NOT EDIT
+
+import UIKit
+
+public enum MisticaColor {
+    case solid(UIColor)
+    case gradient(MisticaGradient)
+}
+
+public extension MisticaColor {
+${props
+    .map(
+        ([name, color]) => `    static var ${name}: ${color.commonType} {
+        MisticaConfig.currentColors.${name}
+    }`
+    )
+    .join('\n')}
+}
+`;
+
+/**
+ *
+ * @param {{[id: string]: {commonType: string; darkType: {[brandId: string]: string}; darkValue: {[brandId: string]: any}; lightType: {[brandId: string]: string}; lightValue: {[brandId: string]: any}}}} colors
+ * @returns string
+ */
+export const generateMisticaColor = (colors) => {
+    const misticaColors = Object.entries(colors).filter(([, color]) => color.commonType === MISTICA_COLOR);
+
+    return template(misticaColors);
+};
diff --git a/scripts/mistica-skin-generator/generators/colors/mistica-colors-generator.js b/scripts/mistica-skin-generator/generators/colors/mistica-colors-generator.js
new file mode 100644
index 00000000..8582b4d5
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/mistica-colors-generator.js
@@ -0,0 +1,17 @@
+const template = (props) => `
+// Generated using Make
+// DO NOT EDIT
+
+import UIKit
+
+public protocol MisticaColors {
+${props.map(([name, color]) => `    var ${name}: ${color.commonType} { get }`).join('\n')}
+}
+`;
+
+/**
+ *
+ * @param {{[id: string]: {commonType: string; darkType: {[brandId: string]: string}; darkValue: {[brandId: string]: any}; lightType: {[brandId: string]: string}; lightValue: {[brandId: string]: any}}}} colors
+ * @returns string
+ */
+export const generateMisticaColors = (colors) => template(Object.entries(colors));
diff --git a/scripts/mistica-skin-generator/generators/colors/reduce-colors.js b/scripts/mistica-skin-generator/generators/colors/reduce-colors.js
new file mode 100644
index 00000000..ed936c9c
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/reduce-colors.js
@@ -0,0 +1,62 @@
+export const MISTICA_COLOR = 'MisticaColor';
+export const UI_COLOR = 'UIColor';
+export const GRADIENT_COLOR = 'MisticaGradient';
+
+const mapType = (type) => {
+    switch (type) {
+        case 'color':
+            return UI_COLOR;
+        case 'linear-gradient':
+            return GRADIENT_COLOR;
+        default:
+            throw `Unknown token type ${type}`;
+    }
+};
+
+const getCommonType = (previous, current) => {
+    if (previous !== undefined && previous !== current) return MISTICA_COLOR;
+    if (current === GRADIENT_COLOR) return MISTICA_COLOR;
+    else return current;
+};
+
+/**
+ *
+ * @param {[{brand: {id: string}; tokens: {light: {[id: string]: {type: string; value: any}}; dark: {[id: string]: {type: string; value: any}}}]} brandsWithTokens
+ * @returns {{[id: string]: {commonType: string; darkType: {[brandId: string]: string}; darkValue: {[brandId: string]: any}; lightType: {[brandId: string]: string}; lightValue: {[brandId: string]: any}}}}
+ */
+
+export const reduceColors = (brandsWithTokens) =>
+    brandsWithTokens.reduce((acc, brandWithTokens) => {
+        const brandId = brandWithTokens.brand.id;
+        const light = brandWithTokens.tokens.light;
+        Object.entries(light).forEach(([colorToken, color]) => {
+            const type = mapType(color.type);
+            if (type !== undefined) {
+                const value = color.value;
+                acc[colorToken] = {
+                    ...acc[colorToken],
+                    commonType: getCommonType(acc[colorToken]?.commonType, type),
+                    lightValue: {...acc[colorToken]?.lightValue, [brandId]: value},
+                    lightType: {...acc[colorToken]?.lightType, [brandId]: type},
+                };
+            } else {
+                throw `Unknown type for ${colorToken} ${color}`;
+            }
+        });
+
+        const dark = brandWithTokens.tokens.dark;
+        Object.entries(dark).forEach(([colorToken, color]) => {
+            const type = mapType(color.type);
+            if (type !== undefined) {
+                const value = color.value;
+                acc[colorToken] = {
+                    ...acc[colorToken],
+                    commonType: getCommonType(acc[colorToken]?.commonType, type),
+                    darkValue: {...acc[colorToken]?.darkValue, [brandId]: value},
+                    darkType: {...acc[colorToken]?.darkType, [brandId]: type},
+                };
+            }
+        });
+
+        return acc;
+    }, {});
diff --git a/scripts/mistica-skin-generator/generators/colors/uicolor-toolkit-generator.js b/scripts/mistica-skin-generator/generators/colors/uicolor-toolkit-generator.js
new file mode 100644
index 00000000..743200fa
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/colors/uicolor-toolkit-generator.js
@@ -0,0 +1,28 @@
+import {UI_COLOR} from './reduce-colors.js';
+
+const template = (props) => `
+// Generated using Make
+// DO NOT EDIT
+
+import UIKit
+
+public extension UIColor {
+${props
+    .map(
+        ([name]) => `    static var ${name}: UIColor {
+        MisticaConfig.currentColors.${name}
+    }`
+    )
+    .join('\n')}
+}`;
+
+/**
+ *
+ * @param {{[id: string]: {commonType: string; darkType: {[brandId: string]: string}; darkValue: {[brandId: string]: any}; lightType: {[brandId: string]: string}; lightValue: {[brandId: string]: any}}}} colors
+ * @returns string
+ */
+export const generateUIColorToolkit = (colors) => {
+    const misticaColors = Object.entries(colors).filter(([, color]) => color.commonType === UI_COLOR);
+
+    return template(misticaColors);
+};
diff --git a/scripts/mistica-skin-generator/generators/corner-radius/__tests__/__snapshots__/brand-font-weights-generator.test.js.snap b/scripts/mistica-skin-generator/generators/corner-radius/__tests__/__snapshots__/brand-font-weights-generator.test.js.snap
new file mode 100644
index 00000000..d230e531
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/corner-radius/__tests__/__snapshots__/brand-font-weights-generator.test.js.snap
@@ -0,0 +1,24 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generateBrandCornerRadius 1`] = `
+"
+// Generated using Make
+// DO NOT EDIT
+
+import Foundation
+
+struct O2NewCornerRadius: MisticaCornerRadius {
+    var avatar: CGFloat = MisticaRadiusConstants.roundedRadius
+    var bar: CGFloat = MisticaRadiusConstants.roundedRadius
+    var button: CGFloat = MisticaRadiusConstants.roundedRadius
+    var checkbox: CGFloat = 2
+    var container: CGFloat = 16
+    var indicator: CGFloat = MisticaRadiusConstants.roundedRadius
+    var input: CGFloat = 12
+    var legacyDisplay: CGFloat = 16
+    var popup: CGFloat = 8
+    var sheet: CGFloat = 16
+    var mediaSmall: CGFloat = 8
+}
+"
+`;
diff --git a/scripts/mistica-skin-generator/generators/corner-radius/__tests__/__snapshots__/mistica-font-weights-generator.test.js.snap b/scripts/mistica-skin-generator/generators/corner-radius/__tests__/__snapshots__/mistica-font-weights-generator.test.js.snap
new file mode 100644
index 00000000..c49f940b
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/corner-radius/__tests__/__snapshots__/mistica-font-weights-generator.test.js.snap
@@ -0,0 +1,28 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generateMisticaCornerRadius 1`] = `
+"
+// Generated using Make
+// DO NOT EDIT
+
+import Foundation
+
+public enum MisticaRadiusConstants {
+    static let roundedRadius: CGFloat = 999.0
+}
+
+public protocol MisticaCornerRadius {
+    var avatar: CGFloat { get }
+    var bar: CGFloat { get }
+    var button: CGFloat { get }
+    var checkbox: CGFloat { get }
+    var container: CGFloat { get }
+    var indicator: CGFloat { get }
+    var input: CGFloat { get }
+    var legacyDisplay: CGFloat { get }
+    var popup: CGFloat { get }
+    var sheet: CGFloat { get }
+    var mediaSmall: CGFloat { get }
+}
+"
+`;
diff --git a/scripts/mistica-skin-generator/generators/corner-radius/__tests__/any-brand-tokens.json b/scripts/mistica-skin-generator/generators/corner-radius/__tests__/any-brand-tokens.json
new file mode 100644
index 00000000..f6b15673
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/corner-radius/__tests__/any-brand-tokens.json
@@ -0,0 +1,1438 @@
+{
+    "light": {
+        "background": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundAlternative": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "backgroundBrand": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {"value": "{palette.darkBlue}", "stop": 0},
+                    {"value": "{palette.beyondBlue}", "stop": 0.64},
+                    {"value": "{palette.beyondBlue45}", "stop": 1}
+                ]
+            },
+            "description": "o2Gradient"
+        },
+        "backgroundBrandSecondary": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "backgroundContainer": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerError": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "backgroundContainerHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.03)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.05)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerBrand": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {"value": "{palette.darkBlue}", "stop": 0},
+                    {"value": "{palette.beyondBlue}", "stop": 0.64},
+                    {"value": "{palette.beyondBlue45}", "stop": 1}
+                ]
+            },
+            "description": "o2Gradient"
+        },
+        "backgroundContainerBrandHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.2)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerBrandPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.4)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerBrandOverInverse": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "backgroundContainerAlternative": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "backgroundOverlay": {
+            "value": "rgba({palette.black}, 0.6)",
+            "type": "color",
+            "description": "black"
+        },
+        "backgroundSkeleton": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "backgroundSkeletonInverse": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "backgroundBrandTop": {
+            "value": "{palette.darkBlue}",
+            "type": "color",
+            "description": "darkBlue"
+        },
+        "backgroundBrandBottom": {
+            "value": "{palette.beyondBlue45}",
+            "type": "color",
+            "description": "beyondBlue45"
+        },
+        "appBarBackground": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "navigationBarBackground": {
+            "value": "{palette.darkBlue}",
+            "type": "color",
+            "description": "darkBlue"
+        },
+        "skeletonWave": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "borderLow": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "border": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "borderHigh": {
+            "value": "{palette.grey80}",
+            "type": "color",
+            "description": "grey80"
+        },
+        "borderSelected": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "coverBackgroundHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.25)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "coverBackgroundPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.35)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "buttonDangerBackground": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "buttonDangerBackgroundSelected": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "buttonDangerBackgroundHover": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "buttonLinkDangerBackgroundSelected": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "buttonLinkDangerBackgroundInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkDangerBackgroundInverseSelected": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "buttonLinkBackgroundSelected": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "buttonLinkBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonPrimaryBackground": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "buttonPrimaryBackgroundInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonPrimaryBackgroundSelected": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "buttonPrimaryBackgroundHover": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "buttonPrimaryBackgroundInverseSelected": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "buttonSecondaryBorder": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "buttonSecondaryBorderSelected": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "buttonSecondaryBackgroundHover": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "buttonSecondaryBackgroundSelected": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "buttonSecondaryBorderInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderInverseSelected": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "buttonSecondaryBackgroundInverseHover": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimary": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimaryInverse": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "textButtonPrimaryInverseSelected": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "textButtonSecondary": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "textButtonSecondarySelected": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "textButtonSecondaryInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonSecondaryInverseSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textLink": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "textLinkInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textLinkDanger": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "textLinkSnackbar": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textActivated": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "textBrand": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "control": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "controlActivated": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "controlInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "controlActivatedInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "controlError": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "barTrack": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "loadingBar": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "loadingBarBackground": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "toggleAndroidInactive": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "toggleAndroidBackgroundActive": {
+            "value": "{palette.beyondBlue15}",
+            "type": "color",
+            "description": "beyondBlue15"
+        },
+        "iosControlKnob": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "divider": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "dividerInverse": {
+            "value": "rgba({palette.white}, 0.2)",
+            "type": "color",
+            "description": "white"
+        },
+        "navigationBarDivider": {
+            "value": "{palette.darkBlue}",
+            "type": "color",
+            "description": "darkBlue"
+        },
+        "badge": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "feedbackErrorBackground": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "feedbackInfoBackground": {
+            "value": "{palette.black}",
+            "type": "color",
+            "description": "black"
+        },
+        "brand": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "brandHigh": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "inverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "neutralHigh": {
+            "value": "{palette.black}",
+            "type": "color",
+            "description": "black"
+        },
+        "neutralMedium": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "neutralMediumInverse": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "neutralLow": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "neutralLowAlternative": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textPrimary": {
+            "value": "{palette.black}",
+            "type": "color",
+            "description": "black"
+        },
+        "textPrimaryInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textSecondary": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "textSecondaryInverse": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "success": {
+            "value": "{palette.o2Green}",
+            "type": "color",
+            "description": "o2Green"
+        },
+        "warning": {
+            "value": "{palette.o2Orange}",
+            "type": "color",
+            "description": "o2Orange"
+        },
+        "error": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "textError": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "textErrorInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "promo": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "highlight": {
+            "value": "{palette.o2Pink80}",
+            "type": "color",
+            "description": "o2Pink80"
+        },
+        "successLow": {
+            "value": "{palette.o2Green10}",
+            "type": "color",
+            "description": "o2Green10"
+        },
+        "warningLow": {
+            "value": "{palette.o2Orange10}",
+            "type": "color",
+            "description": "o2Orange10"
+        },
+        "errorLow": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "promoLow": {
+            "value": "{palette.o2Pink15}",
+            "type": "color",
+            "description": "o2Pink15"
+        },
+        "brandLow": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "successHigh": {
+            "value": "{palette.o2Green80}",
+            "type": "color",
+            "description": "o2Green80"
+        },
+        "warningHigh": {
+            "value": "{palette.o2Orange75}",
+            "type": "color",
+            "description": "o2Orange75"
+        },
+        "errorHigh": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "promoHigh": {
+            "value": "{palette.o2Pink80}",
+            "type": "color",
+            "description": "o2Pink80"
+        },
+        "successHighInverse": {
+            "value": "{palette.o2Green80}",
+            "type": "color",
+            "description": "o2Green80"
+        },
+        "warningHighInverse": {
+            "value": "{palette.o2Orange75}",
+            "type": "color",
+            "description": "o2Orange75"
+        },
+        "errorHighInverse": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "promoHighInverse": {
+            "value": "{palette.o2Pink80}",
+            "type": "color",
+            "description": "o2Pink80"
+        },
+        "textNavigationBarPrimary": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textNavigationBarSecondary": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textNavigationSearchBarHint": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textNavigationSearchBarText": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textAppBar": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "textAppBarSelected": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "customTabsBackground": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "tagTextPromo": {
+            "value": "{palette.o2Pink80}",
+            "type": "color",
+            "description": "o2Pink80"
+        },
+        "tagTextActive": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "tagTextInactive": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "tagTextSuccess": {
+            "value": "{palette.o2Green80}",
+            "type": "color",
+            "description": "o2Green80"
+        },
+        "tagTextWarning": {
+            "value": "{palette.o2Orange75}",
+            "type": "color",
+            "description": "o2Orange75"
+        },
+        "tagTextError": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "tagBackgroundPromo": {
+            "value": "{palette.o2Pink15}",
+            "type": "color",
+            "description": "o2Pink15"
+        },
+        "tagBackgroundActive": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "tagBackgroundInactive": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "tagBackgroundSuccess": {
+            "value": "{palette.o2Green10}",
+            "type": "color",
+            "description": "o2Green10"
+        },
+        "tagBackgroundWarning": {
+            "value": "{palette.o2Orange10}",
+            "type": "color",
+            "description": "o2Orange10"
+        },
+        "tagBackgroundError": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "cardContentOverlay": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {"value": "rgba({palette.beyondBlue}, 0)", "stop": 0},
+                    {"value": "rgba({palette.beyondBlue}, 0.4)", "stop": 0.3},
+                    {"value": "rgba({palette.beyondBlue}, 1)", "stop": 1}
+                ]
+            },
+            "description": "grey6"
+        }
+    },
+    "dark": {
+        "background": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundAlternative": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundBrand": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundBrandSecondary": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainer": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerError": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerHover": {
+            "value": "rgba({palette.white}, 0.03)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerPressed": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerBrand": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerBrandHover": {
+            "value": "rgba({palette.white}, 0.03)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerBrandPressed": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerBrandOverInverse": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerAlternative": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundOverlay": {
+            "value": "rgba({palette.darkModeGrey}, 0.8)",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundSkeleton": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "backgroundSkeletonInverse": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "backgroundBrandTop": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundBrandBottom": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "appBarBackground": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "navigationBarBackground": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "skeletonWave": {
+            "value": "{palette.grey80}",
+            "type": "color",
+            "description": "grey80"
+        },
+        "borderLow": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "border": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "borderHigh": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "borderSelected": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "coverBackgroundHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.25)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "coverBackgroundPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.35)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "buttonDangerBackground": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "buttonDangerBackgroundSelected": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "buttonDangerBackgroundHover": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "buttonLinkDangerBackgroundSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkDangerBackgroundInverse": {
+            "value": "rgba({palette.white}, 0)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkDangerBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkBackgroundSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonPrimaryBackground": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "buttonPrimaryBackgroundInverse": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "buttonPrimaryBackgroundSelected": {
+            "value": "{palette.beyondBlue55}",
+            "type": "color",
+            "description": "beyondBlue55"
+        },
+        "buttonPrimaryBackgroundHover": {
+            "value": "{palette.beyondBlue55}",
+            "type": "color",
+            "description": "beyondBlue55"
+        },
+        "buttonPrimaryBackgroundInverseSelected": {
+            "value": "{palette.beyondBlue55}",
+            "type": "color",
+            "description": "beyondBlue55"
+        },
+        "buttonSecondaryBackgroundSelected": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorder": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderInverseSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundHover": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundInverseHover": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimary": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimaryInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimaryInverseSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonSecondary": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textButtonSecondarySelected": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textButtonSecondaryInverse": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textButtonSecondaryInverseSelected": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textLink": {
+            "value": "{palette.beyondBlue40}",
+            "type": "color",
+            "description": "beyondBlue40"
+        },
+        "textLinkInverse": {
+            "value": "{palette.beyondBlue40}",
+            "type": "color",
+            "description": "beyondBlue40"
+        },
+        "textLinkDanger": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "textLinkSnackbar": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textActivated": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textBrand": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "control": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "controlActivated": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "controlInverse": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "controlActivatedInverse": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "controlError": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "barTrack": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "loadingBar": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "loadingBarBackground": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "toggleAndroidInactive": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "toggleAndroidBackgroundActive": {
+            "value": "{palette.beyondBlue15}",
+            "type": "color",
+            "description": "beyondBlue15"
+        },
+        "iosControlKnob": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "badge": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "feedbackErrorBackground": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "feedbackInfoBackground": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "divider": {
+            "value": "rgba({palette.white}, 0.1)",
+            "type": "color",
+            "description": "white"
+        },
+        "dividerInverse": {
+            "value": "rgba({palette.white}, 0.1)",
+            "type": "color",
+            "description": "white"
+        },
+        "navigationBarDivider": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "brand": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "brandHigh": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "inverse": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "neutralHigh": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "neutralMedium": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "neutralMediumInverse": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "neutralLow": {
+            "value": "{palette.grey80}",
+            "type": "color",
+            "description": "grey80"
+        },
+        "neutralLowAlternative": {
+            "value": "{palette.grey80}",
+            "type": "color",
+            "description": "grey80"
+        },
+        "textPrimary": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textPrimaryInverse": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textSecondary": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "textSecondaryInverse": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "success": {
+            "value": "{palette.o2Green}",
+            "type": "color",
+            "description": "o2Green"
+        },
+        "warning": {
+            "value": "{palette.o2Orange}",
+            "type": "color",
+            "description": "o2Orange"
+        },
+        "error": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "textError": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "textErrorInverse": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "promo": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "highlight": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "successLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "warningLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "errorLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "promoLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "brandLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "successHigh": {
+            "value": "{palette.o2Green40}",
+            "type": "color",
+            "description": "o2Green40"
+        },
+        "warningHigh": {
+            "value": "{palette.o2Orange40}",
+            "type": "color",
+            "description": "o2Orange40"
+        },
+        "errorHigh": {
+            "value": "{palette.o2Red40}",
+            "type": "color",
+            "description": "o2Red40"
+        },
+        "promoHigh": {
+            "value": "{palette.o2Pink30}",
+            "type": "color",
+            "description": "o2Pink30"
+        },
+        "successHighInverse": {
+            "value": "{palette.o2Green80}",
+            "type": "color",
+            "description": "o2Green80"
+        },
+        "warningHighInverse": {
+            "value": "{palette.o2Orange75}",
+            "type": "color",
+            "description": "o2Orange75"
+        },
+        "errorHighInverse": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "promoHighInverse": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "textNavigationBarPrimary": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textNavigationBarSecondary": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "textNavigationSearchBarHint": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "textNavigationSearchBarText": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textAppBar": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "textAppBarSelected": {
+            "value": "{palette.beyondBlue40}",
+            "type": "color",
+            "description": "beyondBlue40"
+        },
+        "customTabsBackground": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "tagTextPromo": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "tagTextActive": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "tagTextInactive": {
+            "value": "{palette.grey40}",
+            "type": "color",
+            "description": "grey40"
+        },
+        "tagTextSuccess": {
+            "value": "{palette.o2Green}",
+            "type": "color",
+            "description": "o2Green"
+        },
+        "tagTextWarning": {
+            "value": "{palette.o2Orange}",
+            "type": "color",
+            "description": "o2Orange"
+        },
+        "tagTextError": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "tagBackgroundPromo": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundActive": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundInactive": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundSuccess": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundWarning": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundError": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "cardContentOverlay": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {"value": "rgba({palette.black}, 0)", "stop": 0},
+                    {"value": "rgba({palette.black}, 0.4)", "stop": 0.3},
+                    {"value": "rgba({palette.black}, 0.7)", "stop": 1}
+                ]
+            },
+            "description": "grey6"
+        }
+    },
+    "radius": {
+        "avatar": {"value": "circle", "type": "borderRadius"},
+        "bar": {"value": "999", "type": "borderRadius"},
+        "button": {"value": "999", "type": "borderRadius"},
+        "checkbox": {"value": "2", "type": "borderRadius"},
+        "container": {"value": "16", "type": "borderRadius"},
+        "indicator": {"value": "999", "type": "borderRadius"},
+        "input": {"value": "12", "type": "borderRadius"},
+        "legacyDisplay": {"value": "16", "type": "borderRadius"},
+        "popup": {"value": "8", "type": "borderRadius"},
+        "sheet": {"value": "16", "type": "borderRadius"},
+        "mediaSmall": {"value": "8", "type": "borderRadius"}
+    },
+    "text": {
+        "weight": {
+            "cardTitle": {"value": "medium", "type": "typography"},
+            "button": {"value": "medium", "type": "typography"},
+            "tabsLabel": {"value": "medium", "type": "typography"},
+            "link": {"value": "medium", "type": "typography"},
+            "title1": {"value": "medium", "type": "typography"},
+            "title2": {"value": "bold", "type": "typography"},
+            "indicator": {"value": "medium", "type": "typography"},
+            "navigationBar": {"value": "medium", "type": "typography"},
+            "text5": {"value": "bold", "type": "typography"},
+            "text6": {"value": "bold", "type": "typography"},
+            "text7": {"value": "bold", "type": "typography"},
+            "text8": {"value": "bold", "type": "typography"},
+            "text9": {"value": "bold", "type": "typography"},
+            "text10": {"value": "bold", "type": "typography"}
+        },
+        "size": {
+            "tabsLabel": {
+                "value": {"mobile": 16, "desktop": 18},
+                "type": "typography"
+            },
+            "title2": {
+                "value": {"mobile": 20, "desktop": 28},
+                "type": "typography"
+            }
+        },
+        "lineHeight": {
+            "tabsLabel": {
+                "value": {"mobile": 24, "desktop": 24},
+                "type": "typography"
+            },
+            "title2": {
+                "value": {"mobile": 24, "desktop": 32},
+                "type": "typography"
+            }
+        }
+    },
+    "themeVariant": {
+        "successFeedback": {"value": "inverse", "type": "themeVariant"},
+        "brandLoadingScreen": {"value": "inverse", "type": "themeVariant"}
+    },
+    "global": {
+        "palette": {
+            "beyondBlue": {"value": "#0050FF", "type": "color"},
+            "beyondBlue10": {"value": "#E5EDFF", "type": "color"},
+            "beyondBlue15": {"value": "#CCDCFF", "type": "color"},
+            "beyondBlue30": {"value": "#80A7FF", "type": "color"},
+            "beyondBlue40": {"value": "#4D84FF", "type": "color"},
+            "beyondBlue45": {"value": "#0A73EB", "type": "color"},
+            "beyondBlue55": {"value": "#0044D9", "type": "color"},
+            "beyondBlue70": {"value": "#0038B2", "type": "color"},
+            "beyondBlue90": {"value": "#001033", "type": "color"},
+            "darkBlue": {"value": "#00008C", "type": "color"},
+            "o2BlueLight": {"value": "#82DCFA", "type": "color"},
+            "o2BlueLight30": {"value": "#C0EEFD", "type": "color"},
+            "o2BlueLight35": {"value": "#B4EAFC", "type": "color"},
+            "o2Green": {"value": "#00DC7D", "type": "color"},
+            "o2Green10": {"value": "#E5FBF2", "type": "color"},
+            "o2Green40": {"value": "#4CE7A4", "type": "color"},
+            "o2Green80": {"value": "#006338", "type": "color"},
+            "o2Yellow": {"value": "#FADC00", "type": "color"},
+            "o2Orange": {"value": "#FFA55A", "type": "color"},
+            "o2Orange10": {"value": "#FFF6EE", "type": "color"},
+            "o2Orange40": {"value": "#FFC08B", "type": "color"},
+            "o2Orange75": {"value": "#996336", "type": "color"},
+            "o2Pink": {"value": "#FA96FF", "type": "color"},
+            "o2Pink15": {"value": "#FEEAFF", "type": "color"},
+            "o2Pink30": {"value": "#FDCAFF", "type": "color"},
+            "o2Pink80": {"value": "#704373", "type": "color"},
+            "o2Red": {"value": "#FF5A5A", "type": "color"},
+            "o2Red10": {"value": "#FFEEEE", "type": "color"},
+            "o2Red20": {"value": "#FFCDCD", "type": "color"},
+            "o2Red40": {"value": "#FF8B8B", "type": "color"},
+            "o2Red45": {"value": "#FF7B7B", "type": "color"},
+            "o2Red60": {"value": "#CC4848", "type": "color"},
+            "o2Red65": {"value": "#BF4444", "type": "color"},
+            "grey20": {"value": "#F3F3F5", "type": "color"},
+            "grey30": {"value": "#D9D9DD", "type": "color"},
+            "grey40": {"value": "#B4B4BE", "type": "color"},
+            "grey45": {"value": "#8C8C9A", "type": "color"},
+            "grey60": {"value": "#6E6E77", "type": "color"},
+            "grey80": {"value": "#3C3C46", "type": "color"},
+            "black": {"value": "#00001E", "type": "color"},
+            "white": {"value": "#FFFFFF", "type": "color"},
+            "darkModeBlack": {"value": "#00001C", "type": "color"},
+            "darkModeGrey": {"value": "#08132B", "type": "color"},
+            "darkModeGrey6": {"value": "#14213D", "type": "color"},
+            "darkModeBeyondBlue": {"value": "#1A62FF", "type": "color"}
+        }
+    }
+}
diff --git a/scripts/mistica-skin-generator/generators/corner-radius/__tests__/brand-font-weights-generator.test.js b/scripts/mistica-skin-generator/generators/corner-radius/__tests__/brand-font-weights-generator.test.js
new file mode 100644
index 00000000..aae53d52
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/corner-radius/__tests__/brand-font-weights-generator.test.js
@@ -0,0 +1,12 @@
+import fs from 'fs';
+import {resolve} from 'path';
+import {generateBrandCornerRadius} from '../brand-corner-radius-generator.js';
+
+test('generateBrandCornerRadius', () => {
+    const anyBrandTokensPath = resolve(__dirname, 'any-brand-tokens.json');
+    const anyBrandTokens = JSON.parse(fs.readFileSync(anyBrandTokensPath, 'utf-8'));
+    const brand = {prefix: 'O2New'};
+    const result = generateBrandCornerRadius(brand, anyBrandTokens);
+
+    expect(result).toMatchSnapshot();
+});
diff --git a/scripts/mistica-skin-generator/generators/corner-radius/__tests__/mistica-font-weights-generator.test.js b/scripts/mistica-skin-generator/generators/corner-radius/__tests__/mistica-font-weights-generator.test.js
new file mode 100644
index 00000000..c77e35e5
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/corner-radius/__tests__/mistica-font-weights-generator.test.js
@@ -0,0 +1,11 @@
+import fs from 'fs';
+import {resolve} from 'path';
+import {generateMisticaCornerRadius} from '../mistica-corner-radius-generator.js';
+
+test('generateMisticaCornerRadius', () => {
+    const anyBrandTokensPath = resolve(__dirname, 'any-brand-tokens.json');
+    const anyBrandTokens = JSON.parse(fs.readFileSync(anyBrandTokensPath, 'utf-8'));
+    const result = generateMisticaCornerRadius(anyBrandTokens);
+
+    expect(result).toMatchSnapshot();
+});
diff --git a/scripts/mistica-skin-generator/generators/corner-radius/brand-corner-radius-generator.js b/scripts/mistica-skin-generator/generators/corner-radius/brand-corner-radius-generator.js
new file mode 100644
index 00000000..c8e57672
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/corner-radius/brand-corner-radius-generator.js
@@ -0,0 +1,24 @@
+const mapValue = (value) =>
+    value === 'circle' || value === '999' ? 'MisticaRadiusConstants.roundedRadius' : value;
+
+const template = (prefix, cornerRadius) => `
+// Generated using Make
+// DO NOT EDIT
+
+import Foundation
+
+struct ${prefix}CornerRadius: MisticaCornerRadius {
+${cornerRadius.map(([name, radius]) => `    var ${name}: CGFloat = ${mapValue(radius.value)}`).join('\n')}
+}
+`;
+
+/**
+ *
+ * @param {{prefix: string}} brand
+ * @param {{text: {radius: {[id: string]: {value: any}}}}} tokens
+ * @returns string
+ */
+export const generateBrandCornerRadius = (brand, tokens) => {
+    const cornerRadius = Object.entries(tokens.radius);
+    return template(brand.prefix, cornerRadius);
+};
diff --git a/scripts/mistica-skin-generator/generators/corner-radius/mistica-corner-radius-generator.js b/scripts/mistica-skin-generator/generators/corner-radius/mistica-corner-radius-generator.js
new file mode 100644
index 00000000..6640d42d
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/corner-radius/mistica-corner-radius-generator.js
@@ -0,0 +1,25 @@
+const template = (props) => `
+// Generated using Make
+// DO NOT EDIT
+
+import Foundation
+
+public enum MisticaRadiusConstants {
+    static let roundedRadius: CGFloat = 999.0
+}
+
+public protocol MisticaCornerRadius {
+${props.map((prop) => `    var ${prop}: CGFloat { get }`).join('\n')}
+}
+`;
+
+/**
+ *
+ * @param {{text: {radius: {[id: string]: any}}}} anyBrandTokens
+ * @returns string
+ */
+
+export const generateMisticaCornerRadius = (anyBrandTokens) => {
+    const cornerRadius = Object.keys(anyBrandTokens.radius);
+    return template(cornerRadius);
+};
diff --git a/scripts/mistica-skin-generator/generators/font-sizes/__tests__/__snapshots__/brand-font-weights-generator.test.js.snap b/scripts/mistica-skin-generator/generators/font-sizes/__tests__/__snapshots__/brand-font-weights-generator.test.js.snap
new file mode 100644
index 00000000..11d2ac3a
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/font-sizes/__tests__/__snapshots__/brand-font-weights-generator.test.js.snap
@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generateBrandFontSizes 1`] = `
+"
+// Generated using Make
+// DO NOT EDIT
+
+import Foundation
+
+struct O2NewFontSizes: MisticaFontSizes {
+    public var tabsLabel: CGFloat = 16
+    public var title2: CGFloat = 20
+}
+"
+`;
diff --git a/scripts/mistica-skin-generator/generators/font-sizes/__tests__/__snapshots__/mistica-font-weights-generator.test.js.snap b/scripts/mistica-skin-generator/generators/font-sizes/__tests__/__snapshots__/mistica-font-weights-generator.test.js.snap
new file mode 100644
index 00000000..8d7babcf
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/font-sizes/__tests__/__snapshots__/mistica-font-weights-generator.test.js.snap
@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generateMisticaFontSizes 1`] = `
+"
+// Generated using Make
+// DO NOT EDIT
+
+import Foundation
+
+public protocol MisticaFontSizes {
+    var tabsLabel: CGFloat { get }
+    var title2: CGFloat { get }
+}
+"
+`;
diff --git a/scripts/mistica-skin-generator/generators/font-sizes/__tests__/any-brand-tokens.json b/scripts/mistica-skin-generator/generators/font-sizes/__tests__/any-brand-tokens.json
new file mode 100644
index 00000000..f6b15673
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/font-sizes/__tests__/any-brand-tokens.json
@@ -0,0 +1,1438 @@
+{
+    "light": {
+        "background": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundAlternative": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "backgroundBrand": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {"value": "{palette.darkBlue}", "stop": 0},
+                    {"value": "{palette.beyondBlue}", "stop": 0.64},
+                    {"value": "{palette.beyondBlue45}", "stop": 1}
+                ]
+            },
+            "description": "o2Gradient"
+        },
+        "backgroundBrandSecondary": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "backgroundContainer": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerError": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "backgroundContainerHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.03)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.05)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerBrand": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {"value": "{palette.darkBlue}", "stop": 0},
+                    {"value": "{palette.beyondBlue}", "stop": 0.64},
+                    {"value": "{palette.beyondBlue45}", "stop": 1}
+                ]
+            },
+            "description": "o2Gradient"
+        },
+        "backgroundContainerBrandHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.2)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerBrandPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.4)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerBrandOverInverse": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "backgroundContainerAlternative": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "backgroundOverlay": {
+            "value": "rgba({palette.black}, 0.6)",
+            "type": "color",
+            "description": "black"
+        },
+        "backgroundSkeleton": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "backgroundSkeletonInverse": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "backgroundBrandTop": {
+            "value": "{palette.darkBlue}",
+            "type": "color",
+            "description": "darkBlue"
+        },
+        "backgroundBrandBottom": {
+            "value": "{palette.beyondBlue45}",
+            "type": "color",
+            "description": "beyondBlue45"
+        },
+        "appBarBackground": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "navigationBarBackground": {
+            "value": "{palette.darkBlue}",
+            "type": "color",
+            "description": "darkBlue"
+        },
+        "skeletonWave": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "borderLow": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "border": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "borderHigh": {
+            "value": "{palette.grey80}",
+            "type": "color",
+            "description": "grey80"
+        },
+        "borderSelected": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "coverBackgroundHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.25)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "coverBackgroundPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.35)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "buttonDangerBackground": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "buttonDangerBackgroundSelected": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "buttonDangerBackgroundHover": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "buttonLinkDangerBackgroundSelected": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "buttonLinkDangerBackgroundInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkDangerBackgroundInverseSelected": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "buttonLinkBackgroundSelected": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "buttonLinkBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonPrimaryBackground": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "buttonPrimaryBackgroundInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonPrimaryBackgroundSelected": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "buttonPrimaryBackgroundHover": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "buttonPrimaryBackgroundInverseSelected": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "buttonSecondaryBorder": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "buttonSecondaryBorderSelected": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "buttonSecondaryBackgroundHover": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "buttonSecondaryBackgroundSelected": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "buttonSecondaryBorderInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderInverseSelected": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "buttonSecondaryBackgroundInverseHover": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimary": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimaryInverse": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "textButtonPrimaryInverseSelected": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "textButtonSecondary": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "textButtonSecondarySelected": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "textButtonSecondaryInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonSecondaryInverseSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textLink": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "textLinkInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textLinkDanger": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "textLinkSnackbar": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textActivated": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "textBrand": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "control": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "controlActivated": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "controlInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "controlActivatedInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "controlError": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "barTrack": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "loadingBar": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "loadingBarBackground": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "toggleAndroidInactive": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "toggleAndroidBackgroundActive": {
+            "value": "{palette.beyondBlue15}",
+            "type": "color",
+            "description": "beyondBlue15"
+        },
+        "iosControlKnob": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "divider": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "dividerInverse": {
+            "value": "rgba({palette.white}, 0.2)",
+            "type": "color",
+            "description": "white"
+        },
+        "navigationBarDivider": {
+            "value": "{palette.darkBlue}",
+            "type": "color",
+            "description": "darkBlue"
+        },
+        "badge": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "feedbackErrorBackground": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "feedbackInfoBackground": {
+            "value": "{palette.black}",
+            "type": "color",
+            "description": "black"
+        },
+        "brand": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "brandHigh": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "inverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "neutralHigh": {
+            "value": "{palette.black}",
+            "type": "color",
+            "description": "black"
+        },
+        "neutralMedium": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "neutralMediumInverse": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "neutralLow": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "neutralLowAlternative": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textPrimary": {
+            "value": "{palette.black}",
+            "type": "color",
+            "description": "black"
+        },
+        "textPrimaryInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textSecondary": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "textSecondaryInverse": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "success": {
+            "value": "{palette.o2Green}",
+            "type": "color",
+            "description": "o2Green"
+        },
+        "warning": {
+            "value": "{palette.o2Orange}",
+            "type": "color",
+            "description": "o2Orange"
+        },
+        "error": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "textError": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "textErrorInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "promo": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "highlight": {
+            "value": "{palette.o2Pink80}",
+            "type": "color",
+            "description": "o2Pink80"
+        },
+        "successLow": {
+            "value": "{palette.o2Green10}",
+            "type": "color",
+            "description": "o2Green10"
+        },
+        "warningLow": {
+            "value": "{palette.o2Orange10}",
+            "type": "color",
+            "description": "o2Orange10"
+        },
+        "errorLow": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "promoLow": {
+            "value": "{palette.o2Pink15}",
+            "type": "color",
+            "description": "o2Pink15"
+        },
+        "brandLow": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "successHigh": {
+            "value": "{palette.o2Green80}",
+            "type": "color",
+            "description": "o2Green80"
+        },
+        "warningHigh": {
+            "value": "{palette.o2Orange75}",
+            "type": "color",
+            "description": "o2Orange75"
+        },
+        "errorHigh": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "promoHigh": {
+            "value": "{palette.o2Pink80}",
+            "type": "color",
+            "description": "o2Pink80"
+        },
+        "successHighInverse": {
+            "value": "{palette.o2Green80}",
+            "type": "color",
+            "description": "o2Green80"
+        },
+        "warningHighInverse": {
+            "value": "{palette.o2Orange75}",
+            "type": "color",
+            "description": "o2Orange75"
+        },
+        "errorHighInverse": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "promoHighInverse": {
+            "value": "{palette.o2Pink80}",
+            "type": "color",
+            "description": "o2Pink80"
+        },
+        "textNavigationBarPrimary": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textNavigationBarSecondary": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textNavigationSearchBarHint": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textNavigationSearchBarText": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textAppBar": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "textAppBarSelected": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "customTabsBackground": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "tagTextPromo": {
+            "value": "{palette.o2Pink80}",
+            "type": "color",
+            "description": "o2Pink80"
+        },
+        "tagTextActive": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "tagTextInactive": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "tagTextSuccess": {
+            "value": "{palette.o2Green80}",
+            "type": "color",
+            "description": "o2Green80"
+        },
+        "tagTextWarning": {
+            "value": "{palette.o2Orange75}",
+            "type": "color",
+            "description": "o2Orange75"
+        },
+        "tagTextError": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "tagBackgroundPromo": {
+            "value": "{palette.o2Pink15}",
+            "type": "color",
+            "description": "o2Pink15"
+        },
+        "tagBackgroundActive": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "tagBackgroundInactive": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "tagBackgroundSuccess": {
+            "value": "{palette.o2Green10}",
+            "type": "color",
+            "description": "o2Green10"
+        },
+        "tagBackgroundWarning": {
+            "value": "{palette.o2Orange10}",
+            "type": "color",
+            "description": "o2Orange10"
+        },
+        "tagBackgroundError": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "cardContentOverlay": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {"value": "rgba({palette.beyondBlue}, 0)", "stop": 0},
+                    {"value": "rgba({palette.beyondBlue}, 0.4)", "stop": 0.3},
+                    {"value": "rgba({palette.beyondBlue}, 1)", "stop": 1}
+                ]
+            },
+            "description": "grey6"
+        }
+    },
+    "dark": {
+        "background": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundAlternative": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundBrand": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundBrandSecondary": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainer": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerError": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerHover": {
+            "value": "rgba({palette.white}, 0.03)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerPressed": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerBrand": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerBrandHover": {
+            "value": "rgba({palette.white}, 0.03)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerBrandPressed": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerBrandOverInverse": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerAlternative": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundOverlay": {
+            "value": "rgba({palette.darkModeGrey}, 0.8)",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundSkeleton": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "backgroundSkeletonInverse": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "backgroundBrandTop": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundBrandBottom": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "appBarBackground": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "navigationBarBackground": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "skeletonWave": {
+            "value": "{palette.grey80}",
+            "type": "color",
+            "description": "grey80"
+        },
+        "borderLow": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "border": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "borderHigh": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "borderSelected": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "coverBackgroundHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.25)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "coverBackgroundPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.35)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "buttonDangerBackground": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "buttonDangerBackgroundSelected": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "buttonDangerBackgroundHover": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "buttonLinkDangerBackgroundSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkDangerBackgroundInverse": {
+            "value": "rgba({palette.white}, 0)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkDangerBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkBackgroundSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonPrimaryBackground": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "buttonPrimaryBackgroundInverse": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "buttonPrimaryBackgroundSelected": {
+            "value": "{palette.beyondBlue55}",
+            "type": "color",
+            "description": "beyondBlue55"
+        },
+        "buttonPrimaryBackgroundHover": {
+            "value": "{palette.beyondBlue55}",
+            "type": "color",
+            "description": "beyondBlue55"
+        },
+        "buttonPrimaryBackgroundInverseSelected": {
+            "value": "{palette.beyondBlue55}",
+            "type": "color",
+            "description": "beyondBlue55"
+        },
+        "buttonSecondaryBackgroundSelected": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorder": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderInverseSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundHover": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundInverseHover": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimary": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimaryInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimaryInverseSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonSecondary": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textButtonSecondarySelected": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textButtonSecondaryInverse": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textButtonSecondaryInverseSelected": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textLink": {
+            "value": "{palette.beyondBlue40}",
+            "type": "color",
+            "description": "beyondBlue40"
+        },
+        "textLinkInverse": {
+            "value": "{palette.beyondBlue40}",
+            "type": "color",
+            "description": "beyondBlue40"
+        },
+        "textLinkDanger": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "textLinkSnackbar": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textActivated": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textBrand": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "control": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "controlActivated": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "controlInverse": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "controlActivatedInverse": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "controlError": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "barTrack": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "loadingBar": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "loadingBarBackground": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "toggleAndroidInactive": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "toggleAndroidBackgroundActive": {
+            "value": "{palette.beyondBlue15}",
+            "type": "color",
+            "description": "beyondBlue15"
+        },
+        "iosControlKnob": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "badge": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "feedbackErrorBackground": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "feedbackInfoBackground": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "divider": {
+            "value": "rgba({palette.white}, 0.1)",
+            "type": "color",
+            "description": "white"
+        },
+        "dividerInverse": {
+            "value": "rgba({palette.white}, 0.1)",
+            "type": "color",
+            "description": "white"
+        },
+        "navigationBarDivider": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "brand": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "brandHigh": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "inverse": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "neutralHigh": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "neutralMedium": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "neutralMediumInverse": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "neutralLow": {
+            "value": "{palette.grey80}",
+            "type": "color",
+            "description": "grey80"
+        },
+        "neutralLowAlternative": {
+            "value": "{palette.grey80}",
+            "type": "color",
+            "description": "grey80"
+        },
+        "textPrimary": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textPrimaryInverse": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textSecondary": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "textSecondaryInverse": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "success": {
+            "value": "{palette.o2Green}",
+            "type": "color",
+            "description": "o2Green"
+        },
+        "warning": {
+            "value": "{palette.o2Orange}",
+            "type": "color",
+            "description": "o2Orange"
+        },
+        "error": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "textError": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "textErrorInverse": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "promo": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "highlight": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "successLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "warningLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "errorLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "promoLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "brandLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "successHigh": {
+            "value": "{palette.o2Green40}",
+            "type": "color",
+            "description": "o2Green40"
+        },
+        "warningHigh": {
+            "value": "{palette.o2Orange40}",
+            "type": "color",
+            "description": "o2Orange40"
+        },
+        "errorHigh": {
+            "value": "{palette.o2Red40}",
+            "type": "color",
+            "description": "o2Red40"
+        },
+        "promoHigh": {
+            "value": "{palette.o2Pink30}",
+            "type": "color",
+            "description": "o2Pink30"
+        },
+        "successHighInverse": {
+            "value": "{palette.o2Green80}",
+            "type": "color",
+            "description": "o2Green80"
+        },
+        "warningHighInverse": {
+            "value": "{palette.o2Orange75}",
+            "type": "color",
+            "description": "o2Orange75"
+        },
+        "errorHighInverse": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "promoHighInverse": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "textNavigationBarPrimary": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textNavigationBarSecondary": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "textNavigationSearchBarHint": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "textNavigationSearchBarText": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textAppBar": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "textAppBarSelected": {
+            "value": "{palette.beyondBlue40}",
+            "type": "color",
+            "description": "beyondBlue40"
+        },
+        "customTabsBackground": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "tagTextPromo": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "tagTextActive": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "tagTextInactive": {
+            "value": "{palette.grey40}",
+            "type": "color",
+            "description": "grey40"
+        },
+        "tagTextSuccess": {
+            "value": "{palette.o2Green}",
+            "type": "color",
+            "description": "o2Green"
+        },
+        "tagTextWarning": {
+            "value": "{palette.o2Orange}",
+            "type": "color",
+            "description": "o2Orange"
+        },
+        "tagTextError": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "tagBackgroundPromo": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundActive": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundInactive": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundSuccess": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundWarning": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundError": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "cardContentOverlay": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {"value": "rgba({palette.black}, 0)", "stop": 0},
+                    {"value": "rgba({palette.black}, 0.4)", "stop": 0.3},
+                    {"value": "rgba({palette.black}, 0.7)", "stop": 1}
+                ]
+            },
+            "description": "grey6"
+        }
+    },
+    "radius": {
+        "avatar": {"value": "circle", "type": "borderRadius"},
+        "bar": {"value": "999", "type": "borderRadius"},
+        "button": {"value": "999", "type": "borderRadius"},
+        "checkbox": {"value": "2", "type": "borderRadius"},
+        "container": {"value": "16", "type": "borderRadius"},
+        "indicator": {"value": "999", "type": "borderRadius"},
+        "input": {"value": "12", "type": "borderRadius"},
+        "legacyDisplay": {"value": "16", "type": "borderRadius"},
+        "popup": {"value": "8", "type": "borderRadius"},
+        "sheet": {"value": "16", "type": "borderRadius"},
+        "mediaSmall": {"value": "8", "type": "borderRadius"}
+    },
+    "text": {
+        "weight": {
+            "cardTitle": {"value": "medium", "type": "typography"},
+            "button": {"value": "medium", "type": "typography"},
+            "tabsLabel": {"value": "medium", "type": "typography"},
+            "link": {"value": "medium", "type": "typography"},
+            "title1": {"value": "medium", "type": "typography"},
+            "title2": {"value": "bold", "type": "typography"},
+            "indicator": {"value": "medium", "type": "typography"},
+            "navigationBar": {"value": "medium", "type": "typography"},
+            "text5": {"value": "bold", "type": "typography"},
+            "text6": {"value": "bold", "type": "typography"},
+            "text7": {"value": "bold", "type": "typography"},
+            "text8": {"value": "bold", "type": "typography"},
+            "text9": {"value": "bold", "type": "typography"},
+            "text10": {"value": "bold", "type": "typography"}
+        },
+        "size": {
+            "tabsLabel": {
+                "value": {"mobile": 16, "desktop": 18},
+                "type": "typography"
+            },
+            "title2": {
+                "value": {"mobile": 20, "desktop": 28},
+                "type": "typography"
+            }
+        },
+        "lineHeight": {
+            "tabsLabel": {
+                "value": {"mobile": 24, "desktop": 24},
+                "type": "typography"
+            },
+            "title2": {
+                "value": {"mobile": 24, "desktop": 32},
+                "type": "typography"
+            }
+        }
+    },
+    "themeVariant": {
+        "successFeedback": {"value": "inverse", "type": "themeVariant"},
+        "brandLoadingScreen": {"value": "inverse", "type": "themeVariant"}
+    },
+    "global": {
+        "palette": {
+            "beyondBlue": {"value": "#0050FF", "type": "color"},
+            "beyondBlue10": {"value": "#E5EDFF", "type": "color"},
+            "beyondBlue15": {"value": "#CCDCFF", "type": "color"},
+            "beyondBlue30": {"value": "#80A7FF", "type": "color"},
+            "beyondBlue40": {"value": "#4D84FF", "type": "color"},
+            "beyondBlue45": {"value": "#0A73EB", "type": "color"},
+            "beyondBlue55": {"value": "#0044D9", "type": "color"},
+            "beyondBlue70": {"value": "#0038B2", "type": "color"},
+            "beyondBlue90": {"value": "#001033", "type": "color"},
+            "darkBlue": {"value": "#00008C", "type": "color"},
+            "o2BlueLight": {"value": "#82DCFA", "type": "color"},
+            "o2BlueLight30": {"value": "#C0EEFD", "type": "color"},
+            "o2BlueLight35": {"value": "#B4EAFC", "type": "color"},
+            "o2Green": {"value": "#00DC7D", "type": "color"},
+            "o2Green10": {"value": "#E5FBF2", "type": "color"},
+            "o2Green40": {"value": "#4CE7A4", "type": "color"},
+            "o2Green80": {"value": "#006338", "type": "color"},
+            "o2Yellow": {"value": "#FADC00", "type": "color"},
+            "o2Orange": {"value": "#FFA55A", "type": "color"},
+            "o2Orange10": {"value": "#FFF6EE", "type": "color"},
+            "o2Orange40": {"value": "#FFC08B", "type": "color"},
+            "o2Orange75": {"value": "#996336", "type": "color"},
+            "o2Pink": {"value": "#FA96FF", "type": "color"},
+            "o2Pink15": {"value": "#FEEAFF", "type": "color"},
+            "o2Pink30": {"value": "#FDCAFF", "type": "color"},
+            "o2Pink80": {"value": "#704373", "type": "color"},
+            "o2Red": {"value": "#FF5A5A", "type": "color"},
+            "o2Red10": {"value": "#FFEEEE", "type": "color"},
+            "o2Red20": {"value": "#FFCDCD", "type": "color"},
+            "o2Red40": {"value": "#FF8B8B", "type": "color"},
+            "o2Red45": {"value": "#FF7B7B", "type": "color"},
+            "o2Red60": {"value": "#CC4848", "type": "color"},
+            "o2Red65": {"value": "#BF4444", "type": "color"},
+            "grey20": {"value": "#F3F3F5", "type": "color"},
+            "grey30": {"value": "#D9D9DD", "type": "color"},
+            "grey40": {"value": "#B4B4BE", "type": "color"},
+            "grey45": {"value": "#8C8C9A", "type": "color"},
+            "grey60": {"value": "#6E6E77", "type": "color"},
+            "grey80": {"value": "#3C3C46", "type": "color"},
+            "black": {"value": "#00001E", "type": "color"},
+            "white": {"value": "#FFFFFF", "type": "color"},
+            "darkModeBlack": {"value": "#00001C", "type": "color"},
+            "darkModeGrey": {"value": "#08132B", "type": "color"},
+            "darkModeGrey6": {"value": "#14213D", "type": "color"},
+            "darkModeBeyondBlue": {"value": "#1A62FF", "type": "color"}
+        }
+    }
+}
diff --git a/scripts/mistica-skin-generator/generators/font-sizes/__tests__/brand-font-weights-generator.test.js b/scripts/mistica-skin-generator/generators/font-sizes/__tests__/brand-font-weights-generator.test.js
new file mode 100644
index 00000000..c3d956e8
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/font-sizes/__tests__/brand-font-weights-generator.test.js
@@ -0,0 +1,12 @@
+import fs from 'fs';
+import {resolve} from 'path';
+import {generateBrandFontSizes} from '../brand-font-sizes-generator.js';
+
+test('generateBrandFontSizes', () => {
+    const anyBrandTokensPath = resolve(__dirname, 'any-brand-tokens.json');
+    const anyBrandTokens = JSON.parse(fs.readFileSync(anyBrandTokensPath, 'utf-8'));
+    const brand = {prefix: 'O2New'};
+    const result = generateBrandFontSizes(brand, anyBrandTokens);
+
+    expect(result).toMatchSnapshot();
+});
diff --git a/scripts/mistica-skin-generator/generators/font-sizes/__tests__/mistica-font-weights-generator.test.js b/scripts/mistica-skin-generator/generators/font-sizes/__tests__/mistica-font-weights-generator.test.js
new file mode 100644
index 00000000..d1298fcd
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/font-sizes/__tests__/mistica-font-weights-generator.test.js
@@ -0,0 +1,11 @@
+import fs from 'fs';
+import {resolve} from 'path';
+import {generateMisticaFontSizes} from '../mistica-font-sizes-generator.js';
+
+test('generateMisticaFontSizes', () => {
+    const anyBrandTokensPath = resolve(__dirname, 'any-brand-tokens.json');
+    const anyBrandTokens = JSON.parse(fs.readFileSync(anyBrandTokensPath, 'utf-8'));
+    const result = generateMisticaFontSizes(anyBrandTokens);
+
+    expect(result).toMatchSnapshot();
+});
diff --git a/scripts/mistica-skin-generator/generators/font-sizes/brand-font-sizes-generator.js b/scripts/mistica-skin-generator/generators/font-sizes/brand-font-sizes-generator.js
new file mode 100644
index 00000000..38d3d80b
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/font-sizes/brand-font-sizes-generator.js
@@ -0,0 +1,21 @@
+const template = (prefix, sizes) => `
+// Generated using Make
+// DO NOT EDIT
+
+import Foundation
+
+struct ${prefix}FontSizes: MisticaFontSizes {
+${sizes.map(([name, size]) => `    public var ${name}: CGFloat = ${size.value.mobile}`).join('\n')}
+}
+`;
+
+/**
+ *
+ * @param {{prefix: string}} brand
+ * @param {{text: {size: {[id: string]: {value: {mobile: number}}}}}} tokens
+ * @returns string
+ */
+export const generateBrandFontSizes = (brand, tokens) => {
+    const sizes = Object.entries(tokens.text.size);
+    return template(brand.prefix, sizes);
+};
diff --git a/scripts/mistica-skin-generator/generators/font-sizes/mistica-font-sizes-generator.js b/scripts/mistica-skin-generator/generators/font-sizes/mistica-font-sizes-generator.js
new file mode 100644
index 00000000..8530c1ff
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/font-sizes/mistica-font-sizes-generator.js
@@ -0,0 +1,20 @@
+const template = (props) => `
+// Generated using Make
+// DO NOT EDIT
+
+import Foundation
+
+public protocol MisticaFontSizes {
+${props.map((prop) => `    var ${prop}: CGFloat { get }`).join('\n')}
+}
+`;
+
+/**
+ *
+ * @param {{text: {size: {[id: string]: any}}}} anyBrandTokens
+ * @returns string
+ */
+export const generateMisticaFontSizes = (anyBrandTokens) => {
+    const weights = Object.keys(anyBrandTokens.text.size);
+    return template(weights);
+};
diff --git a/scripts/mistica-skin-generator/generators/font-weights/__tests__/__snapshots__/brand-font-weights-generator.test.js.snap b/scripts/mistica-skin-generator/generators/font-weights/__tests__/__snapshots__/brand-font-weights-generator.test.js.snap
new file mode 100644
index 00000000..a8b6f40c
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/font-weights/__tests__/__snapshots__/brand-font-weights-generator.test.js.snap
@@ -0,0 +1,27 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generateBrandFontWeights 1`] = `
+"
+// Generated using Make
+// DO NOT EDIT
+
+import Foundation
+
+struct O2NewFontWeights: MisticaFontWeights {
+    public var cardTitle: MisticaFontWeightType = .medium
+    public var button: MisticaFontWeightType = .medium
+    public var tabsLabel: MisticaFontWeightType = .medium
+    public var link: MisticaFontWeightType = .medium
+    public var title1: MisticaFontWeightType = .medium
+    public var title2: MisticaFontWeightType = .bold
+    public var indicator: MisticaFontWeightType = .medium
+    public var navigationBar: MisticaFontWeightType = .medium
+    public var text5: MisticaFontWeightType = .bold
+    public var text6: MisticaFontWeightType = .bold
+    public var text7: MisticaFontWeightType = .bold
+    public var text8: MisticaFontWeightType = .bold
+    public var text9: MisticaFontWeightType = .bold
+    public var text10: MisticaFontWeightType = .bold
+}
+"
+`;
diff --git a/scripts/mistica-skin-generator/generators/font-weights/__tests__/__snapshots__/mistica-font-weights-generator.test.js.snap b/scripts/mistica-skin-generator/generators/font-weights/__tests__/__snapshots__/mistica-font-weights-generator.test.js.snap
new file mode 100644
index 00000000..250b54e2
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/font-weights/__tests__/__snapshots__/mistica-font-weights-generator.test.js.snap
@@ -0,0 +1,27 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generateMisticaFontWeights 1`] = `
+"
+// Generated using Make
+// DO NOT EDIT
+
+import UIKit
+
+public protocol MisticaFontWeights {
+    var cardTitle: MisticaFontWeightType { get }
+    var button: MisticaFontWeightType { get }
+    var tabsLabel: MisticaFontWeightType { get }
+    var link: MisticaFontWeightType { get }
+    var title1: MisticaFontWeightType { get }
+    var title2: MisticaFontWeightType { get }
+    var indicator: MisticaFontWeightType { get }
+    var navigationBar: MisticaFontWeightType { get }
+    var text5: MisticaFontWeightType { get }
+    var text6: MisticaFontWeightType { get }
+    var text7: MisticaFontWeightType { get }
+    var text8: MisticaFontWeightType { get }
+    var text9: MisticaFontWeightType { get }
+    var text10: MisticaFontWeightType { get }
+}
+"
+`;
diff --git a/scripts/mistica-skin-generator/generators/font-weights/__tests__/any-brand-tokens.json b/scripts/mistica-skin-generator/generators/font-weights/__tests__/any-brand-tokens.json
new file mode 100644
index 00000000..f6b15673
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/font-weights/__tests__/any-brand-tokens.json
@@ -0,0 +1,1438 @@
+{
+    "light": {
+        "background": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundAlternative": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "backgroundBrand": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {"value": "{palette.darkBlue}", "stop": 0},
+                    {"value": "{palette.beyondBlue}", "stop": 0.64},
+                    {"value": "{palette.beyondBlue45}", "stop": 1}
+                ]
+            },
+            "description": "o2Gradient"
+        },
+        "backgroundBrandSecondary": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "backgroundContainer": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerError": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "backgroundContainerHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.03)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.05)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerBrand": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {"value": "{palette.darkBlue}", "stop": 0},
+                    {"value": "{palette.beyondBlue}", "stop": 0.64},
+                    {"value": "{palette.beyondBlue45}", "stop": 1}
+                ]
+            },
+            "description": "o2Gradient"
+        },
+        "backgroundContainerBrandHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.2)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerBrandPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.4)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainerBrandOverInverse": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "backgroundContainerAlternative": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "backgroundOverlay": {
+            "value": "rgba({palette.black}, 0.6)",
+            "type": "color",
+            "description": "black"
+        },
+        "backgroundSkeleton": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "backgroundSkeletonInverse": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "backgroundBrandTop": {
+            "value": "{palette.darkBlue}",
+            "type": "color",
+            "description": "darkBlue"
+        },
+        "backgroundBrandBottom": {
+            "value": "{palette.beyondBlue45}",
+            "type": "color",
+            "description": "beyondBlue45"
+        },
+        "appBarBackground": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "navigationBarBackground": {
+            "value": "{palette.darkBlue}",
+            "type": "color",
+            "description": "darkBlue"
+        },
+        "skeletonWave": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "borderLow": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "border": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "borderHigh": {
+            "value": "{palette.grey80}",
+            "type": "color",
+            "description": "grey80"
+        },
+        "borderSelected": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "coverBackgroundHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.25)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "coverBackgroundPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.35)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "buttonDangerBackground": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "buttonDangerBackgroundSelected": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "buttonDangerBackgroundHover": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "buttonLinkDangerBackgroundSelected": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "buttonLinkDangerBackgroundInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkDangerBackgroundInverseSelected": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "buttonLinkBackgroundSelected": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "buttonLinkBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonPrimaryBackground": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "buttonPrimaryBackgroundInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonPrimaryBackgroundSelected": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "buttonPrimaryBackgroundHover": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "buttonPrimaryBackgroundInverseSelected": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "buttonSecondaryBorder": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "buttonSecondaryBorderSelected": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "buttonSecondaryBackgroundHover": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "buttonSecondaryBackgroundSelected": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "buttonSecondaryBorderInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderInverseSelected": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "buttonSecondaryBackgroundInverseHover": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimary": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimaryInverse": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "textButtonPrimaryInverseSelected": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "textButtonSecondary": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "textButtonSecondarySelected": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "textButtonSecondaryInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonSecondaryInverseSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textLink": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "textLinkInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textLinkDanger": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "textLinkSnackbar": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textActivated": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "textBrand": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "control": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "controlActivated": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "controlInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "controlActivatedInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "controlError": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "barTrack": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "loadingBar": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "loadingBarBackground": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "toggleAndroidInactive": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "toggleAndroidBackgroundActive": {
+            "value": "{palette.beyondBlue15}",
+            "type": "color",
+            "description": "beyondBlue15"
+        },
+        "iosControlKnob": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "divider": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "dividerInverse": {
+            "value": "rgba({palette.white}, 0.2)",
+            "type": "color",
+            "description": "white"
+        },
+        "navigationBarDivider": {
+            "value": "{palette.darkBlue}",
+            "type": "color",
+            "description": "darkBlue"
+        },
+        "badge": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "feedbackErrorBackground": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "feedbackInfoBackground": {
+            "value": "{palette.black}",
+            "type": "color",
+            "description": "black"
+        },
+        "brand": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "brandHigh": {
+            "value": "{palette.beyondBlue70}",
+            "type": "color",
+            "description": "beyondBlue70"
+        },
+        "inverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "neutralHigh": {
+            "value": "{palette.black}",
+            "type": "color",
+            "description": "black"
+        },
+        "neutralMedium": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "neutralMediumInverse": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "neutralLow": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "neutralLowAlternative": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textPrimary": {
+            "value": "{palette.black}",
+            "type": "color",
+            "description": "black"
+        },
+        "textPrimaryInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textSecondary": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "textSecondaryInverse": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "success": {
+            "value": "{palette.o2Green}",
+            "type": "color",
+            "description": "o2Green"
+        },
+        "warning": {
+            "value": "{palette.o2Orange}",
+            "type": "color",
+            "description": "o2Orange"
+        },
+        "error": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "textError": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "textErrorInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "promo": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "highlight": {
+            "value": "{palette.o2Pink80}",
+            "type": "color",
+            "description": "o2Pink80"
+        },
+        "successLow": {
+            "value": "{palette.o2Green10}",
+            "type": "color",
+            "description": "o2Green10"
+        },
+        "warningLow": {
+            "value": "{palette.o2Orange10}",
+            "type": "color",
+            "description": "o2Orange10"
+        },
+        "errorLow": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "promoLow": {
+            "value": "{palette.o2Pink15}",
+            "type": "color",
+            "description": "o2Pink15"
+        },
+        "brandLow": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "successHigh": {
+            "value": "{palette.o2Green80}",
+            "type": "color",
+            "description": "o2Green80"
+        },
+        "warningHigh": {
+            "value": "{palette.o2Orange75}",
+            "type": "color",
+            "description": "o2Orange75"
+        },
+        "errorHigh": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "promoHigh": {
+            "value": "{palette.o2Pink80}",
+            "type": "color",
+            "description": "o2Pink80"
+        },
+        "successHighInverse": {
+            "value": "{palette.o2Green80}",
+            "type": "color",
+            "description": "o2Green80"
+        },
+        "warningHighInverse": {
+            "value": "{palette.o2Orange75}",
+            "type": "color",
+            "description": "o2Orange75"
+        },
+        "errorHighInverse": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "promoHighInverse": {
+            "value": "{palette.o2Pink80}",
+            "type": "color",
+            "description": "o2Pink80"
+        },
+        "textNavigationBarPrimary": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textNavigationBarSecondary": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textNavigationSearchBarHint": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textNavigationSearchBarText": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textAppBar": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "textAppBarSelected": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "customTabsBackground": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "tagTextPromo": {
+            "value": "{palette.o2Pink80}",
+            "type": "color",
+            "description": "o2Pink80"
+        },
+        "tagTextActive": {
+            "value": "{palette.beyondBlue}",
+            "type": "color",
+            "description": "beyondBlue"
+        },
+        "tagTextInactive": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "tagTextSuccess": {
+            "value": "{palette.o2Green80}",
+            "type": "color",
+            "description": "o2Green80"
+        },
+        "tagTextWarning": {
+            "value": "{palette.o2Orange75}",
+            "type": "color",
+            "description": "o2Orange75"
+        },
+        "tagTextError": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "tagBackgroundPromo": {
+            "value": "{palette.o2Pink15}",
+            "type": "color",
+            "description": "o2Pink15"
+        },
+        "tagBackgroundActive": {
+            "value": "{palette.beyondBlue10}",
+            "type": "color",
+            "description": "beyondBlue10"
+        },
+        "tagBackgroundInactive": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "tagBackgroundSuccess": {
+            "value": "{palette.o2Green10}",
+            "type": "color",
+            "description": "o2Green10"
+        },
+        "tagBackgroundWarning": {
+            "value": "{palette.o2Orange10}",
+            "type": "color",
+            "description": "o2Orange10"
+        },
+        "tagBackgroundError": {
+            "value": "{palette.o2Red10}",
+            "type": "color",
+            "description": "o2Red10"
+        },
+        "cardContentOverlay": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {"value": "rgba({palette.beyondBlue}, 0)", "stop": 0},
+                    {"value": "rgba({palette.beyondBlue}, 0.4)", "stop": 0.3},
+                    {"value": "rgba({palette.beyondBlue}, 1)", "stop": 1}
+                ]
+            },
+            "description": "grey6"
+        }
+    },
+    "dark": {
+        "background": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundAlternative": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundBrand": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundBrandSecondary": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundContainer": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerError": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerHover": {
+            "value": "rgba({palette.white}, 0.03)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerPressed": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerBrand": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerBrandHover": {
+            "value": "rgba({palette.white}, 0.03)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerBrandPressed": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "backgroundContainerBrandOverInverse": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundContainerAlternative": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundOverlay": {
+            "value": "rgba({palette.darkModeGrey}, 0.8)",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "backgroundSkeleton": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "backgroundSkeletonInverse": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "backgroundBrandTop": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "backgroundBrandBottom": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "appBarBackground": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "navigationBarBackground": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "skeletonWave": {
+            "value": "{palette.grey80}",
+            "type": "color",
+            "description": "grey80"
+        },
+        "borderLow": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "border": {
+            "value": "{palette.darkModeGrey}",
+            "type": "color",
+            "description": "darkModeGrey"
+        },
+        "borderHigh": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "borderSelected": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "coverBackgroundHover": {
+            "value": "rgba({palette.darkModeBlack}, 0.25)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "coverBackgroundPressed": {
+            "value": "rgba({palette.darkModeBlack}, 0.35)",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "buttonDangerBackground": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "buttonDangerBackgroundSelected": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "buttonDangerBackgroundHover": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "buttonLinkDangerBackgroundSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkDangerBackgroundInverse": {
+            "value": "rgba({palette.white}, 0)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkDangerBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkBackgroundSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonLinkBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.08)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonPrimaryBackground": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "buttonPrimaryBackgroundInverse": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "buttonPrimaryBackgroundSelected": {
+            "value": "{palette.beyondBlue55}",
+            "type": "color",
+            "description": "beyondBlue55"
+        },
+        "buttonPrimaryBackgroundHover": {
+            "value": "{palette.beyondBlue55}",
+            "type": "color",
+            "description": "beyondBlue55"
+        },
+        "buttonPrimaryBackgroundInverseSelected": {
+            "value": "{palette.beyondBlue55}",
+            "type": "color",
+            "description": "beyondBlue55"
+        },
+        "buttonSecondaryBackgroundSelected": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorder": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBorderInverseSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundHover": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundInverseHover": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "buttonSecondaryBackgroundInverseSelected": {
+            "value": "rgba({palette.white}, 0.15)",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimary": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimaryInverse": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonPrimaryInverseSelected": {
+            "value": "{palette.white}",
+            "type": "color",
+            "description": "white"
+        },
+        "textButtonSecondary": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textButtonSecondarySelected": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textButtonSecondaryInverse": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textButtonSecondaryInverseSelected": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textLink": {
+            "value": "{palette.beyondBlue40}",
+            "type": "color",
+            "description": "beyondBlue40"
+        },
+        "textLinkInverse": {
+            "value": "{palette.beyondBlue40}",
+            "type": "color",
+            "description": "beyondBlue40"
+        },
+        "textLinkDanger": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "textLinkSnackbar": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textActivated": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "textBrand": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "control": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "controlActivated": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "controlInverse": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "controlActivatedInverse": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "controlError": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "barTrack": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "loadingBar": {
+            "value": "{palette.darkModeBeyondBlue}",
+            "type": "color",
+            "description": "darkModeBeyondBlue"
+        },
+        "loadingBarBackground": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "toggleAndroidInactive": {
+            "value": "{palette.grey20}",
+            "type": "color",
+            "description": "grey20"
+        },
+        "toggleAndroidBackgroundActive": {
+            "value": "{palette.beyondBlue15}",
+            "type": "color",
+            "description": "beyondBlue15"
+        },
+        "iosControlKnob": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "badge": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "feedbackErrorBackground": {
+            "value": "{palette.o2Red60}",
+            "type": "color",
+            "description": "o2Red60"
+        },
+        "feedbackInfoBackground": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "divider": {
+            "value": "rgba({palette.white}, 0.1)",
+            "type": "color",
+            "description": "white"
+        },
+        "dividerInverse": {
+            "value": "rgba({palette.white}, 0.1)",
+            "type": "color",
+            "description": "white"
+        },
+        "navigationBarDivider": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "brand": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "brandHigh": {
+            "value": "rgba({palette.white}, 0.05)",
+            "type": "color",
+            "description": "white"
+        },
+        "inverse": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "neutralHigh": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "neutralMedium": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "neutralMediumInverse": {
+            "value": "{palette.grey60}",
+            "type": "color",
+            "description": "grey60"
+        },
+        "neutralLow": {
+            "value": "{palette.grey80}",
+            "type": "color",
+            "description": "grey80"
+        },
+        "neutralLowAlternative": {
+            "value": "{palette.grey80}",
+            "type": "color",
+            "description": "grey80"
+        },
+        "textPrimary": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textPrimaryInverse": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textSecondary": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "textSecondaryInverse": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "success": {
+            "value": "{palette.o2Green}",
+            "type": "color",
+            "description": "o2Green"
+        },
+        "warning": {
+            "value": "{palette.o2Orange}",
+            "type": "color",
+            "description": "o2Orange"
+        },
+        "error": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "textError": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "textErrorInverse": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "promo": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "highlight": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "successLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "warningLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "errorLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "promoLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "brandLow": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "successHigh": {
+            "value": "{palette.o2Green40}",
+            "type": "color",
+            "description": "o2Green40"
+        },
+        "warningHigh": {
+            "value": "{palette.o2Orange40}",
+            "type": "color",
+            "description": "o2Orange40"
+        },
+        "errorHigh": {
+            "value": "{palette.o2Red40}",
+            "type": "color",
+            "description": "o2Red40"
+        },
+        "promoHigh": {
+            "value": "{palette.o2Pink30}",
+            "type": "color",
+            "description": "o2Pink30"
+        },
+        "successHighInverse": {
+            "value": "{palette.o2Green80}",
+            "type": "color",
+            "description": "o2Green80"
+        },
+        "warningHighInverse": {
+            "value": "{palette.o2Orange75}",
+            "type": "color",
+            "description": "o2Orange75"
+        },
+        "errorHighInverse": {
+            "value": "{palette.o2Red65}",
+            "type": "color",
+            "description": "o2Red65"
+        },
+        "promoHighInverse": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "textNavigationBarPrimary": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textNavigationBarSecondary": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "textNavigationSearchBarHint": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "textNavigationSearchBarText": {
+            "value": "{palette.grey30}",
+            "type": "color",
+            "description": "grey30"
+        },
+        "textAppBar": {
+            "value": "{palette.grey45}",
+            "type": "color",
+            "description": "grey45"
+        },
+        "textAppBarSelected": {
+            "value": "{palette.beyondBlue40}",
+            "type": "color",
+            "description": "beyondBlue40"
+        },
+        "customTabsBackground": {
+            "value": "{palette.darkModeBlack}",
+            "type": "color",
+            "description": "darkModeBlack"
+        },
+        "tagTextPromo": {
+            "value": "{palette.o2Pink}",
+            "type": "color",
+            "description": "o2Pink"
+        },
+        "tagTextActive": {
+            "value": "{palette.beyondBlue30}",
+            "type": "color",
+            "description": "beyondBlue30"
+        },
+        "tagTextInactive": {
+            "value": "{palette.grey40}",
+            "type": "color",
+            "description": "grey40"
+        },
+        "tagTextSuccess": {
+            "value": "{palette.o2Green}",
+            "type": "color",
+            "description": "o2Green"
+        },
+        "tagTextWarning": {
+            "value": "{palette.o2Orange}",
+            "type": "color",
+            "description": "o2Orange"
+        },
+        "tagTextError": {
+            "value": "{palette.o2Red45}",
+            "type": "color",
+            "description": "o2Red45"
+        },
+        "tagBackgroundPromo": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundActive": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundInactive": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundSuccess": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundWarning": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "tagBackgroundError": {
+            "value": "{palette.darkModeGrey6}",
+            "type": "color",
+            "description": "darkModeGrey6"
+        },
+        "cardContentOverlay": {
+            "type": "linear-gradient",
+            "value": {
+                "angle": 180,
+                "colors": [
+                    {"value": "rgba({palette.black}, 0)", "stop": 0},
+                    {"value": "rgba({palette.black}, 0.4)", "stop": 0.3},
+                    {"value": "rgba({palette.black}, 0.7)", "stop": 1}
+                ]
+            },
+            "description": "grey6"
+        }
+    },
+    "radius": {
+        "avatar": {"value": "circle", "type": "borderRadius"},
+        "bar": {"value": "999", "type": "borderRadius"},
+        "button": {"value": "999", "type": "borderRadius"},
+        "checkbox": {"value": "2", "type": "borderRadius"},
+        "container": {"value": "16", "type": "borderRadius"},
+        "indicator": {"value": "999", "type": "borderRadius"},
+        "input": {"value": "12", "type": "borderRadius"},
+        "legacyDisplay": {"value": "16", "type": "borderRadius"},
+        "popup": {"value": "8", "type": "borderRadius"},
+        "sheet": {"value": "16", "type": "borderRadius"},
+        "mediaSmall": {"value": "8", "type": "borderRadius"}
+    },
+    "text": {
+        "weight": {
+            "cardTitle": {"value": "medium", "type": "typography"},
+            "button": {"value": "medium", "type": "typography"},
+            "tabsLabel": {"value": "medium", "type": "typography"},
+            "link": {"value": "medium", "type": "typography"},
+            "title1": {"value": "medium", "type": "typography"},
+            "title2": {"value": "bold", "type": "typography"},
+            "indicator": {"value": "medium", "type": "typography"},
+            "navigationBar": {"value": "medium", "type": "typography"},
+            "text5": {"value": "bold", "type": "typography"},
+            "text6": {"value": "bold", "type": "typography"},
+            "text7": {"value": "bold", "type": "typography"},
+            "text8": {"value": "bold", "type": "typography"},
+            "text9": {"value": "bold", "type": "typography"},
+            "text10": {"value": "bold", "type": "typography"}
+        },
+        "size": {
+            "tabsLabel": {
+                "value": {"mobile": 16, "desktop": 18},
+                "type": "typography"
+            },
+            "title2": {
+                "value": {"mobile": 20, "desktop": 28},
+                "type": "typography"
+            }
+        },
+        "lineHeight": {
+            "tabsLabel": {
+                "value": {"mobile": 24, "desktop": 24},
+                "type": "typography"
+            },
+            "title2": {
+                "value": {"mobile": 24, "desktop": 32},
+                "type": "typography"
+            }
+        }
+    },
+    "themeVariant": {
+        "successFeedback": {"value": "inverse", "type": "themeVariant"},
+        "brandLoadingScreen": {"value": "inverse", "type": "themeVariant"}
+    },
+    "global": {
+        "palette": {
+            "beyondBlue": {"value": "#0050FF", "type": "color"},
+            "beyondBlue10": {"value": "#E5EDFF", "type": "color"},
+            "beyondBlue15": {"value": "#CCDCFF", "type": "color"},
+            "beyondBlue30": {"value": "#80A7FF", "type": "color"},
+            "beyondBlue40": {"value": "#4D84FF", "type": "color"},
+            "beyondBlue45": {"value": "#0A73EB", "type": "color"},
+            "beyondBlue55": {"value": "#0044D9", "type": "color"},
+            "beyondBlue70": {"value": "#0038B2", "type": "color"},
+            "beyondBlue90": {"value": "#001033", "type": "color"},
+            "darkBlue": {"value": "#00008C", "type": "color"},
+            "o2BlueLight": {"value": "#82DCFA", "type": "color"},
+            "o2BlueLight30": {"value": "#C0EEFD", "type": "color"},
+            "o2BlueLight35": {"value": "#B4EAFC", "type": "color"},
+            "o2Green": {"value": "#00DC7D", "type": "color"},
+            "o2Green10": {"value": "#E5FBF2", "type": "color"},
+            "o2Green40": {"value": "#4CE7A4", "type": "color"},
+            "o2Green80": {"value": "#006338", "type": "color"},
+            "o2Yellow": {"value": "#FADC00", "type": "color"},
+            "o2Orange": {"value": "#FFA55A", "type": "color"},
+            "o2Orange10": {"value": "#FFF6EE", "type": "color"},
+            "o2Orange40": {"value": "#FFC08B", "type": "color"},
+            "o2Orange75": {"value": "#996336", "type": "color"},
+            "o2Pink": {"value": "#FA96FF", "type": "color"},
+            "o2Pink15": {"value": "#FEEAFF", "type": "color"},
+            "o2Pink30": {"value": "#FDCAFF", "type": "color"},
+            "o2Pink80": {"value": "#704373", "type": "color"},
+            "o2Red": {"value": "#FF5A5A", "type": "color"},
+            "o2Red10": {"value": "#FFEEEE", "type": "color"},
+            "o2Red20": {"value": "#FFCDCD", "type": "color"},
+            "o2Red40": {"value": "#FF8B8B", "type": "color"},
+            "o2Red45": {"value": "#FF7B7B", "type": "color"},
+            "o2Red60": {"value": "#CC4848", "type": "color"},
+            "o2Red65": {"value": "#BF4444", "type": "color"},
+            "grey20": {"value": "#F3F3F5", "type": "color"},
+            "grey30": {"value": "#D9D9DD", "type": "color"},
+            "grey40": {"value": "#B4B4BE", "type": "color"},
+            "grey45": {"value": "#8C8C9A", "type": "color"},
+            "grey60": {"value": "#6E6E77", "type": "color"},
+            "grey80": {"value": "#3C3C46", "type": "color"},
+            "black": {"value": "#00001E", "type": "color"},
+            "white": {"value": "#FFFFFF", "type": "color"},
+            "darkModeBlack": {"value": "#00001C", "type": "color"},
+            "darkModeGrey": {"value": "#08132B", "type": "color"},
+            "darkModeGrey6": {"value": "#14213D", "type": "color"},
+            "darkModeBeyondBlue": {"value": "#1A62FF", "type": "color"}
+        }
+    }
+}
diff --git a/scripts/mistica-skin-generator/generators/font-weights/__tests__/brand-font-weights-generator.test.js b/scripts/mistica-skin-generator/generators/font-weights/__tests__/brand-font-weights-generator.test.js
new file mode 100644
index 00000000..de10ed91
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/font-weights/__tests__/brand-font-weights-generator.test.js
@@ -0,0 +1,12 @@
+import fs from 'fs';
+import {resolve} from 'path';
+import {generateBrandFontWeights} from '../brand-font-weights-generator.js';
+
+test('generateBrandFontWeights', () => {
+    const anyBrandTokensPath = resolve(__dirname, 'any-brand-tokens.json');
+    const anyBrandTokens = JSON.parse(fs.readFileSync(anyBrandTokensPath, 'utf-8'));
+    const brand = {prefix: 'O2New'};
+    const result = generateBrandFontWeights(brand, anyBrandTokens);
+
+    expect(result).toMatchSnapshot();
+});
diff --git a/scripts/mistica-skin-generator/generators/font-weights/__tests__/mistica-font-weights-generator.test.js b/scripts/mistica-skin-generator/generators/font-weights/__tests__/mistica-font-weights-generator.test.js
new file mode 100644
index 00000000..b8f3d01d
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/font-weights/__tests__/mistica-font-weights-generator.test.js
@@ -0,0 +1,11 @@
+import fs from 'fs';
+import {resolve} from 'path';
+import {generateMisticaFontWeights} from '../mistica-font-weights-generator.js';
+
+test('generateMisticaFontWeights', () => {
+    const anyBrandTokensPath = resolve(__dirname, 'any-brand-tokens.json');
+    const anyBrandTokens = JSON.parse(fs.readFileSync(anyBrandTokensPath, 'utf-8'));
+    const result = generateMisticaFontWeights(anyBrandTokens);
+
+    expect(result).toMatchSnapshot();
+});
diff --git a/scripts/mistica-skin-generator/generators/font-weights/brand-font-weights-generator.js b/scripts/mistica-skin-generator/generators/font-weights/brand-font-weights-generator.js
new file mode 100644
index 00000000..6d3bb142
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/font-weights/brand-font-weights-generator.js
@@ -0,0 +1,23 @@
+const template = (prefix, weights) => `
+// Generated using Make
+// DO NOT EDIT
+
+import Foundation
+
+struct ${prefix}FontWeights: MisticaFontWeights {
+${weights
+    .map(([name, weight]) => `    public var ${name}: MisticaFontWeightType = .${weight.value}`)
+    .join('\n')}
+}
+`;
+
+/**
+ *
+ * @param {{prefix: string}} brand
+ * @param {{text: {weight: {[id: string]: {value: string}}}}} tokens
+ * @returns string
+ */
+export const generateBrandFontWeights = (brand, tokens) => {
+    const weights = Object.entries(tokens.text.weight);
+    return template(brand.prefix, weights);
+};
diff --git a/scripts/mistica-skin-generator/generators/font-weights/mistica-font-weights-generator.js b/scripts/mistica-skin-generator/generators/font-weights/mistica-font-weights-generator.js
new file mode 100644
index 00000000..f37c6919
--- /dev/null
+++ b/scripts/mistica-skin-generator/generators/font-weights/mistica-font-weights-generator.js
@@ -0,0 +1,20 @@
+const template = (props) => `
+// Generated using Make
+// DO NOT EDIT
+
+import UIKit
+
+public protocol MisticaFontWeights {
+${props.map((prop) => `    var ${prop}: MisticaFontWeightType { get }`).join('\n')}
+}
+`;
+
+/**
+ *
+ * @param {{text: {weight: {[id: string]: any}}}} anyBrandTokens
+ * @returns string
+ */
+export const generateMisticaFontWeights = (anyBrandTokens) => {
+    const weights = Object.keys(anyBrandTokens.text.weight);
+    return template(weights);
+};
diff --git a/scripts/mistica-skin-generator/index.js b/scripts/mistica-skin-generator/index.js
new file mode 100644
index 00000000..b0840c04
--- /dev/null
+++ b/scripts/mistica-skin-generator/index.js
@@ -0,0 +1,145 @@
+import fs from 'fs';
+import {generateMisticaCornerRadius} from './generators/corner-radius/mistica-corner-radius-generator.js';
+import {generateBrandFontSizes} from './generators/font-sizes/brand-font-sizes-generator.js';
+import {generateMisticaFontSizes} from './generators/font-sizes/mistica-font-sizes-generator.js';
+import {generateBrandFontWeights} from './generators/font-weights/brand-font-weights-generator.js';
+import {generateMisticaFontWeights} from './generators/font-weights/mistica-font-weights-generator.js';
+import {downloadTokens} from './token-downloader.js';
+import {generateBrandCornerRadius} from './generators/corner-radius/brand-corner-radius-generator.js';
+import {generateMisticaColors} from './generators/colors/mistica-colors-generator.js';
+import {generateMisticaColor} from './generators/colors/mistica-color-generator.js';
+import {reduceColors} from './generators/colors/reduce-colors.js';
+import {generateColorToolkit} from './generators/colors/color-toolkit-generator.js';
+import {generateUIColorToolkit} from './generators/colors/uicolor-toolkit-generator.js';
+import {generateBrandColors} from './generators/colors/brand-colors-generator.js';
+
+const BRANDS = [
+    {
+        id: 'blau',
+        prefix: 'Blau',
+        misticaDesignFileName: 'blau',
+    },
+    {
+        id: 'movistar',
+        prefix: 'Movistar',
+        misticaDesignFileName: 'movistar',
+    },
+    {
+        id: 'o2new',
+        prefix: 'O2New',
+        misticaDesignFileName: 'o2-new',
+    },
+    {
+        id: 'o2',
+        prefix: 'O2',
+        misticaDesignFileName: 'o2',
+    },
+    {
+        id: 'telefonica',
+        prefix: 'Telefonica',
+        misticaDesignFileName: 'telefonica',
+    },
+    {
+        id: 'tu',
+        prefix: 'Tu',
+        misticaDesignFileName: 'tu',
+    },
+    {
+        id: 'vivoNew',
+        prefix: 'VivoNew',
+        misticaDesignFileName: 'vivo-new',
+    },
+    {
+        id: 'vivo',
+        prefix: 'Vivo',
+        misticaDesignFileName: 'vivo',
+    },
+];
+
+const BRANCH = 'production';
+
+const run = async () => {
+    const brandsWithTokens = await Promise.all(
+        BRANDS.map((brand) => {
+            console.log(`Getting ${brand.misticaDesignFileName} tokens from mistica-design/${BRANCH}...`);
+            return downloadTokens(BRANCH, brand.misticaDesignFileName).then((tokens) => ({
+                brand,
+                tokens,
+            }));
+        })
+    );
+    const anyBrandTokens = brandsWithTokens[0].tokens;
+
+    // Font weights
+    console.log(`Generating MisticaFontWeights.swift...`);
+    const misticaFontWeights = generateMisticaFontWeights(anyBrandTokens);
+    fs.writeFileSync('../../Sources/MisticaCommon/Fonts/MisticaFontWeights.swift', misticaFontWeights);
+
+    // Font sizes
+    console.log(`Generating MisticaFontSizes.swift...`);
+    const misticaFontSizes = generateMisticaFontSizes(anyBrandTokens);
+    fs.writeFileSync('../../Sources/MisticaCommon/Fonts/MisticaFontSizes.swift', misticaFontSizes);
+
+    // Corner radius
+    console.log(`Generating MisticaCornerRadius.swift...`);
+    const misticaCornerRadius = generateMisticaCornerRadius(anyBrandTokens);
+    fs.writeFileSync('../../Sources/MisticaCommon/Radius/MisticaCornerRadius.swift', misticaCornerRadius);
+
+    // Colors
+    console.log(`Generating MisticaColors.swift...`);
+    const colors = reduceColors(brandsWithTokens);
+    const misticaColors = generateMisticaColors(colors);
+    fs.writeFileSync('../../Sources/MisticaCommon/Colors/MisticaColors.swift', misticaColors);
+
+    console.log(`Generating MisticaColor.swift...`);
+    const misticaColor = generateMisticaColor(colors);
+    fs.writeFileSync('../../Sources/MisticaCommon/Colors/MisticaColor.swift', misticaColor);
+
+    console.log(`Generating ColorToolkit+Color.swift...`);
+    const colorToolkit = generateColorToolkit(colors);
+    fs.writeFileSync('../../Sources/MisticaCommon/Colors/ColorToolkit+Color.swift', colorToolkit);
+
+    console.log(`Generating ColorToolkit+UIColor.swift...`);
+    const uicolorToolkit = generateUIColorToolkit(colors);
+    fs.writeFileSync('../../Sources/MisticaCommon/Colors/ColorToolkit+UIColor.swift', uicolorToolkit);
+
+    brandsWithTokens.forEach((brandWithTokens) => {
+        // Font weights
+        console.log(`Generating ${brandWithTokens.brand.prefix}FontWeights.swift...`);
+        const brandFontWeights = generateBrandFontWeights(brandWithTokens.brand, brandWithTokens.tokens);
+        fs.writeFileSync(
+            `../../Sources/MisticaCommon/Fonts/Brands/${brandWithTokens.brand.prefix}FontWeights.swift`,
+            brandFontWeights
+        );
+
+        // Font sizes
+        console.log(`Generating ${brandWithTokens.brand.prefix}FontSizes.swift...`);
+        const brandFontSizes = generateBrandFontSizes(brandWithTokens.brand, brandWithTokens.tokens);
+        fs.writeFileSync(
+            `../../Sources/MisticaCommon/Fonts/Brands/${brandWithTokens.brand.prefix}FontSizes.swift`,
+            brandFontSizes
+        );
+
+        // Corner radius
+        console.log(`Generating ${brandWithTokens.brand.prefix}CornerRadius.swift...`);
+        const brandCornerRadius = generateBrandCornerRadius(brandWithTokens.brand, brandWithTokens.tokens);
+        fs.writeFileSync(
+            `../../Sources/MisticaCommon/Radius/Brands/${brandWithTokens.brand.prefix}CornerRadius.swift`,
+            brandCornerRadius
+        );
+
+        // Colors
+        console.log(`Generating ${brandWithTokens.brand.prefix}ColorPalette.swift...`);
+        const brandColors = generateBrandColors(
+            brandWithTokens.brand,
+            colors,
+            brandWithTokens.tokens.global.palette
+        );
+        fs.writeFileSync(
+            `../../Sources/MisticaCommon/Colors/${brandWithTokens.brand.prefix}ColorPalette.swift`,
+            brandColors
+        );
+    });
+};
+
+run();
diff --git a/scripts/mistica-skin-generator/package.json b/scripts/mistica-skin-generator/package.json
new file mode 100644
index 00000000..94995880
--- /dev/null
+++ b/scripts/mistica-skin-generator/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "mistica-skin-generator",
+  "version": "1.0.0",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "vitest run",
+    "lint": "eslint --report-unused-disable-directives .",
+    "prettier": "prettier --write .",
+    "prettier-check": "prettier --check .",
+    "test:watch": "vitest",
+    "generate": "node index.js"
+  },
+  "devDependencies": {
+    "@telefonica/eslint-config": "^2.1.1",
+    "@telefonica/prettier-config": "^2.0.0",
+    "eslint": "^8.57.0",
+    "prettier": "3.3.3",
+    "vitest": "^2.0.3"
+  },
+  "prettier": "@telefonica/prettier-config"
+}
diff --git a/scripts/mistica-skin-generator/token-downloader.js b/scripts/mistica-skin-generator/token-downloader.js
new file mode 100644
index 00000000..c064ed85
--- /dev/null
+++ b/scripts/mistica-skin-generator/token-downloader.js
@@ -0,0 +1,12 @@
+/**
+ *
+ * @param {string} branch
+ * @param {string} brand
+ * @returns {Promise<any>}
+ */
+export const downloadTokens = async (branch, brand) => {
+    const response = await fetch(
+        `https://raw.githubusercontent.com/Telefonica/mistica-design/${branch}/tokens/${brand}.json`
+    );
+    return response.json();
+};
diff --git a/scripts/mistica-skin-generator/vite.config.js b/scripts/mistica-skin-generator/vite.config.js
new file mode 100644
index 00000000..64060aa3
--- /dev/null
+++ b/scripts/mistica-skin-generator/vite.config.js
@@ -0,0 +1,9 @@
+import {defineConfig} from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [],
+    test: {
+        globals: true,
+    },
+});