diff --git a/core/package.json b/core/package.json
index 91d9c57edc..02ebdb39b3 100644
--- a/core/package.json
+++ b/core/package.json
@@ -77,7 +77,7 @@
     "build.css": "npm run css.sass && npm run css.minify",
     "build.debug": "npm run clean && stencil build --debug",
     "build.docs.json": "stencil build --docs-json dist/docs.json",
-    "build.tokens": "node ./scripts/tokens.js && npm run lint.sass.fix && npm run prettier.tokens",
+    "build.tokens": "node ./scripts/tokens/index.js && npm run lint.sass.fix && npm run prettier.tokens",
     "clean": "node scripts/clean.js",
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
     "css.sass": "sass --embed-sources --style compressed src/css:./css",
diff --git a/core/scripts/tokens.js b/core/scripts/tokens.js
deleted file mode 100644
index acfeacfd13..0000000000
--- a/core/scripts/tokens.js
+++ /dev/null
@@ -1,197 +0,0 @@
-/* For generating Design Tokens, we use Style Dictionary for several reasons:
-- It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.).
-- It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
-- It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
-- It can easily scale to different necessities we might have in the future.
-*/
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const StyleDictionary = require('style-dictionary');
-
-const { fileHeader } = StyleDictionary.formatHelpers;
-
-// Empty for as an example of how we can add some extra variables, not from the tokens JSON
-const customVariables = ``;
-
-// Prefix for all generated variables
-const variablesPrefix = 'ionic';
-
-function hexToRgb(hex) {
-  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return result
-    ? {
-        r: parseInt(result[1], 16),
-        g: parseInt(result[2], 16),
-        b: parseInt(result[3], 16),
-      }
-    : null;
-}
-
-// CSS vanilla :root format
-StyleDictionary.registerFormat({
-  name: 'rootFormat',
-  formatter({ dictionary, file }) {
-    // Add a prefix to all variable names
-    const prefixedVariables = dictionary.allProperties.map((prop) => {
-      const rgb = hexToRgb(prop.value);
-      return `  --${variablesPrefix}-${prop.name}: ${prop.value};${
-        rgb ? `\n  --${variablesPrefix}-${prop.name}-rgb: ${rgb.r}, ${rgb.g}, ${rgb.b};` : ``
-      }`;
-    });
-
-    return (
-      fileHeader({ file }) +
-      ':root {\n' +
-      prefixedVariables.join('\n') + // Join all prefixed variables with a newline
-      customVariables +
-      '\n}\n'
-    );
-  },
-});
-
-// scss variables format
-StyleDictionary.registerFormat({
-  name: 'scssVariablesFormat',
-  formatter({ dictionary, file }) {
-    // Add a prefix to all variable names
-    const prefixedVariables = dictionary.allProperties.map((prop) => {
-      const rgb = hexToRgb(prop.value);
-      return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});${
-        rgb
-          ? `\n$${variablesPrefix}-${prop.name}-rgb: var(--${variablesPrefix}-${prop.name}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`
-          : ``
-      }`;
-    });
-
-    return (
-      fileHeader({ file }) +
-      prefixedVariables.join('\n') + // Join all prefixed variables with a newline
-      customVariables +
-      '\n'
-    );
-  },
-});
-
-// Create utility-classes
-StyleDictionary.registerFormat({
-  name: 'cssUtilityClassesFormat',
-  formatter({ dictionary, file }) {
-    const utilityClasses = dictionary.allProperties.map((prop) => {
-      let tokenType = prop.attributes.category;
-      const className = `${prop.name}`;
-      let utilityClass = '';
-
-      switch (tokenType) {
-        case 'color':
-          utilityClass = `.${variablesPrefix}-${className} {\n  color: $ionic-${prop.name};\n}
-.${variablesPrefix}-background-${className} {\n  background-color: $ionic-${prop.name};\n}`;
-          break;
-        case 'border':
-          const borderAttribute = prop.attributes.type === 'radius' ? 'border-radius' : 'border-width';
-          utilityClass = `.${variablesPrefix}-${className} {\n  ${borderAttribute}: $ionic-${prop.name};\n}`;
-          break;
-        case 'font':
-          let fontAttribute;
-          switch (prop.attributes.type) {
-            case 'size':
-              fontAttribute = 'font-size';
-              break;
-            case 'weight':
-              fontAttribute = 'font-weight';
-              break;
-            case 'line-height':
-              fontAttribute = 'line-height';
-              break;
-            case 'letter-spacing':
-              fontAttribute = 'letter-spacing';
-              break;
-            case 'family':
-              return;
-          }
-          utilityClass = `.${variablesPrefix}-${className} {\n  ${fontAttribute}: $ionic-${prop.name};\n}`;
-          break;
-        case 'elevation':
-          utilityClass = `.${variablesPrefix}-${className} {\n  box-shadow: $ionic-${prop.name};\n}`;
-          break;
-        case 'space':
-          utilityClass = `.${variablesPrefix}-margin-${className} {\n  --margin-start: #{$ionic-${prop.name}};\n  --margin-end: #{$ionic-${prop.name}};\n  --margin-top: #{$ionic-${prop.name}};\n  --margin-bottom: #{$ionic-${prop.name}};\n\n  @include margin(${prop.value});\n};\n 
-.${variablesPrefix}-padding-${className} {\n  --padding-start: #{$ionic-${prop.name}};\n  --padding-end: #{$ionic-${prop.name}};\n  --padding-top: #{$ionic-${prop.name}};\n  --padding-bottom: #{$ionic-${prop.name}};\n\n  @include padding(${prop.value});\n};\n`;
-          break;
-        default:
-          utilityClass = `.${variablesPrefix}-${className} {\n  ${tokenType}: $ionic-${prop.name};\n}`;
-      }
-
-      return utilityClass;
-    });
-
-    return [
-      fileHeader({ file }),
-      '@import "./ionic.vars";\n@import "../themes/mixins";\n',
-      utilityClasses.join('\n'),
-    ].join('\n');
-  },
-});
-
-// Make Style Dictionary comply with the $ format on properties from W3C Guidelines
-const w3cTokenJsonParser = {
-  pattern: /\.json|\.tokens\.json|\.tokens$/,
-  parse({ contents }) {
-    // replace $value with value so that style dictionary recognizes it
-    var preparedContent = (contents || '{}')
-      .replace(/"\$?value":/g, '"value":')
-      // convert $description to comment
-      .replace(/"\$?description":/g, '"comment":');
-    //
-
-    return JSON.parse(preparedContent);
-  },
-};
-
-StyleDictionary.registerParser(w3cTokenJsonParser);
-
-// Generate Tokens
-StyleDictionary.extend({
-  source: ['./src/foundations/*.json'],
-  platforms: {
-    css: {
-      buildPath: './src/foundations/',
-      transformGroup: 'css',
-      files: [
-        {
-          destination: 'ionic.root.scss',
-          format: 'rootFormat',
-          options: {
-            outputReferences: true,
-            fileHeader: `myFileHeader`,
-          },
-        },
-      ],
-    },
-    scss: {
-      buildPath: './src/foundations/',
-      transformGroup: 'scss',
-      files: [
-        {
-          destination: 'ionic.vars.scss',
-          format: 'scssVariablesFormat',
-          options: {
-            outputReferences: true,
-            fileHeader: `myFileHeader`,
-          },
-        },
-        {
-          destination: 'ionic.utility.scss',
-          format: 'cssUtilityClassesFormat',
-          options: {
-            outputReferences: true,
-            fileHeader: `myFileHeader`,
-          },
-        },
-      ],
-    },
-  },
-  fileHeader: {
-    myFileHeader: () => {
-      return [`This is an auto-generated file, please do not change it directly.`, `Ionic Design System`];
-    },
-  },
-}).buildAllPlatforms();
diff --git a/core/scripts/tokens/index.js b/core/scripts/tokens/index.js
new file mode 100644
index 0000000000..777f9a2f56
--- /dev/null
+++ b/core/scripts/tokens/index.js
@@ -0,0 +1,218 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+// For generating Design Tokens, we use Style Dictionary for several reasons:
+// - It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.).
+// - It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
+// - It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
+// - It can easily scale to different necessities we might have in the future.
+
+const StyleDictionary = require('style-dictionary');
+
+const targetPath = './src/foundations/';
+
+const {
+  variablesPrefix,
+  hexToRgb,
+  generateShadowValue,
+  generateFontFamilyValue,
+  generateTypographyValue,
+  generateRgbValue,
+  generateColorUtilityClasses,
+  generateFontUtilityClass,
+  generateSpaceUtilityClasses,
+  generateTypographyUtilityClass,
+} = require('./utilities');
+
+const { fileHeader } = StyleDictionary.formatHelpers;
+
+// CSS vanilla :root format
+StyleDictionary.registerFormat({
+  name: 'rootFormat',
+  formatter({ dictionary, file }) {
+    /*
+     * This will loop through all tokens and based on the type it will
+     * call a utility function that will return the expected format for the CSS Variable
+     */
+    const prefixedVariables = dictionary.allProperties
+      .filter((prop) => prop['$type'] !== 'typography')
+      .map((prop) => {
+        if (prop.attributes.category.startsWith('Elevation')) {
+          const cssShadow = prop.value.map(generateShadowValue).join(', ');
+          return `--${variablesPrefix}-${prop.name}: ${cssShadow};`;
+        } else if (prop.attributes.category.match('font-family')) {
+          return generateFontFamilyValue(prop);
+        } else {
+          // TODO(ROU-4870): prevent colors with 8 characters to be created without a rgb transformation
+          const rgb = hexToRgb(prop.value);
+          return `  --${variablesPrefix}-${prop.name}: ${prop.value};${
+            rgb ? `\n  --${variablesPrefix}-${prop.name}-rgb: ${rgb.r}, ${rgb.g}, ${rgb.b};` : ``
+          }`;
+        }
+      });
+
+    return fileHeader({ file }) + ':root {\n' + prefixedVariables.join('\n') + '\n}\n';
+  },
+});
+
+// SCSS variables format
+StyleDictionary.registerFormat({
+  name: 'scssVariablesFormat',
+  formatter({ dictionary, file }) {
+    const typographyProperties = dictionary.allProperties.filter((prop) => prop['$type'] === 'typography');
+    const otherProperties = dictionary.allProperties.filter((prop) => prop['$type'] !== 'typography');
+
+    // Make sure the reused scss variables are defined first, to avoid compilation errors
+    const sortedProperties = [...otherProperties, ...typographyProperties];
+
+    const prefixedVariables = sortedProperties.map((prop) => {
+      if (prop.attributes.category.startsWith('Elevation')) {
+        const cssShadow = prop.value.map(generateShadowValue).join(', ');
+        return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${cssShadow});`;
+      } else if (prop.attributes.category.match('font-family')) {
+        return generateFontFamilyValue(prop, 'scss');
+      } else if (prop['$type'] === 'typography') {
+        return generateTypographyValue(prop, dictionary);
+      } else {
+        return generateRgbValue(prop);
+      }
+    });
+
+    return fileHeader({ file }) + prefixedVariables.join('\n') + '\n';
+  },
+});
+
+// Create utility-classes
+StyleDictionary.registerFormat({
+  name: 'cssUtilityClassesFormat',
+  formatter({ dictionary, file }) {
+    const utilityClasses = dictionary.allProperties.map((prop) => {
+      let tokenType = prop.attributes.category;
+      const className = `${prop.name}`;
+      let utilityClass = '';
+
+      if (tokenType.startsWith('Elevation')) {
+        return `.${variablesPrefix}-${className} {\n  box-shadow: $ionic-${prop.name};\n}`;
+      } else if (prop['$type'] === 'typography') {
+        return generateTypographyUtilityClass(prop, dictionary);
+        /*
+         * Not creating for the tokens below, as they make no sense to exist as utility-classes.
+         * Font-family should be defined on global scope, not component.
+         * Scale its an abstract token group, to be used by other tokens, like the space ones.
+         */
+      } else if (prop.attributes.category.match('font-family') || tokenType === 'scale') {
+        return;
+      }
+
+      const tokenTypeLower = tokenType.toLowerCase();
+
+      switch (tokenTypeLower) {
+        case 'color':
+        case 'state':
+        case 'guidelines':
+        case 'disabled':
+        case 'hover':
+        case 'pressed':
+          utilityClass = generateColorUtilityClasses(prop, className);
+          break;
+        case 'border-size':
+          utilityClass = `.${variablesPrefix}-${className} {\n  border-width: $ionic-${prop.name};\n}`;
+          break;
+        case 'font':
+          utilityClass = generateFontUtilityClass(prop, className);
+          break;
+        case 'space':
+          utilityClass = generateSpaceUtilityClasses(prop, className);
+          break;
+        default:
+          utilityClass = `.${variablesPrefix}-${className} {\n  ${tokenType}: $ionic-${prop.name};\n}`;
+      }
+
+      return utilityClass;
+    });
+
+    return [
+      fileHeader({ file }),
+      '@import "./ionic.vars";\n@import "../themes/mixins";\n',
+      utilityClasses.join('\n'),
+    ].join('\n');
+  },
+});
+
+// Custom transform to ensure unique token names
+StyleDictionary.registerTransform({
+  name: 'name/cti/kebab-unique',
+  type: 'name',
+  transformer: function (prop, options) {
+    return [options.prefix].concat(prop.path).join('-').toLowerCase();
+  },
+});
+
+// Register the custom transform group for html file generation
+StyleDictionary.registerTransformGroup({
+  name: 'custom',
+  transforms: ['attribute/cti', 'name/cti/kebab-unique', 'size/rem', 'color/css'],
+});
+
+// Make Style Dictionary comply with the $ format on properties from W3C Guidelines
+const w3cTokenJsonParser = {
+  pattern: /\.json|\.tokens\.json|\.tokens$/,
+  parse({ contents }) {
+    // replace $value with value so that style dictionary recognizes it
+    var preparedContent = (contents || '{}')
+      .replace(/"\$?value":/g, '"value":')
+      // convert $description to comment
+      .replace(/"\$?description":/g, '"comment":');
+    //
+
+    return JSON.parse(preparedContent);
+  },
+};
+
+StyleDictionary.registerParser(w3cTokenJsonParser);
+
+// Generate Tokens
+StyleDictionary.extend({
+  source: ['./src/foundations/tokens/*.json', './src/foundations/tokens/theme/*.json'],
+  platforms: {
+    css: {
+      buildPath: targetPath,
+      transformGroup: 'css',
+      files: [
+        {
+          destination: 'ionic.root.scss',
+          format: 'rootFormat',
+          options: {
+            outputReferences: true,
+            fileHeader: `myFileHeader`,
+          },
+        },
+      ],
+    },
+    scss: {
+      buildPath: targetPath,
+      transformGroup: 'scss',
+      files: [
+        {
+          destination: 'ionic.vars.scss',
+          format: 'scssVariablesFormat',
+          options: {
+            outputReferences: true,
+            fileHeader: `myFileHeader`,
+          },
+        },
+        {
+          destination: 'ionic.utility.scss',
+          format: 'cssUtilityClassesFormat',
+          options: {
+            outputReferences: true,
+            fileHeader: `myFileHeader`,
+          },
+        },
+      ],
+    },
+  },
+  fileHeader: {
+    myFileHeader: () => {
+      return [`This is an auto-generated file, please do not change it directly.`, `Ionic Design System`];
+    },
+  },
+}).buildAllPlatforms();
diff --git a/core/scripts/tokens/utilities.js b/core/scripts/tokens/utilities.js
new file mode 100644
index 0000000000..499ecb6f4e
--- /dev/null
+++ b/core/scripts/tokens/utilities.js
@@ -0,0 +1,147 @@
+const variablesPrefix = 'ionic'; // Variable that holds the prefix used on all css and scss variables generated
+
+// Generates translate an hex color value to rgb
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+}
+
+// Generates a valid box-shadow value from a shadow Design Token structure
+function generateShadowValue(shadow) {
+  return `${shadow.offsetX} ${shadow.offsetY} ${shadow.blur} ${shadow.spread} ${shadow.color}`;
+}
+
+// Generates a valid font-family value from a font-family Design Token structure
+function generateFontFamilyValue(prop, variableType = 'css') {
+  // Remove the last word from the token, as it contains the name of the font, which we don't want to be included on the generated variables
+  const propName = prop.name.split('-').slice(0, -1).join('-');
+  return variableType === 'scss'
+    ? `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, "${prop.value}", sans-serif);`
+    : `--${variablesPrefix}-${propName}: "${prop.value}", sans-serif;`;
+}
+
+// Generates a typography based scss map from a typography Design Token structure
+function generateTypographyValue(prop, dictionary) {
+  const typography = prop.value;
+  const fontSizeMap = getTypeMap(dictionary, 'font-size');
+  const fontWeightMap = getTypeMap(dictionary, 'font-weight');
+  const lineHeightMap = getTypeMap(dictionary, 'line-height');
+  const letterSpacingMap = getTypeMap(dictionary, 'letter-spacing');
+
+  // This exact format is needed so that it compiles the tokens with the expected lint rules
+  return `
+  $${variablesPrefix}-${prop.name}: (
+    font-family: $ionic-font-family,
+    font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]},
+    font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]},
+    letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0},
+    line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]},
+    text-transform: ${typography.textTransform},
+    text-decoration: ${typography.textDecoration}
+  );
+  `;
+}
+
+// To abstract the need to loop across all tokens from a given type
+function getTypeMap(dictionary, type) {
+  return Object.fromEntries(
+    Object.entries(dictionary.properties[type]).map(([key, token]) => [token.value, token.attributes.type])
+  );
+}
+
+// Generates a rgb color value, based on a color Design Token
+function generateRgbValue(prop) {
+  const rgb = hexToRgb(prop.value);
+  let rgbDeclaration = '';
+
+  // If the token is color, also add a rgb variable using the same color
+  if (rgb) {
+    rgbDeclaration = `\n$${variablesPrefix}-${prop.name}-rgb: var(--${variablesPrefix}-${prop.name}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`;
+  }
+
+  return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});${rgbDeclaration}`;
+}
+
+// Generates a typography based css utility-class from a typography Design Token structure
+function generateTypographyUtilityClass(prop, dictionary) {
+  const typography = prop.value;
+  const fontSizeMap = getTypeMap(dictionary, 'font-size');
+  const fontWeightMap = getTypeMap(dictionary, 'font-weight');
+  const lineHeightMap = getTypeMap(dictionary, 'line-height');
+  const letterSpacingMap = getTypeMap(dictionary, 'letter-spacing');
+
+  // This exact format is needed so that it compiles the tokens with the expected lint rules
+  return `
+  .${variablesPrefix}-${prop.name} {
+    font-family: $ionic-font-family;
+    font-size: $ionic-font-size-${fontSizeMap[typography.fontSize]};
+    font-weight: $ionic-font-weight-${fontWeightMap[typography.fontWeight]};
+    letter-spacing: $ionic-letter-spacing-${letterSpacingMap[typography.letterSpacing] || 0};
+    line-height: $ionic-line-height-${lineHeightMap[typography.lineHeight]};
+    text-transform: ${typography.textTransform};
+    text-decoration: ${typography.textDecoration};
+  };
+  `;
+}
+
+// Generates a color based css utility-class from a color Design Token structure
+function generateColorUtilityClasses(prop, className) {
+  return `.${variablesPrefix}-${className} {\n  color: $ionic-${prop.name};\n}
+  .${variablesPrefix}-background-${className} {\n  background-color: $ionic-${prop.name};\n}`;
+}
+
+// Generates a font based css utility-class from a font Design Token structure
+function generateFontUtilityClass(prop, className) {
+  let fontAttribute;
+  switch (prop.attributes.type) {
+    case 'size':
+      fontAttribute = 'font-size';
+      break;
+    case 'weight':
+      fontAttribute = 'font-weight';
+      break;
+    case 'line-height':
+      fontAttribute = 'line-height';
+      break;
+    case 'letter-spacing':
+      fontAttribute = 'letter-spacing';
+      break;
+  }
+  return `.${variablesPrefix}-${className} {\n  ${fontAttribute}: $ionic-${prop.name};\n}`;
+}
+
+// Generates a margin or padding based css utility-class from a space Design Token structure
+function generateSpaceUtilityClasses(prop, className) {
+  // This exact format is needed so that it compiles the tokens with the expected lint rules
+  const marginPaddingTemplate = (type) => `
+.${variablesPrefix}-${type}-${className} {
+  --${type}-start: #{$ionic-${prop.name}};
+  --${type}-end: #{$ionic-${prop.name}};
+  --${type}-top: #{$ionic-${prop.name}};
+  --${type}-bottom: #{$ionic-${prop.name}};
+
+  @include ${type}($ionic-${prop.name});
+};`;
+
+  return `${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
+}
+
+// Export all methods to be used on the tokens.js script
+module.exports = {
+  variablesPrefix,
+  hexToRgb,
+  generateShadowValue,
+  generateFontFamilyValue,
+  generateTypographyValue,
+  generateRgbValue,
+  generateColorUtilityClasses,
+  generateFontUtilityClass,
+  generateSpaceUtilityClasses,
+  generateTypographyUtilityClass,
+};
diff --git a/core/src/components/button/button.ionic.scss b/core/src/components/button/button.ionic.scss
index e196a115b4..21a5cd4f85 100644
--- a/core/src/components/button/button.ionic.scss
+++ b/core/src/components/button/button.ionic.scss
@@ -132,20 +132,20 @@
 // -------------------------------------------------------------------------------
 
 :host(.button-soft) {
-  --border-radius: #{globals.$ionic-border-radius-rounded-medium};
+  --border-radius: #{globals.$ionic-border-radius-200};
 }
 
 :host(.button-soft.button-xsmall),
 :host(.button-soft.button-small) {
-  --border-radius: #{globals.$ionic-border-radius-rounded-small};
+  --border-radius: #{globals.$ionic-border-radius-100};
 }
 
 :host(.button-round) {
-  --border-radius: #{globals.$ionic-border-radius-rounded-full};
+  --border-radius: #{globals.$ionic-border-radius-full};
 }
 
 :host(.button-rectangular) {
-  --border-radius: #{globals.$ionic-border-radius-square};
+  --border-radius: #{globals.$ionic-border-radius-0};
 }
 
 // Button Focused
diff --git a/core/src/components/card/card.ionic.scss b/core/src/components/card/card.ionic.scss
index 78d04ca9e7..63d063ff8f 100755
--- a/core/src/components/card/card.ionic.scss
+++ b/core/src/components/card/card.ionic.scss
@@ -4,15 +4,15 @@
 // --------------------------------------------------
 
 :host {
-  --background: #{globals.$ionic-color-neutral-0};
-  --border-radius: #{globals.$ionic-border-radius-rounded-small};
+  --background: #{globals.$ionic-color-base-white};
+  --border-radius: #{globals.$ionic-border-radius-100};
 
-  @include globals.padding(globals.$ionic-space-base);
+  @include globals.padding(globals.$ionic-space-400);
   @include globals.border-radius(var(--border-radius));
 
   display: block;
 
-  border: #{globals.$ionic-border-size-small} solid #{globals.$ionic-color-neutral-50};
+  border: #{globals.$ionic-border-size-025} solid #{globals.$ionic-color-neutral-500};
 
   background: var(--background);
   color: var(--color);
@@ -22,9 +22,9 @@
 // ---------------------------------------------
 
 :host(.card-round) {
-  --border-radius: #{globals.$ionic-border-radius-rounded-large};
+  --border-radius: #{globals.$ionic-border-radius-400};
 }
 
 :host(.card-rectangular) {
-  --border-radius: #{globals.$ionic-border-radius-square};
+  --border-radius: #{globals.$ionic-border-radius-0};
 }
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index c82f6975b5..cf10dffbe0 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 8474b78598..d6e8a164d7 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
index a6637e561b..308c3ff4ec 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
index 44afba1111..9f17730e79 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index c82f6975b5..cf10dffbe0 100644
Binary files a/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/card/test/shape/card.e2e.ts-snapshots/card-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss
index 021e18d42a..4bbee0272c 100644
--- a/core/src/components/chip/chip.ionic.scss
+++ b/core/src/components/chip/chip.ionic.scss
@@ -9,13 +9,13 @@ $ionic-states-focus-primary: #9ec4fd;
 $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make this in the future, as we are setting scss variables with a var() and fallback, and it doesn't work inside a rgba().
 
 :host {
-  --background: #{globals.$ionic-color-neutral-10};
+  --background: #{globals.$ionic-color-neutral-100};
   --color: #{globals.$ionic-color-neutral-900};
   --focus-ring-color: #{$ionic-states-focus-primary};
-  --focus-ring-width: #{globals.$ionic-border-size-medium};
+  --focus-ring-width: #{globals.$ionic-border-size-050};
 
   @include globals.font-smoothing;
-  @include globals.padding(globals.$ionic-space-xxs, globals.$ionic-space-xs);
+  @include globals.padding(globals.$ionic-space-150, globals.$ionic-space-200);
   @include globals.border-radius(var(--border-radius));
 
   display: inline-flex;
@@ -25,7 +25,7 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
   align-items: center;
   justify-content: center;
 
-  gap: globals.$ionic-space-xxxs;
+  gap: globals.$ionic-space-100;
 
   background: var(--background);
   color: var(--color);
@@ -33,7 +33,7 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
   font-family: globals.$ionic-font-family;
   font-weight: globals.$ionic-font-weight-medium;
 
-  line-height: globals.$ionic-font-line-height-full;
+  line-height: globals.$ionic-line-height-full;
 
   cursor: pointer;
 
@@ -49,7 +49,7 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
 
 :host(.chip-outline) {
   --background: transparent;
-  border-width: globals.$ionic-border-size-small;
+  border-width: globals.$ionic-border-size-025;
 
   border-color: globals.$ionic-color-neutral-100;
 }
@@ -83,21 +83,21 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
 // ---------------------------------------------
 
 :host(.chip-soft) {
-  --border-radius: #{globals.$ionic-border-radius-rounded-small};
+  --border-radius: #{globals.$ionic-border-radius-100};
 }
 
 :host(.chip-round) {
-  --border-radius: #{globals.$ionic-border-radius-rounded-large};
+  --border-radius: #{globals.$ionic-border-radius-400};
 }
 
 :host(.chip-rectangular) {
-  --border-radius: #{globals.$ionic-border-radius-square};
+  --border-radius: #{globals.$ionic-border-radius-0};
 }
 
 // Chip Icon
 // ---------------------------------------------
 ::slotted(ion-icon) {
-  font-size: globals.$ionic-font-size-l;
+  font-size: globals.$ionic-font-size-400;
 }
 
 // Size
@@ -106,11 +106,11 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi
 :host(.chip-small) {
   min-height: 24px;
 
-  font-size: #{tokens.$ionic-font-size-s};
+  font-size: #{tokens.$ionic-font-size-300};
 }
 
 :host(.chip-large) {
   min-height: 32px;
 
-  font-size: globals.$ionic-font-size-m;
+  font-size: globals.$ionic-font-size-350;
 }
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 59e9ade49e..a13ca24bba 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 1bdd33bb8b..1da93c12c8 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index 0eeccf2a8e..41a65b4be3 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 56cf5e729a..001dd8b14e 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 34b2422e83..c60c585a52 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png
index 05d9074fe7..a6a4731997 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 1be0c9b8b7..ac19f37d69 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 288c864038..eb56bbb980 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png
index 8ae57a67d6..61590aa5f7 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png
index dfa26770af..a08e022687 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 288d62071c..23f25a85a9 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png
index d863875239..17cb7616b1 100644
Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 4a867ef4de..8d1c54d92f 100644
Binary files a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 6c1f9ef0f9..10e0f8cb07 100644
Binary files a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png
index fa266edcf4..fee5a895fc 100644
Binary files a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 89f4cf3248..7529d4e3dc 100644
Binary files a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
index ae2f612d7a..f59fe37e8a 100644
Binary files a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png
index 3c30ae4e65..bfc917464d 100644
Binary files a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 4d6d35730c..a96b97b22b 100644
Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 257c9640d2..bf1641ef94 100644
Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png
index ef740fa440..edd81bb2c6 100644
Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-bar/tab-bar.ionic.scss b/core/src/components/tab-bar/tab-bar.ionic.scss
index eed21a7480..dd629a9e85 100644
--- a/core/src/components/tab-bar/tab-bar.ionic.scss
+++ b/core/src/components/tab-bar/tab-bar.ionic.scss
@@ -14,5 +14,5 @@
   height: 52px;
   gap: 12px;
 
-  box-shadow: tokens.$ionic-elevation-2;
+  box-shadow: tokens.$ionic-elevation-200;
 }
diff --git a/core/src/components/tab-bar/tab-bar.ionic.vars.scss b/core/src/components/tab-bar/tab-bar.ionic.vars.scss
index 6c0c435d92..437a53108c 100644
--- a/core/src/components/tab-bar/tab-bar.ionic.vars.scss
+++ b/core/src/components/tab-bar/tab-bar.ionic.vars.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 /// @prop - Background color of the tab bar
-$tabbar-ionic-background: var(--ion-tab-bar-background, tokens.$ionic-color-neutral-0);
+$tabbar-ionic-background: var(--ion-tab-bar-background, tokens.$ionic-color-base-white);
 
 /// @prop - Background color of the tab bar button when activated
 // TODO(FW-6186): use design token here when it is added
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 18dd5f6982..3293756dcd 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 56a844729b..6a1f96261d 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png
index b3f875f29c..0690136503 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png
index b5295cc1f5..f11bb7d3a7 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png
index 20ef395044..d056d30cc6 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png
index b1e0413561..1443c32c30 100644
Binary files a/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/tab-bar/test/basic/tab-bar.e2e.ts-snapshots/tab-bar-default-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/tab-button/tab-button.ionic.scss b/core/src/components/tab-button/tab-button.ionic.scss
index 93ecf91699..faf072fa3a 100644
--- a/core/src/components/tab-button/tab-button.ionic.scss
+++ b/core/src/components/tab-button/tab-button.ionic.scss
@@ -9,7 +9,7 @@
   --focus-ring-color: #9ec4fd;
   --focus-ring-width: 2px;
 
-  @include border-radius(tokens.$ionic-border-radius-rounded-medium);
+  @include border-radius(tokens.$ionic-border-radius-200);
 }
 
 // Tab Button Focused
diff --git a/core/src/css/ionic/bundle.ionic.scss b/core/src/css/ionic/bundle.ionic.scss
index 581dd1971c..af41dee266 100644
--- a/core/src/css/ionic/bundle.ionic.scss
+++ b/core/src/css/ionic/bundle.ionic.scss
@@ -1,8 +1,8 @@
 // Core CSS, always required
-@import "./core.ionic";
+@forward "./core.ionic";
 
 // Global CSS: blocks scrolling, sets box-sizing
-@import "./global.bundle.ionic";
+@forward "./global.bundle.ionic";
 
 // CSS Utils
-@import "./utils.bundle.ionic";
+@forward "./utils.bundle.ionic";
diff --git a/core/src/css/ionic/core.ionic.scss b/core/src/css/ionic/core.ionic.scss
index b6011b4cca..b51f53a54d 100644
--- a/core/src/css/ionic/core.ionic.scss
+++ b/core/src/css/ionic/core.ionic.scss
@@ -4,7 +4,7 @@
 // --------------------------------------------------
 
 :root {
-  --ionic-global-background-color: #{globals.$ionic-color-neutral-10};
+  --ionic-global-background-color: #{globals.$ionic-color-neutral-100};
   --ionic-global-text-color: #{globals.$ionic-color-neutral-900};
 }
 
@@ -34,7 +34,7 @@ body.backdrop-no-scroll {
 html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type,
 html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type,
 html.ios ion-modal ion-footer ion-toolbar:first-of-type {
-  padding-top: globals.$ionic-space-xxs;
+  padding-top: globals.$ionic-space-150;
 }
 
 /**
@@ -44,7 +44,7 @@ html.ios ion-modal ion-footer ion-toolbar:first-of-type {
 */
 html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type,
 html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
-  padding-bottom: globals.$ionic-space-xxs;
+  padding-bottom: globals.$ionic-space-150;
 }
 
 /**
@@ -53,8 +53,8 @@ html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type {
 * safe area values when in landscape.
 */
 html.ios ion-modal ion-toolbar {
-  padding-right: calc(var(--ion-safe-area-right) + globals.$ionic-space-xs);
-  padding-left: calc(var(--ion-safe-area-left) + globals.$ionic-space-xs);
+  padding-right: calc(var(--ion-safe-area-right) + globals.$ionic-space-200);
+  padding-left: calc(var(--ion-safe-area-left) + globals.$ionic-space-200);
 }
 
 /**
@@ -250,21 +250,21 @@ ion-card-header.ion-color .ion-inherit-color {
 }
 
 .menu-content-reveal {
-  box-shadow: #{globals.$ionic-elevation-1};
+  box-shadow: #{globals.$ionic-elevation-100};
 }
 
 .menu-content-push {
-  box-shadow: #{globals.$ionic-elevation-1};
+  box-shadow: #{globals.$ionic-elevation-100};
 }
 
 // Accordion Styles
 ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type {
-  border-top-left-radius: globals.$ionic-border-radius-rounded-medium;
-  border-top-right-radius: globals.$ionic-border-radius-rounded-medium;
+  border-top-left-radius: globals.$ionic-border-radius-200;
+  border-top-right-radius: globals.$ionic-border-radius-200;
 }
 ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type {
-  border-bottom-left-radius: globals.$ionic-border-radius-rounded-medium;
-  border-bottom-right-radius: globals.$ionic-border-radius-rounded-medium;
+  border-bottom-left-radius: globals.$ionic-border-radius-200;
+  border-bottom-right-radius: globals.$ionic-border-radius-200;
 }
 ion-accordion-group > ion-accordion:last-of-type ion-item[slot="header"] {
   --border-width: 0;
diff --git a/core/src/css/ionic/global.bundle.ionic.scss b/core/src/css/ionic/global.bundle.ionic.scss
index a4d42d5cca..c6a51e490f 100644
--- a/core/src/css/ionic/global.bundle.ionic.scss
+++ b/core/src/css/ionic/global.bundle.ionic.scss
@@ -1,5 +1,5 @@
-@import "../normalize";
-@import "./structure.ionic";
-@import "./typography.ionic";
-@import "./link.ionic";
-@import "./ionic-swiper.ionic";
+@forward "../normalize";
+@forward "./structure.ionic";
+@forward "./typography.ionic";
+@forward "./link.ionic";
+@forward "./ionic-swiper.ionic";
diff --git a/core/src/css/ionic/ionic-swiper.ionic.scss b/core/src/css/ionic/ionic-swiper.ionic.scss
index 2a5b0a20fd..f2ffc58d4b 100644
--- a/core/src/css/ionic/ionic-swiper.ionic.scss
+++ b/core/src/css/ionic/ionic-swiper.ionic.scss
@@ -5,7 +5,7 @@
 
 .swiper {
   --bullet-background: #{tokens.$ionic-color-neutral-800};
-  --bullet-background-active: #{tokens.$ionic-color-primary};
+  --bullet-background-active: #{tokens.$ionic-color-primary-base};
   --progress-bar-background: rgba(#010408, 0.25);
   --progress-bar-background-active: #{tokens.$ionic-color-primary-600};
   --scroll-bar-background: rgba(#010408, 0.1);
diff --git a/core/src/css/ionic/link.ionic.scss b/core/src/css/ionic/link.ionic.scss
index 2764d5b3f7..84861e8c75 100644
--- a/core/src/css/ionic/link.ionic.scss
+++ b/core/src/css/ionic/link.ionic.scss
@@ -7,7 +7,7 @@
 
   align-items: center;
 
-  gap: globals.$ionic-space-xxxs;
+  gap: globals.$ionic-space-100;
 
   transition: color 0.2s ease-in-out;
 
diff --git a/core/src/css/ionic/typography.ionic.scss b/core/src/css/ionic/typography.ionic.scss
index c0cc6aa991..6e87435699 100644
--- a/core/src/css/ionic/typography.ionic.scss
+++ b/core/src/css/ionic/typography.ionic.scss
@@ -6,9 +6,9 @@ html {
 
 body {
   font-weight: globals.$ionic-font-weight-regular;
-  font-size: globals.$ionic-font-size-m;
+  font-size: globals.$ionic-font-size-350;
 
-  line-height: globals.$ionic-font-line-height-m;
+  line-height: globals.$ionic-line-height-600;
 }
 
 /* Composite utility classes for html headings and font classes, that aggregate size and weight, based on tokens*/
@@ -31,58 +31,58 @@ h6,
 
 h1,
 .ionic-heading1 {
-  font-size: globals.$ionic-font-size-h1;
+  font-size: #{globals.$ionic-font-size-700};
 
-  line-height: globals.$ionic-font-line-height-xxl;
+  line-height: globals.$ionic-line-height-900;
 }
 
 h2,
 .ionic-heading2 {
-  font-size: globals.$ionic-font-size-h2;
+  font-size: globals.$ionic-font-size-800;
 
-  line-height: globals.$ionic-font-line-height-xl;
+  line-height: globals.$ionic-line-height-800;
 }
 
 h3,
 .ionic-heading3 {
-  font-size: globals.$ionic-font-size-h3;
+  font-size: globals.$ionic-font-size-600;
 
-  line-height: globals.$ionic-font-line-height-xl;
+  line-height: globals.$ionic-line-height-800;
 }
 
 h4,
 .ionic-heading4 {
-  font-size: globals.$ionic-font-size-h4;
+  font-size: globals.$ionic-font-size-550;
 
-  line-height: globals.$ionic-font-line-height-l;
+  line-height: globals.$ionic-line-height-700;
 }
 
 h5,
 .ionic-heading5 {
-  font-size: globals.$ionic-font-size-h5;
+  font-size: globals.$ionic-font-size-500;
 
-  line-height: globals.$ionic-font-line-height-l;
+  line-height: globals.$ionic-line-height-700;
 }
 
 h6,
 .ionic-heading6 {
-  font-size: globals.$ionic-font-size-h6;
+  font-size: globals.$ionic-font-size-450;
 
-  line-height: globals.$ionic-font-line-height-m;
+  line-height: globals.$ionic-line-height-600;
 }
 
 .ionic-display-s {
-  font-size: globals.$ionic-font-size-display-s;
+  font-size: globals.$ionic-font-size-800;
   font-weight: globals.$ionic-font-weight-regular;
 
-  line-height: globals.$ionic-font-line-height-s;
+  line-height: globals.$ionic-line-height-500;
 }
 
 .ionic-display-m {
-  font-size: globals.$ionic-font-size-display-m;
+  font-size: globals.$ionic-font-size-900;
   font-weight: globals.$ionic-font-weight-regular;
 
-  line-height: globals.$ionic-font-line-height-m;
+  line-height: globals.$ionic-line-height-600;
 }
 
 /* Common */
diff --git a/core/src/css/ionic/utils.bundle.ionic.scss b/core/src/css/ionic/utils.bundle.ionic.scss
index 85d93d3a0b..dbaf9913a5 100644
--- a/core/src/css/ionic/utils.bundle.ionic.scss
+++ b/core/src/css/ionic/utils.bundle.ionic.scss
@@ -1 +1 @@
-@import "../../foundations/ionic.utility";
+@forward "../../foundations/ionic.utility";
diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 68e63cc59a..91d39acd79 100644
Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 0a4b4cf86a..b50b8dfd2b 100644
Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png
index 0058a38f97..cc09335784 100644
Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png
index e0484f87bc..23b20da335 100644
Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 1109c34877..f38fbcf8b0 100644
Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png
index 806e74bff8..2edf18dacc 100644
Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-standalone-nested-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 713b4a5f7a..c2bbff7ea8 100644
Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 04f3f71ecd..574419bc5f 100644
Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png
index 109d8be07c..2708aa9500 100644
Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 2be41be5eb..1728133a97 100644
Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png
index aacc3497bf..f13b805bf2 100644
Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Safari-linux.png
index c051f5cf5d..8c54d5df57 100644
Binary files a/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/link/basic/link.e2e.ts-snapshots/link-underline-nested-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png
index b3240bc0eb..77fcb6c433 100644
Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 99b86da049..d085f1ce4b 100644
Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Safari-linux.png
index db7225c8bd..c76d6e668d 100644
Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-semantic-global-styles-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 8c9db2e7cf..132c963072 100644
Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Firefox-linux.png
index e483012784..f3b42387c2 100644
Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Safari-linux.png
index 00b81c0af8..2abebaf5ca 100644
Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-headings-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 776261b6e9..6e6f25a18a 100644
Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Firefox-linux.png
index 95ced965b9..7c8e1322f5 100644
Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Safari-linux.png
index a129f344c1..58082b3879 100644
Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-utility-classes-semantic-tags-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/foundations/README.md b/core/src/foundations/README.md
index b0de539fe2..b2b0020ff4 100644
--- a/core/src/foundations/README.md
+++ b/core/src/foundations/README.md
@@ -8,15 +8,17 @@ Design tokens represent small, repeated design decisions that make up a design s
 
 ## Design Tokens Architecture
 
-The Ionic Design Tokens are stored on `core/src/foundations/_design-tokens.json`.
+The Ionic Design Tokens are stored on `core/src/foundations/tokens`. Here we have the abstract primitive tokens that will be common between all themes.
+Inside the `core/src/foundations/tokens/theme` we have the tokens that are specific to the new IOnic Theme, like primary colors, font-family and color states.
 
-Currently, five categories of tokens are stored:
+Currently, six categories of tokens are stored:
 
 - Colors
 - Font
-- Space
+- Scale
 - Border
 - Elevation
+- Z-index
 
 Using [Style Dictionary](https://amzn.github.io/style-dictionary/), these tokens generate 3 files inside `core/src/foundations`:
 
@@ -56,19 +58,19 @@ Examples:
 CSS Custom Property:
 
 ```css
---ionic-color-primary-10
+--ionic-color-primary-100
 ```
 
 SCSS Variable:
 
 ```scss
-$ionic-color-primary-10
+$ionic-color-primary-100
 ```
 
 Utility class:
 
 ```css
-.ionic-color-primary-10
+.ionic-color-primary-100
 ```
 
 ## When to change the Design Tokens
@@ -97,7 +99,7 @@ Usage example (Chip Component):
 @use '../../themes/ionic/ionic.globals.scss' as globals;
 
 :host {
-  --background: #{globals.$ionic-color-neutral-10};
+  --background: #{globals.$ionic-color-neutral-100};
   color: globals.$ionic-color-neutral-900;
   @include globals.font-smoothing;
 }
diff --git a/core/src/foundations/_design-tokens.json b/core/src/foundations/_design-tokens.json
deleted file mode 100644
index cceac63345..0000000000
--- a/core/src/foundations/_design-tokens.json
+++ /dev/null
@@ -1,432 +0,0 @@
-{
-  "color": {
-    "$type": "color",
-    "primary": {
-      "{}": {
-        "$value": "{color.primary.400}"
-      },
-      "10": {
-        "$value": "#f7faff"
-      },
-      "50": {
-        "$value": "#cbdffe"
-      },
-      "100": {
-        "$value": "#9ec4fd"
-      },
-      "200": {
-        "$value": "#74aafc"
-      },
-      "300": {
-        "$value": "#4991fb"
-      },
-      "400": {
-        "$value": "#1068eb"
-      },
-      "500": {
-        "$value": "#0750be"
-      },
-      "600": {
-        "$value": "#053d90"
-      },
-      "700": {
-        "$value": "#062b63"
-      },
-      "800": {
-        "$value": "#061935"
-      },
-      "900": {
-        "$value": "#010408"
-      }
-    },
-    "secondary": {
-      "$value": "#303d60"
-    },
-    "neutral": {
-      "0": {
-        "$value": "#ffffff"
-      },
-      "10": {
-        "$value": "#f5f5f5"
-      },
-      "50": {
-        "$value": "#e7e7e7"
-      },
-      "100": {
-        "$value": "#dadada"
-      },
-      "200": {
-        "$value": "#c9c9c9"
-      },
-      "300": {
-        "$value": "#b8b8b8"
-      },
-      "400": {
-        "$value": "#9a9a9a"
-      },
-      "500": {
-        "$value": "#767676"
-      },
-      "600": {
-        "$value": "#535353"
-      },
-      "700": {
-        "$value": "#373737"
-      },
-      "800": {
-        "$value": "#212121"
-      },
-      "900": {
-        "$value": "#05080f"
-      }
-    },
-    "error": {
-      "{}": {
-        "$value": "{color.error.400}"
-      },
-      "10": {
-        "$value": "#fffafa"
-      },
-      "50": {
-        "$value": "#ffd5d5"
-      },
-      "100": {
-        "$value": "#ffafaf"
-      },
-      "200": {
-        "$value": "#ff8a8a"
-      },
-      "300": {
-        "$value": "#ff6666"
-      },
-      "400": {
-        "$value": "#f72c2c"
-      },
-      "500": {
-        "$value": "#c71212"
-      },
-      "600": {
-        "$value": "#970606"
-      },
-      "700": {
-        "$value": "#670202"
-      },
-      "800": {
-        "$value": "#380101"
-      },
-      "900": {
-        "$value": "#080000"
-      }
-    },
-    "warning": {
-      "{}": {
-        "$value": "{color.warning.400}"
-      },
-      "10": {
-        "$value": "#fffdfa"
-      },
-      "50": {
-        "$value": "#ffecce"
-      },
-      "100": {
-        "$value": "#ffdba0"
-      },
-      "200": {
-        "$value": "#ffca73"
-      },
-      "300": {
-        "$value": "#ffb845"
-      },
-      "400": {
-        "$value": "#ff9707"
-      },
-      "500": {
-        "$value": "#ce7a06"
-      },
-      "600": {
-        "$value": "#9c5f0a"
-      },
-      "700": {
-        "$value": "#6b430c"
-      },
-      "800": {
-        "$value": "#39260b"
-      },
-      "900": {
-        "$value": "#080502"
-      }
-    },
-    "success": {
-      "{}": {
-        "$value": "{color.success.400}"
-      },
-      "10": {
-        "$value": "#fbfffa"
-      },
-      "50": {
-        "$value": "#def7d8"
-      },
-      "100": {
-        "$value": "#c6f0b7"
-      },
-      "200": {
-        "$value": "#a4e188"
-      },
-      "300": {
-        "$value": "#73c346"
-      },
-      "400": {
-        "$value": "#52a518"
-      },
-      "500": {
-        "$value": "#36870C"
-      },
-      "600": {
-        "$value": "#36870c"
-      },
-      "700": {
-        "$value": "#226907"
-      },
-      "800": {
-        "$value": "#144b05"
-      },
-      "900": {
-        "$value": "#030f02"
-      }
-    },
-    "info": {
-      "{}": {
-        "$value": "{color.info.400}"
-      },
-      "10": {
-        "$value": "#f5fbff"
-      },
-      "50": {
-        "$value": "#c6e7ff"
-      },
-      "100": {
-        "$value": "#97d3ff"
-      },
-      "200": {
-        "$value": "#6ac0fe"
-      },
-      "300": {
-        "$value": "#3dadfe"
-      },
-      "400": {
-        "$value": "#008bef"
-      },
-      "500": {
-        "$value": "#0071c2"
-      },
-      "600": {
-        "$value": "#005796"
-      },
-      "700": {
-        "$value": "#003d69"
-      },
-      "800": {
-        "$value": "#02243c"
-      },
-      "900": {
-        "$value": "#020a0f"
-      }
-    }
-  },
-  "font": {
-    "$type": "font",
-    "family": {
-      "$value": "\"Inter\", sans-serif"
-    },
-    "letter-spacing": {
-      "none": {
-        "$value": "0em"
-      },
-      "s": {
-        "$value": "0.1em"
-      },
-      "m": {
-        "$value": "0.15em"
-      }
-    },
-    "line-height": {
-      "xs": {
-        "$value": "16px"
-      },
-      "s": {
-        "$value": "20px"
-      },
-      "m": {
-        "$value": "24px"
-      },
-      "l": {
-        "$value": "28px"
-      },
-      "xl": {
-        "$value": "32px"
-      },
-      "xxl": {
-        "$value": "36px"
-      },
-      "display-s": {
-        "$value": "44px"
-      },
-      "display-m": {
-        "$value": "48px"
-      },
-      "full": {
-        "$value": "100%"
-      }
-    },
-    "size": {
-      "h1": {
-        "$value": "28px"
-      },
-      "h2": {
-        "$value": "32px"
-      },
-      "h3": {
-        "$value": "24px"
-      },
-      "h4": {
-        "$value": "22px"
-      },
-      "h5": {
-        "$value": "20px"
-      },
-      "h6": {
-        "$value": "18px"
-      },
-      "display-s": {
-        "$value": "32px"
-      },
-      "display-m": {
-        "$value": "36px"
-      },
-      "s": {
-        "$value": "12px"
-      },
-      "m": {
-        "$value": "14px"
-      },
-      "l": {
-        "$value": "16px"
-      }
-    },
-    "weight": {
-      "light": {
-        "$value": "300"
-      },
-      "regular": {
-        "$value": "400"
-      },
-      "medium": {
-        "$value": "500"
-      },
-      "semi-bold": {
-        "$value": "600"
-      },
-      "bold": {
-        "$value": "700"
-      }
-    }
-  },
-  "space": {
-    "$type": "space",
-    "none": {
-      "$value": "0"
-    },
-    "xxxxs": {
-      "$value": "2px"
-    },
-    "xxxs": {
-      "$value": "4px"
-    },
-    "xxs": {
-      "$value": "6px"
-    },
-    "xs": {
-      "$value": "8px"
-    },
-    "s": {
-      "$value": "12px"
-    },
-    "base": {
-      "$value": "16px"
-    },
-    "m": {
-      "$value": "20px"
-    },
-    "l": {
-      "$value": "24px"
-    },
-    "xl": {
-      "$value": "28px"
-    },
-    "xxl": {
-      "$value": "32px"
-    },
-    "xxxl": {
-      "$value": "36px"
-    },
-    "xxxxl": {
-      "$value": "40px"
-    }
-  },
-  "border": {
-    "$type": "border",
-    "radius": {
-      "$type": "radius",
-      "square": {
-        "$value": "0"
-      },
-      "rounded": {
-        "small": {
-          "$value": "4px"
-        },
-        "medium": {
-          "$value": "8px"
-        },
-        "large": {
-          "$value": "16px"
-        },
-        "x-large": {
-          "$value": "32px"
-        },
-        "full": {
-          "$value": "999px"
-        }
-      }
-    },
-    "size": {
-      "$type": "size",
-      "small": {
-        "$value": "1px"
-      },
-      "medium": {
-        "$value": "2px"
-      },
-      "large": {
-        "$value": "3px"
-      }
-    }
-  },
-  "elevation": {
-    "$type": "elevation",
-    "0": {
-      "$value": "none"
-    },
-    "1": {
-      "$value": "0px 3px 9px 0px rgba(0, 0, 0, 0.07), 0px 0px 4px 0px rgba(0, 0, 0, 0.04)"
-    },
-    "2": {
-      "$value": "0px 8px 25px 0px rgba(0, 0, 0, 0.08), 0px 1px 5px 0px rgba(0, 0, 0, 0.05)"
-    },
-    "3": {
-      "$value": "0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 15px 32px 0px rgba(0, 0, 0, 0.09)"
-    },
-    "4": {
-      "$value": "0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 20px 48px 0px rgba(0, 0, 0, 0.12)"
-    }
-  }
-}
diff --git a/core/src/foundations/ionic.root.scss b/core/src/foundations/ionic.root.scss
index cbeaec52b3..7ec057da04 100644
--- a/core/src/foundations/ionic.root.scss
+++ b/core/src/foundations/ionic.root.scss
@@ -4,206 +4,612 @@
  */
 
 :root {
-  --ionic-color-primary-10: #f7faff;
-  --ionic-color-primary-10-rgb: 247, 250, 255;
-  --ionic-color-primary-50: #cbdffe;
-  --ionic-color-primary-50-rgb: 203, 223, 254;
-  --ionic-color-primary-100: #9ec4fd;
-  --ionic-color-primary-100-rgb: 158, 196, 253;
-  --ionic-color-primary-200: #74aafc;
-  --ionic-color-primary-200-rgb: 116, 170, 252;
-  --ionic-color-primary-300: #4991fb;
-  --ionic-color-primary-300-rgb: 73, 145, 251;
-  --ionic-color-primary-400: #1068eb;
-  --ionic-color-primary-400-rgb: 16, 104, 235;
-  --ionic-color-primary-500: #0750be;
-  --ionic-color-primary-500-rgb: 7, 80, 190;
-  --ionic-color-primary-600: #053d90;
-  --ionic-color-primary-600-rgb: 5, 61, 144;
-  --ionic-color-primary-700: #062b63;
-  --ionic-color-primary-700-rgb: 6, 43, 99;
-  --ionic-color-primary-800: #061935;
-  --ionic-color-primary-800-rgb: 6, 25, 53;
-  --ionic-color-primary-900: #010408;
-  --ionic-color-primary-900-rgb: 1, 4, 8;
-  --ionic-color-primary: #1068eb;
-  --ionic-color-primary-rgb: 16, 104, 235;
-  --ionic-color-secondary: #303d60;
-  --ionic-color-secondary-rgb: 48, 61, 96;
-  --ionic-color-neutral-0: #ffffff;
-  --ionic-color-neutral-0-rgb: 255, 255, 255;
-  --ionic-color-neutral-10: #f5f5f5;
-  --ionic-color-neutral-10-rgb: 245, 245, 245;
-  --ionic-color-neutral-50: #e7e7e7;
-  --ionic-color-neutral-50-rgb: 231, 231, 231;
-  --ionic-color-neutral-100: #dadada;
-  --ionic-color-neutral-100-rgb: 218, 218, 218;
-  --ionic-color-neutral-200: #c9c9c9;
-  --ionic-color-neutral-200-rgb: 201, 201, 201;
-  --ionic-color-neutral-300: #b8b8b8;
-  --ionic-color-neutral-300-rgb: 184, 184, 184;
-  --ionic-color-neutral-400: #9a9a9a;
-  --ionic-color-neutral-400-rgb: 154, 154, 154;
-  --ionic-color-neutral-500: #767676;
-  --ionic-color-neutral-500-rgb: 118, 118, 118;
-  --ionic-color-neutral-600: #535353;
-  --ionic-color-neutral-600-rgb: 83, 83, 83;
-  --ionic-color-neutral-700: #373737;
-  --ionic-color-neutral-700-rgb: 55, 55, 55;
-  --ionic-color-neutral-800: #212121;
-  --ionic-color-neutral-800-rgb: 33, 33, 33;
-  --ionic-color-neutral-900: #05080f;
-  --ionic-color-neutral-900-rgb: 5, 8, 15;
-  --ionic-color-error-10: #fffafa;
-  --ionic-color-error-10-rgb: 255, 250, 250;
-  --ionic-color-error-50: #ffd5d5;
-  --ionic-color-error-50-rgb: 255, 213, 213;
-  --ionic-color-error-100: #ffafaf;
-  --ionic-color-error-100-rgb: 255, 175, 175;
-  --ionic-color-error-200: #ff8a8a;
-  --ionic-color-error-200-rgb: 255, 138, 138;
-  --ionic-color-error-300: #ff6666;
-  --ionic-color-error-300-rgb: 255, 102, 102;
-  --ionic-color-error-400: #f72c2c;
-  --ionic-color-error-400-rgb: 247, 44, 44;
-  --ionic-color-error-500: #c71212;
-  --ionic-color-error-500-rgb: 199, 18, 18;
-  --ionic-color-error-600: #970606;
-  --ionic-color-error-600-rgb: 151, 6, 6;
-  --ionic-color-error-700: #670202;
-  --ionic-color-error-700-rgb: 103, 2, 2;
-  --ionic-color-error-800: #380101;
-  --ionic-color-error-800-rgb: 56, 1, 1;
-  --ionic-color-error-900: #080000;
-  --ionic-color-error-900-rgb: 8, 0, 0;
-  --ionic-color-error: #f72c2c;
-  --ionic-color-error-rgb: 247, 44, 44;
-  --ionic-color-warning-10: #fffdfa;
-  --ionic-color-warning-10-rgb: 255, 253, 250;
-  --ionic-color-warning-50: #ffecce;
-  --ionic-color-warning-50-rgb: 255, 236, 206;
-  --ionic-color-warning-100: #ffdba0;
-  --ionic-color-warning-100-rgb: 255, 219, 160;
-  --ionic-color-warning-200: #ffca73;
-  --ionic-color-warning-200-rgb: 255, 202, 115;
-  --ionic-color-warning-300: #ffb845;
-  --ionic-color-warning-300-rgb: 255, 184, 69;
-  --ionic-color-warning-400: #ff9707;
-  --ionic-color-warning-400-rgb: 255, 151, 7;
-  --ionic-color-warning-500: #ce7a06;
-  --ionic-color-warning-500-rgb: 206, 122, 6;
-  --ionic-color-warning-600: #9c5f0a;
-  --ionic-color-warning-600-rgb: 156, 95, 10;
-  --ionic-color-warning-700: #6b430c;
-  --ionic-color-warning-700-rgb: 107, 67, 12;
-  --ionic-color-warning-800: #39260b;
-  --ionic-color-warning-800-rgb: 57, 38, 11;
-  --ionic-color-warning-900: #080502;
-  --ionic-color-warning-900-rgb: 8, 5, 2;
-  --ionic-color-warning: #ff9707;
-  --ionic-color-warning-rgb: 255, 151, 7;
-  --ionic-color-success-10: #fbfffa;
-  --ionic-color-success-10-rgb: 251, 255, 250;
-  --ionic-color-success-50: #def7d8;
-  --ionic-color-success-50-rgb: 222, 247, 216;
-  --ionic-color-success-100: #c6f0b7;
-  --ionic-color-success-100-rgb: 198, 240, 183;
-  --ionic-color-success-200: #a4e188;
-  --ionic-color-success-200-rgb: 164, 225, 136;
-  --ionic-color-success-300: #73c346;
-  --ionic-color-success-300-rgb: 115, 195, 70;
-  --ionic-color-success-400: #52a518;
-  --ionic-color-success-400-rgb: 82, 165, 24;
-  --ionic-color-success-500: #36870c;
-  --ionic-color-success-500-rgb: 54, 135, 12;
-  --ionic-color-success-600: #36870c;
-  --ionic-color-success-600-rgb: 54, 135, 12;
-  --ionic-color-success-700: #226907;
-  --ionic-color-success-700-rgb: 34, 105, 7;
-  --ionic-color-success-800: #144b05;
-  --ionic-color-success-800-rgb: 20, 75, 5;
-  --ionic-color-success-900: #030f02;
-  --ionic-color-success-900-rgb: 3, 15, 2;
-  --ionic-color-success: #52a518;
-  --ionic-color-success-rgb: 82, 165, 24;
-  --ionic-color-info-10: #f5fbff;
-  --ionic-color-info-10-rgb: 245, 251, 255;
-  --ionic-color-info-50: #c6e7ff;
-  --ionic-color-info-50-rgb: 198, 231, 255;
-  --ionic-color-info-100: #97d3ff;
-  --ionic-color-info-100-rgb: 151, 211, 255;
-  --ionic-color-info-200: #6ac0fe;
-  --ionic-color-info-200-rgb: 106, 192, 254;
-  --ionic-color-info-300: #3dadfe;
-  --ionic-color-info-300-rgb: 61, 173, 254;
-  --ionic-color-info-400: #008bef;
-  --ionic-color-info-400-rgb: 0, 139, 239;
-  --ionic-color-info-500: #0071c2;
-  --ionic-color-info-500-rgb: 0, 113, 194;
-  --ionic-color-info-600: #005796;
-  --ionic-color-info-600-rgb: 0, 87, 150;
-  --ionic-color-info-700: #003d69;
-  --ionic-color-info-700-rgb: 0, 61, 105;
-  --ionic-color-info-800: #02243c;
-  --ionic-color-info-800-rgb: 2, 36, 60;
-  --ionic-color-info-900: #020a0f;
-  --ionic-color-info-900-rgb: 2, 10, 15;
-  --ionic-color-info: #008bef;
-  --ionic-color-info-rgb: 0, 139, 239;
-  --ionic-font-family: "Inter", sans-serif;
-  --ionic-font-letter-spacing-none: 0em;
-  --ionic-font-letter-spacing-s: 0.1em;
-  --ionic-font-letter-spacing-m: 0.15em;
-  --ionic-font-line-height-xs: 16px;
-  --ionic-font-line-height-s: 20px;
-  --ionic-font-line-height-m: 24px;
-  --ionic-font-line-height-l: 28px;
-  --ionic-font-line-height-xl: 32px;
-  --ionic-font-line-height-xxl: 36px;
-  --ionic-font-line-height-display-s: 44px;
-  --ionic-font-line-height-display-m: 48px;
-  --ionic-font-line-height-full: 100%;
-  --ionic-font-size-h1: 28px;
-  --ionic-font-size-h2: 32px;
-  --ionic-font-size-h3: 24px;
-  --ionic-font-size-h4: 22px;
-  --ionic-font-size-h5: 20px;
-  --ionic-font-size-h6: 18px;
-  --ionic-font-size-display-s: 32px;
-  --ionic-font-size-display-m: 36px;
-  --ionic-font-size-s: 12px;
-  --ionic-font-size-m: 14px;
-  --ionic-font-size-l: 16px;
+  --ionic-guidelines: #9747ff;
+  --ionic-guidelines-rgb: 151, 71, 255;
+  --ionic-disabled: #ffffff99;
+  --ionic-hover: #1212120a;
+  --ionic-pressed: #12121214;
+  --ionic-elevation-100: 0px 3px 9px 0px #00000012, 0px 0px 4px 0px #0000000a;
+  --ionic-elevation-200: 0px 8px 25px 0px #00000014, 0px 1px 5px 0px #0000000d;
+  --ionic-elevation-300: 0px 6px 32px 0px #00000029, 0px 2px 7px 0px #0000000d;
+  --ionic-elevation-400: 0px 15px 48px 0px #0000002e, 0px 3px 12px 0px #0000001f;
+  --ionic-elevation-500: 0px 3px 9px 0px #062b6312, 0px 0px 4px 0px #062b630a;
+  --ionic-elevation-600: 0px 8px 25px 0px #062b6314, 0px 1px 5px 0px #062b630d;
+  --ionic-elevation-700: 0px 15px 32px 0px #062b6317, 0px 2px 7px 0px #062b630d;
+  --ionic-elevation-800: 0px 20px 48px 0px #062b631f, 0px 3px 14px 0px #062b631f;
+  --ionic-font-size-275: 11px;
+  --ionic-font-size-300: 12px;
+  --ionic-font-size-350: 14px;
+  --ionic-font-size-400: 16px;
+  --ionic-font-size-450: 18px;
+  --ionic-font-size-500: 20px;
+  --ionic-font-size-550: 22px;
+  --ionic-font-size-600: 24px;
+  --ionic-font-size-650: 26px;
+  --ionic-font-size-700: 28px;
+  --ionic-font-size-800: 32px;
+  --ionic-font-size-900: 36px;
+  --ionic-font-weight-thin: 100;
+  --ionic-font-weight-extra-light: 200;
   --ionic-font-weight-light: 300;
   --ionic-font-weight-regular: 400;
   --ionic-font-weight-medium: 500;
   --ionic-font-weight-semi-bold: 600;
   --ionic-font-weight-bold: 700;
-  --ionic-space-none: 0;
-  --ionic-space-xxxxs: 2px;
-  --ionic-space-xxxs: 4px;
-  --ionic-space-xxs: 6px;
-  --ionic-space-xs: 8px;
-  --ionic-space-s: 12px;
-  --ionic-space-base: 16px;
-  --ionic-space-m: 20px;
-  --ionic-space-l: 24px;
-  --ionic-space-xl: 28px;
-  --ionic-space-xxl: 32px;
-  --ionic-space-xxxl: 36px;
-  --ionic-space-xxxxl: 40px;
-  --ionic-border-radius-square: 0;
-  --ionic-border-radius-rounded-small: 4px;
-  --ionic-border-radius-rounded-medium: 8px;
-  --ionic-border-radius-rounded-large: 16px;
-  --ionic-border-radius-rounded-x-large: 32px;
-  --ionic-border-radius-rounded-full: 999px;
-  --ionic-border-size-small: 1px;
-  --ionic-border-size-medium: 2px;
-  --ionic-border-size-large: 3px;
-  --ionic-elevation-0: none;
-  --ionic-elevation-1: 0px 3px 9px 0px rgba(0, 0, 0, 0.07), 0px 0px 4px 0px rgba(0, 0, 0, 0.04);
-  --ionic-elevation-2: 0px 8px 25px 0px rgba(0, 0, 0, 0.08), 0px 1px 5px 0px rgba(0, 0, 0, 0.05);
-  --ionic-elevation-3: 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 15px 32px 0px rgba(0, 0, 0, 0.09);
-  --ionic-elevation-4: 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 20px 48px 0px rgba(0, 0, 0, 0.12);
+  --ionic-font-weight-extra-bold: 800;
+  --ionic-font-weight-black: 900;
+  --ionic-letter-spacing-0: 0;
+  --ionic-letter-spacing-1: 1%;
+  --ionic-letter-spacing-2: 1.5%;
+  --ionic-line-height-300: 12px;
+  --ionic-line-height-400: 16px;
+  --ionic-line-height-500: 20px;
+  --ionic-line-height-600: 24px;
+  --ionic-line-height-700: 28px;
+  --ionic-line-height-800: 32px;
+  --ionic-line-height-900: 36px;
+  --ionic-line-height-1100: 44px;
+  --ionic-line-height-1200: 48px;
+  --ionic-line-height-full: 100%;
+  --ionic-space-0: 0px;
+  --ionic-space-100: 4px;
+  --ionic-space-150: 6px;
+  --ionic-space-200: 8px;
+  --ionic-space-250: 10px;
+  --ionic-space-300: 12px;
+  --ionic-space-400: 16px;
+  --ionic-space-500: 20px;
+  --ionic-space-600: 24px;
+  --ionic-space-700: 28px;
+  --ionic-space-800: 32px;
+  --ionic-space-900: 36px;
+  --ionic-space-1000: 40px;
+  --ionic-space-1200: 48px;
+  --ionic-space-050: 2px;
+  --ionic-border-radius-0: 0px;
+  --ionic-border-radius-100: 4px;
+  --ionic-border-radius-200: 8px;
+  --ionic-border-radius-300: 12px;
+  --ionic-border-radius-400: 16px;
+  --ionic-border-radius-800: 32px;
+  --ionic-border-radius-1000: 40px;
+  --ionic-border-radius-050: 2px;
+  --ionic-border-radius-full: 999px;
+  --ionic-border-size-0: 0px;
+  --ionic-border-size-025: 1px;
+  --ionic-border-size-050: 2px;
+  --ionic-border-size-075: 3px;
+  --ionic-border-style-none: none;
+  --ionic-border-style-solid: solid;
+  --ionic-border-style-dashed: dashed;
+  --ionic-border-style-dotted: dotted;
+  --ionic-color-base-white: #ffffff;
+  --ionic-color-base-white-rgb: 255, 255, 255;
+  --ionic-color-base-black: #111111;
+  --ionic-color-base-black-rgb: 17, 17, 17;
+  --ionic-color-neutral-100: #f1f1f1;
+  --ionic-color-neutral-100-rgb: 241, 241, 241;
+  --ionic-color-neutral-200: #e7e7e7;
+  --ionic-color-neutral-200-rgb: 231, 231, 231;
+  --ionic-color-neutral-300: #cfcfcf;
+  --ionic-color-neutral-300-rgb: 207, 207, 207;
+  --ionic-color-neutral-400: #b9b9b9;
+  --ionic-color-neutral-400-rgb: 185, 185, 185;
+  --ionic-color-neutral-500: #a2a2a2;
+  --ionic-color-neutral-500-rgb: 162, 162, 162;
+  --ionic-color-neutral-600: #8c8c8c;
+  --ionic-color-neutral-600-rgb: 140, 140, 140;
+  --ionic-color-neutral-700: #777777;
+  --ionic-color-neutral-700-rgb: 119, 119, 119;
+  --ionic-color-neutral-800: #626262;
+  --ionic-color-neutral-800-rgb: 98, 98, 98;
+  --ionic-color-neutral-900: #4e4e4e;
+  --ionic-color-neutral-900-rgb: 78, 78, 78;
+  --ionic-color-neutral-1000: #3b3b3b;
+  --ionic-color-neutral-1000-rgb: 59, 59, 59;
+  --ionic-color-neutral-1100: #292929;
+  --ionic-color-neutral-1100-rgb: 41, 41, 41;
+  --ionic-color-neutral-1200: #242424;
+  --ionic-color-neutral-1200-rgb: 36, 36, 36;
+  --ionic-color-red-100: #feeded;
+  --ionic-color-red-100-rgb: 254, 237, 237;
+  --ionic-color-red-200: #fde1e1;
+  --ionic-color-red-200-rgb: 253, 225, 225;
+  --ionic-color-red-300: #fcc1c1;
+  --ionic-color-red-300-rgb: 252, 193, 193;
+  --ionic-color-red-400: #faa1a1;
+  --ionic-color-red-400-rgb: 250, 161, 161;
+  --ionic-color-red-500: #f97d7d;
+  --ionic-color-red-500-rgb: 249, 125, 125;
+  --ionic-color-red-600: #f85151;
+  --ionic-color-red-600-rgb: 248, 81, 81;
+  --ionic-color-red-700: #e52929;
+  --ionic-color-red-700-rgb: 229, 41, 41;
+  --ionic-color-red-800: #bf2222;
+  --ionic-color-red-800-rgb: 191, 34, 34;
+  --ionic-color-red-900: #991b1b;
+  --ionic-color-red-900-rgb: 153, 27, 27;
+  --ionic-color-red-1000: #761515;
+  --ionic-color-red-1000-rgb: 118, 21, 21;
+  --ionic-color-red-1100: #540f0f;
+  --ionic-color-red-1100-rgb: 84, 15, 15;
+  --ionic-color-red-1200: #330909;
+  --ionic-color-red-1200-rgb: 51, 9, 9;
+  --ionic-color-pumpkin-100: #feedea;
+  --ionic-color-pumpkin-100-rgb: 254, 237, 234;
+  --ionic-color-pumpkin-200: #fde0db;
+  --ionic-color-pumpkin-200-rgb: 253, 224, 219;
+  --ionic-color-pumpkin-300: #fbbdb1;
+  --ionic-color-pumpkin-300-rgb: 251, 189, 177;
+  --ionic-color-pumpkin-400: #f9947c;
+  --ionic-color-pumpkin-400-rgb: 249, 148, 124;
+  --ionic-color-pumpkin-500: #f75d07;
+  --ionic-color-pumpkin-500-rgb: 247, 93, 7;
+  --ionic-color-pumpkin-600: #da5206;
+  --ionic-color-pumpkin-600-rgb: 218, 82, 6;
+  --ionic-color-pumpkin-700: #bd4705;
+  --ionic-color-pumpkin-700-rgb: 189, 71, 5;
+  --ionic-color-pumpkin-800: #9f3c05;
+  --ionic-color-pumpkin-800-rgb: 159, 60, 5;
+  --ionic-color-pumpkin-900: #803004;
+  --ionic-color-pumpkin-900-rgb: 128, 48, 4;
+  --ionic-color-pumpkin-1000: #602403;
+  --ionic-color-pumpkin-1000-rgb: 96, 36, 3;
+  --ionic-color-pumpkin-1100: #401802;
+  --ionic-color-pumpkin-1100-rgb: 64, 24, 2;
+  --ionic-color-pumpkin-1200: #210c01;
+  --ionic-color-pumpkin-1200-rgb: 33, 12, 1;
+  --ionic-color-orange-100: #fff1ea;
+  --ionic-color-orange-100-rgb: 255, 241, 234;
+  --ionic-color-orange-200: #ffe8db;
+  --ionic-color-orange-200-rgb: 255, 232, 219;
+  --ionic-color-orange-300: #ffcfb1;
+  --ionic-color-orange-300-rgb: 255, 207, 177;
+  --ionic-color-orange-400: #ffb37b;
+  --ionic-color-orange-400-rgb: 255, 179, 123;
+  --ionic-color-orange-500: #ff9400;
+  --ionic-color-orange-500-rgb: 255, 148, 0;
+  --ionic-color-orange-600: #e18300;
+  --ionic-color-orange-600-rgb: 225, 131, 0;
+  --ionic-color-orange-700: #c37100;
+  --ionic-color-orange-700-rgb: 195, 113, 0;
+  --ionic-color-orange-800: #a45f00;
+  --ionic-color-orange-800-rgb: 164, 95, 0;
+  --ionic-color-orange-900: #844d00;
+  --ionic-color-orange-900-rgb: 132, 77, 0;
+  --ionic-color-orange-1000: #633a00;
+  --ionic-color-orange-1000-rgb: 99, 58, 0;
+  --ionic-color-orange-1100: #422700;
+  --ionic-color-orange-1100-rgb: 66, 39, 0;
+  --ionic-color-orange-1200: #221400;
+  --ionic-color-orange-1200-rgb: 34, 20, 0;
+  --ionic-color-yellow-100: #fff9ea;
+  --ionic-color-yellow-100-rgb: 255, 249, 234;
+  --ionic-color-yellow-200: #fff5db;
+  --ionic-color-yellow-200-rgb: 255, 245, 219;
+  --ionic-color-yellow-300: #ffebb1;
+  --ionic-color-yellow-300-rgb: 255, 235, 177;
+  --ionic-color-yellow-400: #ffe07b;
+  --ionic-color-yellow-400-rgb: 255, 224, 123;
+  --ionic-color-yellow-500: #ffd600;
+  --ionic-color-yellow-500-rgb: 255, 214, 0;
+  --ionic-color-yellow-600: #e1bd00;
+  --ionic-color-yellow-600-rgb: 225, 189, 0;
+  --ionic-color-yellow-700: #c3a400;
+  --ionic-color-yellow-700-rgb: 195, 164, 0;
+  --ionic-color-yellow-800: #a48a00;
+  --ionic-color-yellow-800-rgb: 164, 138, 0;
+  --ionic-color-yellow-900: #846f00;
+  --ionic-color-yellow-900-rgb: 132, 111, 0;
+  --ionic-color-yellow-1000: #635300;
+  --ionic-color-yellow-1000-rgb: 99, 83, 0;
+  --ionic-color-yellow-1100: #423800;
+  --ionic-color-yellow-1100-rgb: 66, 56, 0;
+  --ionic-color-yellow-1200: #221d00;
+  --ionic-color-yellow-1200-rgb: 34, 29, 0;
+  --ionic-color-lime-100: #f3faea;
+  --ionic-color-lime-100-rgb: 243, 250, 234;
+  --ionic-color-lime-200: #eaf7db;
+  --ionic-color-lime-200-rgb: 234, 247, 219;
+  --ionic-color-lime-300: #d3efb2;
+  --ionic-color-lime-300-rgb: 211, 239, 178;
+  --ionic-color-lime-400: #bbe77d;
+  --ionic-color-lime-400-rgb: 187, 231, 125;
+  --ionic-color-lime-500: #a0df18;
+  --ionic-color-lime-500-rgb: 160, 223, 24;
+  --ionic-color-lime-600: #8dc515;
+  --ionic-color-lime-600-rgb: 141, 197, 21;
+  --ionic-color-lime-700: #7aab12;
+  --ionic-color-lime-700-rgb: 122, 171, 18;
+  --ionic-color-lime-800: #678f0f;
+  --ionic-color-lime-800-rgb: 103, 143, 15;
+  --ionic-color-lime-900: #53730c;
+  --ionic-color-lime-900-rgb: 83, 115, 12;
+  --ionic-color-lime-1000: #3e5709;
+  --ionic-color-lime-1000-rgb: 62, 87, 9;
+  --ionic-color-lime-1100: #2a3a06;
+  --ionic-color-lime-1100-rgb: 42, 58, 6;
+  --ionic-color-lime-1200: #151e03;
+  --ionic-color-lime-1200-rgb: 21, 30, 3;
+  --ionic-color-green-100: #ebf9ec;
+  --ionic-color-green-100-rgb: 235, 249, 236;
+  --ionic-color-green-200: #dcf5de;
+  --ionic-color-green-200-rgb: 220, 245, 222;
+  --ionic-color-green-300: #b3ebb7;
+  --ionic-color-green-300-rgb: 179, 235, 183;
+  --ionic-color-green-400: #7fe089;
+  --ionic-color-green-400-rgb: 127, 224, 137;
+  --ionic-color-green-500: #23d643;
+  --ionic-color-green-500-rgb: 35, 214, 67;
+  --ionic-color-green-600: #1fbd3b;
+  --ionic-color-green-600-rgb: 31, 189, 59;
+  --ionic-color-green-700: #1ba433;
+  --ionic-color-green-700-rgb: 27, 164, 51;
+  --ionic-color-green-800: #178a2b;
+  --ionic-color-green-800-rgb: 23, 138, 43;
+  --ionic-color-green-900: #126f23;
+  --ionic-color-green-900-rgb: 18, 111, 35;
+  --ionic-color-green-1000: #0e531a;
+  --ionic-color-green-1000-rgb: 14, 83, 26;
+  --ionic-color-green-1100: #093811;
+  --ionic-color-green-1100-rgb: 9, 56, 17;
+  --ionic-color-green-1200: #051d09;
+  --ionic-color-green-1200-rgb: 5, 29, 9;
+  --ionic-color-teal-100: #eaf8f5;
+  --ionic-color-teal-100-rgb: 234, 248, 245;
+  --ionic-color-teal-200: #dbf3ee;
+  --ionic-color-teal-200-rgb: 219, 243, 238;
+  --ionic-color-teal-300: #b1e7dd;
+  --ionic-color-teal-300-rgb: 177, 231, 221;
+  --ionic-color-teal-400: #7bdbca;
+  --ionic-color-teal-400-rgb: 123, 219, 202;
+  --ionic-color-teal-500: #00cfb7;
+  --ionic-color-teal-500-rgb: 0, 207, 183;
+  --ionic-color-teal-600: #00b7a2;
+  --ionic-color-teal-600-rgb: 0, 183, 162;
+  --ionic-color-teal-700: #009e8c;
+  --ionic-color-teal-700-rgb: 0, 158, 140;
+  --ionic-color-teal-800: #008576;
+  --ionic-color-teal-800-rgb: 0, 133, 118;
+  --ionic-color-teal-900: #006b5f;
+  --ionic-color-teal-900-rgb: 0, 107, 95;
+  --ionic-color-teal-1000: #005147;
+  --ionic-color-teal-1000-rgb: 0, 81, 71;
+  --ionic-color-teal-1100: #003630;
+  --ionic-color-teal-1100-rgb: 0, 54, 48;
+  --ionic-color-teal-1200: #001c19;
+  --ionic-color-teal-1200-rgb: 0, 28, 25;
+  --ionic-color-aqua-100: #ebf9fe;
+  --ionic-color-aqua-100-rgb: 235, 249, 254;
+  --ionic-color-aqua-200: #dcf4fd;
+  --ionic-color-aqua-200-rgb: 220, 244, 253;
+  --ionic-color-aqua-300: #b3e9fc;
+  --ionic-color-aqua-300-rgb: 179, 233, 252;
+  --ionic-color-aqua-400: #80defa;
+  --ionic-color-aqua-400-rgb: 128, 222, 250;
+  --ionic-color-aqua-500: #27d3f9;
+  --ionic-color-aqua-500-rgb: 39, 211, 249;
+  --ionic-color-aqua-600: #22bbdc;
+  --ionic-color-aqua-600-rgb: 34, 187, 220;
+  --ionic-color-aqua-700: #1ea2bf;
+  --ionic-color-aqua-700-rgb: 30, 162, 191;
+  --ionic-color-aqua-800: #1988a0;
+  --ionic-color-aqua-800-rgb: 25, 136, 160;
+  --ionic-color-aqua-900: #146d81;
+  --ionic-color-aqua-900-rgb: 20, 109, 129;
+  --ionic-color-aqua-1000: #0f5261;
+  --ionic-color-aqua-1000-rgb: 15, 82, 97;
+  --ionic-color-aqua-1100: #0a3741;
+  --ionic-color-aqua-1100-rgb: 10, 55, 65;
+  --ionic-color-aqua-1200: #051c21;
+  --ionic-color-aqua-1200-rgb: 5, 28, 33;
+  --ionic-color-blue-100: #f2f4fd;
+  --ionic-color-blue-100-rgb: 242, 244, 253;
+  --ionic-color-blue-200: #e9ecfc;
+  --ionic-color-blue-200-rgb: 233, 236, 252;
+  --ionic-color-blue-300: #d0d7fa;
+  --ionic-color-blue-300-rgb: 208, 215, 250;
+  --ionic-color-blue-400: #b5c0f7;
+  --ionic-color-blue-400-rgb: 181, 192, 247;
+  --ionic-color-blue-500: #94a5f4;
+  --ionic-color-blue-500-rgb: 148, 165, 244;
+  --ionic-color-blue-600: #6986f2;
+  --ionic-color-blue-600-rgb: 105, 134, 242;
+  --ionic-color-blue-700: #105cef;
+  --ionic-color-blue-700-rgb: 16, 92, 239;
+  --ionic-color-blue-800: #0f54da;
+  --ionic-color-blue-800-rgb: 15, 84, 218;
+  --ionic-color-blue-900: #0d4bc3;
+  --ionic-color-blue-900-rgb: 13, 75, 195;
+  --ionic-color-blue-1000: #0b41a9;
+  --ionic-color-blue-1000-rgb: 11, 65, 169;
+  --ionic-color-blue-1100: #09358a;
+  --ionic-color-blue-1100-rgb: 9, 53, 138;
+  --ionic-color-blue-1200: #072561;
+  --ionic-color-blue-1200-rgb: 7, 37, 97;
+  --ionic-color-indigo-100: #f3f2fb;
+  --ionic-color-indigo-100-rgb: 243, 242, 251;
+  --ionic-color-indigo-200: #eae9f9;
+  --ionic-color-indigo-200-rgb: 234, 233, 249;
+  --ionic-color-indigo-300: #d3d1f2;
+  --ionic-color-indigo-300-rgb: 211, 209, 242;
+  --ionic-color-indigo-400: #bab5eb;
+  --ionic-color-indigo-400-rgb: 186, 181, 235;
+  --ionic-color-indigo-500: #9d95e4;
+  --ionic-color-indigo-500-rgb: 157, 149, 228;
+  --ionic-color-indigo-600: #786bdd;
+  --ionic-color-indigo-600-rgb: 120, 107, 221;
+  --ionic-color-indigo-700: #411bd5;
+  --ionic-color-indigo-700-rgb: 65, 27, 213;
+  --ionic-color-indigo-800: #3b19c3;
+  --ionic-color-indigo-800-rgb: 59, 25, 195;
+  --ionic-color-indigo-900: #3516ae;
+  --ionic-color-indigo-900-rgb: 53, 22, 174;
+  --ionic-color-indigo-1000: #2e1397;
+  --ionic-color-indigo-1000-rgb: 46, 19, 151;
+  --ionic-color-indigo-1100: #26107b;
+  --ionic-color-indigo-1100-rgb: 38, 16, 123;
+  --ionic-color-indigo-1200: #1a0b57;
+  --ionic-color-indigo-1200-rgb: 26, 11, 87;
+  --ionic-color-violet-100: #f5f2fe;
+  --ionic-color-violet-100-rgb: 245, 242, 254;
+  --ionic-color-violet-200: #eee9fd;
+  --ionic-color-violet-200-rgb: 238, 233, 253;
+  --ionic-color-violet-300: #dcd1fb;
+  --ionic-color-violet-300-rgb: 220, 209, 251;
+  --ionic-color-violet-400: #c9b6f9;
+  --ionic-color-violet-400-rgb: 201, 182, 249;
+  --ionic-color-violet-500: #b396f6;
+  --ionic-color-violet-500-rgb: 179, 150, 246;
+  --ionic-color-violet-600: #9a6cf4;
+  --ionic-color-violet-600-rgb: 154, 108, 244;
+  --ionic-color-violet-700: #7c20f2;
+  --ionic-color-violet-700-rgb: 124, 32, 242;
+  --ionic-color-violet-800: #711ddd;
+  --ionic-color-violet-800-rgb: 113, 29, 221;
+  --ionic-color-violet-900: #651ac5;
+  --ionic-color-violet-900-rgb: 101, 26, 197;
+  --ionic-color-violet-1000: #5817ab;
+  --ionic-color-violet-1000-rgb: 88, 23, 171;
+  --ionic-color-violet-1100: #48128c;
+  --ionic-color-violet-1100-rgb: 72, 18, 140;
+  --ionic-color-violet-1200: #330d63;
+  --ionic-color-violet-1200-rgb: 51, 13, 99;
+  --ionic-color-purple-100: #f9f3fe;
+  --ionic-color-purple-100-rgb: 249, 243, 254;
+  --ionic-color-purple-200: #f5eafd;
+  --ionic-color-purple-200-rgb: 245, 234, 253;
+  --ionic-color-purple-300: #e9d3fa;
+  --ionic-color-purple-300-rgb: 233, 211, 250;
+  --ionic-color-purple-400: #deb9f8;
+  --ionic-color-purple-400-rgb: 222, 185, 248;
+  --ionic-color-purple-500: #d29bf6;
+  --ionic-color-purple-500-rgb: 210, 155, 246;
+  --ionic-color-purple-600: #c575f3;
+  --ionic-color-purple-600-rgb: 197, 117, 243;
+  --ionic-color-purple-700: #b73cf1;
+  --ionic-color-purple-700-rgb: 183, 60, 241;
+  --ionic-color-purple-800: #a737dc;
+  --ionic-color-purple-800-rgb: 167, 55, 220;
+  --ionic-color-purple-900: #9531c5;
+  --ionic-color-purple-900-rgb: 149, 49, 197;
+  --ionic-color-purple-1000: #812aaa;
+  --ionic-color-purple-1000-rgb: 129, 42, 170;
+  --ionic-color-purple-1100: #6a238b;
+  --ionic-color-purple-1100-rgb: 106, 35, 139;
+  --ionic-color-purple-1200: #4b1862;
+  --ionic-color-purple-1200-rgb: 75, 24, 98;
+  --ionic-color-magenta-100: #fdf3fb;
+  --ionic-color-magenta-100-rgb: 253, 243, 251;
+  --ionic-color-magenta-200: #fcebf8;
+  --ionic-color-magenta-200-rgb: 252, 235, 248;
+  --ionic-color-magenta-300: #f9d4f1;
+  --ionic-color-magenta-300-rgb: 249, 212, 241;
+  --ionic-color-magenta-400: #f6bcea;
+  --ionic-color-magenta-400-rgb: 246, 188, 234;
+  --ionic-color-magenta-500: #f39fe3;
+  --ionic-color-magenta-500-rgb: 243, 159, 227;
+  --ionic-color-magenta-600: #f07cdb;
+  --ionic-color-magenta-600-rgb: 240, 124, 219;
+  --ionic-color-magenta-700: #ed4ad3;
+  --ionic-color-magenta-700-rgb: 237, 74, 211;
+  --ionic-color-magenta-800: #d844c1;
+  --ionic-color-magenta-800-rgb: 216, 68, 193;
+  --ionic-color-magenta-900: #c13cac;
+  --ionic-color-magenta-900-rgb: 193, 60, 172;
+  --ionic-color-magenta-1000: #a83495;
+  --ionic-color-magenta-1000-rgb: 168, 52, 149;
+  --ionic-color-magenta-1100: #892b7a;
+  --ionic-color-magenta-1100-rgb: 137, 43, 122;
+  --ionic-color-magenta-1200: #611e56;
+  --ionic-color-magenta-1200-rgb: 97, 30, 86;
+  --ionic-color-pink-100: #fef3f5;
+  --ionic-color-pink-100-rgb: 254, 243, 245;
+  --ionic-color-pink-200: #fdeaee;
+  --ionic-color-pink-200-rgb: 253, 234, 238;
+  --ionic-color-pink-300: #fad3dc;
+  --ionic-color-pink-300-rgb: 250, 211, 220;
+  --ionic-color-pink-400: #f8b9c9;
+  --ionic-color-pink-400-rgb: 248, 185, 201;
+  --ionic-color-pink-500: #f69bb3;
+  --ionic-color-pink-500-rgb: 246, 155, 179;
+  --ionic-color-pink-600: #f3759a;
+  --ionic-color-pink-600-rgb: 243, 117, 154;
+  --ionic-color-pink-700: #f13b7d;
+  --ionic-color-pink-700-rgb: 241, 59, 125;
+  --ionic-color-pink-800: #dc3672;
+  --ionic-color-pink-800-rgb: 220, 54, 114;
+  --ionic-color-pink-900: #c53066;
+  --ionic-color-pink-900-rgb: 197, 48, 102;
+  --ionic-color-pink-1000: #aa2a58;
+  --ionic-color-pink-1000-rgb: 170, 42, 88;
+  --ionic-color-pink-1100: #8b2248;
+  --ionic-color-pink-1100-rgb: 139, 34, 72;
+  --ionic-color-pink-1200: #621833;
+  --ionic-color-pink-1200-rgb: 98, 24, 51;
+  --ionic-color-primary-100: #f2f4fd;
+  --ionic-color-primary-100-rgb: 242, 244, 253;
+  --ionic-color-primary-200: #e9ecfc;
+  --ionic-color-primary-200-rgb: 233, 236, 252;
+  --ionic-color-primary-300: #d0d7fa;
+  --ionic-color-primary-300-rgb: 208, 215, 250;
+  --ionic-color-primary-400: #b5c0f7;
+  --ionic-color-primary-400-rgb: 181, 192, 247;
+  --ionic-color-primary-500: #94a5f4;
+  --ionic-color-primary-500-rgb: 148, 165, 244;
+  --ionic-color-primary-600: #6986f2;
+  --ionic-color-primary-600-rgb: 105, 134, 242;
+  --ionic-color-primary-700: #105cef;
+  --ionic-color-primary-700-rgb: 16, 92, 239;
+  --ionic-color-primary-800: #0f54da;
+  --ionic-color-primary-800-rgb: 15, 84, 218;
+  --ionic-color-primary-900: #0d4bc3;
+  --ionic-color-primary-900-rgb: 13, 75, 195;
+  --ionic-color-primary-1000: #0b41a9;
+  --ionic-color-primary-1000-rgb: 11, 65, 169;
+  --ionic-color-primary-1100: #09358a;
+  --ionic-color-primary-1100-rgb: 9, 53, 138;
+  --ionic-color-primary-1200: #072561;
+  --ionic-color-primary-1200-rgb: 7, 37, 97;
+  --ionic-color-primary-base: #105cef;
+  --ionic-color-primary-base-rgb: 16, 92, 239;
+  --ionic-color-info-100: #ebf9fe;
+  --ionic-color-info-100-rgb: 235, 249, 254;
+  --ionic-color-info-200: #dcf4fd;
+  --ionic-color-info-200-rgb: 220, 244, 253;
+  --ionic-color-info-300: #b3e9fc;
+  --ionic-color-info-300-rgb: 179, 233, 252;
+  --ionic-color-info-400: #80defa;
+  --ionic-color-info-400-rgb: 128, 222, 250;
+  --ionic-color-info-500: #27d3f9;
+  --ionic-color-info-500-rgb: 39, 211, 249;
+  --ionic-color-info-600: #22bbdc;
+  --ionic-color-info-600-rgb: 34, 187, 220;
+  --ionic-color-info-700: #1ea2bf;
+  --ionic-color-info-700-rgb: 30, 162, 191;
+  --ionic-color-info-800: #1988a0;
+  --ionic-color-info-800-rgb: 25, 136, 160;
+  --ionic-color-info-900: #146d81;
+  --ionic-color-info-900-rgb: 20, 109, 129;
+  --ionic-color-info-1000: #0f5261;
+  --ionic-color-info-1000-rgb: 15, 82, 97;
+  --ionic-color-info-1100: #0a3741;
+  --ionic-color-info-1100-rgb: 10, 55, 65;
+  --ionic-color-info-1200: #051c21;
+  --ionic-color-info-1200-rgb: 5, 28, 33;
+  --ionic-color-warning-100: #fff9ea;
+  --ionic-color-warning-100-rgb: 255, 249, 234;
+  --ionic-color-warning-200: #fff5db;
+  --ionic-color-warning-200-rgb: 255, 245, 219;
+  --ionic-color-warning-300: #ffebb1;
+  --ionic-color-warning-300-rgb: 255, 235, 177;
+  --ionic-color-warning-400: #ffe07b;
+  --ionic-color-warning-400-rgb: 255, 224, 123;
+  --ionic-color-warning-500: #ffd600;
+  --ionic-color-warning-500-rgb: 255, 214, 0;
+  --ionic-color-warning-600: #e1bd00;
+  --ionic-color-warning-600-rgb: 225, 189, 0;
+  --ionic-color-warning-700: #c3a400;
+  --ionic-color-warning-700-rgb: 195, 164, 0;
+  --ionic-color-warning-800: #a48a00;
+  --ionic-color-warning-800-rgb: 164, 138, 0;
+  --ionic-color-warning-900: #846f00;
+  --ionic-color-warning-900-rgb: 132, 111, 0;
+  --ionic-color-warning-1000: #635300;
+  --ionic-color-warning-1000-rgb: 99, 83, 0;
+  --ionic-color-warning-1100: #423800;
+  --ionic-color-warning-1100-rgb: 66, 56, 0;
+  --ionic-color-warning-1200: #221d00;
+  --ionic-color-warning-1200-rgb: 34, 29, 0;
+  --ionic-color-danger-100: #feeded;
+  --ionic-color-danger-100-rgb: 254, 237, 237;
+  --ionic-color-danger-200: #fde1e1;
+  --ionic-color-danger-200-rgb: 253, 225, 225;
+  --ionic-color-danger-300: #fcc1c1;
+  --ionic-color-danger-300-rgb: 252, 193, 193;
+  --ionic-color-danger-400: #faa1a1;
+  --ionic-color-danger-400-rgb: 250, 161, 161;
+  --ionic-color-danger-500: #f97d7d;
+  --ionic-color-danger-500-rgb: 249, 125, 125;
+  --ionic-color-danger-600: #f85151;
+  --ionic-color-danger-600-rgb: 248, 81, 81;
+  --ionic-color-danger-700: #e52929;
+  --ionic-color-danger-700-rgb: 229, 41, 41;
+  --ionic-color-danger-800: #bf2222;
+  --ionic-color-danger-800-rgb: 191, 34, 34;
+  --ionic-color-danger-900: #991b1b;
+  --ionic-color-danger-900-rgb: 153, 27, 27;
+  --ionic-color-danger-1000: #761515;
+  --ionic-color-danger-1000-rgb: 118, 21, 21;
+  --ionic-color-danger-1100: #540f0f;
+  --ionic-color-danger-1100-rgb: 84, 15, 15;
+  --ionic-color-danger-1200: #330909;
+  --ionic-color-danger-1200-rgb: 51, 9, 9;
+  --ionic-color-success-100: #ebf9ec;
+  --ionic-color-success-100-rgb: 235, 249, 236;
+  --ionic-color-success-200: #dcf5de;
+  --ionic-color-success-200-rgb: 220, 245, 222;
+  --ionic-color-success-300: #b3ebb7;
+  --ionic-color-success-300-rgb: 179, 235, 183;
+  --ionic-color-success-400: #7fe089;
+  --ionic-color-success-400-rgb: 127, 224, 137;
+  --ionic-color-success-500: #23d643;
+  --ionic-color-success-500-rgb: 35, 214, 67;
+  --ionic-color-success-600: #1fbd3b;
+  --ionic-color-success-600-rgb: 31, 189, 59;
+  --ionic-color-success-700: #1ba433;
+  --ionic-color-success-700-rgb: 27, 164, 51;
+  --ionic-color-success-800: #178a2b;
+  --ionic-color-success-800-rgb: 23, 138, 43;
+  --ionic-color-success-900: #126f23;
+  --ionic-color-success-900-rgb: 18, 111, 35;
+  --ionic-color-success-1000: #0e531a;
+  --ionic-color-success-1000-rgb: 14, 83, 26;
+  --ionic-color-success-1100: #093811;
+  --ionic-color-success-1100-rgb: 9, 56, 17;
+  --ionic-color-success-1200: #051d09;
+  --ionic-color-success-1200-rgb: 5, 29, 9;
+  --ionic-z-index-0: 0;
+  --ionic-z-index-1: 100;
+  --ionic-z-index-2: 200;
+  --ionic-z-index-3: 300;
+  --ionic-z-index-4: 400;
+  --ionic-z-index-500: 500;
+  --ionic-z-index-bottom: -99999;
+  --ionic-z-index-top: 99999;
+  --ionic-scale-0: 0px;
+  --ionic-scale-100: 4px;
+  --ionic-scale-150: 6px;
+  --ionic-scale-200: 8px;
+  --ionic-scale-250: 10px;
+  --ionic-scale-300: 12px;
+  --ionic-scale-400: 16px;
+  --ionic-scale-500: 20px;
+  --ionic-scale-600: 24px;
+  --ionic-scale-700: 28px;
+  --ionic-scale-800: 32px;
+  --ionic-scale-900: 36px;
+  --ionic-scale-1000: 40px;
+  --ionic-scale-1100: 44px;
+  --ionic-scale-1200: 48px;
+  --ionic-scale-1400: 56px;
+  --ionic-scale-1600: 64px;
+  --ionic-scale-1800: 72px;
+  --ionic-scale-2000: 80px;
+  --ionic-scale-2400: 96px;
+  --ionic-scale-3200: 128px;
+  --ionic-scale-4000: 160px;
+  --ionic-scale-5000: 200px;
+  --ionic-scale-6200: 248px;
+  --ionic-scale-7400: 296px;
+  --ionic-scale-9000: 360px;
+  --ionic-scale-025: 1px;
+  --ionic-scale-050: 2px;
+  --ionic-scale-075: 3px;
+  --ionic-font-family: "Inter", sans-serif;
+  --ionic-state-focus-0: none;
+  --ionic-state-focus-100: #9ec4fd;
+  --ionic-state-focus-100-rgb: 158, 196, 253;
+  --ionic-state-focus-200: #ffafaf;
+  --ionic-state-focus-200-rgb: 255, 175, 175;
 }
diff --git a/core/src/foundations/ionic.utility.scss b/core/src/foundations/ionic.utility.scss
index ea5c51aaed..e5ead9e669 100644
--- a/core/src/foundations/ionic.utility.scss
+++ b/core/src/foundations/ionic.utility.scss
@@ -6,101 +6,488 @@
 @import "./ionic.vars";
 @import "../themes/mixins";
 
-.ionic-color-primary-10 {
-  color: $ionic-color-primary-10;
+.ionic-guidelines {
+  color: $ionic-guidelines;
 }
-.ionic-background-color-primary-10 {
-  background-color: $ionic-color-primary-10;
+.ionic-background-guidelines {
+  background-color: $ionic-guidelines;
 }
-.ionic-color-primary-50 {
-  color: $ionic-color-primary-50;
+.ionic-disabled {
+  color: $ionic-disabled;
 }
-.ionic-background-color-primary-50 {
-  background-color: $ionic-color-primary-50;
+.ionic-background-disabled {
+  background-color: $ionic-disabled;
 }
-.ionic-color-primary-100 {
-  color: $ionic-color-primary-100;
+.ionic-hover {
+  color: $ionic-hover;
 }
-.ionic-background-color-primary-100 {
-  background-color: $ionic-color-primary-100;
+.ionic-background-hover {
+  background-color: $ionic-hover;
 }
-.ionic-color-primary-200 {
-  color: $ionic-color-primary-200;
+.ionic-pressed {
+  color: $ionic-pressed;
 }
-.ionic-background-color-primary-200 {
-  background-color: $ionic-color-primary-200;
+.ionic-background-pressed {
+  background-color: $ionic-pressed;
 }
-.ionic-color-primary-300 {
-  color: $ionic-color-primary-300;
+.ionic-elevation-100 {
+  box-shadow: $ionic-elevation-100;
 }
-.ionic-background-color-primary-300 {
-  background-color: $ionic-color-primary-300;
+.ionic-elevation-200 {
+  box-shadow: $ionic-elevation-200;
 }
-.ionic-color-primary-400 {
-  color: $ionic-color-primary-400;
+.ionic-elevation-300 {
+  box-shadow: $ionic-elevation-300;
 }
-.ionic-background-color-primary-400 {
-  background-color: $ionic-color-primary-400;
+.ionic-elevation-400 {
+  box-shadow: $ionic-elevation-400;
 }
-.ionic-color-primary-500 {
-  color: $ionic-color-primary-500;
+.ionic-elevation-500 {
+  box-shadow: $ionic-elevation-500;
 }
-.ionic-background-color-primary-500 {
-  background-color: $ionic-color-primary-500;
+.ionic-elevation-600 {
+  box-shadow: $ionic-elevation-600;
 }
-.ionic-color-primary-600 {
-  color: $ionic-color-primary-600;
+.ionic-elevation-700 {
+  box-shadow: $ionic-elevation-700;
 }
-.ionic-background-color-primary-600 {
-  background-color: $ionic-color-primary-600;
+.ionic-elevation-800 {
+  box-shadow: $ionic-elevation-800;
 }
-.ionic-color-primary-700 {
-  color: $ionic-color-primary-700;
+.ionic-font-size-275 {
+  font-size: $ionic-font-size-275;
 }
-.ionic-background-color-primary-700 {
-  background-color: $ionic-color-primary-700;
+.ionic-font-size-300 {
+  font-size: $ionic-font-size-300;
 }
-.ionic-color-primary-800 {
-  color: $ionic-color-primary-800;
+.ionic-font-size-350 {
+  font-size: $ionic-font-size-350;
 }
-.ionic-background-color-primary-800 {
-  background-color: $ionic-color-primary-800;
+.ionic-font-size-400 {
+  font-size: $ionic-font-size-400;
 }
-.ionic-color-primary-900 {
-  color: $ionic-color-primary-900;
+.ionic-font-size-450 {
+  font-size: $ionic-font-size-450;
 }
-.ionic-background-color-primary-900 {
-  background-color: $ionic-color-primary-900;
+.ionic-font-size-500 {
+  font-size: $ionic-font-size-500;
 }
-.ionic-color-primary {
-  color: $ionic-color-primary;
+.ionic-font-size-550 {
+  font-size: $ionic-font-size-550;
 }
-.ionic-background-color-primary {
-  background-color: $ionic-color-primary;
+.ionic-font-size-600 {
+  font-size: $ionic-font-size-600;
 }
-.ionic-color-secondary {
-  color: $ionic-color-secondary;
+.ionic-font-size-650 {
+  font-size: $ionic-font-size-650;
 }
-.ionic-background-color-secondary {
-  background-color: $ionic-color-secondary;
+.ionic-font-size-700 {
+  font-size: $ionic-font-size-700;
 }
-.ionic-color-neutral-0 {
-  color: $ionic-color-neutral-0;
+.ionic-font-size-800 {
+  font-size: $ionic-font-size-800;
 }
-.ionic-background-color-neutral-0 {
-  background-color: $ionic-color-neutral-0;
+.ionic-font-size-900 {
+  font-size: $ionic-font-size-900;
 }
-.ionic-color-neutral-10 {
-  color: $ionic-color-neutral-10;
+.ionic-font-weight-thin {
+  font-weight: $ionic-font-weight-thin;
 }
-.ionic-background-color-neutral-10 {
-  background-color: $ionic-color-neutral-10;
+.ionic-font-weight-extra-light {
+  font-weight: $ionic-font-weight-extra-light;
 }
-.ionic-color-neutral-50 {
-  color: $ionic-color-neutral-50;
+.ionic-font-weight-light {
+  font-weight: $ionic-font-weight-light;
 }
-.ionic-background-color-neutral-50 {
-  background-color: $ionic-color-neutral-50;
+.ionic-font-weight-regular {
+  font-weight: $ionic-font-weight-regular;
+}
+.ionic-font-weight-medium {
+  font-weight: $ionic-font-weight-medium;
+}
+.ionic-font-weight-semi-bold {
+  font-weight: $ionic-font-weight-semi-bold;
+}
+.ionic-font-weight-bold {
+  font-weight: $ionic-font-weight-bold;
+}
+.ionic-font-weight-extra-bold {
+  font-weight: $ionic-font-weight-extra-bold;
+}
+.ionic-font-weight-black {
+  font-weight: $ionic-font-weight-black;
+}
+.ionic-letter-spacing-0 {
+  letter-spacing: $ionic-letter-spacing-0;
+}
+.ionic-letter-spacing-1 {
+  letter-spacing: $ionic-letter-spacing-1;
+}
+.ionic-letter-spacing-2 {
+  letter-spacing: $ionic-letter-spacing-2;
+}
+.ionic-line-height-300 {
+  line-height: $ionic-line-height-300;
+}
+.ionic-line-height-400 {
+  line-height: $ionic-line-height-400;
+}
+.ionic-line-height-500 {
+  line-height: $ionic-line-height-500;
+}
+.ionic-line-height-600 {
+  line-height: $ionic-line-height-600;
+}
+.ionic-line-height-700 {
+  line-height: $ionic-line-height-700;
+}
+.ionic-line-height-800 {
+  line-height: $ionic-line-height-800;
+}
+.ionic-line-height-900 {
+  line-height: $ionic-line-height-900;
+}
+.ionic-line-height-1100 {
+  line-height: $ionic-line-height-1100;
+}
+.ionic-line-height-1200 {
+  line-height: $ionic-line-height-1200;
+}
+.ionic-line-height-full {
+  line-height: $ionic-line-height-full;
+}
+
+.ionic-margin-space-0 {
+  --margin-start: #{$ionic-space-0};
+  --margin-end: #{$ionic-space-0};
+  --margin-top: #{$ionic-space-0};
+  --margin-bottom: #{$ionic-space-0};
+
+  @include margin($ionic-space-0);
+}
+
+.ionic-padding-space-0 {
+  --padding-start: #{$ionic-space-0};
+  --padding-end: #{$ionic-space-0};
+  --padding-top: #{$ionic-space-0};
+  --padding-bottom: #{$ionic-space-0};
+
+  @include padding($ionic-space-0);
+}
+
+.ionic-margin-space-100 {
+  --margin-start: #{$ionic-space-100};
+  --margin-end: #{$ionic-space-100};
+  --margin-top: #{$ionic-space-100};
+  --margin-bottom: #{$ionic-space-100};
+
+  @include margin($ionic-space-100);
+}
+
+.ionic-padding-space-100 {
+  --padding-start: #{$ionic-space-100};
+  --padding-end: #{$ionic-space-100};
+  --padding-top: #{$ionic-space-100};
+  --padding-bottom: #{$ionic-space-100};
+
+  @include padding($ionic-space-100);
+}
+
+.ionic-margin-space-150 {
+  --margin-start: #{$ionic-space-150};
+  --margin-end: #{$ionic-space-150};
+  --margin-top: #{$ionic-space-150};
+  --margin-bottom: #{$ionic-space-150};
+
+  @include margin($ionic-space-150);
+}
+
+.ionic-padding-space-150 {
+  --padding-start: #{$ionic-space-150};
+  --padding-end: #{$ionic-space-150};
+  --padding-top: #{$ionic-space-150};
+  --padding-bottom: #{$ionic-space-150};
+
+  @include padding($ionic-space-150);
+}
+
+.ionic-margin-space-200 {
+  --margin-start: #{$ionic-space-200};
+  --margin-end: #{$ionic-space-200};
+  --margin-top: #{$ionic-space-200};
+  --margin-bottom: #{$ionic-space-200};
+
+  @include margin($ionic-space-200);
+}
+
+.ionic-padding-space-200 {
+  --padding-start: #{$ionic-space-200};
+  --padding-end: #{$ionic-space-200};
+  --padding-top: #{$ionic-space-200};
+  --padding-bottom: #{$ionic-space-200};
+
+  @include padding($ionic-space-200);
+}
+
+.ionic-margin-space-250 {
+  --margin-start: #{$ionic-space-250};
+  --margin-end: #{$ionic-space-250};
+  --margin-top: #{$ionic-space-250};
+  --margin-bottom: #{$ionic-space-250};
+
+  @include margin($ionic-space-250);
+}
+
+.ionic-padding-space-250 {
+  --padding-start: #{$ionic-space-250};
+  --padding-end: #{$ionic-space-250};
+  --padding-top: #{$ionic-space-250};
+  --padding-bottom: #{$ionic-space-250};
+
+  @include padding($ionic-space-250);
+}
+
+.ionic-margin-space-300 {
+  --margin-start: #{$ionic-space-300};
+  --margin-end: #{$ionic-space-300};
+  --margin-top: #{$ionic-space-300};
+  --margin-bottom: #{$ionic-space-300};
+
+  @include margin($ionic-space-300);
+}
+
+.ionic-padding-space-300 {
+  --padding-start: #{$ionic-space-300};
+  --padding-end: #{$ionic-space-300};
+  --padding-top: #{$ionic-space-300};
+  --padding-bottom: #{$ionic-space-300};
+
+  @include padding($ionic-space-300);
+}
+
+.ionic-margin-space-400 {
+  --margin-start: #{$ionic-space-400};
+  --margin-end: #{$ionic-space-400};
+  --margin-top: #{$ionic-space-400};
+  --margin-bottom: #{$ionic-space-400};
+
+  @include margin($ionic-space-400);
+}
+
+.ionic-padding-space-400 {
+  --padding-start: #{$ionic-space-400};
+  --padding-end: #{$ionic-space-400};
+  --padding-top: #{$ionic-space-400};
+  --padding-bottom: #{$ionic-space-400};
+
+  @include padding($ionic-space-400);
+}
+
+.ionic-margin-space-500 {
+  --margin-start: #{$ionic-space-500};
+  --margin-end: #{$ionic-space-500};
+  --margin-top: #{$ionic-space-500};
+  --margin-bottom: #{$ionic-space-500};
+
+  @include margin($ionic-space-500);
+}
+
+.ionic-padding-space-500 {
+  --padding-start: #{$ionic-space-500};
+  --padding-end: #{$ionic-space-500};
+  --padding-top: #{$ionic-space-500};
+  --padding-bottom: #{$ionic-space-500};
+
+  @include padding($ionic-space-500);
+}
+
+.ionic-margin-space-600 {
+  --margin-start: #{$ionic-space-600};
+  --margin-end: #{$ionic-space-600};
+  --margin-top: #{$ionic-space-600};
+  --margin-bottom: #{$ionic-space-600};
+
+  @include margin($ionic-space-600);
+}
+
+.ionic-padding-space-600 {
+  --padding-start: #{$ionic-space-600};
+  --padding-end: #{$ionic-space-600};
+  --padding-top: #{$ionic-space-600};
+  --padding-bottom: #{$ionic-space-600};
+
+  @include padding($ionic-space-600);
+}
+
+.ionic-margin-space-700 {
+  --margin-start: #{$ionic-space-700};
+  --margin-end: #{$ionic-space-700};
+  --margin-top: #{$ionic-space-700};
+  --margin-bottom: #{$ionic-space-700};
+
+  @include margin($ionic-space-700);
+}
+
+.ionic-padding-space-700 {
+  --padding-start: #{$ionic-space-700};
+  --padding-end: #{$ionic-space-700};
+  --padding-top: #{$ionic-space-700};
+  --padding-bottom: #{$ionic-space-700};
+
+  @include padding($ionic-space-700);
+}
+
+.ionic-margin-space-800 {
+  --margin-start: #{$ionic-space-800};
+  --margin-end: #{$ionic-space-800};
+  --margin-top: #{$ionic-space-800};
+  --margin-bottom: #{$ionic-space-800};
+
+  @include margin($ionic-space-800);
+}
+
+.ionic-padding-space-800 {
+  --padding-start: #{$ionic-space-800};
+  --padding-end: #{$ionic-space-800};
+  --padding-top: #{$ionic-space-800};
+  --padding-bottom: #{$ionic-space-800};
+
+  @include padding($ionic-space-800);
+}
+
+.ionic-margin-space-900 {
+  --margin-start: #{$ionic-space-900};
+  --margin-end: #{$ionic-space-900};
+  --margin-top: #{$ionic-space-900};
+  --margin-bottom: #{$ionic-space-900};
+
+  @include margin($ionic-space-900);
+}
+
+.ionic-padding-space-900 {
+  --padding-start: #{$ionic-space-900};
+  --padding-end: #{$ionic-space-900};
+  --padding-top: #{$ionic-space-900};
+  --padding-bottom: #{$ionic-space-900};
+
+  @include padding($ionic-space-900);
+}
+
+.ionic-margin-space-1000 {
+  --margin-start: #{$ionic-space-1000};
+  --margin-end: #{$ionic-space-1000};
+  --margin-top: #{$ionic-space-1000};
+  --margin-bottom: #{$ionic-space-1000};
+
+  @include margin($ionic-space-1000);
+}
+
+.ionic-padding-space-1000 {
+  --padding-start: #{$ionic-space-1000};
+  --padding-end: #{$ionic-space-1000};
+  --padding-top: #{$ionic-space-1000};
+  --padding-bottom: #{$ionic-space-1000};
+
+  @include padding($ionic-space-1000);
+}
+
+.ionic-margin-space-1200 {
+  --margin-start: #{$ionic-space-1200};
+  --margin-end: #{$ionic-space-1200};
+  --margin-top: #{$ionic-space-1200};
+  --margin-bottom: #{$ionic-space-1200};
+
+  @include margin($ionic-space-1200);
+}
+
+.ionic-padding-space-1200 {
+  --padding-start: #{$ionic-space-1200};
+  --padding-end: #{$ionic-space-1200};
+  --padding-top: #{$ionic-space-1200};
+  --padding-bottom: #{$ionic-space-1200};
+
+  @include padding($ionic-space-1200);
+}
+
+.ionic-margin-space-050 {
+  --margin-start: #{$ionic-space-050};
+  --margin-end: #{$ionic-space-050};
+  --margin-top: #{$ionic-space-050};
+  --margin-bottom: #{$ionic-space-050};
+
+  @include margin($ionic-space-050);
+}
+
+.ionic-padding-space-050 {
+  --padding-start: #{$ionic-space-050};
+  --padding-end: #{$ionic-space-050};
+  --padding-top: #{$ionic-space-050};
+  --padding-bottom: #{$ionic-space-050};
+
+  @include padding($ionic-space-050);
+}
+.ionic-border-radius-0 {
+  border-radius: $ionic-border-radius-0;
+}
+.ionic-border-radius-100 {
+  border-radius: $ionic-border-radius-100;
+}
+.ionic-border-radius-200 {
+  border-radius: $ionic-border-radius-200;
+}
+.ionic-border-radius-300 {
+  border-radius: $ionic-border-radius-300;
+}
+.ionic-border-radius-400 {
+  border-radius: $ionic-border-radius-400;
+}
+.ionic-border-radius-800 {
+  border-radius: $ionic-border-radius-800;
+}
+.ionic-border-radius-1000 {
+  border-radius: $ionic-border-radius-1000;
+}
+.ionic-border-radius-050 {
+  border-radius: $ionic-border-radius-050;
+}
+.ionic-border-radius-full {
+  border-radius: $ionic-border-radius-full;
+}
+.ionic-border-size-0 {
+  border-width: $ionic-border-size-0;
+}
+.ionic-border-size-025 {
+  border-width: $ionic-border-size-025;
+}
+.ionic-border-size-050 {
+  border-width: $ionic-border-size-050;
+}
+.ionic-border-size-075 {
+  border-width: $ionic-border-size-075;
+}
+.ionic-border-style-none {
+  border-style: $ionic-border-style-none;
+}
+.ionic-border-style-solid {
+  border-style: $ionic-border-style-solid;
+}
+.ionic-border-style-dashed {
+  border-style: $ionic-border-style-dashed;
+}
+.ionic-border-style-dotted {
+  border-style: $ionic-border-style-dotted;
+}
+.ionic-color-base-white {
+  color: $ionic-color-base-white;
+}
+.ionic-background-color-base-white {
+  background-color: $ionic-color-base-white;
+}
+.ionic-color-base-black {
+  color: $ionic-color-base-black;
+}
+.ionic-background-color-base-black {
+  background-color: $ionic-color-base-black;
 }
 .ionic-color-neutral-100 {
   color: $ionic-color-neutral-100;
@@ -156,233 +543,1109 @@
 .ionic-background-color-neutral-900 {
   background-color: $ionic-color-neutral-900;
 }
-.ionic-color-error-10 {
-  color: $ionic-color-error-10;
+.ionic-color-neutral-1000 {
+  color: $ionic-color-neutral-1000;
 }
-.ionic-background-color-error-10 {
-  background-color: $ionic-color-error-10;
+.ionic-background-color-neutral-1000 {
+  background-color: $ionic-color-neutral-1000;
 }
-.ionic-color-error-50 {
-  color: $ionic-color-error-50;
+.ionic-color-neutral-1100 {
+  color: $ionic-color-neutral-1100;
 }
-.ionic-background-color-error-50 {
-  background-color: $ionic-color-error-50;
+.ionic-background-color-neutral-1100 {
+  background-color: $ionic-color-neutral-1100;
 }
-.ionic-color-error-100 {
-  color: $ionic-color-error-100;
+.ionic-color-neutral-1200 {
+  color: $ionic-color-neutral-1200;
 }
-.ionic-background-color-error-100 {
-  background-color: $ionic-color-error-100;
+.ionic-background-color-neutral-1200 {
+  background-color: $ionic-color-neutral-1200;
 }
-.ionic-color-error-200 {
-  color: $ionic-color-error-200;
+.ionic-color-red-100 {
+  color: $ionic-color-red-100;
 }
-.ionic-background-color-error-200 {
-  background-color: $ionic-color-error-200;
+.ionic-background-color-red-100 {
+  background-color: $ionic-color-red-100;
 }
-.ionic-color-error-300 {
-  color: $ionic-color-error-300;
+.ionic-color-red-200 {
+  color: $ionic-color-red-200;
 }
-.ionic-background-color-error-300 {
-  background-color: $ionic-color-error-300;
+.ionic-background-color-red-200 {
+  background-color: $ionic-color-red-200;
 }
-.ionic-color-error-400 {
-  color: $ionic-color-error-400;
+.ionic-color-red-300 {
+  color: $ionic-color-red-300;
 }
-.ionic-background-color-error-400 {
-  background-color: $ionic-color-error-400;
+.ionic-background-color-red-300 {
+  background-color: $ionic-color-red-300;
 }
-.ionic-color-error-500 {
-  color: $ionic-color-error-500;
+.ionic-color-red-400 {
+  color: $ionic-color-red-400;
 }
-.ionic-background-color-error-500 {
-  background-color: $ionic-color-error-500;
+.ionic-background-color-red-400 {
+  background-color: $ionic-color-red-400;
 }
-.ionic-color-error-600 {
-  color: $ionic-color-error-600;
+.ionic-color-red-500 {
+  color: $ionic-color-red-500;
 }
-.ionic-background-color-error-600 {
-  background-color: $ionic-color-error-600;
+.ionic-background-color-red-500 {
+  background-color: $ionic-color-red-500;
 }
-.ionic-color-error-700 {
-  color: $ionic-color-error-700;
+.ionic-color-red-600 {
+  color: $ionic-color-red-600;
 }
-.ionic-background-color-error-700 {
-  background-color: $ionic-color-error-700;
+.ionic-background-color-red-600 {
+  background-color: $ionic-color-red-600;
 }
-.ionic-color-error-800 {
-  color: $ionic-color-error-800;
+.ionic-color-red-700 {
+  color: $ionic-color-red-700;
 }
-.ionic-background-color-error-800 {
-  background-color: $ionic-color-error-800;
+.ionic-background-color-red-700 {
+  background-color: $ionic-color-red-700;
 }
-.ionic-color-error-900 {
-  color: $ionic-color-error-900;
+.ionic-color-red-800 {
+  color: $ionic-color-red-800;
 }
-.ionic-background-color-error-900 {
-  background-color: $ionic-color-error-900;
+.ionic-background-color-red-800 {
+  background-color: $ionic-color-red-800;
 }
-.ionic-color-error {
-  color: $ionic-color-error;
+.ionic-color-red-900 {
+  color: $ionic-color-red-900;
 }
-.ionic-background-color-error {
-  background-color: $ionic-color-error;
+.ionic-background-color-red-900 {
+  background-color: $ionic-color-red-900;
 }
-.ionic-color-warning-10 {
-  color: $ionic-color-warning-10;
+.ionic-color-red-1000 {
+  color: $ionic-color-red-1000;
 }
-.ionic-background-color-warning-10 {
-  background-color: $ionic-color-warning-10;
+.ionic-background-color-red-1000 {
+  background-color: $ionic-color-red-1000;
 }
-.ionic-color-warning-50 {
-  color: $ionic-color-warning-50;
+.ionic-color-red-1100 {
+  color: $ionic-color-red-1100;
 }
-.ionic-background-color-warning-50 {
-  background-color: $ionic-color-warning-50;
+.ionic-background-color-red-1100 {
+  background-color: $ionic-color-red-1100;
 }
-.ionic-color-warning-100 {
-  color: $ionic-color-warning-100;
+.ionic-color-red-1200 {
+  color: $ionic-color-red-1200;
 }
-.ionic-background-color-warning-100 {
-  background-color: $ionic-color-warning-100;
+.ionic-background-color-red-1200 {
+  background-color: $ionic-color-red-1200;
 }
-.ionic-color-warning-200 {
-  color: $ionic-color-warning-200;
+.ionic-color-pumpkin-100 {
+  color: $ionic-color-pumpkin-100;
 }
-.ionic-background-color-warning-200 {
-  background-color: $ionic-color-warning-200;
+.ionic-background-color-pumpkin-100 {
+  background-color: $ionic-color-pumpkin-100;
 }
-.ionic-color-warning-300 {
-  color: $ionic-color-warning-300;
+.ionic-color-pumpkin-200 {
+  color: $ionic-color-pumpkin-200;
 }
-.ionic-background-color-warning-300 {
-  background-color: $ionic-color-warning-300;
+.ionic-background-color-pumpkin-200 {
+  background-color: $ionic-color-pumpkin-200;
 }
-.ionic-color-warning-400 {
-  color: $ionic-color-warning-400;
+.ionic-color-pumpkin-300 {
+  color: $ionic-color-pumpkin-300;
 }
-.ionic-background-color-warning-400 {
-  background-color: $ionic-color-warning-400;
+.ionic-background-color-pumpkin-300 {
+  background-color: $ionic-color-pumpkin-300;
 }
-.ionic-color-warning-500 {
-  color: $ionic-color-warning-500;
+.ionic-color-pumpkin-400 {
+  color: $ionic-color-pumpkin-400;
 }
-.ionic-background-color-warning-500 {
-  background-color: $ionic-color-warning-500;
+.ionic-background-color-pumpkin-400 {
+  background-color: $ionic-color-pumpkin-400;
 }
-.ionic-color-warning-600 {
-  color: $ionic-color-warning-600;
+.ionic-color-pumpkin-500 {
+  color: $ionic-color-pumpkin-500;
 }
-.ionic-background-color-warning-600 {
-  background-color: $ionic-color-warning-600;
+.ionic-background-color-pumpkin-500 {
+  background-color: $ionic-color-pumpkin-500;
 }
-.ionic-color-warning-700 {
-  color: $ionic-color-warning-700;
+.ionic-color-pumpkin-600 {
+  color: $ionic-color-pumpkin-600;
 }
-.ionic-background-color-warning-700 {
-  background-color: $ionic-color-warning-700;
+.ionic-background-color-pumpkin-600 {
+  background-color: $ionic-color-pumpkin-600;
 }
-.ionic-color-warning-800 {
-  color: $ionic-color-warning-800;
+.ionic-color-pumpkin-700 {
+  color: $ionic-color-pumpkin-700;
 }
-.ionic-background-color-warning-800 {
-  background-color: $ionic-color-warning-800;
+.ionic-background-color-pumpkin-700 {
+  background-color: $ionic-color-pumpkin-700;
 }
-.ionic-color-warning-900 {
-  color: $ionic-color-warning-900;
+.ionic-color-pumpkin-800 {
+  color: $ionic-color-pumpkin-800;
 }
-.ionic-background-color-warning-900 {
-  background-color: $ionic-color-warning-900;
+.ionic-background-color-pumpkin-800 {
+  background-color: $ionic-color-pumpkin-800;
 }
-.ionic-color-warning {
-  color: $ionic-color-warning;
+.ionic-color-pumpkin-900 {
+  color: $ionic-color-pumpkin-900;
 }
-.ionic-background-color-warning {
-  background-color: $ionic-color-warning;
+.ionic-background-color-pumpkin-900 {
+  background-color: $ionic-color-pumpkin-900;
 }
-.ionic-color-success-10 {
-  color: $ionic-color-success-10;
+.ionic-color-pumpkin-1000 {
+  color: $ionic-color-pumpkin-1000;
 }
-.ionic-background-color-success-10 {
-  background-color: $ionic-color-success-10;
+.ionic-background-color-pumpkin-1000 {
+  background-color: $ionic-color-pumpkin-1000;
 }
-.ionic-color-success-50 {
-  color: $ionic-color-success-50;
+.ionic-color-pumpkin-1100 {
+  color: $ionic-color-pumpkin-1100;
 }
-.ionic-background-color-success-50 {
-  background-color: $ionic-color-success-50;
+.ionic-background-color-pumpkin-1100 {
+  background-color: $ionic-color-pumpkin-1100;
 }
-.ionic-color-success-100 {
-  color: $ionic-color-success-100;
+.ionic-color-pumpkin-1200 {
+  color: $ionic-color-pumpkin-1200;
 }
-.ionic-background-color-success-100 {
-  background-color: $ionic-color-success-100;
+.ionic-background-color-pumpkin-1200 {
+  background-color: $ionic-color-pumpkin-1200;
 }
-.ionic-color-success-200 {
-  color: $ionic-color-success-200;
+.ionic-color-orange-100 {
+  color: $ionic-color-orange-100;
 }
-.ionic-background-color-success-200 {
-  background-color: $ionic-color-success-200;
+.ionic-background-color-orange-100 {
+  background-color: $ionic-color-orange-100;
 }
-.ionic-color-success-300 {
-  color: $ionic-color-success-300;
+.ionic-color-orange-200 {
+  color: $ionic-color-orange-200;
 }
-.ionic-background-color-success-300 {
-  background-color: $ionic-color-success-300;
+.ionic-background-color-orange-200 {
+  background-color: $ionic-color-orange-200;
 }
-.ionic-color-success-400 {
-  color: $ionic-color-success-400;
+.ionic-color-orange-300 {
+  color: $ionic-color-orange-300;
 }
-.ionic-background-color-success-400 {
-  background-color: $ionic-color-success-400;
+.ionic-background-color-orange-300 {
+  background-color: $ionic-color-orange-300;
 }
-.ionic-color-success-500 {
-  color: $ionic-color-success-500;
+.ionic-color-orange-400 {
+  color: $ionic-color-orange-400;
 }
-.ionic-background-color-success-500 {
-  background-color: $ionic-color-success-500;
+.ionic-background-color-orange-400 {
+  background-color: $ionic-color-orange-400;
 }
-.ionic-color-success-600 {
-  color: $ionic-color-success-600;
+.ionic-color-orange-500 {
+  color: $ionic-color-orange-500;
 }
-.ionic-background-color-success-600 {
-  background-color: $ionic-color-success-600;
+.ionic-background-color-orange-500 {
+  background-color: $ionic-color-orange-500;
 }
-.ionic-color-success-700 {
-  color: $ionic-color-success-700;
+.ionic-color-orange-600 {
+  color: $ionic-color-orange-600;
 }
-.ionic-background-color-success-700 {
-  background-color: $ionic-color-success-700;
+.ionic-background-color-orange-600 {
+  background-color: $ionic-color-orange-600;
 }
-.ionic-color-success-800 {
-  color: $ionic-color-success-800;
+.ionic-color-orange-700 {
+  color: $ionic-color-orange-700;
 }
-.ionic-background-color-success-800 {
-  background-color: $ionic-color-success-800;
+.ionic-background-color-orange-700 {
+  background-color: $ionic-color-orange-700;
 }
-.ionic-color-success-900 {
-  color: $ionic-color-success-900;
+.ionic-color-orange-800 {
+  color: $ionic-color-orange-800;
 }
-.ionic-background-color-success-900 {
-  background-color: $ionic-color-success-900;
+.ionic-background-color-orange-800 {
+  background-color: $ionic-color-orange-800;
 }
-.ionic-color-success {
-  color: $ionic-color-success;
+.ionic-color-orange-900 {
+  color: $ionic-color-orange-900;
 }
-.ionic-background-color-success {
-  background-color: $ionic-color-success;
+.ionic-background-color-orange-900 {
+  background-color: $ionic-color-orange-900;
 }
-.ionic-color-info-10 {
-  color: $ionic-color-info-10;
+.ionic-color-orange-1000 {
+  color: $ionic-color-orange-1000;
 }
-.ionic-background-color-info-10 {
-  background-color: $ionic-color-info-10;
+.ionic-background-color-orange-1000 {
+  background-color: $ionic-color-orange-1000;
 }
-.ionic-color-info-50 {
-  color: $ionic-color-info-50;
+.ionic-color-orange-1100 {
+  color: $ionic-color-orange-1100;
 }
-.ionic-background-color-info-50 {
-  background-color: $ionic-color-info-50;
+.ionic-background-color-orange-1100 {
+  background-color: $ionic-color-orange-1100;
+}
+.ionic-color-orange-1200 {
+  color: $ionic-color-orange-1200;
+}
+.ionic-background-color-orange-1200 {
+  background-color: $ionic-color-orange-1200;
+}
+.ionic-color-yellow-100 {
+  color: $ionic-color-yellow-100;
+}
+.ionic-background-color-yellow-100 {
+  background-color: $ionic-color-yellow-100;
+}
+.ionic-color-yellow-200 {
+  color: $ionic-color-yellow-200;
+}
+.ionic-background-color-yellow-200 {
+  background-color: $ionic-color-yellow-200;
+}
+.ionic-color-yellow-300 {
+  color: $ionic-color-yellow-300;
+}
+.ionic-background-color-yellow-300 {
+  background-color: $ionic-color-yellow-300;
+}
+.ionic-color-yellow-400 {
+  color: $ionic-color-yellow-400;
+}
+.ionic-background-color-yellow-400 {
+  background-color: $ionic-color-yellow-400;
+}
+.ionic-color-yellow-500 {
+  color: $ionic-color-yellow-500;
+}
+.ionic-background-color-yellow-500 {
+  background-color: $ionic-color-yellow-500;
+}
+.ionic-color-yellow-600 {
+  color: $ionic-color-yellow-600;
+}
+.ionic-background-color-yellow-600 {
+  background-color: $ionic-color-yellow-600;
+}
+.ionic-color-yellow-700 {
+  color: $ionic-color-yellow-700;
+}
+.ionic-background-color-yellow-700 {
+  background-color: $ionic-color-yellow-700;
+}
+.ionic-color-yellow-800 {
+  color: $ionic-color-yellow-800;
+}
+.ionic-background-color-yellow-800 {
+  background-color: $ionic-color-yellow-800;
+}
+.ionic-color-yellow-900 {
+  color: $ionic-color-yellow-900;
+}
+.ionic-background-color-yellow-900 {
+  background-color: $ionic-color-yellow-900;
+}
+.ionic-color-yellow-1000 {
+  color: $ionic-color-yellow-1000;
+}
+.ionic-background-color-yellow-1000 {
+  background-color: $ionic-color-yellow-1000;
+}
+.ionic-color-yellow-1100 {
+  color: $ionic-color-yellow-1100;
+}
+.ionic-background-color-yellow-1100 {
+  background-color: $ionic-color-yellow-1100;
+}
+.ionic-color-yellow-1200 {
+  color: $ionic-color-yellow-1200;
+}
+.ionic-background-color-yellow-1200 {
+  background-color: $ionic-color-yellow-1200;
+}
+.ionic-color-lime-100 {
+  color: $ionic-color-lime-100;
+}
+.ionic-background-color-lime-100 {
+  background-color: $ionic-color-lime-100;
+}
+.ionic-color-lime-200 {
+  color: $ionic-color-lime-200;
+}
+.ionic-background-color-lime-200 {
+  background-color: $ionic-color-lime-200;
+}
+.ionic-color-lime-300 {
+  color: $ionic-color-lime-300;
+}
+.ionic-background-color-lime-300 {
+  background-color: $ionic-color-lime-300;
+}
+.ionic-color-lime-400 {
+  color: $ionic-color-lime-400;
+}
+.ionic-background-color-lime-400 {
+  background-color: $ionic-color-lime-400;
+}
+.ionic-color-lime-500 {
+  color: $ionic-color-lime-500;
+}
+.ionic-background-color-lime-500 {
+  background-color: $ionic-color-lime-500;
+}
+.ionic-color-lime-600 {
+  color: $ionic-color-lime-600;
+}
+.ionic-background-color-lime-600 {
+  background-color: $ionic-color-lime-600;
+}
+.ionic-color-lime-700 {
+  color: $ionic-color-lime-700;
+}
+.ionic-background-color-lime-700 {
+  background-color: $ionic-color-lime-700;
+}
+.ionic-color-lime-800 {
+  color: $ionic-color-lime-800;
+}
+.ionic-background-color-lime-800 {
+  background-color: $ionic-color-lime-800;
+}
+.ionic-color-lime-900 {
+  color: $ionic-color-lime-900;
+}
+.ionic-background-color-lime-900 {
+  background-color: $ionic-color-lime-900;
+}
+.ionic-color-lime-1000 {
+  color: $ionic-color-lime-1000;
+}
+.ionic-background-color-lime-1000 {
+  background-color: $ionic-color-lime-1000;
+}
+.ionic-color-lime-1100 {
+  color: $ionic-color-lime-1100;
+}
+.ionic-background-color-lime-1100 {
+  background-color: $ionic-color-lime-1100;
+}
+.ionic-color-lime-1200 {
+  color: $ionic-color-lime-1200;
+}
+.ionic-background-color-lime-1200 {
+  background-color: $ionic-color-lime-1200;
+}
+.ionic-color-green-100 {
+  color: $ionic-color-green-100;
+}
+.ionic-background-color-green-100 {
+  background-color: $ionic-color-green-100;
+}
+.ionic-color-green-200 {
+  color: $ionic-color-green-200;
+}
+.ionic-background-color-green-200 {
+  background-color: $ionic-color-green-200;
+}
+.ionic-color-green-300 {
+  color: $ionic-color-green-300;
+}
+.ionic-background-color-green-300 {
+  background-color: $ionic-color-green-300;
+}
+.ionic-color-green-400 {
+  color: $ionic-color-green-400;
+}
+.ionic-background-color-green-400 {
+  background-color: $ionic-color-green-400;
+}
+.ionic-color-green-500 {
+  color: $ionic-color-green-500;
+}
+.ionic-background-color-green-500 {
+  background-color: $ionic-color-green-500;
+}
+.ionic-color-green-600 {
+  color: $ionic-color-green-600;
+}
+.ionic-background-color-green-600 {
+  background-color: $ionic-color-green-600;
+}
+.ionic-color-green-700 {
+  color: $ionic-color-green-700;
+}
+.ionic-background-color-green-700 {
+  background-color: $ionic-color-green-700;
+}
+.ionic-color-green-800 {
+  color: $ionic-color-green-800;
+}
+.ionic-background-color-green-800 {
+  background-color: $ionic-color-green-800;
+}
+.ionic-color-green-900 {
+  color: $ionic-color-green-900;
+}
+.ionic-background-color-green-900 {
+  background-color: $ionic-color-green-900;
+}
+.ionic-color-green-1000 {
+  color: $ionic-color-green-1000;
+}
+.ionic-background-color-green-1000 {
+  background-color: $ionic-color-green-1000;
+}
+.ionic-color-green-1100 {
+  color: $ionic-color-green-1100;
+}
+.ionic-background-color-green-1100 {
+  background-color: $ionic-color-green-1100;
+}
+.ionic-color-green-1200 {
+  color: $ionic-color-green-1200;
+}
+.ionic-background-color-green-1200 {
+  background-color: $ionic-color-green-1200;
+}
+.ionic-color-teal-100 {
+  color: $ionic-color-teal-100;
+}
+.ionic-background-color-teal-100 {
+  background-color: $ionic-color-teal-100;
+}
+.ionic-color-teal-200 {
+  color: $ionic-color-teal-200;
+}
+.ionic-background-color-teal-200 {
+  background-color: $ionic-color-teal-200;
+}
+.ionic-color-teal-300 {
+  color: $ionic-color-teal-300;
+}
+.ionic-background-color-teal-300 {
+  background-color: $ionic-color-teal-300;
+}
+.ionic-color-teal-400 {
+  color: $ionic-color-teal-400;
+}
+.ionic-background-color-teal-400 {
+  background-color: $ionic-color-teal-400;
+}
+.ionic-color-teal-500 {
+  color: $ionic-color-teal-500;
+}
+.ionic-background-color-teal-500 {
+  background-color: $ionic-color-teal-500;
+}
+.ionic-color-teal-600 {
+  color: $ionic-color-teal-600;
+}
+.ionic-background-color-teal-600 {
+  background-color: $ionic-color-teal-600;
+}
+.ionic-color-teal-700 {
+  color: $ionic-color-teal-700;
+}
+.ionic-background-color-teal-700 {
+  background-color: $ionic-color-teal-700;
+}
+.ionic-color-teal-800 {
+  color: $ionic-color-teal-800;
+}
+.ionic-background-color-teal-800 {
+  background-color: $ionic-color-teal-800;
+}
+.ionic-color-teal-900 {
+  color: $ionic-color-teal-900;
+}
+.ionic-background-color-teal-900 {
+  background-color: $ionic-color-teal-900;
+}
+.ionic-color-teal-1000 {
+  color: $ionic-color-teal-1000;
+}
+.ionic-background-color-teal-1000 {
+  background-color: $ionic-color-teal-1000;
+}
+.ionic-color-teal-1100 {
+  color: $ionic-color-teal-1100;
+}
+.ionic-background-color-teal-1100 {
+  background-color: $ionic-color-teal-1100;
+}
+.ionic-color-teal-1200 {
+  color: $ionic-color-teal-1200;
+}
+.ionic-background-color-teal-1200 {
+  background-color: $ionic-color-teal-1200;
+}
+.ionic-color-aqua-100 {
+  color: $ionic-color-aqua-100;
+}
+.ionic-background-color-aqua-100 {
+  background-color: $ionic-color-aqua-100;
+}
+.ionic-color-aqua-200 {
+  color: $ionic-color-aqua-200;
+}
+.ionic-background-color-aqua-200 {
+  background-color: $ionic-color-aqua-200;
+}
+.ionic-color-aqua-300 {
+  color: $ionic-color-aqua-300;
+}
+.ionic-background-color-aqua-300 {
+  background-color: $ionic-color-aqua-300;
+}
+.ionic-color-aqua-400 {
+  color: $ionic-color-aqua-400;
+}
+.ionic-background-color-aqua-400 {
+  background-color: $ionic-color-aqua-400;
+}
+.ionic-color-aqua-500 {
+  color: $ionic-color-aqua-500;
+}
+.ionic-background-color-aqua-500 {
+  background-color: $ionic-color-aqua-500;
+}
+.ionic-color-aqua-600 {
+  color: $ionic-color-aqua-600;
+}
+.ionic-background-color-aqua-600 {
+  background-color: $ionic-color-aqua-600;
+}
+.ionic-color-aqua-700 {
+  color: $ionic-color-aqua-700;
+}
+.ionic-background-color-aqua-700 {
+  background-color: $ionic-color-aqua-700;
+}
+.ionic-color-aqua-800 {
+  color: $ionic-color-aqua-800;
+}
+.ionic-background-color-aqua-800 {
+  background-color: $ionic-color-aqua-800;
+}
+.ionic-color-aqua-900 {
+  color: $ionic-color-aqua-900;
+}
+.ionic-background-color-aqua-900 {
+  background-color: $ionic-color-aqua-900;
+}
+.ionic-color-aqua-1000 {
+  color: $ionic-color-aqua-1000;
+}
+.ionic-background-color-aqua-1000 {
+  background-color: $ionic-color-aqua-1000;
+}
+.ionic-color-aqua-1100 {
+  color: $ionic-color-aqua-1100;
+}
+.ionic-background-color-aqua-1100 {
+  background-color: $ionic-color-aqua-1100;
+}
+.ionic-color-aqua-1200 {
+  color: $ionic-color-aqua-1200;
+}
+.ionic-background-color-aqua-1200 {
+  background-color: $ionic-color-aqua-1200;
+}
+.ionic-color-blue-100 {
+  color: $ionic-color-blue-100;
+}
+.ionic-background-color-blue-100 {
+  background-color: $ionic-color-blue-100;
+}
+.ionic-color-blue-200 {
+  color: $ionic-color-blue-200;
+}
+.ionic-background-color-blue-200 {
+  background-color: $ionic-color-blue-200;
+}
+.ionic-color-blue-300 {
+  color: $ionic-color-blue-300;
+}
+.ionic-background-color-blue-300 {
+  background-color: $ionic-color-blue-300;
+}
+.ionic-color-blue-400 {
+  color: $ionic-color-blue-400;
+}
+.ionic-background-color-blue-400 {
+  background-color: $ionic-color-blue-400;
+}
+.ionic-color-blue-500 {
+  color: $ionic-color-blue-500;
+}
+.ionic-background-color-blue-500 {
+  background-color: $ionic-color-blue-500;
+}
+.ionic-color-blue-600 {
+  color: $ionic-color-blue-600;
+}
+.ionic-background-color-blue-600 {
+  background-color: $ionic-color-blue-600;
+}
+.ionic-color-blue-700 {
+  color: $ionic-color-blue-700;
+}
+.ionic-background-color-blue-700 {
+  background-color: $ionic-color-blue-700;
+}
+.ionic-color-blue-800 {
+  color: $ionic-color-blue-800;
+}
+.ionic-background-color-blue-800 {
+  background-color: $ionic-color-blue-800;
+}
+.ionic-color-blue-900 {
+  color: $ionic-color-blue-900;
+}
+.ionic-background-color-blue-900 {
+  background-color: $ionic-color-blue-900;
+}
+.ionic-color-blue-1000 {
+  color: $ionic-color-blue-1000;
+}
+.ionic-background-color-blue-1000 {
+  background-color: $ionic-color-blue-1000;
+}
+.ionic-color-blue-1100 {
+  color: $ionic-color-blue-1100;
+}
+.ionic-background-color-blue-1100 {
+  background-color: $ionic-color-blue-1100;
+}
+.ionic-color-blue-1200 {
+  color: $ionic-color-blue-1200;
+}
+.ionic-background-color-blue-1200 {
+  background-color: $ionic-color-blue-1200;
+}
+.ionic-color-indigo-100 {
+  color: $ionic-color-indigo-100;
+}
+.ionic-background-color-indigo-100 {
+  background-color: $ionic-color-indigo-100;
+}
+.ionic-color-indigo-200 {
+  color: $ionic-color-indigo-200;
+}
+.ionic-background-color-indigo-200 {
+  background-color: $ionic-color-indigo-200;
+}
+.ionic-color-indigo-300 {
+  color: $ionic-color-indigo-300;
+}
+.ionic-background-color-indigo-300 {
+  background-color: $ionic-color-indigo-300;
+}
+.ionic-color-indigo-400 {
+  color: $ionic-color-indigo-400;
+}
+.ionic-background-color-indigo-400 {
+  background-color: $ionic-color-indigo-400;
+}
+.ionic-color-indigo-500 {
+  color: $ionic-color-indigo-500;
+}
+.ionic-background-color-indigo-500 {
+  background-color: $ionic-color-indigo-500;
+}
+.ionic-color-indigo-600 {
+  color: $ionic-color-indigo-600;
+}
+.ionic-background-color-indigo-600 {
+  background-color: $ionic-color-indigo-600;
+}
+.ionic-color-indigo-700 {
+  color: $ionic-color-indigo-700;
+}
+.ionic-background-color-indigo-700 {
+  background-color: $ionic-color-indigo-700;
+}
+.ionic-color-indigo-800 {
+  color: $ionic-color-indigo-800;
+}
+.ionic-background-color-indigo-800 {
+  background-color: $ionic-color-indigo-800;
+}
+.ionic-color-indigo-900 {
+  color: $ionic-color-indigo-900;
+}
+.ionic-background-color-indigo-900 {
+  background-color: $ionic-color-indigo-900;
+}
+.ionic-color-indigo-1000 {
+  color: $ionic-color-indigo-1000;
+}
+.ionic-background-color-indigo-1000 {
+  background-color: $ionic-color-indigo-1000;
+}
+.ionic-color-indigo-1100 {
+  color: $ionic-color-indigo-1100;
+}
+.ionic-background-color-indigo-1100 {
+  background-color: $ionic-color-indigo-1100;
+}
+.ionic-color-indigo-1200 {
+  color: $ionic-color-indigo-1200;
+}
+.ionic-background-color-indigo-1200 {
+  background-color: $ionic-color-indigo-1200;
+}
+.ionic-color-violet-100 {
+  color: $ionic-color-violet-100;
+}
+.ionic-background-color-violet-100 {
+  background-color: $ionic-color-violet-100;
+}
+.ionic-color-violet-200 {
+  color: $ionic-color-violet-200;
+}
+.ionic-background-color-violet-200 {
+  background-color: $ionic-color-violet-200;
+}
+.ionic-color-violet-300 {
+  color: $ionic-color-violet-300;
+}
+.ionic-background-color-violet-300 {
+  background-color: $ionic-color-violet-300;
+}
+.ionic-color-violet-400 {
+  color: $ionic-color-violet-400;
+}
+.ionic-background-color-violet-400 {
+  background-color: $ionic-color-violet-400;
+}
+.ionic-color-violet-500 {
+  color: $ionic-color-violet-500;
+}
+.ionic-background-color-violet-500 {
+  background-color: $ionic-color-violet-500;
+}
+.ionic-color-violet-600 {
+  color: $ionic-color-violet-600;
+}
+.ionic-background-color-violet-600 {
+  background-color: $ionic-color-violet-600;
+}
+.ionic-color-violet-700 {
+  color: $ionic-color-violet-700;
+}
+.ionic-background-color-violet-700 {
+  background-color: $ionic-color-violet-700;
+}
+.ionic-color-violet-800 {
+  color: $ionic-color-violet-800;
+}
+.ionic-background-color-violet-800 {
+  background-color: $ionic-color-violet-800;
+}
+.ionic-color-violet-900 {
+  color: $ionic-color-violet-900;
+}
+.ionic-background-color-violet-900 {
+  background-color: $ionic-color-violet-900;
+}
+.ionic-color-violet-1000 {
+  color: $ionic-color-violet-1000;
+}
+.ionic-background-color-violet-1000 {
+  background-color: $ionic-color-violet-1000;
+}
+.ionic-color-violet-1100 {
+  color: $ionic-color-violet-1100;
+}
+.ionic-background-color-violet-1100 {
+  background-color: $ionic-color-violet-1100;
+}
+.ionic-color-violet-1200 {
+  color: $ionic-color-violet-1200;
+}
+.ionic-background-color-violet-1200 {
+  background-color: $ionic-color-violet-1200;
+}
+.ionic-color-purple-100 {
+  color: $ionic-color-purple-100;
+}
+.ionic-background-color-purple-100 {
+  background-color: $ionic-color-purple-100;
+}
+.ionic-color-purple-200 {
+  color: $ionic-color-purple-200;
+}
+.ionic-background-color-purple-200 {
+  background-color: $ionic-color-purple-200;
+}
+.ionic-color-purple-300 {
+  color: $ionic-color-purple-300;
+}
+.ionic-background-color-purple-300 {
+  background-color: $ionic-color-purple-300;
+}
+.ionic-color-purple-400 {
+  color: $ionic-color-purple-400;
+}
+.ionic-background-color-purple-400 {
+  background-color: $ionic-color-purple-400;
+}
+.ionic-color-purple-500 {
+  color: $ionic-color-purple-500;
+}
+.ionic-background-color-purple-500 {
+  background-color: $ionic-color-purple-500;
+}
+.ionic-color-purple-600 {
+  color: $ionic-color-purple-600;
+}
+.ionic-background-color-purple-600 {
+  background-color: $ionic-color-purple-600;
+}
+.ionic-color-purple-700 {
+  color: $ionic-color-purple-700;
+}
+.ionic-background-color-purple-700 {
+  background-color: $ionic-color-purple-700;
+}
+.ionic-color-purple-800 {
+  color: $ionic-color-purple-800;
+}
+.ionic-background-color-purple-800 {
+  background-color: $ionic-color-purple-800;
+}
+.ionic-color-purple-900 {
+  color: $ionic-color-purple-900;
+}
+.ionic-background-color-purple-900 {
+  background-color: $ionic-color-purple-900;
+}
+.ionic-color-purple-1000 {
+  color: $ionic-color-purple-1000;
+}
+.ionic-background-color-purple-1000 {
+  background-color: $ionic-color-purple-1000;
+}
+.ionic-color-purple-1100 {
+  color: $ionic-color-purple-1100;
+}
+.ionic-background-color-purple-1100 {
+  background-color: $ionic-color-purple-1100;
+}
+.ionic-color-purple-1200 {
+  color: $ionic-color-purple-1200;
+}
+.ionic-background-color-purple-1200 {
+  background-color: $ionic-color-purple-1200;
+}
+.ionic-color-magenta-100 {
+  color: $ionic-color-magenta-100;
+}
+.ionic-background-color-magenta-100 {
+  background-color: $ionic-color-magenta-100;
+}
+.ionic-color-magenta-200 {
+  color: $ionic-color-magenta-200;
+}
+.ionic-background-color-magenta-200 {
+  background-color: $ionic-color-magenta-200;
+}
+.ionic-color-magenta-300 {
+  color: $ionic-color-magenta-300;
+}
+.ionic-background-color-magenta-300 {
+  background-color: $ionic-color-magenta-300;
+}
+.ionic-color-magenta-400 {
+  color: $ionic-color-magenta-400;
+}
+.ionic-background-color-magenta-400 {
+  background-color: $ionic-color-magenta-400;
+}
+.ionic-color-magenta-500 {
+  color: $ionic-color-magenta-500;
+}
+.ionic-background-color-magenta-500 {
+  background-color: $ionic-color-magenta-500;
+}
+.ionic-color-magenta-600 {
+  color: $ionic-color-magenta-600;
+}
+.ionic-background-color-magenta-600 {
+  background-color: $ionic-color-magenta-600;
+}
+.ionic-color-magenta-700 {
+  color: $ionic-color-magenta-700;
+}
+.ionic-background-color-magenta-700 {
+  background-color: $ionic-color-magenta-700;
+}
+.ionic-color-magenta-800 {
+  color: $ionic-color-magenta-800;
+}
+.ionic-background-color-magenta-800 {
+  background-color: $ionic-color-magenta-800;
+}
+.ionic-color-magenta-900 {
+  color: $ionic-color-magenta-900;
+}
+.ionic-background-color-magenta-900 {
+  background-color: $ionic-color-magenta-900;
+}
+.ionic-color-magenta-1000 {
+  color: $ionic-color-magenta-1000;
+}
+.ionic-background-color-magenta-1000 {
+  background-color: $ionic-color-magenta-1000;
+}
+.ionic-color-magenta-1100 {
+  color: $ionic-color-magenta-1100;
+}
+.ionic-background-color-magenta-1100 {
+  background-color: $ionic-color-magenta-1100;
+}
+.ionic-color-magenta-1200 {
+  color: $ionic-color-magenta-1200;
+}
+.ionic-background-color-magenta-1200 {
+  background-color: $ionic-color-magenta-1200;
+}
+.ionic-color-pink-100 {
+  color: $ionic-color-pink-100;
+}
+.ionic-background-color-pink-100 {
+  background-color: $ionic-color-pink-100;
+}
+.ionic-color-pink-200 {
+  color: $ionic-color-pink-200;
+}
+.ionic-background-color-pink-200 {
+  background-color: $ionic-color-pink-200;
+}
+.ionic-color-pink-300 {
+  color: $ionic-color-pink-300;
+}
+.ionic-background-color-pink-300 {
+  background-color: $ionic-color-pink-300;
+}
+.ionic-color-pink-400 {
+  color: $ionic-color-pink-400;
+}
+.ionic-background-color-pink-400 {
+  background-color: $ionic-color-pink-400;
+}
+.ionic-color-pink-500 {
+  color: $ionic-color-pink-500;
+}
+.ionic-background-color-pink-500 {
+  background-color: $ionic-color-pink-500;
+}
+.ionic-color-pink-600 {
+  color: $ionic-color-pink-600;
+}
+.ionic-background-color-pink-600 {
+  background-color: $ionic-color-pink-600;
+}
+.ionic-color-pink-700 {
+  color: $ionic-color-pink-700;
+}
+.ionic-background-color-pink-700 {
+  background-color: $ionic-color-pink-700;
+}
+.ionic-color-pink-800 {
+  color: $ionic-color-pink-800;
+}
+.ionic-background-color-pink-800 {
+  background-color: $ionic-color-pink-800;
+}
+.ionic-color-pink-900 {
+  color: $ionic-color-pink-900;
+}
+.ionic-background-color-pink-900 {
+  background-color: $ionic-color-pink-900;
+}
+.ionic-color-pink-1000 {
+  color: $ionic-color-pink-1000;
+}
+.ionic-background-color-pink-1000 {
+  background-color: $ionic-color-pink-1000;
+}
+.ionic-color-pink-1100 {
+  color: $ionic-color-pink-1100;
+}
+.ionic-background-color-pink-1100 {
+  background-color: $ionic-color-pink-1100;
+}
+.ionic-color-pink-1200 {
+  color: $ionic-color-pink-1200;
+}
+.ionic-background-color-pink-1200 {
+  background-color: $ionic-color-pink-1200;
+}
+.ionic-color-primary-100 {
+  color: $ionic-color-primary-100;
+}
+.ionic-background-color-primary-100 {
+  background-color: $ionic-color-primary-100;
+}
+.ionic-color-primary-200 {
+  color: $ionic-color-primary-200;
+}
+.ionic-background-color-primary-200 {
+  background-color: $ionic-color-primary-200;
+}
+.ionic-color-primary-300 {
+  color: $ionic-color-primary-300;
+}
+.ionic-background-color-primary-300 {
+  background-color: $ionic-color-primary-300;
+}
+.ionic-color-primary-400 {
+  color: $ionic-color-primary-400;
+}
+.ionic-background-color-primary-400 {
+  background-color: $ionic-color-primary-400;
+}
+.ionic-color-primary-500 {
+  color: $ionic-color-primary-500;
+}
+.ionic-background-color-primary-500 {
+  background-color: $ionic-color-primary-500;
+}
+.ionic-color-primary-600 {
+  color: $ionic-color-primary-600;
+}
+.ionic-background-color-primary-600 {
+  background-color: $ionic-color-primary-600;
+}
+.ionic-color-primary-700 {
+  color: $ionic-color-primary-700;
+}
+.ionic-background-color-primary-700 {
+  background-color: $ionic-color-primary-700;
+}
+.ionic-color-primary-800 {
+  color: $ionic-color-primary-800;
+}
+.ionic-background-color-primary-800 {
+  background-color: $ionic-color-primary-800;
+}
+.ionic-color-primary-900 {
+  color: $ionic-color-primary-900;
+}
+.ionic-background-color-primary-900 {
+  background-color: $ionic-color-primary-900;
+}
+.ionic-color-primary-1000 {
+  color: $ionic-color-primary-1000;
+}
+.ionic-background-color-primary-1000 {
+  background-color: $ionic-color-primary-1000;
+}
+.ionic-color-primary-1100 {
+  color: $ionic-color-primary-1100;
+}
+.ionic-background-color-primary-1100 {
+  background-color: $ionic-color-primary-1100;
+}
+.ionic-color-primary-1200 {
+  color: $ionic-color-primary-1200;
+}
+.ionic-background-color-primary-1200 {
+  background-color: $ionic-color-primary-1200;
+}
+.ionic-color-primary-base {
+  color: $ionic-color-primary-base;
+}
+.ionic-background-color-primary-base {
+  background-color: $ionic-color-primary-base;
 }
 .ionic-color-info-100 {
   color: $ionic-color-info-100;
@@ -438,370 +1701,820 @@
 .ionic-background-color-info-900 {
   background-color: $ionic-color-info-900;
 }
-.ionic-color-info {
-  color: $ionic-color-info;
+.ionic-color-info-1000 {
+  color: $ionic-color-info-1000;
 }
-.ionic-background-color-info {
-  background-color: $ionic-color-info;
+.ionic-background-color-info-1000 {
+  background-color: $ionic-color-info-1000;
+}
+.ionic-color-info-1100 {
+  color: $ionic-color-info-1100;
+}
+.ionic-background-color-info-1100 {
+  background-color: $ionic-color-info-1100;
+}
+.ionic-color-info-1200 {
+  color: $ionic-color-info-1200;
+}
+.ionic-background-color-info-1200 {
+  background-color: $ionic-color-info-1200;
+}
+.ionic-color-warning-100 {
+  color: $ionic-color-warning-100;
+}
+.ionic-background-color-warning-100 {
+  background-color: $ionic-color-warning-100;
+}
+.ionic-color-warning-200 {
+  color: $ionic-color-warning-200;
+}
+.ionic-background-color-warning-200 {
+  background-color: $ionic-color-warning-200;
+}
+.ionic-color-warning-300 {
+  color: $ionic-color-warning-300;
+}
+.ionic-background-color-warning-300 {
+  background-color: $ionic-color-warning-300;
+}
+.ionic-color-warning-400 {
+  color: $ionic-color-warning-400;
+}
+.ionic-background-color-warning-400 {
+  background-color: $ionic-color-warning-400;
+}
+.ionic-color-warning-500 {
+  color: $ionic-color-warning-500;
+}
+.ionic-background-color-warning-500 {
+  background-color: $ionic-color-warning-500;
+}
+.ionic-color-warning-600 {
+  color: $ionic-color-warning-600;
+}
+.ionic-background-color-warning-600 {
+  background-color: $ionic-color-warning-600;
+}
+.ionic-color-warning-700 {
+  color: $ionic-color-warning-700;
+}
+.ionic-background-color-warning-700 {
+  background-color: $ionic-color-warning-700;
+}
+.ionic-color-warning-800 {
+  color: $ionic-color-warning-800;
+}
+.ionic-background-color-warning-800 {
+  background-color: $ionic-color-warning-800;
+}
+.ionic-color-warning-900 {
+  color: $ionic-color-warning-900;
+}
+.ionic-background-color-warning-900 {
+  background-color: $ionic-color-warning-900;
+}
+.ionic-color-warning-1000 {
+  color: $ionic-color-warning-1000;
+}
+.ionic-background-color-warning-1000 {
+  background-color: $ionic-color-warning-1000;
+}
+.ionic-color-warning-1100 {
+  color: $ionic-color-warning-1100;
+}
+.ionic-background-color-warning-1100 {
+  background-color: $ionic-color-warning-1100;
+}
+.ionic-color-warning-1200 {
+  color: $ionic-color-warning-1200;
+}
+.ionic-background-color-warning-1200 {
+  background-color: $ionic-color-warning-1200;
+}
+.ionic-color-danger-100 {
+  color: $ionic-color-danger-100;
+}
+.ionic-background-color-danger-100 {
+  background-color: $ionic-color-danger-100;
+}
+.ionic-color-danger-200 {
+  color: $ionic-color-danger-200;
+}
+.ionic-background-color-danger-200 {
+  background-color: $ionic-color-danger-200;
+}
+.ionic-color-danger-300 {
+  color: $ionic-color-danger-300;
+}
+.ionic-background-color-danger-300 {
+  background-color: $ionic-color-danger-300;
+}
+.ionic-color-danger-400 {
+  color: $ionic-color-danger-400;
+}
+.ionic-background-color-danger-400 {
+  background-color: $ionic-color-danger-400;
+}
+.ionic-color-danger-500 {
+  color: $ionic-color-danger-500;
+}
+.ionic-background-color-danger-500 {
+  background-color: $ionic-color-danger-500;
+}
+.ionic-color-danger-600 {
+  color: $ionic-color-danger-600;
+}
+.ionic-background-color-danger-600 {
+  background-color: $ionic-color-danger-600;
+}
+.ionic-color-danger-700 {
+  color: $ionic-color-danger-700;
+}
+.ionic-background-color-danger-700 {
+  background-color: $ionic-color-danger-700;
+}
+.ionic-color-danger-800 {
+  color: $ionic-color-danger-800;
+}
+.ionic-background-color-danger-800 {
+  background-color: $ionic-color-danger-800;
+}
+.ionic-color-danger-900 {
+  color: $ionic-color-danger-900;
+}
+.ionic-background-color-danger-900 {
+  background-color: $ionic-color-danger-900;
+}
+.ionic-color-danger-1000 {
+  color: $ionic-color-danger-1000;
+}
+.ionic-background-color-danger-1000 {
+  background-color: $ionic-color-danger-1000;
+}
+.ionic-color-danger-1100 {
+  color: $ionic-color-danger-1100;
+}
+.ionic-background-color-danger-1100 {
+  background-color: $ionic-color-danger-1100;
+}
+.ionic-color-danger-1200 {
+  color: $ionic-color-danger-1200;
+}
+.ionic-background-color-danger-1200 {
+  background-color: $ionic-color-danger-1200;
+}
+.ionic-color-success-100 {
+  color: $ionic-color-success-100;
+}
+.ionic-background-color-success-100 {
+  background-color: $ionic-color-success-100;
+}
+.ionic-color-success-200 {
+  color: $ionic-color-success-200;
+}
+.ionic-background-color-success-200 {
+  background-color: $ionic-color-success-200;
+}
+.ionic-color-success-300 {
+  color: $ionic-color-success-300;
+}
+.ionic-background-color-success-300 {
+  background-color: $ionic-color-success-300;
+}
+.ionic-color-success-400 {
+  color: $ionic-color-success-400;
+}
+.ionic-background-color-success-400 {
+  background-color: $ionic-color-success-400;
+}
+.ionic-color-success-500 {
+  color: $ionic-color-success-500;
+}
+.ionic-background-color-success-500 {
+  background-color: $ionic-color-success-500;
+}
+.ionic-color-success-600 {
+  color: $ionic-color-success-600;
+}
+.ionic-background-color-success-600 {
+  background-color: $ionic-color-success-600;
+}
+.ionic-color-success-700 {
+  color: $ionic-color-success-700;
+}
+.ionic-background-color-success-700 {
+  background-color: $ionic-color-success-700;
+}
+.ionic-color-success-800 {
+  color: $ionic-color-success-800;
+}
+.ionic-background-color-success-800 {
+  background-color: $ionic-color-success-800;
+}
+.ionic-color-success-900 {
+  color: $ionic-color-success-900;
+}
+.ionic-background-color-success-900 {
+  background-color: $ionic-color-success-900;
+}
+.ionic-color-success-1000 {
+  color: $ionic-color-success-1000;
+}
+.ionic-background-color-success-1000 {
+  background-color: $ionic-color-success-1000;
+}
+.ionic-color-success-1100 {
+  color: $ionic-color-success-1100;
+}
+.ionic-background-color-success-1100 {
+  background-color: $ionic-color-success-1100;
+}
+.ionic-color-success-1200 {
+  color: $ionic-color-success-1200;
+}
+.ionic-background-color-success-1200 {
+  background-color: $ionic-color-success-1200;
+}
+.ionic-z-index-0 {
+  z-index: $ionic-z-index-0;
+}
+.ionic-z-index-1 {
+  z-index: $ionic-z-index-1;
+}
+.ionic-z-index-2 {
+  z-index: $ionic-z-index-2;
+}
+.ionic-z-index-3 {
+  z-index: $ionic-z-index-3;
+}
+.ionic-z-index-4 {
+  z-index: $ionic-z-index-4;
+}
+.ionic-z-index-500 {
+  z-index: $ionic-z-index-500;
+}
+.ionic-z-index-bottom {
+  z-index: $ionic-z-index-bottom;
+}
+.ionic-z-index-top {
+  z-index: $ionic-z-index-top;
 }
 
-.ionic-font-letter-spacing-none {
-  letter-spacing: $ionic-font-letter-spacing-none;
-}
-.ionic-font-letter-spacing-s {
-  letter-spacing: $ionic-font-letter-spacing-s;
-}
-.ionic-font-letter-spacing-m {
-  letter-spacing: $ionic-font-letter-spacing-m;
-}
-.ionic-font-line-height-xs {
-  line-height: $ionic-font-line-height-xs;
-}
-.ionic-font-line-height-s {
-  line-height: $ionic-font-line-height-s;
-}
-.ionic-font-line-height-m {
-  line-height: $ionic-font-line-height-m;
-}
-.ionic-font-line-height-l {
-  line-height: $ionic-font-line-height-l;
-}
-.ionic-font-line-height-xl {
-  line-height: $ionic-font-line-height-xl;
-}
-.ionic-font-line-height-xxl {
-  line-height: $ionic-font-line-height-xxl;
-}
-.ionic-font-line-height-display-s {
-  line-height: $ionic-font-line-height-display-s;
-}
-.ionic-font-line-height-display-m {
-  line-height: $ionic-font-line-height-display-m;
-}
-.ionic-font-line-height-full {
-  line-height: $ionic-font-line-height-full;
-}
-.ionic-font-size-h1 {
-  font-size: $ionic-font-size-h1;
-}
-.ionic-font-size-h2 {
-  font-size: $ionic-font-size-h2;
-}
-.ionic-font-size-h3 {
-  font-size: $ionic-font-size-h3;
-}
-.ionic-font-size-h4 {
-  font-size: $ionic-font-size-h4;
-}
-.ionic-font-size-h5 {
-  font-size: $ionic-font-size-h5;
-}
-.ionic-font-size-h6 {
-  font-size: $ionic-font-size-h6;
-}
-.ionic-font-size-display-s {
-  font-size: $ionic-font-size-display-s;
-}
-.ionic-font-size-display-m {
-  font-size: $ionic-font-size-display-m;
-}
-.ionic-font-size-s {
-  font-size: $ionic-font-size-s;
-}
-.ionic-font-size-m {
-  font-size: $ionic-font-size-m;
-}
-.ionic-font-size-l {
-  font-size: $ionic-font-size-l;
-}
-.ionic-font-weight-light {
-  font-weight: $ionic-font-weight-light;
-}
-.ionic-font-weight-regular {
+.ionic-display-sm-regular {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-800;
   font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-1100;
+  text-transform: none;
+  text-decoration: none;
 }
-.ionic-font-weight-medium {
-  font-weight: $ionic-font-weight-medium;
+
+.ionic-display-sm-light {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-800;
+  font-weight: $ionic-font-weight-light;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-1100;
+  text-transform: none;
+  text-decoration: none;
 }
-.ionic-font-weight-semi-bold {
-  font-weight: $ionic-font-weight-semi-bold;
+
+.ionic-display-lg-light {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-900;
+  font-weight: $ionic-font-weight-light;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-1200;
+  text-transform: none;
+  text-decoration: none;
 }
-.ionic-font-weight-bold {
+
+.ionic-display-lg-regular {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-900;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-1200;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-heading-h1-regular {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-700;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-900;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-heading-h1-medium {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-700;
   font-weight: $ionic-font-weight-bold;
-}
-.ionic-margin-space-none {
-  --margin-start: #{$ionic-space-none};
-  --margin-end: #{$ionic-space-none};
-  --margin-top: #{$ionic-space-none};
-  --margin-bottom: #{$ionic-space-none};
-
-  @include margin(0);
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-900;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-padding-space-none {
-  --padding-start: #{$ionic-space-none};
-  --padding-end: #{$ionic-space-none};
-  --padding-top: #{$ionic-space-none};
-  --padding-bottom: #{$ionic-space-none};
-
-  @include padding(0);
+.ionic-heading-h1-semi-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-700;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-900;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-margin-space-xxxxs {
-  --margin-start: #{$ionic-space-xxxxs};
-  --margin-end: #{$ionic-space-xxxxs};
-  --margin-top: #{$ionic-space-xxxxs};
-  --margin-bottom: #{$ionic-space-xxxxs};
-
-  @include margin(2px);
+.ionic-heading-h1-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-700;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-900;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-padding-space-xxxxs {
-  --padding-start: #{$ionic-space-xxxxs};
-  --padding-end: #{$ionic-space-xxxxs};
-  --padding-top: #{$ionic-space-xxxxs};
-  --padding-bottom: #{$ionic-space-xxxxs};
-
-  @include padding(2px);
+.ionic-heading-h2-regular {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-650;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-900;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-margin-space-xxxs {
-  --margin-start: #{$ionic-space-xxxs};
-  --margin-end: #{$ionic-space-xxxs};
-  --margin-top: #{$ionic-space-xxxs};
-  --margin-bottom: #{$ionic-space-xxxs};
-
-  @include margin(4px);
+.ionic-heading-h2-medium {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-650;
+  font-weight: $ionic-font-weight-medium;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-900;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-padding-space-xxxs {
-  --padding-start: #{$ionic-space-xxxs};
-  --padding-end: #{$ionic-space-xxxs};
-  --padding-top: #{$ionic-space-xxxs};
-  --padding-bottom: #{$ionic-space-xxxs};
-
-  @include padding(4px);
+.ionic-heading-h2-semi-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-650;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-900;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-margin-space-xxs {
-  --margin-start: #{$ionic-space-xxs};
-  --margin-end: #{$ionic-space-xxs};
-  --margin-top: #{$ionic-space-xxs};
-  --margin-bottom: #{$ionic-space-xxs};
-
-  @include margin(6px);
+.ionic-heading-h2-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-650;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-900;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-padding-space-xxs {
-  --padding-start: #{$ionic-space-xxs};
-  --padding-end: #{$ionic-space-xxs};
-  --padding-top: #{$ionic-space-xxs};
-  --padding-bottom: #{$ionic-space-xxs};
-
-  @include padding(6px);
+.ionic-heading-h3-regular {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-600;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-800;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-margin-space-xs {
-  --margin-start: #{$ionic-space-xs};
-  --margin-end: #{$ionic-space-xs};
-  --margin-top: #{$ionic-space-xs};
-  --margin-bottom: #{$ionic-space-xs};
-
-  @include margin(8px);
+.ionic-heading-h3-semi-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-600;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-800;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-padding-space-xs {
-  --padding-start: #{$ionic-space-xs};
-  --padding-end: #{$ionic-space-xs};
-  --padding-top: #{$ionic-space-xs};
-  --padding-bottom: #{$ionic-space-xs};
-
-  @include padding(8px);
+.ionic-heading-h3-medium {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-600;
+  font-weight: $ionic-font-weight-medium;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-800;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-margin-space-s {
-  --margin-start: #{$ionic-space-s};
-  --margin-end: #{$ionic-space-s};
-  --margin-top: #{$ionic-space-s};
-  --margin-bottom: #{$ionic-space-s};
-
-  @include margin(12px);
+.ionic-heading-h3-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-600;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-800;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-padding-space-s {
-  --padding-start: #{$ionic-space-s};
-  --padding-end: #{$ionic-space-s};
-  --padding-top: #{$ionic-space-s};
-  --padding-bottom: #{$ionic-space-s};
-
-  @include padding(12px);
+.ionic-heading-h4-regular {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-550;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-700;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-margin-space-base {
-  --margin-start: #{$ionic-space-base};
-  --margin-end: #{$ionic-space-base};
-  --margin-top: #{$ionic-space-base};
-  --margin-bottom: #{$ionic-space-base};
-
-  @include margin(16px);
+.ionic-heading-h4-medium {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-550;
+  font-weight: $ionic-font-weight-medium;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-700;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-padding-space-base {
-  --padding-start: #{$ionic-space-base};
-  --padding-end: #{$ionic-space-base};
-  --padding-top: #{$ionic-space-base};
-  --padding-bottom: #{$ionic-space-base};
-
-  @include padding(16px);
+.ionic-heading-h4-semi-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-550;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-700;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-margin-space-m {
-  --margin-start: #{$ionic-space-m};
-  --margin-end: #{$ionic-space-m};
-  --margin-top: #{$ionic-space-m};
-  --margin-bottom: #{$ionic-space-m};
-
-  @include margin(20px);
+.ionic-heading-h4-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-550;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-700;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-padding-space-m {
-  --padding-start: #{$ionic-space-m};
-  --padding-end: #{$ionic-space-m};
-  --padding-top: #{$ionic-space-m};
-  --padding-bottom: #{$ionic-space-m};
-
-  @include padding(20px);
+.ionic-heading-h5-regular {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-500;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-700;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-margin-space-l {
-  --margin-start: #{$ionic-space-l};
-  --margin-end: #{$ionic-space-l};
-  --margin-top: #{$ionic-space-l};
-  --margin-bottom: #{$ionic-space-l};
-
-  @include margin(24px);
+.ionic-heading-h5-medium {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-500;
+  font-weight: $ionic-font-weight-medium;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-700;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-padding-space-l {
-  --padding-start: #{$ionic-space-l};
-  --padding-end: #{$ionic-space-l};
-  --padding-top: #{$ionic-space-l};
-  --padding-bottom: #{$ionic-space-l};
-
-  @include padding(24px);
+.ionic-heading-h5-semi-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-500;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-700;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-margin-space-xl {
-  --margin-start: #{$ionic-space-xl};
-  --margin-end: #{$ionic-space-xl};
-  --margin-top: #{$ionic-space-xl};
-  --margin-bottom: #{$ionic-space-xl};
-
-  @include margin(28px);
+.ionic-heading-h5-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-500;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-700;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-padding-space-xl {
-  --padding-start: #{$ionic-space-xl};
-  --padding-end: #{$ionic-space-xl};
-  --padding-top: #{$ionic-space-xl};
-  --padding-bottom: #{$ionic-space-xl};
-
-  @include padding(28px);
+.ionic-heading-h6-regular {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-450;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-700;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-margin-space-xxl {
-  --margin-start: #{$ionic-space-xxl};
-  --margin-end: #{$ionic-space-xxl};
-  --margin-top: #{$ionic-space-xxl};
-  --margin-bottom: #{$ionic-space-xxl};
-
-  @include margin(32px);
+.ionic-heading-h6-medium {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-450;
+  font-weight: $ionic-font-weight-medium;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-700;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-padding-space-xxl {
-  --padding-start: #{$ionic-space-xxl};
-  --padding-end: #{$ionic-space-xxl};
-  --padding-top: #{$ionic-space-xxl};
-  --padding-bottom: #{$ionic-space-xxl};
-
-  @include padding(32px);
+.ionic-heading-h6-semi-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-450;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-700;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-margin-space-xxxl {
-  --margin-start: #{$ionic-space-xxxl};
-  --margin-end: #{$ionic-space-xxxl};
-  --margin-top: #{$ionic-space-xxxl};
-  --margin-bottom: #{$ionic-space-xxxl};
-
-  @include margin(36px);
+.ionic-heading-h6-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-450;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-700;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-padding-space-xxxl {
-  --padding-start: #{$ionic-space-xxxl};
-  --padding-end: #{$ionic-space-xxxl};
-  --padding-top: #{$ionic-space-xxxl};
-  --padding-bottom: #{$ionic-space-xxxl};
-
-  @include padding(36px);
+.ionic-body-sm-regular {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-300;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-400;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-margin-space-xxxxl {
-  --margin-start: #{$ionic-space-xxxxl};
-  --margin-end: #{$ionic-space-xxxxl};
-  --margin-top: #{$ionic-space-xxxxl};
-  --margin-bottom: #{$ionic-space-xxxxl};
-
-  @include margin(40px);
+.ionic-body-sm-medium {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-300;
+  font-weight: $ionic-font-weight-medium;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-400;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-padding-space-xxxxl {
-  --padding-start: #{$ionic-space-xxxxl};
-  --padding-end: #{$ionic-space-xxxxl};
-  --padding-top: #{$ionic-space-xxxxl};
-  --padding-bottom: #{$ionic-space-xxxxl};
-
-  @include padding(40px);
+.ionic-body-sm-semi-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-300;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-400;
+  text-transform: none;
+  text-decoration: none;
 }
 
-.ionic-border-radius-square {
-  border-radius: $ionic-border-radius-square;
+.ionic-body-sm-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-300;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-400;
+  text-transform: none;
+  text-decoration: none;
 }
-.ionic-border-radius-rounded-small {
-  border-radius: $ionic-border-radius-rounded-small;
+
+.ionic-body-sm-link {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-300;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-400;
+  text-transform: none;
+  text-decoration: underline;
 }
-.ionic-border-radius-rounded-medium {
-  border-radius: $ionic-border-radius-rounded-medium;
+
+.ionic-body-sm-italic {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-300;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-400;
+  text-transform: none;
+  text-decoration: none;
 }
-.ionic-border-radius-rounded-large {
-  border-radius: $ionic-border-radius-rounded-large;
+
+.ionic-body-md-medium {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-350;
+  font-weight: $ionic-font-weight-medium;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
 }
-.ionic-border-radius-rounded-x-large {
-  border-radius: $ionic-border-radius-rounded-x-large;
+
+.ionic-body-md-semi-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-350;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
 }
-.ionic-border-radius-rounded-full {
-  border-radius: $ionic-border-radius-rounded-full;
+
+.ionic-body-md-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-350;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
 }
-.ionic-border-size-small {
-  border-width: $ionic-border-size-small;
+
+.ionic-body-md-regular {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-350;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
 }
-.ionic-border-size-medium {
-  border-width: $ionic-border-size-medium;
+
+.ionic-body-md-link {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-350;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: underline;
 }
-.ionic-border-size-large {
-  border-width: $ionic-border-size-large;
+
+.ionic-body-md-italic {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-350;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
 }
-.ionic-elevation-0 {
-  box-shadow: $ionic-elevation-0;
+
+.ionic-body-lg-regular {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-400;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
 }
-.ionic-elevation-1 {
-  box-shadow: $ionic-elevation-1;
+
+.ionic-body-lg-medium {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-400;
+  font-weight: $ionic-font-weight-medium;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
 }
-.ionic-elevation-2 {
-  box-shadow: $ionic-elevation-2;
+
+.ionic-body-lg-semi-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-400;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
 }
-.ionic-elevation-3 {
-  box-shadow: $ionic-elevation-3;
+
+.ionic-body-lg-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-400;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
 }
-.ionic-elevation-4 {
-  box-shadow: $ionic-elevation-4;
+
+.ionic-body-lg-link {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-400;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: underline;
+}
+
+.ionic-body-lg-italic {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-400;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-0;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-action-sm {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-300;
+  font-weight: $ionic-font-weight-medium;
+  letter-spacing: $ionic-letter-spacing-1;
+  line-height: $ionic-line-height-400;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-action-md {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-350;
+  font-weight: $ionic-font-weight-medium;
+  letter-spacing: $ionic-letter-spacing-1;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-action-lg {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-400;
+  font-weight: $ionic-font-weight-medium;
+  letter-spacing: $ionic-letter-spacing-1;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-action-xl {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-500;
+  font-weight: $ionic-font-weight-medium;
+  letter-spacing: $ionic-letter-spacing-1;
+  line-height: $ionic-line-height-600;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-overline-regular {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-300;
+  font-weight: $ionic-font-weight-regular;
+  letter-spacing: $ionic-letter-spacing-2;
+  line-height: $ionic-line-height-400;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-overline-medium {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-300;
+  font-weight: $ionic-font-weight-medium;
+  letter-spacing: $ionic-letter-spacing-2;
+  line-height: $ionic-line-height-400;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-overline-semi-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-300;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-2;
+  line-height: $ionic-line-height-400;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-overline-bold {
+  font-family: $ionic-font-family;
+  font-size: $ionic-font-size-300;
+  font-weight: $ionic-font-weight-bold;
+  letter-spacing: $ionic-letter-spacing-2;
+  line-height: $ionic-line-height-400;
+  text-transform: none;
+  text-decoration: none;
+}
+
+.ionic-state-focus-0 {
+  color: $ionic-state-focus-0;
+}
+.ionic-background-state-focus-0 {
+  background-color: $ionic-state-focus-0;
+}
+.ionic-state-focus-100 {
+  color: $ionic-state-focus-100;
+}
+.ionic-background-state-focus-100 {
+  background-color: $ionic-state-focus-100;
+}
+.ionic-state-focus-200 {
+  color: $ionic-state-focus-200;
+}
+.ionic-background-state-focus-200 {
+  background-color: $ionic-state-focus-200;
 }
diff --git a/core/src/foundations/ionic.vars.scss b/core/src/foundations/ionic.vars.scss
index 694aa2fa3b..d37ef3cfff 100644
--- a/core/src/foundations/ionic.vars.scss
+++ b/core/src/foundations/ionic.vars.scss
@@ -3,213 +3,1151 @@
  * Ionic Design System
  */
 
-$ionic-color-primary-10: var(--ionic-color-primary-10, #f7faff);
-$ionic-color-primary-10-rgb: var(--ionic-color-primary-10-rgb, 247, 250, 255);
-$ionic-color-primary-50: var(--ionic-color-primary-50, #cbdffe);
-$ionic-color-primary-50-rgb: var(--ionic-color-primary-50-rgb, 203, 223, 254);
-$ionic-color-primary-100: var(--ionic-color-primary-100, #9ec4fd);
-$ionic-color-primary-100-rgb: var(--ionic-color-primary-100-rgb, 158, 196, 253);
-$ionic-color-primary-200: var(--ionic-color-primary-200, #74aafc);
-$ionic-color-primary-200-rgb: var(--ionic-color-primary-200-rgb, 116, 170, 252);
-$ionic-color-primary-300: var(--ionic-color-primary-300, #4991fb);
-$ionic-color-primary-300-rgb: var(--ionic-color-primary-300-rgb, 73, 145, 251);
-$ionic-color-primary-400: var(--ionic-color-primary-400, #1068eb);
-$ionic-color-primary-400-rgb: var(--ionic-color-primary-400-rgb, 16, 104, 235);
-$ionic-color-primary-500: var(--ionic-color-primary-500, #0750be);
-$ionic-color-primary-500-rgb: var(--ionic-color-primary-500-rgb, 7, 80, 190);
-$ionic-color-primary-600: var(--ionic-color-primary-600, #053d90);
-$ionic-color-primary-600-rgb: var(--ionic-color-primary-600-rgb, 5, 61, 144);
-$ionic-color-primary-700: var(--ionic-color-primary-700, #062b63);
-$ionic-color-primary-700-rgb: var(--ionic-color-primary-700-rgb, 6, 43, 99);
-$ionic-color-primary-800: var(--ionic-color-primary-800, #061935);
-$ionic-color-primary-800-rgb: var(--ionic-color-primary-800-rgb, 6, 25, 53);
-$ionic-color-primary-900: var(--ionic-color-primary-900, #010408);
-$ionic-color-primary-900-rgb: var(--ionic-color-primary-900-rgb, 1, 4, 8);
-$ionic-color-primary: var(--ionic-color-primary, #1068eb);
-$ionic-color-primary-rgb: var(--ionic-color-primary-rgb, 16, 104, 235);
-$ionic-color-secondary: var(--ionic-color-secondary, #303d60);
-$ionic-color-secondary-rgb: var(--ionic-color-secondary-rgb, 48, 61, 96);
-$ionic-color-neutral-0: var(--ionic-color-neutral-0, #ffffff);
-$ionic-color-neutral-0-rgb: var(--ionic-color-neutral-0-rgb, 255, 255, 255);
-$ionic-color-neutral-10: var(--ionic-color-neutral-10, #f5f5f5);
-$ionic-color-neutral-10-rgb: var(--ionic-color-neutral-10-rgb, 245, 245, 245);
-$ionic-color-neutral-50: var(--ionic-color-neutral-50, #e7e7e7);
-$ionic-color-neutral-50-rgb: var(--ionic-color-neutral-50-rgb, 231, 231, 231);
-$ionic-color-neutral-100: var(--ionic-color-neutral-100, #dadada);
-$ionic-color-neutral-100-rgb: var(--ionic-color-neutral-100-rgb, 218, 218, 218);
-$ionic-color-neutral-200: var(--ionic-color-neutral-200, #c9c9c9);
-$ionic-color-neutral-200-rgb: var(--ionic-color-neutral-200-rgb, 201, 201, 201);
-$ionic-color-neutral-300: var(--ionic-color-neutral-300, #b8b8b8);
-$ionic-color-neutral-300-rgb: var(--ionic-color-neutral-300-rgb, 184, 184, 184);
-$ionic-color-neutral-400: var(--ionic-color-neutral-400, #9a9a9a);
-$ionic-color-neutral-400-rgb: var(--ionic-color-neutral-400-rgb, 154, 154, 154);
-$ionic-color-neutral-500: var(--ionic-color-neutral-500, #767676);
-$ionic-color-neutral-500-rgb: var(--ionic-color-neutral-500-rgb, 118, 118, 118);
-$ionic-color-neutral-600: var(--ionic-color-neutral-600, #535353);
-$ionic-color-neutral-600-rgb: var(--ionic-color-neutral-600-rgb, 83, 83, 83);
-$ionic-color-neutral-700: var(--ionic-color-neutral-700, #373737);
-$ionic-color-neutral-700-rgb: var(--ionic-color-neutral-700-rgb, 55, 55, 55);
-$ionic-color-neutral-800: var(--ionic-color-neutral-800, #212121);
-$ionic-color-neutral-800-rgb: var(--ionic-color-neutral-800-rgb, 33, 33, 33);
-$ionic-color-neutral-900: var(--ionic-color-neutral-900, #05080f);
-$ionic-color-neutral-900-rgb: var(--ionic-color-neutral-900-rgb, 5, 8, 15);
-$ionic-color-error-10: var(--ionic-color-error-10, #fffafa);
-$ionic-color-error-10-rgb: var(--ionic-color-error-10-rgb, 255, 250, 250);
-$ionic-color-error-50: var(--ionic-color-error-50, #ffd5d5);
-$ionic-color-error-50-rgb: var(--ionic-color-error-50-rgb, 255, 213, 213);
-$ionic-color-error-100: var(--ionic-color-error-100, #ffafaf);
-$ionic-color-error-100-rgb: var(--ionic-color-error-100-rgb, 255, 175, 175);
-$ionic-color-error-200: var(--ionic-color-error-200, #ff8a8a);
-$ionic-color-error-200-rgb: var(--ionic-color-error-200-rgb, 255, 138, 138);
-$ionic-color-error-300: var(--ionic-color-error-300, #ff6666);
-$ionic-color-error-300-rgb: var(--ionic-color-error-300-rgb, 255, 102, 102);
-$ionic-color-error-400: var(--ionic-color-error-400, #f72c2c);
-$ionic-color-error-400-rgb: var(--ionic-color-error-400-rgb, 247, 44, 44);
-$ionic-color-error-500: var(--ionic-color-error-500, #c71212);
-$ionic-color-error-500-rgb: var(--ionic-color-error-500-rgb, 199, 18, 18);
-$ionic-color-error-600: var(--ionic-color-error-600, #970606);
-$ionic-color-error-600-rgb: var(--ionic-color-error-600-rgb, 151, 6, 6);
-$ionic-color-error-700: var(--ionic-color-error-700, #670202);
-$ionic-color-error-700-rgb: var(--ionic-color-error-700-rgb, 103, 2, 2);
-$ionic-color-error-800: var(--ionic-color-error-800, #380101);
-$ionic-color-error-800-rgb: var(--ionic-color-error-800-rgb, 56, 1, 1);
-$ionic-color-error-900: var(--ionic-color-error-900, #080000);
-$ionic-color-error-900-rgb: var(--ionic-color-error-900-rgb, 8, 0, 0);
-$ionic-color-error: var(--ionic-color-error, #f72c2c);
-$ionic-color-error-rgb: var(--ionic-color-error-rgb, 247, 44, 44);
-$ionic-color-warning-10: var(--ionic-color-warning-10, #fffdfa);
-$ionic-color-warning-10-rgb: var(--ionic-color-warning-10-rgb, 255, 253, 250);
-$ionic-color-warning-50: var(--ionic-color-warning-50, #ffecce);
-$ionic-color-warning-50-rgb: var(--ionic-color-warning-50-rgb, 255, 236, 206);
-$ionic-color-warning-100: var(--ionic-color-warning-100, #ffdba0);
-$ionic-color-warning-100-rgb: var(--ionic-color-warning-100-rgb, 255, 219, 160);
-$ionic-color-warning-200: var(--ionic-color-warning-200, #ffca73);
-$ionic-color-warning-200-rgb: var(--ionic-color-warning-200-rgb, 255, 202, 115);
-$ionic-color-warning-300: var(--ionic-color-warning-300, #ffb845);
-$ionic-color-warning-300-rgb: var(--ionic-color-warning-300-rgb, 255, 184, 69);
-$ionic-color-warning-400: var(--ionic-color-warning-400, #ff9707);
-$ionic-color-warning-400-rgb: var(--ionic-color-warning-400-rgb, 255, 151, 7);
-$ionic-color-warning-500: var(--ionic-color-warning-500, #ce7a06);
-$ionic-color-warning-500-rgb: var(--ionic-color-warning-500-rgb, 206, 122, 6);
-$ionic-color-warning-600: var(--ionic-color-warning-600, #9c5f0a);
-$ionic-color-warning-600-rgb: var(--ionic-color-warning-600-rgb, 156, 95, 10);
-$ionic-color-warning-700: var(--ionic-color-warning-700, #6b430c);
-$ionic-color-warning-700-rgb: var(--ionic-color-warning-700-rgb, 107, 67, 12);
-$ionic-color-warning-800: var(--ionic-color-warning-800, #39260b);
-$ionic-color-warning-800-rgb: var(--ionic-color-warning-800-rgb, 57, 38, 11);
-$ionic-color-warning-900: var(--ionic-color-warning-900, #080502);
-$ionic-color-warning-900-rgb: var(--ionic-color-warning-900-rgb, 8, 5, 2);
-$ionic-color-warning: var(--ionic-color-warning, #ff9707);
-$ionic-color-warning-rgb: var(--ionic-color-warning-rgb, 255, 151, 7);
-$ionic-color-success-10: var(--ionic-color-success-10, #fbfffa);
-$ionic-color-success-10-rgb: var(--ionic-color-success-10-rgb, 251, 255, 250);
-$ionic-color-success-50: var(--ionic-color-success-50, #def7d8);
-$ionic-color-success-50-rgb: var(--ionic-color-success-50-rgb, 222, 247, 216);
-$ionic-color-success-100: var(--ionic-color-success-100, #c6f0b7);
-$ionic-color-success-100-rgb: var(--ionic-color-success-100-rgb, 198, 240, 183);
-$ionic-color-success-200: var(--ionic-color-success-200, #a4e188);
-$ionic-color-success-200-rgb: var(--ionic-color-success-200-rgb, 164, 225, 136);
-$ionic-color-success-300: var(--ionic-color-success-300, #73c346);
-$ionic-color-success-300-rgb: var(--ionic-color-success-300-rgb, 115, 195, 70);
-$ionic-color-success-400: var(--ionic-color-success-400, #52a518);
-$ionic-color-success-400-rgb: var(--ionic-color-success-400-rgb, 82, 165, 24);
-$ionic-color-success-500: var(--ionic-color-success-500, #36870c);
-$ionic-color-success-500-rgb: var(--ionic-color-success-500-rgb, 54, 135, 12);
-$ionic-color-success-600: var(--ionic-color-success-600, #36870c);
-$ionic-color-success-600-rgb: var(--ionic-color-success-600-rgb, 54, 135, 12);
-$ionic-color-success-700: var(--ionic-color-success-700, #226907);
-$ionic-color-success-700-rgb: var(--ionic-color-success-700-rgb, 34, 105, 7);
-$ionic-color-success-800: var(--ionic-color-success-800, #144b05);
-$ionic-color-success-800-rgb: var(--ionic-color-success-800-rgb, 20, 75, 5);
-$ionic-color-success-900: var(--ionic-color-success-900, #030f02);
-$ionic-color-success-900-rgb: var(--ionic-color-success-900-rgb, 3, 15, 2);
-$ionic-color-success: var(--ionic-color-success, #52a518);
-$ionic-color-success-rgb: var(--ionic-color-success-rgb, 82, 165, 24);
-$ionic-color-info-10: var(--ionic-color-info-10, #f5fbff);
-$ionic-color-info-10-rgb: var(--ionic-color-info-10-rgb, 245, 251, 255);
-$ionic-color-info-50: var(--ionic-color-info-50, #c6e7ff);
-$ionic-color-info-50-rgb: var(--ionic-color-info-50-rgb, 198, 231, 255);
-$ionic-color-info-100: var(--ionic-color-info-100, #97d3ff);
-$ionic-color-info-100-rgb: var(--ionic-color-info-100-rgb, 151, 211, 255);
-$ionic-color-info-200: var(--ionic-color-info-200, #6ac0fe);
-$ionic-color-info-200-rgb: var(--ionic-color-info-200-rgb, 106, 192, 254);
-$ionic-color-info-300: var(--ionic-color-info-300, #3dadfe);
-$ionic-color-info-300-rgb: var(--ionic-color-info-300-rgb, 61, 173, 254);
-$ionic-color-info-400: var(--ionic-color-info-400, #008bef);
-$ionic-color-info-400-rgb: var(--ionic-color-info-400-rgb, 0, 139, 239);
-$ionic-color-info-500: var(--ionic-color-info-500, #0071c2);
-$ionic-color-info-500-rgb: var(--ionic-color-info-500-rgb, 0, 113, 194);
-$ionic-color-info-600: var(--ionic-color-info-600, #005796);
-$ionic-color-info-600-rgb: var(--ionic-color-info-600-rgb, 0, 87, 150);
-$ionic-color-info-700: var(--ionic-color-info-700, #003d69);
-$ionic-color-info-700-rgb: var(--ionic-color-info-700-rgb, 0, 61, 105);
-$ionic-color-info-800: var(--ionic-color-info-800, #02243c);
-$ionic-color-info-800-rgb: var(--ionic-color-info-800-rgb, 2, 36, 60);
-$ionic-color-info-900: var(--ionic-color-info-900, #020a0f);
-$ionic-color-info-900-rgb: var(--ionic-color-info-900-rgb, 2, 10, 15);
-$ionic-color-info: var(--ionic-color-info, #008bef);
-$ionic-color-info-rgb: var(--ionic-color-info-rgb, 0, 139, 239);
-$ionic-font-family: var(--ionic-font-family, "Inter", sans-serif);
-$ionic-font-letter-spacing-none: var(--ionic-font-letter-spacing-none, 0em);
-$ionic-font-letter-spacing-s: var(--ionic-font-letter-spacing-s, 0.1em);
-$ionic-font-letter-spacing-m: var(--ionic-font-letter-spacing-m, 0.15em);
-$ionic-font-line-height-xs: var(--ionic-font-line-height-xs, 16px);
-$ionic-font-line-height-s: var(--ionic-font-line-height-s, 20px);
-$ionic-font-line-height-m: var(--ionic-font-line-height-m, 24px);
-$ionic-font-line-height-l: var(--ionic-font-line-height-l, 28px);
-$ionic-font-line-height-xl: var(--ionic-font-line-height-xl, 32px);
-$ionic-font-line-height-xxl: var(--ionic-font-line-height-xxl, 36px);
-$ionic-font-line-height-display-s: var(--ionic-font-line-height-display-s, 44px);
-$ionic-font-line-height-display-m: var(--ionic-font-line-height-display-m, 48px);
-$ionic-font-line-height-full: var(--ionic-font-line-height-full, 100%);
-$ionic-font-size-h1: var(--ionic-font-size-h1, 28px);
-$ionic-font-size-h2: var(--ionic-font-size-h2, 32px);
-$ionic-font-size-h3: var(--ionic-font-size-h3, 24px);
-$ionic-font-size-h4: var(--ionic-font-size-h4, 22px);
-$ionic-font-size-h5: var(--ionic-font-size-h5, 20px);
-$ionic-font-size-h6: var(--ionic-font-size-h6, 18px);
-$ionic-font-size-display-s: var(--ionic-font-size-display-s, 32px);
-$ionic-font-size-display-m: var(--ionic-font-size-display-m, 36px);
-$ionic-font-size-s: var(--ionic-font-size-s, 12px);
-$ionic-font-size-m: var(--ionic-font-size-m, 14px);
-$ionic-font-size-l: var(--ionic-font-size-l, 16px);
+$ionic-guidelines: var(--ionic-guidelines, #9747ff);
+$ionic-guidelines-rgb: var(--ionic-guidelines-rgb, 151, 71, 255);
+$ionic-disabled: var(--ionic-disabled, #ffffff99);
+$ionic-hover: var(--ionic-hover, #1212120a);
+$ionic-pressed: var(--ionic-pressed, #12121214);
+$ionic-elevation-100: var(--ionic-elevation-100, 0px 3px 9px 0px #00000012, 0px 0px 4px 0px #0000000a);
+$ionic-elevation-200: var(--ionic-elevation-200, 0px 8px 25px 0px #00000014, 0px 1px 5px 0px #0000000d);
+$ionic-elevation-300: var(--ionic-elevation-300, 0px 6px 32px 0px #00000029, 0px 2px 7px 0px #0000000d);
+$ionic-elevation-400: var(--ionic-elevation-400, 0px 15px 48px 0px #0000002e, 0px 3px 12px 0px #0000001f);
+$ionic-elevation-500: var(--ionic-elevation-500, 0px 3px 9px 0px #062b6312, 0px 0px 4px 0px #062b630a);
+$ionic-elevation-600: var(--ionic-elevation-600, 0px 8px 25px 0px #062b6314, 0px 1px 5px 0px #062b630d);
+$ionic-elevation-700: var(--ionic-elevation-700, 0px 15px 32px 0px #062b6317, 0px 2px 7px 0px #062b630d);
+$ionic-elevation-800: var(--ionic-elevation-800, 0px 20px 48px 0px #062b631f, 0px 3px 14px 0px #062b631f);
+$ionic-font-size-275: var(--ionic-font-size-275, 11px);
+$ionic-font-size-300: var(--ionic-font-size-300, 12px);
+$ionic-font-size-350: var(--ionic-font-size-350, 14px);
+$ionic-font-size-400: var(--ionic-font-size-400, 16px);
+$ionic-font-size-450: var(--ionic-font-size-450, 18px);
+$ionic-font-size-500: var(--ionic-font-size-500, 20px);
+$ionic-font-size-550: var(--ionic-font-size-550, 22px);
+$ionic-font-size-600: var(--ionic-font-size-600, 24px);
+$ionic-font-size-650: var(--ionic-font-size-650, 26px);
+$ionic-font-size-700: var(--ionic-font-size-700, 28px);
+$ionic-font-size-800: var(--ionic-font-size-800, 32px);
+$ionic-font-size-900: var(--ionic-font-size-900, 36px);
+$ionic-font-weight-thin: var(--ionic-font-weight-thin, 100);
+$ionic-font-weight-extra-light: var(--ionic-font-weight-extra-light, 200);
 $ionic-font-weight-light: var(--ionic-font-weight-light, 300);
 $ionic-font-weight-regular: var(--ionic-font-weight-regular, 400);
 $ionic-font-weight-medium: var(--ionic-font-weight-medium, 500);
 $ionic-font-weight-semi-bold: var(--ionic-font-weight-semi-bold, 600);
 $ionic-font-weight-bold: var(--ionic-font-weight-bold, 700);
-$ionic-space-none: var(--ionic-space-none, 0);
-$ionic-space-xxxxs: var(--ionic-space-xxxxs, 2px);
-$ionic-space-xxxs: var(--ionic-space-xxxs, 4px);
-$ionic-space-xxs: var(--ionic-space-xxs, 6px);
-$ionic-space-xs: var(--ionic-space-xs, 8px);
-$ionic-space-s: var(--ionic-space-s, 12px);
-$ionic-space-base: var(--ionic-space-base, 16px);
-$ionic-space-m: var(--ionic-space-m, 20px);
-$ionic-space-l: var(--ionic-space-l, 24px);
-$ionic-space-xl: var(--ionic-space-xl, 28px);
-$ionic-space-xxl: var(--ionic-space-xxl, 32px);
-$ionic-space-xxxl: var(--ionic-space-xxxl, 36px);
-$ionic-space-xxxxl: var(--ionic-space-xxxxl, 40px);
-$ionic-border-radius-square: var(--ionic-border-radius-square, 0);
-$ionic-border-radius-rounded-small: var(--ionic-border-radius-rounded-small, 4px);
-$ionic-border-radius-rounded-medium: var(--ionic-border-radius-rounded-medium, 8px);
-$ionic-border-radius-rounded-large: var(--ionic-border-radius-rounded-large, 16px);
-$ionic-border-radius-rounded-x-large: var(--ionic-border-radius-rounded-x-large, 32px);
-$ionic-border-radius-rounded-full: var(--ionic-border-radius-rounded-full, 999px);
-$ionic-border-size-small: var(--ionic-border-size-small, 1px);
-$ionic-border-size-medium: var(--ionic-border-size-medium, 2px);
-$ionic-border-size-large: var(--ionic-border-size-large, 3px);
-$ionic-elevation-0: var(--ionic-elevation-0, none);
-$ionic-elevation-1: var(--ionic-elevation-1, 0px 3px 9px 0px rgba(0, 0, 0, 0.07), 0px 0px 4px 0px rgba(0, 0, 0, 0.04));
-$ionic-elevation-2: var(--ionic-elevation-2, 0px 8px 25px 0px rgba(0, 0, 0, 0.08), 0px 1px 5px 0px rgba(0, 0, 0, 0.05));
-$ionic-elevation-3: var(
-  --ionic-elevation-3,
-  0px 2px 7px 0px rgba(0, 0, 0, 0.05),
-  0px 15px 32px 0px rgba(0, 0, 0, 0.09)
+$ionic-font-weight-extra-bold: var(--ionic-font-weight-extra-bold, 800);
+$ionic-font-weight-black: var(--ionic-font-weight-black, 900);
+$ionic-letter-spacing-0: var(--ionic-letter-spacing-0, 0);
+$ionic-letter-spacing-1: var(--ionic-letter-spacing-1, 1%);
+$ionic-letter-spacing-2: var(--ionic-letter-spacing-2, 1.5%);
+$ionic-line-height-300: var(--ionic-line-height-300, 12px);
+$ionic-line-height-400: var(--ionic-line-height-400, 16px);
+$ionic-line-height-500: var(--ionic-line-height-500, 20px);
+$ionic-line-height-600: var(--ionic-line-height-600, 24px);
+$ionic-line-height-700: var(--ionic-line-height-700, 28px);
+$ionic-line-height-800: var(--ionic-line-height-800, 32px);
+$ionic-line-height-900: var(--ionic-line-height-900, 36px);
+$ionic-line-height-1100: var(--ionic-line-height-1100, 44px);
+$ionic-line-height-1200: var(--ionic-line-height-1200, 48px);
+$ionic-line-height-full: var(--ionic-line-height-full, 100%);
+$ionic-space-0: var(--ionic-space-0, 0px);
+$ionic-space-100: var(--ionic-space-100, 4px);
+$ionic-space-150: var(--ionic-space-150, 6px);
+$ionic-space-200: var(--ionic-space-200, 8px);
+$ionic-space-250: var(--ionic-space-250, 10px);
+$ionic-space-300: var(--ionic-space-300, 12px);
+$ionic-space-400: var(--ionic-space-400, 16px);
+$ionic-space-500: var(--ionic-space-500, 20px);
+$ionic-space-600: var(--ionic-space-600, 24px);
+$ionic-space-700: var(--ionic-space-700, 28px);
+$ionic-space-800: var(--ionic-space-800, 32px);
+$ionic-space-900: var(--ionic-space-900, 36px);
+$ionic-space-1000: var(--ionic-space-1000, 40px);
+$ionic-space-1200: var(--ionic-space-1200, 48px);
+$ionic-space-050: var(--ionic-space-050, 2px);
+$ionic-border-radius-0: var(--ionic-border-radius-0, 0px);
+$ionic-border-radius-100: var(--ionic-border-radius-100, 4px);
+$ionic-border-radius-200: var(--ionic-border-radius-200, 8px);
+$ionic-border-radius-300: var(--ionic-border-radius-300, 12px);
+$ionic-border-radius-400: var(--ionic-border-radius-400, 16px);
+$ionic-border-radius-800: var(--ionic-border-radius-800, 32px);
+$ionic-border-radius-1000: var(--ionic-border-radius-1000, 40px);
+$ionic-border-radius-050: var(--ionic-border-radius-050, 2px);
+$ionic-border-radius-full: var(--ionic-border-radius-full, 999px);
+$ionic-border-size-0: var(--ionic-border-size-0, 0px);
+$ionic-border-size-025: var(--ionic-border-size-025, 1px);
+$ionic-border-size-050: var(--ionic-border-size-050, 2px);
+$ionic-border-size-075: var(--ionic-border-size-075, 3px);
+$ionic-border-style-none: var(--ionic-border-style-none, none);
+$ionic-border-style-solid: var(--ionic-border-style-solid, solid);
+$ionic-border-style-dashed: var(--ionic-border-style-dashed, dashed);
+$ionic-border-style-dotted: var(--ionic-border-style-dotted, dotted);
+$ionic-color-base-white: var(--ionic-color-base-white, #ffffff);
+$ionic-color-base-white-rgb: var(--ionic-color-base-white-rgb, 255, 255, 255);
+$ionic-color-base-black: var(--ionic-color-base-black, #111111);
+$ionic-color-base-black-rgb: var(--ionic-color-base-black-rgb, 17, 17, 17);
+$ionic-color-neutral-100: var(--ionic-color-neutral-100, #f1f1f1);
+$ionic-color-neutral-100-rgb: var(--ionic-color-neutral-100-rgb, 241, 241, 241);
+$ionic-color-neutral-200: var(--ionic-color-neutral-200, #e7e7e7);
+$ionic-color-neutral-200-rgb: var(--ionic-color-neutral-200-rgb, 231, 231, 231);
+$ionic-color-neutral-300: var(--ionic-color-neutral-300, #cfcfcf);
+$ionic-color-neutral-300-rgb: var(--ionic-color-neutral-300-rgb, 207, 207, 207);
+$ionic-color-neutral-400: var(--ionic-color-neutral-400, #b9b9b9);
+$ionic-color-neutral-400-rgb: var(--ionic-color-neutral-400-rgb, 185, 185, 185);
+$ionic-color-neutral-500: var(--ionic-color-neutral-500, #a2a2a2);
+$ionic-color-neutral-500-rgb: var(--ionic-color-neutral-500-rgb, 162, 162, 162);
+$ionic-color-neutral-600: var(--ionic-color-neutral-600, #8c8c8c);
+$ionic-color-neutral-600-rgb: var(--ionic-color-neutral-600-rgb, 140, 140, 140);
+$ionic-color-neutral-700: var(--ionic-color-neutral-700, #777777);
+$ionic-color-neutral-700-rgb: var(--ionic-color-neutral-700-rgb, 119, 119, 119);
+$ionic-color-neutral-800: var(--ionic-color-neutral-800, #626262);
+$ionic-color-neutral-800-rgb: var(--ionic-color-neutral-800-rgb, 98, 98, 98);
+$ionic-color-neutral-900: var(--ionic-color-neutral-900, #4e4e4e);
+$ionic-color-neutral-900-rgb: var(--ionic-color-neutral-900-rgb, 78, 78, 78);
+$ionic-color-neutral-1000: var(--ionic-color-neutral-1000, #3b3b3b);
+$ionic-color-neutral-1000-rgb: var(--ionic-color-neutral-1000-rgb, 59, 59, 59);
+$ionic-color-neutral-1100: var(--ionic-color-neutral-1100, #292929);
+$ionic-color-neutral-1100-rgb: var(--ionic-color-neutral-1100-rgb, 41, 41, 41);
+$ionic-color-neutral-1200: var(--ionic-color-neutral-1200, #242424);
+$ionic-color-neutral-1200-rgb: var(--ionic-color-neutral-1200-rgb, 36, 36, 36);
+$ionic-color-red-100: var(--ionic-color-red-100, #feeded);
+$ionic-color-red-100-rgb: var(--ionic-color-red-100-rgb, 254, 237, 237);
+$ionic-color-red-200: var(--ionic-color-red-200, #fde1e1);
+$ionic-color-red-200-rgb: var(--ionic-color-red-200-rgb, 253, 225, 225);
+$ionic-color-red-300: var(--ionic-color-red-300, #fcc1c1);
+$ionic-color-red-300-rgb: var(--ionic-color-red-300-rgb, 252, 193, 193);
+$ionic-color-red-400: var(--ionic-color-red-400, #faa1a1);
+$ionic-color-red-400-rgb: var(--ionic-color-red-400-rgb, 250, 161, 161);
+$ionic-color-red-500: var(--ionic-color-red-500, #f97d7d);
+$ionic-color-red-500-rgb: var(--ionic-color-red-500-rgb, 249, 125, 125);
+$ionic-color-red-600: var(--ionic-color-red-600, #f85151);
+$ionic-color-red-600-rgb: var(--ionic-color-red-600-rgb, 248, 81, 81);
+$ionic-color-red-700: var(--ionic-color-red-700, #e52929);
+$ionic-color-red-700-rgb: var(--ionic-color-red-700-rgb, 229, 41, 41);
+$ionic-color-red-800: var(--ionic-color-red-800, #bf2222);
+$ionic-color-red-800-rgb: var(--ionic-color-red-800-rgb, 191, 34, 34);
+$ionic-color-red-900: var(--ionic-color-red-900, #991b1b);
+$ionic-color-red-900-rgb: var(--ionic-color-red-900-rgb, 153, 27, 27);
+$ionic-color-red-1000: var(--ionic-color-red-1000, #761515);
+$ionic-color-red-1000-rgb: var(--ionic-color-red-1000-rgb, 118, 21, 21);
+$ionic-color-red-1100: var(--ionic-color-red-1100, #540f0f);
+$ionic-color-red-1100-rgb: var(--ionic-color-red-1100-rgb, 84, 15, 15);
+$ionic-color-red-1200: var(--ionic-color-red-1200, #330909);
+$ionic-color-red-1200-rgb: var(--ionic-color-red-1200-rgb, 51, 9, 9);
+$ionic-color-pumpkin-100: var(--ionic-color-pumpkin-100, #feedea);
+$ionic-color-pumpkin-100-rgb: var(--ionic-color-pumpkin-100-rgb, 254, 237, 234);
+$ionic-color-pumpkin-200: var(--ionic-color-pumpkin-200, #fde0db);
+$ionic-color-pumpkin-200-rgb: var(--ionic-color-pumpkin-200-rgb, 253, 224, 219);
+$ionic-color-pumpkin-300: var(--ionic-color-pumpkin-300, #fbbdb1);
+$ionic-color-pumpkin-300-rgb: var(--ionic-color-pumpkin-300-rgb, 251, 189, 177);
+$ionic-color-pumpkin-400: var(--ionic-color-pumpkin-400, #f9947c);
+$ionic-color-pumpkin-400-rgb: var(--ionic-color-pumpkin-400-rgb, 249, 148, 124);
+$ionic-color-pumpkin-500: var(--ionic-color-pumpkin-500, #f75d07);
+$ionic-color-pumpkin-500-rgb: var(--ionic-color-pumpkin-500-rgb, 247, 93, 7);
+$ionic-color-pumpkin-600: var(--ionic-color-pumpkin-600, #da5206);
+$ionic-color-pumpkin-600-rgb: var(--ionic-color-pumpkin-600-rgb, 218, 82, 6);
+$ionic-color-pumpkin-700: var(--ionic-color-pumpkin-700, #bd4705);
+$ionic-color-pumpkin-700-rgb: var(--ionic-color-pumpkin-700-rgb, 189, 71, 5);
+$ionic-color-pumpkin-800: var(--ionic-color-pumpkin-800, #9f3c05);
+$ionic-color-pumpkin-800-rgb: var(--ionic-color-pumpkin-800-rgb, 159, 60, 5);
+$ionic-color-pumpkin-900: var(--ionic-color-pumpkin-900, #803004);
+$ionic-color-pumpkin-900-rgb: var(--ionic-color-pumpkin-900-rgb, 128, 48, 4);
+$ionic-color-pumpkin-1000: var(--ionic-color-pumpkin-1000, #602403);
+$ionic-color-pumpkin-1000-rgb: var(--ionic-color-pumpkin-1000-rgb, 96, 36, 3);
+$ionic-color-pumpkin-1100: var(--ionic-color-pumpkin-1100, #401802);
+$ionic-color-pumpkin-1100-rgb: var(--ionic-color-pumpkin-1100-rgb, 64, 24, 2);
+$ionic-color-pumpkin-1200: var(--ionic-color-pumpkin-1200, #210c01);
+$ionic-color-pumpkin-1200-rgb: var(--ionic-color-pumpkin-1200-rgb, 33, 12, 1);
+$ionic-color-orange-100: var(--ionic-color-orange-100, #fff1ea);
+$ionic-color-orange-100-rgb: var(--ionic-color-orange-100-rgb, 255, 241, 234);
+$ionic-color-orange-200: var(--ionic-color-orange-200, #ffe8db);
+$ionic-color-orange-200-rgb: var(--ionic-color-orange-200-rgb, 255, 232, 219);
+$ionic-color-orange-300: var(--ionic-color-orange-300, #ffcfb1);
+$ionic-color-orange-300-rgb: var(--ionic-color-orange-300-rgb, 255, 207, 177);
+$ionic-color-orange-400: var(--ionic-color-orange-400, #ffb37b);
+$ionic-color-orange-400-rgb: var(--ionic-color-orange-400-rgb, 255, 179, 123);
+$ionic-color-orange-500: var(--ionic-color-orange-500, #ff9400);
+$ionic-color-orange-500-rgb: var(--ionic-color-orange-500-rgb, 255, 148, 0);
+$ionic-color-orange-600: var(--ionic-color-orange-600, #e18300);
+$ionic-color-orange-600-rgb: var(--ionic-color-orange-600-rgb, 225, 131, 0);
+$ionic-color-orange-700: var(--ionic-color-orange-700, #c37100);
+$ionic-color-orange-700-rgb: var(--ionic-color-orange-700-rgb, 195, 113, 0);
+$ionic-color-orange-800: var(--ionic-color-orange-800, #a45f00);
+$ionic-color-orange-800-rgb: var(--ionic-color-orange-800-rgb, 164, 95, 0);
+$ionic-color-orange-900: var(--ionic-color-orange-900, #844d00);
+$ionic-color-orange-900-rgb: var(--ionic-color-orange-900-rgb, 132, 77, 0);
+$ionic-color-orange-1000: var(--ionic-color-orange-1000, #633a00);
+$ionic-color-orange-1000-rgb: var(--ionic-color-orange-1000-rgb, 99, 58, 0);
+$ionic-color-orange-1100: var(--ionic-color-orange-1100, #422700);
+$ionic-color-orange-1100-rgb: var(--ionic-color-orange-1100-rgb, 66, 39, 0);
+$ionic-color-orange-1200: var(--ionic-color-orange-1200, #221400);
+$ionic-color-orange-1200-rgb: var(--ionic-color-orange-1200-rgb, 34, 20, 0);
+$ionic-color-yellow-100: var(--ionic-color-yellow-100, #fff9ea);
+$ionic-color-yellow-100-rgb: var(--ionic-color-yellow-100-rgb, 255, 249, 234);
+$ionic-color-yellow-200: var(--ionic-color-yellow-200, #fff5db);
+$ionic-color-yellow-200-rgb: var(--ionic-color-yellow-200-rgb, 255, 245, 219);
+$ionic-color-yellow-300: var(--ionic-color-yellow-300, #ffebb1);
+$ionic-color-yellow-300-rgb: var(--ionic-color-yellow-300-rgb, 255, 235, 177);
+$ionic-color-yellow-400: var(--ionic-color-yellow-400, #ffe07b);
+$ionic-color-yellow-400-rgb: var(--ionic-color-yellow-400-rgb, 255, 224, 123);
+$ionic-color-yellow-500: var(--ionic-color-yellow-500, #ffd600);
+$ionic-color-yellow-500-rgb: var(--ionic-color-yellow-500-rgb, 255, 214, 0);
+$ionic-color-yellow-600: var(--ionic-color-yellow-600, #e1bd00);
+$ionic-color-yellow-600-rgb: var(--ionic-color-yellow-600-rgb, 225, 189, 0);
+$ionic-color-yellow-700: var(--ionic-color-yellow-700, #c3a400);
+$ionic-color-yellow-700-rgb: var(--ionic-color-yellow-700-rgb, 195, 164, 0);
+$ionic-color-yellow-800: var(--ionic-color-yellow-800, #a48a00);
+$ionic-color-yellow-800-rgb: var(--ionic-color-yellow-800-rgb, 164, 138, 0);
+$ionic-color-yellow-900: var(--ionic-color-yellow-900, #846f00);
+$ionic-color-yellow-900-rgb: var(--ionic-color-yellow-900-rgb, 132, 111, 0);
+$ionic-color-yellow-1000: var(--ionic-color-yellow-1000, #635300);
+$ionic-color-yellow-1000-rgb: var(--ionic-color-yellow-1000-rgb, 99, 83, 0);
+$ionic-color-yellow-1100: var(--ionic-color-yellow-1100, #423800);
+$ionic-color-yellow-1100-rgb: var(--ionic-color-yellow-1100-rgb, 66, 56, 0);
+$ionic-color-yellow-1200: var(--ionic-color-yellow-1200, #221d00);
+$ionic-color-yellow-1200-rgb: var(--ionic-color-yellow-1200-rgb, 34, 29, 0);
+$ionic-color-lime-100: var(--ionic-color-lime-100, #f3faea);
+$ionic-color-lime-100-rgb: var(--ionic-color-lime-100-rgb, 243, 250, 234);
+$ionic-color-lime-200: var(--ionic-color-lime-200, #eaf7db);
+$ionic-color-lime-200-rgb: var(--ionic-color-lime-200-rgb, 234, 247, 219);
+$ionic-color-lime-300: var(--ionic-color-lime-300, #d3efb2);
+$ionic-color-lime-300-rgb: var(--ionic-color-lime-300-rgb, 211, 239, 178);
+$ionic-color-lime-400: var(--ionic-color-lime-400, #bbe77d);
+$ionic-color-lime-400-rgb: var(--ionic-color-lime-400-rgb, 187, 231, 125);
+$ionic-color-lime-500: var(--ionic-color-lime-500, #a0df18);
+$ionic-color-lime-500-rgb: var(--ionic-color-lime-500-rgb, 160, 223, 24);
+$ionic-color-lime-600: var(--ionic-color-lime-600, #8dc515);
+$ionic-color-lime-600-rgb: var(--ionic-color-lime-600-rgb, 141, 197, 21);
+$ionic-color-lime-700: var(--ionic-color-lime-700, #7aab12);
+$ionic-color-lime-700-rgb: var(--ionic-color-lime-700-rgb, 122, 171, 18);
+$ionic-color-lime-800: var(--ionic-color-lime-800, #678f0f);
+$ionic-color-lime-800-rgb: var(--ionic-color-lime-800-rgb, 103, 143, 15);
+$ionic-color-lime-900: var(--ionic-color-lime-900, #53730c);
+$ionic-color-lime-900-rgb: var(--ionic-color-lime-900-rgb, 83, 115, 12);
+$ionic-color-lime-1000: var(--ionic-color-lime-1000, #3e5709);
+$ionic-color-lime-1000-rgb: var(--ionic-color-lime-1000-rgb, 62, 87, 9);
+$ionic-color-lime-1100: var(--ionic-color-lime-1100, #2a3a06);
+$ionic-color-lime-1100-rgb: var(--ionic-color-lime-1100-rgb, 42, 58, 6);
+$ionic-color-lime-1200: var(--ionic-color-lime-1200, #151e03);
+$ionic-color-lime-1200-rgb: var(--ionic-color-lime-1200-rgb, 21, 30, 3);
+$ionic-color-green-100: var(--ionic-color-green-100, #ebf9ec);
+$ionic-color-green-100-rgb: var(--ionic-color-green-100-rgb, 235, 249, 236);
+$ionic-color-green-200: var(--ionic-color-green-200, #dcf5de);
+$ionic-color-green-200-rgb: var(--ionic-color-green-200-rgb, 220, 245, 222);
+$ionic-color-green-300: var(--ionic-color-green-300, #b3ebb7);
+$ionic-color-green-300-rgb: var(--ionic-color-green-300-rgb, 179, 235, 183);
+$ionic-color-green-400: var(--ionic-color-green-400, #7fe089);
+$ionic-color-green-400-rgb: var(--ionic-color-green-400-rgb, 127, 224, 137);
+$ionic-color-green-500: var(--ionic-color-green-500, #23d643);
+$ionic-color-green-500-rgb: var(--ionic-color-green-500-rgb, 35, 214, 67);
+$ionic-color-green-600: var(--ionic-color-green-600, #1fbd3b);
+$ionic-color-green-600-rgb: var(--ionic-color-green-600-rgb, 31, 189, 59);
+$ionic-color-green-700: var(--ionic-color-green-700, #1ba433);
+$ionic-color-green-700-rgb: var(--ionic-color-green-700-rgb, 27, 164, 51);
+$ionic-color-green-800: var(--ionic-color-green-800, #178a2b);
+$ionic-color-green-800-rgb: var(--ionic-color-green-800-rgb, 23, 138, 43);
+$ionic-color-green-900: var(--ionic-color-green-900, #126f23);
+$ionic-color-green-900-rgb: var(--ionic-color-green-900-rgb, 18, 111, 35);
+$ionic-color-green-1000: var(--ionic-color-green-1000, #0e531a);
+$ionic-color-green-1000-rgb: var(--ionic-color-green-1000-rgb, 14, 83, 26);
+$ionic-color-green-1100: var(--ionic-color-green-1100, #093811);
+$ionic-color-green-1100-rgb: var(--ionic-color-green-1100-rgb, 9, 56, 17);
+$ionic-color-green-1200: var(--ionic-color-green-1200, #051d09);
+$ionic-color-green-1200-rgb: var(--ionic-color-green-1200-rgb, 5, 29, 9);
+$ionic-color-teal-100: var(--ionic-color-teal-100, #eaf8f5);
+$ionic-color-teal-100-rgb: var(--ionic-color-teal-100-rgb, 234, 248, 245);
+$ionic-color-teal-200: var(--ionic-color-teal-200, #dbf3ee);
+$ionic-color-teal-200-rgb: var(--ionic-color-teal-200-rgb, 219, 243, 238);
+$ionic-color-teal-300: var(--ionic-color-teal-300, #b1e7dd);
+$ionic-color-teal-300-rgb: var(--ionic-color-teal-300-rgb, 177, 231, 221);
+$ionic-color-teal-400: var(--ionic-color-teal-400, #7bdbca);
+$ionic-color-teal-400-rgb: var(--ionic-color-teal-400-rgb, 123, 219, 202);
+$ionic-color-teal-500: var(--ionic-color-teal-500, #00cfb7);
+$ionic-color-teal-500-rgb: var(--ionic-color-teal-500-rgb, 0, 207, 183);
+$ionic-color-teal-600: var(--ionic-color-teal-600, #00b7a2);
+$ionic-color-teal-600-rgb: var(--ionic-color-teal-600-rgb, 0, 183, 162);
+$ionic-color-teal-700: var(--ionic-color-teal-700, #009e8c);
+$ionic-color-teal-700-rgb: var(--ionic-color-teal-700-rgb, 0, 158, 140);
+$ionic-color-teal-800: var(--ionic-color-teal-800, #008576);
+$ionic-color-teal-800-rgb: var(--ionic-color-teal-800-rgb, 0, 133, 118);
+$ionic-color-teal-900: var(--ionic-color-teal-900, #006b5f);
+$ionic-color-teal-900-rgb: var(--ionic-color-teal-900-rgb, 0, 107, 95);
+$ionic-color-teal-1000: var(--ionic-color-teal-1000, #005147);
+$ionic-color-teal-1000-rgb: var(--ionic-color-teal-1000-rgb, 0, 81, 71);
+$ionic-color-teal-1100: var(--ionic-color-teal-1100, #003630);
+$ionic-color-teal-1100-rgb: var(--ionic-color-teal-1100-rgb, 0, 54, 48);
+$ionic-color-teal-1200: var(--ionic-color-teal-1200, #001c19);
+$ionic-color-teal-1200-rgb: var(--ionic-color-teal-1200-rgb, 0, 28, 25);
+$ionic-color-aqua-100: var(--ionic-color-aqua-100, #ebf9fe);
+$ionic-color-aqua-100-rgb: var(--ionic-color-aqua-100-rgb, 235, 249, 254);
+$ionic-color-aqua-200: var(--ionic-color-aqua-200, #dcf4fd);
+$ionic-color-aqua-200-rgb: var(--ionic-color-aqua-200-rgb, 220, 244, 253);
+$ionic-color-aqua-300: var(--ionic-color-aqua-300, #b3e9fc);
+$ionic-color-aqua-300-rgb: var(--ionic-color-aqua-300-rgb, 179, 233, 252);
+$ionic-color-aqua-400: var(--ionic-color-aqua-400, #80defa);
+$ionic-color-aqua-400-rgb: var(--ionic-color-aqua-400-rgb, 128, 222, 250);
+$ionic-color-aqua-500: var(--ionic-color-aqua-500, #27d3f9);
+$ionic-color-aqua-500-rgb: var(--ionic-color-aqua-500-rgb, 39, 211, 249);
+$ionic-color-aqua-600: var(--ionic-color-aqua-600, #22bbdc);
+$ionic-color-aqua-600-rgb: var(--ionic-color-aqua-600-rgb, 34, 187, 220);
+$ionic-color-aqua-700: var(--ionic-color-aqua-700, #1ea2bf);
+$ionic-color-aqua-700-rgb: var(--ionic-color-aqua-700-rgb, 30, 162, 191);
+$ionic-color-aqua-800: var(--ionic-color-aqua-800, #1988a0);
+$ionic-color-aqua-800-rgb: var(--ionic-color-aqua-800-rgb, 25, 136, 160);
+$ionic-color-aqua-900: var(--ionic-color-aqua-900, #146d81);
+$ionic-color-aqua-900-rgb: var(--ionic-color-aqua-900-rgb, 20, 109, 129);
+$ionic-color-aqua-1000: var(--ionic-color-aqua-1000, #0f5261);
+$ionic-color-aqua-1000-rgb: var(--ionic-color-aqua-1000-rgb, 15, 82, 97);
+$ionic-color-aqua-1100: var(--ionic-color-aqua-1100, #0a3741);
+$ionic-color-aqua-1100-rgb: var(--ionic-color-aqua-1100-rgb, 10, 55, 65);
+$ionic-color-aqua-1200: var(--ionic-color-aqua-1200, #051c21);
+$ionic-color-aqua-1200-rgb: var(--ionic-color-aqua-1200-rgb, 5, 28, 33);
+$ionic-color-blue-100: var(--ionic-color-blue-100, #f2f4fd);
+$ionic-color-blue-100-rgb: var(--ionic-color-blue-100-rgb, 242, 244, 253);
+$ionic-color-blue-200: var(--ionic-color-blue-200, #e9ecfc);
+$ionic-color-blue-200-rgb: var(--ionic-color-blue-200-rgb, 233, 236, 252);
+$ionic-color-blue-300: var(--ionic-color-blue-300, #d0d7fa);
+$ionic-color-blue-300-rgb: var(--ionic-color-blue-300-rgb, 208, 215, 250);
+$ionic-color-blue-400: var(--ionic-color-blue-400, #b5c0f7);
+$ionic-color-blue-400-rgb: var(--ionic-color-blue-400-rgb, 181, 192, 247);
+$ionic-color-blue-500: var(--ionic-color-blue-500, #94a5f4);
+$ionic-color-blue-500-rgb: var(--ionic-color-blue-500-rgb, 148, 165, 244);
+$ionic-color-blue-600: var(--ionic-color-blue-600, #6986f2);
+$ionic-color-blue-600-rgb: var(--ionic-color-blue-600-rgb, 105, 134, 242);
+$ionic-color-blue-700: var(--ionic-color-blue-700, #105cef);
+$ionic-color-blue-700-rgb: var(--ionic-color-blue-700-rgb, 16, 92, 239);
+$ionic-color-blue-800: var(--ionic-color-blue-800, #0f54da);
+$ionic-color-blue-800-rgb: var(--ionic-color-blue-800-rgb, 15, 84, 218);
+$ionic-color-blue-900: var(--ionic-color-blue-900, #0d4bc3);
+$ionic-color-blue-900-rgb: var(--ionic-color-blue-900-rgb, 13, 75, 195);
+$ionic-color-blue-1000: var(--ionic-color-blue-1000, #0b41a9);
+$ionic-color-blue-1000-rgb: var(--ionic-color-blue-1000-rgb, 11, 65, 169);
+$ionic-color-blue-1100: var(--ionic-color-blue-1100, #09358a);
+$ionic-color-blue-1100-rgb: var(--ionic-color-blue-1100-rgb, 9, 53, 138);
+$ionic-color-blue-1200: var(--ionic-color-blue-1200, #072561);
+$ionic-color-blue-1200-rgb: var(--ionic-color-blue-1200-rgb, 7, 37, 97);
+$ionic-color-indigo-100: var(--ionic-color-indigo-100, #f3f2fb);
+$ionic-color-indigo-100-rgb: var(--ionic-color-indigo-100-rgb, 243, 242, 251);
+$ionic-color-indigo-200: var(--ionic-color-indigo-200, #eae9f9);
+$ionic-color-indigo-200-rgb: var(--ionic-color-indigo-200-rgb, 234, 233, 249);
+$ionic-color-indigo-300: var(--ionic-color-indigo-300, #d3d1f2);
+$ionic-color-indigo-300-rgb: var(--ionic-color-indigo-300-rgb, 211, 209, 242);
+$ionic-color-indigo-400: var(--ionic-color-indigo-400, #bab5eb);
+$ionic-color-indigo-400-rgb: var(--ionic-color-indigo-400-rgb, 186, 181, 235);
+$ionic-color-indigo-500: var(--ionic-color-indigo-500, #9d95e4);
+$ionic-color-indigo-500-rgb: var(--ionic-color-indigo-500-rgb, 157, 149, 228);
+$ionic-color-indigo-600: var(--ionic-color-indigo-600, #786bdd);
+$ionic-color-indigo-600-rgb: var(--ionic-color-indigo-600-rgb, 120, 107, 221);
+$ionic-color-indigo-700: var(--ionic-color-indigo-700, #411bd5);
+$ionic-color-indigo-700-rgb: var(--ionic-color-indigo-700-rgb, 65, 27, 213);
+$ionic-color-indigo-800: var(--ionic-color-indigo-800, #3b19c3);
+$ionic-color-indigo-800-rgb: var(--ionic-color-indigo-800-rgb, 59, 25, 195);
+$ionic-color-indigo-900: var(--ionic-color-indigo-900, #3516ae);
+$ionic-color-indigo-900-rgb: var(--ionic-color-indigo-900-rgb, 53, 22, 174);
+$ionic-color-indigo-1000: var(--ionic-color-indigo-1000, #2e1397);
+$ionic-color-indigo-1000-rgb: var(--ionic-color-indigo-1000-rgb, 46, 19, 151);
+$ionic-color-indigo-1100: var(--ionic-color-indigo-1100, #26107b);
+$ionic-color-indigo-1100-rgb: var(--ionic-color-indigo-1100-rgb, 38, 16, 123);
+$ionic-color-indigo-1200: var(--ionic-color-indigo-1200, #1a0b57);
+$ionic-color-indigo-1200-rgb: var(--ionic-color-indigo-1200-rgb, 26, 11, 87);
+$ionic-color-violet-100: var(--ionic-color-violet-100, #f5f2fe);
+$ionic-color-violet-100-rgb: var(--ionic-color-violet-100-rgb, 245, 242, 254);
+$ionic-color-violet-200: var(--ionic-color-violet-200, #eee9fd);
+$ionic-color-violet-200-rgb: var(--ionic-color-violet-200-rgb, 238, 233, 253);
+$ionic-color-violet-300: var(--ionic-color-violet-300, #dcd1fb);
+$ionic-color-violet-300-rgb: var(--ionic-color-violet-300-rgb, 220, 209, 251);
+$ionic-color-violet-400: var(--ionic-color-violet-400, #c9b6f9);
+$ionic-color-violet-400-rgb: var(--ionic-color-violet-400-rgb, 201, 182, 249);
+$ionic-color-violet-500: var(--ionic-color-violet-500, #b396f6);
+$ionic-color-violet-500-rgb: var(--ionic-color-violet-500-rgb, 179, 150, 246);
+$ionic-color-violet-600: var(--ionic-color-violet-600, #9a6cf4);
+$ionic-color-violet-600-rgb: var(--ionic-color-violet-600-rgb, 154, 108, 244);
+$ionic-color-violet-700: var(--ionic-color-violet-700, #7c20f2);
+$ionic-color-violet-700-rgb: var(--ionic-color-violet-700-rgb, 124, 32, 242);
+$ionic-color-violet-800: var(--ionic-color-violet-800, #711ddd);
+$ionic-color-violet-800-rgb: var(--ionic-color-violet-800-rgb, 113, 29, 221);
+$ionic-color-violet-900: var(--ionic-color-violet-900, #651ac5);
+$ionic-color-violet-900-rgb: var(--ionic-color-violet-900-rgb, 101, 26, 197);
+$ionic-color-violet-1000: var(--ionic-color-violet-1000, #5817ab);
+$ionic-color-violet-1000-rgb: var(--ionic-color-violet-1000-rgb, 88, 23, 171);
+$ionic-color-violet-1100: var(--ionic-color-violet-1100, #48128c);
+$ionic-color-violet-1100-rgb: var(--ionic-color-violet-1100-rgb, 72, 18, 140);
+$ionic-color-violet-1200: var(--ionic-color-violet-1200, #330d63);
+$ionic-color-violet-1200-rgb: var(--ionic-color-violet-1200-rgb, 51, 13, 99);
+$ionic-color-purple-100: var(--ionic-color-purple-100, #f9f3fe);
+$ionic-color-purple-100-rgb: var(--ionic-color-purple-100-rgb, 249, 243, 254);
+$ionic-color-purple-200: var(--ionic-color-purple-200, #f5eafd);
+$ionic-color-purple-200-rgb: var(--ionic-color-purple-200-rgb, 245, 234, 253);
+$ionic-color-purple-300: var(--ionic-color-purple-300, #e9d3fa);
+$ionic-color-purple-300-rgb: var(--ionic-color-purple-300-rgb, 233, 211, 250);
+$ionic-color-purple-400: var(--ionic-color-purple-400, #deb9f8);
+$ionic-color-purple-400-rgb: var(--ionic-color-purple-400-rgb, 222, 185, 248);
+$ionic-color-purple-500: var(--ionic-color-purple-500, #d29bf6);
+$ionic-color-purple-500-rgb: var(--ionic-color-purple-500-rgb, 210, 155, 246);
+$ionic-color-purple-600: var(--ionic-color-purple-600, #c575f3);
+$ionic-color-purple-600-rgb: var(--ionic-color-purple-600-rgb, 197, 117, 243);
+$ionic-color-purple-700: var(--ionic-color-purple-700, #b73cf1);
+$ionic-color-purple-700-rgb: var(--ionic-color-purple-700-rgb, 183, 60, 241);
+$ionic-color-purple-800: var(--ionic-color-purple-800, #a737dc);
+$ionic-color-purple-800-rgb: var(--ionic-color-purple-800-rgb, 167, 55, 220);
+$ionic-color-purple-900: var(--ionic-color-purple-900, #9531c5);
+$ionic-color-purple-900-rgb: var(--ionic-color-purple-900-rgb, 149, 49, 197);
+$ionic-color-purple-1000: var(--ionic-color-purple-1000, #812aaa);
+$ionic-color-purple-1000-rgb: var(--ionic-color-purple-1000-rgb, 129, 42, 170);
+$ionic-color-purple-1100: var(--ionic-color-purple-1100, #6a238b);
+$ionic-color-purple-1100-rgb: var(--ionic-color-purple-1100-rgb, 106, 35, 139);
+$ionic-color-purple-1200: var(--ionic-color-purple-1200, #4b1862);
+$ionic-color-purple-1200-rgb: var(--ionic-color-purple-1200-rgb, 75, 24, 98);
+$ionic-color-magenta-100: var(--ionic-color-magenta-100, #fdf3fb);
+$ionic-color-magenta-100-rgb: var(--ionic-color-magenta-100-rgb, 253, 243, 251);
+$ionic-color-magenta-200: var(--ionic-color-magenta-200, #fcebf8);
+$ionic-color-magenta-200-rgb: var(--ionic-color-magenta-200-rgb, 252, 235, 248);
+$ionic-color-magenta-300: var(--ionic-color-magenta-300, #f9d4f1);
+$ionic-color-magenta-300-rgb: var(--ionic-color-magenta-300-rgb, 249, 212, 241);
+$ionic-color-magenta-400: var(--ionic-color-magenta-400, #f6bcea);
+$ionic-color-magenta-400-rgb: var(--ionic-color-magenta-400-rgb, 246, 188, 234);
+$ionic-color-magenta-500: var(--ionic-color-magenta-500, #f39fe3);
+$ionic-color-magenta-500-rgb: var(--ionic-color-magenta-500-rgb, 243, 159, 227);
+$ionic-color-magenta-600: var(--ionic-color-magenta-600, #f07cdb);
+$ionic-color-magenta-600-rgb: var(--ionic-color-magenta-600-rgb, 240, 124, 219);
+$ionic-color-magenta-700: var(--ionic-color-magenta-700, #ed4ad3);
+$ionic-color-magenta-700-rgb: var(--ionic-color-magenta-700-rgb, 237, 74, 211);
+$ionic-color-magenta-800: var(--ionic-color-magenta-800, #d844c1);
+$ionic-color-magenta-800-rgb: var(--ionic-color-magenta-800-rgb, 216, 68, 193);
+$ionic-color-magenta-900: var(--ionic-color-magenta-900, #c13cac);
+$ionic-color-magenta-900-rgb: var(--ionic-color-magenta-900-rgb, 193, 60, 172);
+$ionic-color-magenta-1000: var(--ionic-color-magenta-1000, #a83495);
+$ionic-color-magenta-1000-rgb: var(--ionic-color-magenta-1000-rgb, 168, 52, 149);
+$ionic-color-magenta-1100: var(--ionic-color-magenta-1100, #892b7a);
+$ionic-color-magenta-1100-rgb: var(--ionic-color-magenta-1100-rgb, 137, 43, 122);
+$ionic-color-magenta-1200: var(--ionic-color-magenta-1200, #611e56);
+$ionic-color-magenta-1200-rgb: var(--ionic-color-magenta-1200-rgb, 97, 30, 86);
+$ionic-color-pink-100: var(--ionic-color-pink-100, #fef3f5);
+$ionic-color-pink-100-rgb: var(--ionic-color-pink-100-rgb, 254, 243, 245);
+$ionic-color-pink-200: var(--ionic-color-pink-200, #fdeaee);
+$ionic-color-pink-200-rgb: var(--ionic-color-pink-200-rgb, 253, 234, 238);
+$ionic-color-pink-300: var(--ionic-color-pink-300, #fad3dc);
+$ionic-color-pink-300-rgb: var(--ionic-color-pink-300-rgb, 250, 211, 220);
+$ionic-color-pink-400: var(--ionic-color-pink-400, #f8b9c9);
+$ionic-color-pink-400-rgb: var(--ionic-color-pink-400-rgb, 248, 185, 201);
+$ionic-color-pink-500: var(--ionic-color-pink-500, #f69bb3);
+$ionic-color-pink-500-rgb: var(--ionic-color-pink-500-rgb, 246, 155, 179);
+$ionic-color-pink-600: var(--ionic-color-pink-600, #f3759a);
+$ionic-color-pink-600-rgb: var(--ionic-color-pink-600-rgb, 243, 117, 154);
+$ionic-color-pink-700: var(--ionic-color-pink-700, #f13b7d);
+$ionic-color-pink-700-rgb: var(--ionic-color-pink-700-rgb, 241, 59, 125);
+$ionic-color-pink-800: var(--ionic-color-pink-800, #dc3672);
+$ionic-color-pink-800-rgb: var(--ionic-color-pink-800-rgb, 220, 54, 114);
+$ionic-color-pink-900: var(--ionic-color-pink-900, #c53066);
+$ionic-color-pink-900-rgb: var(--ionic-color-pink-900-rgb, 197, 48, 102);
+$ionic-color-pink-1000: var(--ionic-color-pink-1000, #aa2a58);
+$ionic-color-pink-1000-rgb: var(--ionic-color-pink-1000-rgb, 170, 42, 88);
+$ionic-color-pink-1100: var(--ionic-color-pink-1100, #8b2248);
+$ionic-color-pink-1100-rgb: var(--ionic-color-pink-1100-rgb, 139, 34, 72);
+$ionic-color-pink-1200: var(--ionic-color-pink-1200, #621833);
+$ionic-color-pink-1200-rgb: var(--ionic-color-pink-1200-rgb, 98, 24, 51);
+$ionic-color-primary-100: var(--ionic-color-primary-100, #f2f4fd);
+$ionic-color-primary-100-rgb: var(--ionic-color-primary-100-rgb, 242, 244, 253);
+$ionic-color-primary-200: var(--ionic-color-primary-200, #e9ecfc);
+$ionic-color-primary-200-rgb: var(--ionic-color-primary-200-rgb, 233, 236, 252);
+$ionic-color-primary-300: var(--ionic-color-primary-300, #d0d7fa);
+$ionic-color-primary-300-rgb: var(--ionic-color-primary-300-rgb, 208, 215, 250);
+$ionic-color-primary-400: var(--ionic-color-primary-400, #b5c0f7);
+$ionic-color-primary-400-rgb: var(--ionic-color-primary-400-rgb, 181, 192, 247);
+$ionic-color-primary-500: var(--ionic-color-primary-500, #94a5f4);
+$ionic-color-primary-500-rgb: var(--ionic-color-primary-500-rgb, 148, 165, 244);
+$ionic-color-primary-600: var(--ionic-color-primary-600, #6986f2);
+$ionic-color-primary-600-rgb: var(--ionic-color-primary-600-rgb, 105, 134, 242);
+$ionic-color-primary-700: var(--ionic-color-primary-700, #105cef);
+$ionic-color-primary-700-rgb: var(--ionic-color-primary-700-rgb, 16, 92, 239);
+$ionic-color-primary-800: var(--ionic-color-primary-800, #0f54da);
+$ionic-color-primary-800-rgb: var(--ionic-color-primary-800-rgb, 15, 84, 218);
+$ionic-color-primary-900: var(--ionic-color-primary-900, #0d4bc3);
+$ionic-color-primary-900-rgb: var(--ionic-color-primary-900-rgb, 13, 75, 195);
+$ionic-color-primary-1000: var(--ionic-color-primary-1000, #0b41a9);
+$ionic-color-primary-1000-rgb: var(--ionic-color-primary-1000-rgb, 11, 65, 169);
+$ionic-color-primary-1100: var(--ionic-color-primary-1100, #09358a);
+$ionic-color-primary-1100-rgb: var(--ionic-color-primary-1100-rgb, 9, 53, 138);
+$ionic-color-primary-1200: var(--ionic-color-primary-1200, #072561);
+$ionic-color-primary-1200-rgb: var(--ionic-color-primary-1200-rgb, 7, 37, 97);
+$ionic-color-primary-base: var(--ionic-color-primary-base, #105cef);
+$ionic-color-primary-base-rgb: var(--ionic-color-primary-base-rgb, 16, 92, 239);
+$ionic-color-info-100: var(--ionic-color-info-100, #ebf9fe);
+$ionic-color-info-100-rgb: var(--ionic-color-info-100-rgb, 235, 249, 254);
+$ionic-color-info-200: var(--ionic-color-info-200, #dcf4fd);
+$ionic-color-info-200-rgb: var(--ionic-color-info-200-rgb, 220, 244, 253);
+$ionic-color-info-300: var(--ionic-color-info-300, #b3e9fc);
+$ionic-color-info-300-rgb: var(--ionic-color-info-300-rgb, 179, 233, 252);
+$ionic-color-info-400: var(--ionic-color-info-400, #80defa);
+$ionic-color-info-400-rgb: var(--ionic-color-info-400-rgb, 128, 222, 250);
+$ionic-color-info-500: var(--ionic-color-info-500, #27d3f9);
+$ionic-color-info-500-rgb: var(--ionic-color-info-500-rgb, 39, 211, 249);
+$ionic-color-info-600: var(--ionic-color-info-600, #22bbdc);
+$ionic-color-info-600-rgb: var(--ionic-color-info-600-rgb, 34, 187, 220);
+$ionic-color-info-700: var(--ionic-color-info-700, #1ea2bf);
+$ionic-color-info-700-rgb: var(--ionic-color-info-700-rgb, 30, 162, 191);
+$ionic-color-info-800: var(--ionic-color-info-800, #1988a0);
+$ionic-color-info-800-rgb: var(--ionic-color-info-800-rgb, 25, 136, 160);
+$ionic-color-info-900: var(--ionic-color-info-900, #146d81);
+$ionic-color-info-900-rgb: var(--ionic-color-info-900-rgb, 20, 109, 129);
+$ionic-color-info-1000: var(--ionic-color-info-1000, #0f5261);
+$ionic-color-info-1000-rgb: var(--ionic-color-info-1000-rgb, 15, 82, 97);
+$ionic-color-info-1100: var(--ionic-color-info-1100, #0a3741);
+$ionic-color-info-1100-rgb: var(--ionic-color-info-1100-rgb, 10, 55, 65);
+$ionic-color-info-1200: var(--ionic-color-info-1200, #051c21);
+$ionic-color-info-1200-rgb: var(--ionic-color-info-1200-rgb, 5, 28, 33);
+$ionic-color-warning-100: var(--ionic-color-warning-100, #fff9ea);
+$ionic-color-warning-100-rgb: var(--ionic-color-warning-100-rgb, 255, 249, 234);
+$ionic-color-warning-200: var(--ionic-color-warning-200, #fff5db);
+$ionic-color-warning-200-rgb: var(--ionic-color-warning-200-rgb, 255, 245, 219);
+$ionic-color-warning-300: var(--ionic-color-warning-300, #ffebb1);
+$ionic-color-warning-300-rgb: var(--ionic-color-warning-300-rgb, 255, 235, 177);
+$ionic-color-warning-400: var(--ionic-color-warning-400, #ffe07b);
+$ionic-color-warning-400-rgb: var(--ionic-color-warning-400-rgb, 255, 224, 123);
+$ionic-color-warning-500: var(--ionic-color-warning-500, #ffd600);
+$ionic-color-warning-500-rgb: var(--ionic-color-warning-500-rgb, 255, 214, 0);
+$ionic-color-warning-600: var(--ionic-color-warning-600, #e1bd00);
+$ionic-color-warning-600-rgb: var(--ionic-color-warning-600-rgb, 225, 189, 0);
+$ionic-color-warning-700: var(--ionic-color-warning-700, #c3a400);
+$ionic-color-warning-700-rgb: var(--ionic-color-warning-700-rgb, 195, 164, 0);
+$ionic-color-warning-800: var(--ionic-color-warning-800, #a48a00);
+$ionic-color-warning-800-rgb: var(--ionic-color-warning-800-rgb, 164, 138, 0);
+$ionic-color-warning-900: var(--ionic-color-warning-900, #846f00);
+$ionic-color-warning-900-rgb: var(--ionic-color-warning-900-rgb, 132, 111, 0);
+$ionic-color-warning-1000: var(--ionic-color-warning-1000, #635300);
+$ionic-color-warning-1000-rgb: var(--ionic-color-warning-1000-rgb, 99, 83, 0);
+$ionic-color-warning-1100: var(--ionic-color-warning-1100, #423800);
+$ionic-color-warning-1100-rgb: var(--ionic-color-warning-1100-rgb, 66, 56, 0);
+$ionic-color-warning-1200: var(--ionic-color-warning-1200, #221d00);
+$ionic-color-warning-1200-rgb: var(--ionic-color-warning-1200-rgb, 34, 29, 0);
+$ionic-color-danger-100: var(--ionic-color-danger-100, #feeded);
+$ionic-color-danger-100-rgb: var(--ionic-color-danger-100-rgb, 254, 237, 237);
+$ionic-color-danger-200: var(--ionic-color-danger-200, #fde1e1);
+$ionic-color-danger-200-rgb: var(--ionic-color-danger-200-rgb, 253, 225, 225);
+$ionic-color-danger-300: var(--ionic-color-danger-300, #fcc1c1);
+$ionic-color-danger-300-rgb: var(--ionic-color-danger-300-rgb, 252, 193, 193);
+$ionic-color-danger-400: var(--ionic-color-danger-400, #faa1a1);
+$ionic-color-danger-400-rgb: var(--ionic-color-danger-400-rgb, 250, 161, 161);
+$ionic-color-danger-500: var(--ionic-color-danger-500, #f97d7d);
+$ionic-color-danger-500-rgb: var(--ionic-color-danger-500-rgb, 249, 125, 125);
+$ionic-color-danger-600: var(--ionic-color-danger-600, #f85151);
+$ionic-color-danger-600-rgb: var(--ionic-color-danger-600-rgb, 248, 81, 81);
+$ionic-color-danger-700: var(--ionic-color-danger-700, #e52929);
+$ionic-color-danger-700-rgb: var(--ionic-color-danger-700-rgb, 229, 41, 41);
+$ionic-color-danger-800: var(--ionic-color-danger-800, #bf2222);
+$ionic-color-danger-800-rgb: var(--ionic-color-danger-800-rgb, 191, 34, 34);
+$ionic-color-danger-900: var(--ionic-color-danger-900, #991b1b);
+$ionic-color-danger-900-rgb: var(--ionic-color-danger-900-rgb, 153, 27, 27);
+$ionic-color-danger-1000: var(--ionic-color-danger-1000, #761515);
+$ionic-color-danger-1000-rgb: var(--ionic-color-danger-1000-rgb, 118, 21, 21);
+$ionic-color-danger-1100: var(--ionic-color-danger-1100, #540f0f);
+$ionic-color-danger-1100-rgb: var(--ionic-color-danger-1100-rgb, 84, 15, 15);
+$ionic-color-danger-1200: var(--ionic-color-danger-1200, #330909);
+$ionic-color-danger-1200-rgb: var(--ionic-color-danger-1200-rgb, 51, 9, 9);
+$ionic-color-success-100: var(--ionic-color-success-100, #ebf9ec);
+$ionic-color-success-100-rgb: var(--ionic-color-success-100-rgb, 235, 249, 236);
+$ionic-color-success-200: var(--ionic-color-success-200, #dcf5de);
+$ionic-color-success-200-rgb: var(--ionic-color-success-200-rgb, 220, 245, 222);
+$ionic-color-success-300: var(--ionic-color-success-300, #b3ebb7);
+$ionic-color-success-300-rgb: var(--ionic-color-success-300-rgb, 179, 235, 183);
+$ionic-color-success-400: var(--ionic-color-success-400, #7fe089);
+$ionic-color-success-400-rgb: var(--ionic-color-success-400-rgb, 127, 224, 137);
+$ionic-color-success-500: var(--ionic-color-success-500, #23d643);
+$ionic-color-success-500-rgb: var(--ionic-color-success-500-rgb, 35, 214, 67);
+$ionic-color-success-600: var(--ionic-color-success-600, #1fbd3b);
+$ionic-color-success-600-rgb: var(--ionic-color-success-600-rgb, 31, 189, 59);
+$ionic-color-success-700: var(--ionic-color-success-700, #1ba433);
+$ionic-color-success-700-rgb: var(--ionic-color-success-700-rgb, 27, 164, 51);
+$ionic-color-success-800: var(--ionic-color-success-800, #178a2b);
+$ionic-color-success-800-rgb: var(--ionic-color-success-800-rgb, 23, 138, 43);
+$ionic-color-success-900: var(--ionic-color-success-900, #126f23);
+$ionic-color-success-900-rgb: var(--ionic-color-success-900-rgb, 18, 111, 35);
+$ionic-color-success-1000: var(--ionic-color-success-1000, #0e531a);
+$ionic-color-success-1000-rgb: var(--ionic-color-success-1000-rgb, 14, 83, 26);
+$ionic-color-success-1100: var(--ionic-color-success-1100, #093811);
+$ionic-color-success-1100-rgb: var(--ionic-color-success-1100-rgb, 9, 56, 17);
+$ionic-color-success-1200: var(--ionic-color-success-1200, #051d09);
+$ionic-color-success-1200-rgb: var(--ionic-color-success-1200-rgb, 5, 29, 9);
+$ionic-z-index-0: var(--ionic-z-index-0, 0);
+$ionic-z-index-1: var(--ionic-z-index-1, 100);
+$ionic-z-index-2: var(--ionic-z-index-2, 200);
+$ionic-z-index-3: var(--ionic-z-index-3, 300);
+$ionic-z-index-4: var(--ionic-z-index-4, 400);
+$ionic-z-index-500: var(--ionic-z-index-500, 500);
+$ionic-z-index-bottom: var(--ionic-z-index-bottom, -99999);
+$ionic-z-index-top: var(--ionic-z-index-top, 99999);
+$ionic-scale-0: var(--ionic-scale-0, 0px);
+$ionic-scale-100: var(--ionic-scale-100, 4px);
+$ionic-scale-150: var(--ionic-scale-150, 6px);
+$ionic-scale-200: var(--ionic-scale-200, 8px);
+$ionic-scale-250: var(--ionic-scale-250, 10px);
+$ionic-scale-300: var(--ionic-scale-300, 12px);
+$ionic-scale-400: var(--ionic-scale-400, 16px);
+$ionic-scale-500: var(--ionic-scale-500, 20px);
+$ionic-scale-600: var(--ionic-scale-600, 24px);
+$ionic-scale-700: var(--ionic-scale-700, 28px);
+$ionic-scale-800: var(--ionic-scale-800, 32px);
+$ionic-scale-900: var(--ionic-scale-900, 36px);
+$ionic-scale-1000: var(--ionic-scale-1000, 40px);
+$ionic-scale-1100: var(--ionic-scale-1100, 44px);
+$ionic-scale-1200: var(--ionic-scale-1200, 48px);
+$ionic-scale-1400: var(--ionic-scale-1400, 56px);
+$ionic-scale-1600: var(--ionic-scale-1600, 64px);
+$ionic-scale-1800: var(--ionic-scale-1800, 72px);
+$ionic-scale-2000: var(--ionic-scale-2000, 80px);
+$ionic-scale-2400: var(--ionic-scale-2400, 96px);
+$ionic-scale-3200: var(--ionic-scale-3200, 128px);
+$ionic-scale-4000: var(--ionic-scale-4000, 160px);
+$ionic-scale-5000: var(--ionic-scale-5000, 200px);
+$ionic-scale-6200: var(--ionic-scale-6200, 248px);
+$ionic-scale-7400: var(--ionic-scale-7400, 296px);
+$ionic-scale-9000: var(--ionic-scale-9000, 360px);
+$ionic-scale-025: var(--ionic-scale-025, 1px);
+$ionic-scale-050: var(--ionic-scale-050, 2px);
+$ionic-scale-075: var(--ionic-scale-075, 3px);
+$ionic-font-family: var(--ionic-font-family, "Inter", sans-serif);
+$ionic-state-focus-0: var(--ionic-state-focus-0, none);
+$ionic-state-focus-100: var(--ionic-state-focus-100, #9ec4fd);
+$ionic-state-focus-100-rgb: var(--ionic-state-focus-100-rgb, 158, 196, 253);
+$ionic-state-focus-200: var(--ionic-state-focus-200, #ffafaf);
+$ionic-state-focus-200-rgb: var(--ionic-state-focus-200-rgb, 255, 175, 175);
+
+$ionic-display-sm-regular: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-800,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-1100,
+  text-transform: none,
+  text-decoration: none,
 );
-$ionic-elevation-4: var(
-  --ionic-elevation-4,
-  0px 3px 14px 0px rgba(0, 0, 0, 0.12),
-  0px 20px 48px 0px rgba(0, 0, 0, 0.12)
+
+$ionic-display-sm-light: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-800,
+  font-weight: $ionic-font-weight-light,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-1100,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-display-lg-light: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-900,
+  font-weight: $ionic-font-weight-light,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-1200,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-display-lg-regular: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-900,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-1200,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h1-regular: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-700,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-900,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h1-medium: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-700,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-900,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h1-semi-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-700,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-900,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h1-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-700,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-900,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h2-regular: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-650,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-900,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h2-medium: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-650,
+  font-weight: $ionic-font-weight-medium,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-900,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h2-semi-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-650,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-900,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h2-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-650,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-900,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h3-regular: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-600,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-800,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h3-semi-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-600,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-800,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h3-medium: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-600,
+  font-weight: $ionic-font-weight-medium,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-800,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h3-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-600,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-800,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h4-regular: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-550,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-700,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h4-medium: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-550,
+  font-weight: $ionic-font-weight-medium,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-700,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h4-semi-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-550,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-700,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h4-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-550,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-700,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h5-regular: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-500,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-700,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h5-medium: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-500,
+  font-weight: $ionic-font-weight-medium,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-700,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h5-semi-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-500,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-700,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h5-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-500,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-700,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h6-regular: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-450,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-700,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h6-medium: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-450,
+  font-weight: $ionic-font-weight-medium,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-700,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h6-semi-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-450,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-700,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-heading-h6-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-450,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-700,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-sm-regular: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-300,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-400,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-sm-medium: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-300,
+  font-weight: $ionic-font-weight-medium,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-400,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-sm-semi-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-300,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-400,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-sm-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-300,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-400,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-sm-link: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-300,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-400,
+  text-transform: none,
+  text-decoration: underline,
+);
+
+$ionic-body-sm-italic: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-300,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-400,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-md-medium: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-350,
+  font-weight: $ionic-font-weight-medium,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-md-semi-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-350,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-md-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-350,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-md-regular: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-350,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-md-link: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-350,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: underline,
+);
+
+$ionic-body-md-italic: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-350,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-lg-regular: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-400,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-lg-medium: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-400,
+  font-weight: $ionic-font-weight-medium,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-lg-semi-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-400,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-lg-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-400,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-body-lg-link: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-400,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: underline,
+);
+
+$ionic-body-lg-italic: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-400,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-0,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-action-sm: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-300,
+  font-weight: $ionic-font-weight-medium,
+  letter-spacing: $ionic-letter-spacing-1,
+  line-height: $ionic-line-height-400,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-action-md: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-350,
+  font-weight: $ionic-font-weight-medium,
+  letter-spacing: $ionic-letter-spacing-1,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-action-lg: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-400,
+  font-weight: $ionic-font-weight-medium,
+  letter-spacing: $ionic-letter-spacing-1,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-action-xl: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-500,
+  font-weight: $ionic-font-weight-medium,
+  letter-spacing: $ionic-letter-spacing-1,
+  line-height: $ionic-line-height-600,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-overline-regular: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-300,
+  font-weight: $ionic-font-weight-regular,
+  letter-spacing: $ionic-letter-spacing-2,
+  line-height: $ionic-line-height-400,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-overline-medium: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-300,
+  font-weight: $ionic-font-weight-medium,
+  letter-spacing: $ionic-letter-spacing-2,
+  line-height: $ionic-line-height-400,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-overline-semi-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-300,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-2,
+  line-height: $ionic-line-height-400,
+  text-transform: none,
+  text-decoration: none,
+);
+
+$ionic-overline-bold: (
+  font-family: $ionic-font-family,
+  font-size: $ionic-font-size-300,
+  font-weight: $ionic-font-weight-bold,
+  letter-spacing: $ionic-letter-spacing-2,
+  line-height: $ionic-line-height-400,
+  text-transform: none,
+  text-decoration: none,
 );
diff --git a/core/src/foundations/tokens/README.md b/core/src/foundations/tokens/README.md
new file mode 100644
index 0000000000..12df47e1af
--- /dev/null
+++ b/core/src/foundations/tokens/README.md
@@ -0,0 +1,5 @@
+# Design Tokens JSON Files
+
+Please, do not directly change the JSON files on this token folder. They should come from the UX/UI Team (from Figma or any used source).
+
+Any changes done here should be validated with UX/UI and Framework teams.
diff --git a/core/src/foundations/tokens/color.styles.tokens.json b/core/src/foundations/tokens/color.styles.tokens.json
new file mode 100644
index 0000000000..eaae0e6c5f
--- /dev/null
+++ b/core/src/foundations/tokens/color.styles.tokens.json
@@ -0,0 +1,18 @@
+{
+  "Guidelines": {
+    "$type": "color",
+    "$value": "#9747ff"
+  },
+  "Disabled": {
+    "$type": "color",
+    "$value": "#ffffff99"
+  },
+  "Hover": {
+    "$type": "color",
+    "$value": "#1212120a"
+  },
+  "Pressed": {
+    "$type": "color",
+    "$value": "#12121214"
+  }
+}
\ No newline at end of file
diff --git a/core/src/foundations/tokens/effect.styles.tokens.json b/core/src/foundations/tokens/effect.styles.tokens.json
new file mode 100644
index 0000000000..c6ffbb39b9
--- /dev/null
+++ b/core/src/foundations/tokens/effect.styles.tokens.json
@@ -0,0 +1,154 @@
+{
+  "Elevation-100": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "3px",
+        "blur": "9px",
+        "spread": "0px",
+        "color": "#00000012"
+      },
+      {
+        "offsetX": "0px",
+        "offsetY": "0px",
+        "blur": "4px",
+        "spread": "0px",
+        "color": "#0000000a"
+      }
+    ]
+  },
+  "Elevation-200": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "8px",
+        "blur": "25px",
+        "spread": "0px",
+        "color": "#00000014"
+      },
+      {
+        "offsetX": "0px",
+        "offsetY": "1px",
+        "blur": "5px",
+        "spread": "0px",
+        "color": "#0000000d"
+      }
+    ]
+  },
+  "Elevation-300": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "6px",
+        "blur": "32px",
+        "spread": "0px",
+        "color": "#00000029"
+      },
+      {
+        "offsetX": "0px",
+        "offsetY": "2px",
+        "blur": "7px",
+        "spread": "0px",
+        "color": "#0000000d"
+      }
+    ]
+  },
+  "Elevation-400": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "15px",
+        "blur": "48px",
+        "spread": "0px",
+        "color": "#0000002e"
+      },
+      {
+        "offsetX": "0px",
+        "offsetY": "3px",
+        "blur": "12px",
+        "spread": "0px",
+        "color": "#0000001f"
+      }
+    ]
+  },
+  "Elevation-500": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "3px",
+        "blur": "9px",
+        "spread": "0px",
+        "color": "#062b6312"
+      },
+      {
+        "offsetX": "0px",
+        "offsetY": "0px",
+        "blur": "4px",
+        "spread": "0px",
+        "color": "#062b630a"
+      }
+    ]
+  },
+  "Elevation-600": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "8px",
+        "blur": "25px",
+        "spread": "0px",
+        "color": "#062b6314"
+      },
+      {
+        "offsetX": "0px",
+        "offsetY": "1px",
+        "blur": "5px",
+        "spread": "0px",
+        "color": "#062b630d"
+      }
+    ]
+  },
+  "Elevation-700": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "15px",
+        "blur": "32px",
+        "spread": "0px",
+        "color": "#062b6317"
+      },
+      {
+        "offsetX": "0px",
+        "offsetY": "2px",
+        "blur": "7px",
+        "spread": "0px",
+        "color": "#062b630d"
+      }
+    ]
+  },
+  "Elevation-800": {
+    "$type": "shadow",
+    "$value": [
+      {
+        "offsetX": "0px",
+        "offsetY": "20px",
+        "blur": "48px",
+        "spread": "0px",
+        "color": "#062b631f"
+      },
+      {
+        "offsetX": "0px",
+        "offsetY": "3px",
+        "blur": "14px",
+        "spread": "0px",
+        "color": "#062b631f"
+      }
+    ]
+  }
+}
\ No newline at end of file
diff --git a/core/src/foundations/tokens/manifest.json b/core/src/foundations/tokens/manifest.json
new file mode 100644
index 0000000000..4c38474aba
--- /dev/null
+++ b/core/src/foundations/tokens/manifest.json
@@ -0,0 +1,30 @@
+{
+  "name": "Design Tokens",
+  "collections": {
+    "Primitives": {
+      "modes": {
+        "Value": [
+          "Primitives.Value.tokens.json"
+        ]
+      }
+    },
+    "Theme": {
+      "modes": {
+        "Ionic": [
+          "Theme.Ionic.tokens.json"
+        ]
+      }
+    }
+  },
+  "styles": {
+    "text": [
+      "text.styles.tokens.json"
+    ],
+    "effect": [
+      "effect.styles.tokens.json"
+    ],
+    "color": [
+      "color.styles.tokens.json"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/core/src/foundations/tokens/primitives.value.tokens.json b/core/src/foundations/tokens/primitives.value.tokens.json
new file mode 100644
index 0000000000..7fb0cb3ba1
--- /dev/null
+++ b/core/src/foundations/tokens/primitives.value.tokens.json
@@ -0,0 +1,1196 @@
+{
+  "font-size": {
+    "275": {
+      "$type": "dimension",
+      "$value": "11px"
+    },
+    "300": {
+      "$type": "dimension",
+      "$value": "12px"
+    },
+    "350": {
+      "$type": "dimension",
+      "$value": "14px"
+    },
+    "400": {
+      "$type": "dimension",
+      "$value": "16px"
+    },
+    "450": {
+      "$type": "dimension",
+      "$value": "18px"
+    },
+    "500": {
+      "$type": "dimension",
+      "$value": "20px"
+    },
+    "550": {
+      "$type": "dimension",
+      "$value": "22px"
+    },
+    "600": {
+      "$type": "dimension",
+      "$value": "24px"
+    },
+    "650": {
+      "$type": "dimension",
+      "$value": "26px"
+    },
+    "700": {
+      "$type": "dimension",
+      "$value": "28px"
+    },
+    "800": {
+      "$type": "dimension",
+      "$value": "32px"
+    },
+    "900": {
+      "$type": "dimension",
+      "$value": "36px"
+    }
+  },
+  "font-weight": {
+    "thin": {
+      "$type": "dimension",
+      "$value": "100"
+    },
+    "extra-light": {
+      "$type": "dimension",
+      "$value": "200"
+    },
+    "light": {
+      "$type": "dimension",
+      "$value": "300"
+    },
+    "regular": {
+      "$type": "dimension",
+      "$value": "400"
+    },
+    "medium": {
+      "$type": "dimension",
+      "$value": "500"
+    },
+    "semi-bold": {
+      "$type": "dimension",
+      "$value": "600"
+    },
+    "bold": {
+      "$type": "dimension",
+      "$value": "700"
+    },
+    "extra-bold": {
+      "$type": "dimension",
+      "$value": "800"
+    },
+    "black": {
+      "$type": "dimension",
+      "$value": "900"
+    }
+  },
+  "letter-spacing": {
+    "0": {
+      "$type": "string",
+      "$value": "0"
+    },
+    "1": {
+      "$type": "string",
+      "$value": "1%"
+    },
+    "2": {
+      "$type": "string",
+      "$value": "1.5%"
+    }
+  },
+  "line-height": {
+    "300": {
+      "$type": "dimension",
+      "$value": "{scale.300}"
+    },
+    "400": {
+      "$type": "dimension",
+      "$value": "{scale.400}"
+    },
+    "500": {
+      "$type": "dimension",
+      "$value": "{scale.500}"
+    },
+    "600": {
+      "$type": "dimension",
+      "$value": "{scale.600}"
+    },
+    "700": {
+      "$type": "dimension",
+      "$value": "{scale.700}"
+    },
+    "800": {
+      "$type": "dimension",
+      "$value": "{scale.800}"
+    },
+    "900": {
+      "$type": "dimension",
+      "$value": "{scale.900}"
+    },
+    "1100": {
+      "$type": "dimension",
+      "$value": "{scale.1100}"
+    },
+    "1200": {
+      "$type": "dimension",
+      "$value": "{scale.1200}"
+    },
+    "full": {
+      "$type": "string",
+      "$value": "100%"
+    }
+  },
+  "space": {
+    "0": {
+      "$type": "dimension",
+      "$value": "{scale.0}"
+    },
+    "050": {
+      "$type": "dimension",
+      "$value": "{scale.050}"
+    },
+    "100": {
+      "$type": "dimension",
+      "$value": "{scale.100}"
+    },
+    "150": {
+      "$type": "dimension",
+      "$value": "{scale.150}"
+    },
+    "200": {
+      "$type": "dimension",
+      "$value": "{scale.200}"
+    },
+    "250": {
+      "$type": "dimension",
+      "$value": "{scale.250}"
+    },
+    "300": {
+      "$type": "dimension",
+      "$value": "{scale.300}"
+    },
+    "400": {
+      "$type": "dimension",
+      "$value": "{scale.400}"
+    },
+    "500": {
+      "$type": "dimension",
+      "$value": "{scale.500}"
+    },
+    "600": {
+      "$type": "dimension",
+      "$value": "{scale.600}"
+    },
+    "700": {
+      "$type": "dimension",
+      "$value": "{scale.700}"
+    },
+    "800": {
+      "$type": "dimension",
+      "$value": "{scale.800}"
+    },
+    "900": {
+      "$type": "dimension",
+      "$value": "{scale.900}"
+    },
+    "1000": {
+      "$type": "dimension",
+      "$value": "{scale.1000}"
+    },
+    "1200": {
+      "$type": "dimension",
+      "$value": "{scale.1200}"
+    }
+  },
+  "border-radius": {
+    "0": {
+      "$type": "dimension",
+      "$value": "{scale.0}"
+    },
+    "050": {
+      "$type": "dimension",
+      "$value": "{scale.050}"
+    },
+    "100": {
+      "$type": "dimension",
+      "$value": "{scale.100}"
+    },
+    "200": {
+      "$type": "dimension",
+      "$value": "{scale.200}"
+    },
+    "300": {
+      "$type": "dimension",
+      "$value": "{scale.300}"
+    },
+    "400": {
+      "$type": "dimension",
+      "$value": "{scale.400}"
+    },
+    "800": {
+      "$type": "dimension",
+      "$value": "{scale.800}"
+    },
+    "1000": {
+      "$type": "dimension",
+      "$value": "{scale.1000}"
+    },
+    "full": {
+      "$type": "dimension",
+      "$value": "999px"
+    }
+  },
+  "border-size": {
+    "0": {
+      "$type": "dimension",
+      "$value": "{scale.0}"
+    },
+    "025": {
+      "$type": "dimension",
+      "$value": "{scale.025}"
+    },
+    "050": {
+      "$type": "dimension",
+      "$value": "{scale.050}"
+    },
+    "075": {
+      "$type": "dimension",
+      "$value": "{scale.075}"
+    }
+  },
+  "border-style": {
+    "none": {
+      "$type": "string",
+      "$value": "none"
+    },
+    "solid": {
+      "$type": "string",
+      "$value": "solid"
+    },
+    "dashed": {
+      "$type": "string",
+      "$value": "dashed"
+    },
+    "dotted": {
+      "$type": "string",
+      "$value": "dotted"
+    }
+  },
+  "color": {
+    "base": {
+      "white": {
+        "$type": "color",
+        "$value": "#ffffff"
+      },
+      "black": {
+        "$type": "color",
+        "$value": "#111111"
+      }
+    },
+    "neutral": {
+      "100": {
+        "$type": "color",
+        "$value": "#f1f1f1"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#e7e7e7"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#cfcfcf"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#b9b9b9"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#a2a2a2"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#8c8c8c"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#777777"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#626262"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#4e4e4e"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "#3b3b3b"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "#292929"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "#242424"
+      }
+    },
+    "red": {
+      "100": {
+        "$type": "color",
+        "$value": "#feeded"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#fde1e1"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#fcc1c1"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#faa1a1"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#f97d7d"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#f85151"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#e52929"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#bf2222"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#991b1b"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "#761515"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "#540f0f"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "#330909"
+      }
+    },
+    "pumpkin": {
+      "100": {
+        "$type": "color",
+        "$value": "#feedea"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#fde0db"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#fbbdb1"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#f9947c"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#f75d07"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#da5206"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#bd4705"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#9f3c05"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#803004"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "#602403"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "#401802"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "#210c01"
+      }
+    },
+    "orange": {
+      "100": {
+        "$type": "color",
+        "$value": "#fff1ea"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ffe8db"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#ffcfb1"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#ffb37b"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#ff9400"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#e18300"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#c37100"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#a45f00"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#844d00"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "#633a00"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "#422700"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "#221400"
+      }
+    },
+    "yellow": {
+      "100": {
+        "$type": "color",
+        "$value": "#fff9ea"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#fff5db"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#ffebb1"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#ffe07b"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#ffd600"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#e1bd00"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#c3a400"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#a48a00"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#846f00"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "#635300"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "#423800"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "#221d00"
+      }
+    },
+    "lime": {
+      "100": {
+        "$type": "color",
+        "$value": "#f3faea"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#eaf7db"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#d3efb2"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#bbe77d"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#a0df18"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#8dc515"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#7aab12"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#678f0f"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#53730c"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "#3e5709"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "#2a3a06"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "#151e03"
+      }
+    },
+    "green": {
+      "100": {
+        "$type": "color",
+        "$value": "#ebf9ec"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#dcf5de"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#b3ebb7"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#7fe089"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#23d643"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#1fbd3b"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#1ba433"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#178a2b"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#126f23"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "#0e531a"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "#093811"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "#051d09"
+      }
+    },
+    "teal": {
+      "100": {
+        "$type": "color",
+        "$value": "#eaf8f5"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#dbf3ee"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#b1e7dd"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#7bdbca"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#00cfb7"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#00b7a2"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#009e8c"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#008576"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#006b5f"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "#005147"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "#003630"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "#001c19"
+      }
+    },
+    "aqua": {
+      "100": {
+        "$type": "color",
+        "$value": "#ebf9fe"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#dcf4fd"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#b3e9fc"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#80defa"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#27d3f9"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#22bbdc"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#1ea2bf"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#1988a0"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#146d81"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "#0f5261"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "#0a3741"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "#051c21"
+      }
+    },
+    "blue": {
+      "100": {
+        "$type": "color",
+        "$value": "#f2f4fd"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#e9ecfc"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#d0d7fa"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#b5c0f7"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#94a5f4"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#6986f2"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#105cef"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#0f54da"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#0d4bc3"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "#0b41a9"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "#09358a"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "#072561"
+      }
+    },
+    "indigo": {
+      "100": {
+        "$type": "color",
+        "$value": "#f3f2fb"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#eae9f9"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#d3d1f2"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#bab5eb"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#9d95e4"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#786bdd"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#411bd5"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#3b19c3"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#3516ae"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "#2e1397"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "#26107b"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "#1a0b57"
+      }
+    },
+    "violet": {
+      "100": {
+        "$type": "color",
+        "$value": "#f5f2fe"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#eee9fd"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#dcd1fb"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#c9b6f9"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#b396f6"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#9a6cf4"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#7c20f2"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#711ddd"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#651ac5"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "#5817ab"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "#48128c"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "#330d63"
+      }
+    },
+    "purple": {
+      "100": {
+        "$type": "color",
+        "$value": "#f9f3fe"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#f5eafd"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#e9d3fa"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#deb9f8"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#d29bf6"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#c575f3"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#b73cf1"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#a737dc"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#9531c5"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "#812aaa"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "#6a238b"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "#4b1862"
+      }
+    },
+    "magenta": {
+      "100": {
+        "$type": "color",
+        "$value": "#fdf3fb"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#fcebf8"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#f9d4f1"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#f6bcea"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#f39fe3"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#f07cdb"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#ed4ad3"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#d844c1"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#c13cac"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "#a83495"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "#892b7a"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "#611e56"
+      }
+    },
+    "pink": {
+      "100": {
+        "$type": "color",
+        "$value": "#fef3f5"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#fdeaee"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#fad3dc"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#f8b9c9"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#f69bb3"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#f3759a"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#f13b7d"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#dc3672"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#c53066"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "#aa2a58"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "#8b2248"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "#621833"
+      }
+    }
+  },
+  "z-index": {
+    "0": {
+      "$type": "dimension",
+      "$value": "0"
+    },
+    "1": {
+      "$type": "dimension",
+      "$value": "100"
+    },
+    "2": {
+      "$type": "dimension",
+      "$value": "200"
+    },
+    "3": {
+      "$type": "dimension",
+      "$value": "300"
+    },
+    "4": {
+      "$type": "dimension",
+      "$value": "400"
+    },
+    "500": {
+      "$type": "dimension",
+      "$value": "500"
+    },
+    "bottom": {
+      "$type": "dimension",
+      "$value": "-99999"
+    },
+    "top": {
+      "$type": "dimension",
+      "$value": "99999"
+    }
+  },
+  "scale": {
+    "0": {
+      "$type": "dimension",
+      "$value": "0px"
+    },
+    "100": {
+      "$type": "dimension",
+      "$value": "4px"
+    },
+    "150": {
+      "$type": "dimension",
+      "$value": "6px"
+    },
+    "200": {
+      "$type": "dimension",
+      "$value": "8px"
+    },
+    "250": {
+      "$type": "dimension",
+      "$value": "10px"
+    },
+    "300": {
+      "$type": "dimension",
+      "$value": "12px"
+    },
+    "400": {
+      "$type": "dimension",
+      "$value": "16px"
+    },
+    "500": {
+      "$type": "dimension",
+      "$value": "20px"
+    },
+    "600": {
+      "$type": "dimension",
+      "$value": "24px"
+    },
+    "700": {
+      "$type": "dimension",
+      "$value": "28px"
+    },
+    "800": {
+      "$type": "dimension",
+      "$value": "32px"
+    },
+    "900": {
+      "$type": "dimension",
+      "$value": "36px"
+    },
+    "1000": {
+      "$type": "dimension",
+      "$value": "40px"
+    },
+    "1100": {
+      "$type": "dimension",
+      "$value": "44px"
+    },
+    "1200": {
+      "$type": "dimension",
+      "$value": "48px"
+    },
+    "1400": {
+      "$type": "dimension",
+      "$value": "56px"
+    },
+    "1600": {
+      "$type": "dimension",
+      "$value": "64px"
+    },
+    "1800": {
+      "$type": "dimension",
+      "$value": "72px"
+    },
+    "2000": {
+      "$type": "dimension",
+      "$value": "80px"
+    },
+    "2400": {
+      "$type": "dimension",
+      "$value": "96px"
+    },
+    "3200": {
+      "$type": "dimension",
+      "$value": "128px"
+    },
+    "4000": {
+      "$type": "dimension",
+      "$value": "160px"
+    },
+    "5000": {
+      "$type": "dimension",
+      "$value": "200px"
+    },
+    "6200": {
+      "$type": "dimension",
+      "$value": "248px"
+    },
+    "7400": {
+      "$type": "dimension",
+      "$value": "296px"
+    },
+    "9000": {
+      "$type": "dimension",
+      "$value": "360px"
+    },
+    "025": {
+      "$type": "dimension",
+      "$value": "1px"
+    },
+    "050": {
+      "$type": "dimension",
+      "$value": "2px"
+    },
+    "075": {
+      "$type": "dimension",
+      "$value": "3px"
+    }
+  }
+}
diff --git a/core/src/foundations/tokens/text.styles.tokens.json b/core/src/foundations/tokens/text.styles.tokens.json
new file mode 100644
index 0000000000..fffb0ad2fb
--- /dev/null
+++ b/core/src/foundations/tokens/text.styles.tokens.json
@@ -0,0 +1,682 @@
+{
+  "Display": {
+    "SM": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "32px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "44px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Light": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "32px",
+          "fontWeight": 300,
+          "letterSpacing": "0%",
+          "lineHeight": "44px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "LG": {
+      "Light": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "36px",
+          "fontWeight": 300,
+          "letterSpacing": "0%",
+          "lineHeight": "48px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "36px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "48px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    }
+  },
+  "Heading": {
+    "H1": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "28px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "36px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "28px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "36px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "28px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "36px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "28px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "36px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "H2": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "26px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "36px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "26px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "36px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "26px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "36px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "26px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "36px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "H3": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "24px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "32px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "24px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "32px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "24px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "32px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "24px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "32px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "H4": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "22px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "22px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "22px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "22px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "H5": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "20px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "20px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "20px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "20px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "H6": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "18px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "18px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "18px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "18px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "28px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    }
+  },
+  "Body": {
+    "SM": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "12px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "16px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "12px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "16px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "12px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "16px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "12px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "16px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Link": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "12px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "16px",
+          "textTransform": "none",
+          "textDecoration": "underline"
+        }
+      },
+      "Italic": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "12px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "16px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "MD": {
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "14px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "14px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "14px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "14px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Link": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "14px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "underline"
+        }
+      },
+      "Italic": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "14px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    },
+    "LG": {
+      "Regular": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "16px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Medium": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "16px",
+          "fontWeight": 500,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Semi Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "16px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Bold": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "16px",
+          "fontWeight": 700,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      },
+      "Link": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "16px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "underline"
+        }
+      },
+      "Italic": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "Inter",
+          "fontSize": "16px",
+          "fontWeight": 400,
+          "letterSpacing": "0%",
+          "lineHeight": "24px",
+          "textTransform": "none",
+          "textDecoration": "none"
+        }
+      }
+    }
+  },
+  "Action": {
+    "SM": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "Inter",
+        "fontSize": "12px",
+        "fontWeight": 500,
+        "letterSpacing": "1%",
+        "lineHeight": "16px",
+        "textTransform": "none",
+        "textDecoration": "none"
+      }
+    },
+    "MD": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "Inter",
+        "fontSize": "14px",
+        "fontWeight": 500,
+        "letterSpacing": "1%",
+        "lineHeight": "24px",
+        "textTransform": "none",
+        "textDecoration": "none"
+      }
+    },
+    "LG": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "Inter",
+        "fontSize": "16px",
+        "fontWeight": 500,
+        "letterSpacing": "1%",
+        "lineHeight": "24px",
+        "textTransform": "none",
+        "textDecoration": "none"
+      }
+    },
+    "XL": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "Inter",
+        "fontSize": "20px",
+        "fontWeight": 500,
+        "letterSpacing": "1%",
+        "lineHeight": "24px",
+        "textTransform": "none",
+        "textDecoration": "none"
+      }
+    }
+  },
+  "Overline": {
+    "Regular": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "Inter",
+        "fontSize": "12px",
+        "fontWeight": 400,
+        "letterSpacing": "1.5%",
+        "lineHeight": "16px",
+        "textTransform": "none",
+        "textDecoration": "none"
+      }
+    },
+    "Medium": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "Inter",
+        "fontSize": "12px",
+        "fontWeight": 500,
+        "letterSpacing": "1.5%",
+        "lineHeight": "16px",
+        "textTransform": "none",
+        "textDecoration": "none"
+      }
+    },
+    "Semi Bold": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "Inter",
+        "fontSize": "12px",
+        "fontWeight": 700,
+        "letterSpacing": "1.5%",
+        "lineHeight": "16px",
+        "textTransform": "none",
+        "textDecoration": "none"
+      }
+    },
+    "Bold": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "Inter",
+        "fontSize": "12px",
+        "fontWeight": 700,
+        "letterSpacing": "1.5%",
+        "lineHeight": "16px",
+        "textTransform": "none",
+        "textDecoration": "none"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/core/src/foundations/tokens/theme/theme.ionic.tokens.json b/core/src/foundations/tokens/theme/theme.ionic.tokens.json
new file mode 100644
index 0000000000..1c2a00ec92
--- /dev/null
+++ b/core/src/foundations/tokens/theme/theme.ionic.tokens.json
@@ -0,0 +1,280 @@
+{
+  "font-family": {
+    "Inter": {
+      "$type": "string",
+      "$value": "Inter"
+    }
+  },
+  "color": {
+    "primary": {
+      "base": {
+        "$type": "color",
+        "$value": "{color.blue.700}"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "{color.blue.100}"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "{color.blue.200}"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "{color.blue.300}"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "{color.blue.400}"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "{color.blue.500}"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "{color.blue.600}"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "{color.blue.700}"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "{color.blue.800}"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "{color.blue.900}"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "{color.blue.1000}"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "{color.blue.1100}"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "{color.blue.1200}"
+      }
+    },
+    "info": {
+      "100": {
+        "$type": "color",
+        "$value": "{color.aqua.100}"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "{color.aqua.200}"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "{color.aqua.300}"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "{color.aqua.400}"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "{color.aqua.500}"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "{color.aqua.600}"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "{color.aqua.700}"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "{color.aqua.800}"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "{color.aqua.900}"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "{color.aqua.1000}"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "{color.aqua.1100}"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "{color.aqua.1200}"
+      }
+    },
+    "warning": {
+      "100": {
+        "$type": "color",
+        "$value": "{color.yellow.100}"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "{color.yellow.200}"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "{color.yellow.300}"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "{color.yellow.400}"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "{color.yellow.500}"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "{color.yellow.600}"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "{color.yellow.700}"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "{color.yellow.800}"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "{color.yellow.900}"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "{color.yellow.1000}"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "{color.yellow.1100}"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "{color.yellow.1200}"
+      }
+    },
+    "danger": {
+      "100": {
+        "$type": "color",
+        "$value": "{color.red.100}"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "{color.red.200}"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "{color.red.300}"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "{color.red.400}"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "{color.red.500}"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "{color.red.600}"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "{color.red.700}"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "{color.red.800}"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "{color.red.900}"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "{color.red.1000}"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "{color.red.1100}"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "{color.red.1200}"
+      }
+    },
+    "success": {
+      "100": {
+        "$type": "color",
+        "$value": "{color.green.100}"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "{color.green.200}"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "{color.green.300}"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "{color.green.400}"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "{color.green.500}"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "{color.green.600}"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "{color.green.700}"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "{color.green.800}"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "{color.green.900}"
+      },
+      "1000": {
+        "$type": "color",
+        "$value": "{color.green.1000}"
+      },
+      "1100": {
+        "$type": "color",
+        "$value": "{color.green.1100}"
+      },
+      "1200": {
+        "$type": "color",
+        "$value": "{color.green.1200}"
+      }
+    }
+  },
+  "state": {
+    "focus": {
+      "0": {
+        "$type": "string",
+        "$value": "none"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#9ec4fd"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#ffafaf"
+      }
+    }
+  }
+}
diff --git a/core/src/themes/mixins.scss b/core/src/themes/mixins.scss
index 3cc5dc1537..1b7297aef6 100644
--- a/core/src/themes/mixins.scss
+++ b/core/src/themes/mixins.scss
@@ -112,6 +112,21 @@
   opacity: 0;
 }
 
+// Typography mixin to be used with typography scss variables (ionic.vars.scss)
+//
+// ex: @include typography($ionic-heading-h3-medium);
+//
+// --------------------------------------------------
+@mixin typography($properties) {
+  font-family: map-get($properties, font-family);
+  font-size: map-get($properties, font-size);
+  font-weight: map-get($properties, font-weight);
+  letter-spacing: map-get($properties, letter-spacing);
+  line-height: map-get($properties, line-height);
+  text-transform: map-get($properties, text-transform);
+  text-decoration: map-get($properties, text-decoration);
+}
+
 // Font smoothing
 // --------------------------------------------------