diff --git a/core/src/components/cat-alert/cat-alert.scss b/core/src/components/cat-alert/cat-alert.scss
index 265008dfd..10d597519 100644
--- a/core/src/components/cat-alert/cat-alert.scss
+++ b/core/src/components/cat-alert/cat-alert.scss
@@ -34,9 +34,9 @@
     background-color: cat-token('color.theme.#{$theme}.bg');
     color: cat-token('color.theme.#{$theme}.fill');
     // adjust nested links
-    --cat-primary-text: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};
-    --cat-primary-text-hover: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};
-    --cat-primary-text-active: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};
+    --cat-primary-text: #{cat-token('color.theme.#{$theme}.fill')};
+    --cat-primary-text-hover: #{cat-token('color.theme.#{$theme}.fillHover')};
+    --cat-primary-text-active: #{cat-token('color.theme.#{$theme}.fillActive')};
     --cat-link-decoration: underline;
   }
 }
diff --git a/core/src/components/cat-badge/cat-badge.scss b/core/src/components/cat-badge/cat-badge.scss
index f18acc587..d9aae24f8 100644
--- a/core/src/components/cat-badge/cat-badge.scss
+++ b/core/src/components/cat-badge/cat-badge.scss
@@ -49,26 +49,26 @@ $-paddings: (
 
 // ----- theme
 
-$-outline: inset 0 0 0 1px cat-token-wrap(var(--text), $alpha: 0.2);
+$-outline: inset 0 0 0 1px color-mix(in srgb, var(--text) 20%, transparent);
 
 :host([variant='filled']) {
-  background-color: cat-token-wrap(var(--bg));
-  color: cat-token-wrap(var(--fill));
+  background-color: var(--bg);
+  color: var(--fill);
   font-weight: 600;
   @include cat-font-smooth;
 }
 
 :host([variant='outlined']) {
   background-color: cat-token('color.ui.background.surface');
-  color: cat-token-wrap(var(--text));
+  color: var(--text);
   box-shadow: $-outline;
 }
 
 @mixin theme($theme) {
   :host([color='#{$theme}']) {
-    --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};
-    --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};
-    --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};
+    --bg: #{cat-token('color.theme.#{$theme}.bg')};
+    --fill: #{cat-token('color.theme.#{$theme}.fill')};
+    --text: #{cat-token('color.theme.#{$theme}.text')};
   }
 }
 
@@ -98,7 +98,7 @@ $-outline: inset 0 0 0 1px cat-token-wrap(var(--text), $alpha: 0.2);
 
 // ----- pulse
 
-$-pulse-0: 0 0 0 0 cat-token-wrap(var(--bg));
+$-pulse-0: 0 0 0 0 var(--bg);
 $-pulse-70: transparent 0 0 0 0.5rem;
 $-pulse-100: transparent 0 0 0 0;
 
diff --git a/core/src/components/cat-button/cat-button.scss b/core/src/components/cat-button/cat-button.scss
index 298106ff2..67f9b8972 100644
--- a/core/src/components/cat-button/cat-button.scss
+++ b/core/src/components/cat-button/cat-button.scss
@@ -116,47 +116,47 @@ $button-sizes: (
 // ----- theme
 
 .cat-button-filled {
-  background-color: cat-token-wrap(var(--bg));
-  color: cat-token-wrap(var(--fill));
+  background-color: var(--bg);
+  color: var(--fill);
   font-weight: var(--cat-font-weight-button, 600);
   @include cat-font-smooth;
 
   &.cat-button-disabled {
-    --bg: #{cat-token('color.ui.background.muted', $wrap: false)};
-    --fill: #{cat-token('color.ui.font.muted', $wrap: false)};
+    --bg: #{cat-token('color.ui.background.muted')};
+    --fill: #{cat-token('color.ui.font.muted')};
   }
 }
 
 .cat-button-outlined {
   background-color: cat-token('color.ui.background.surface');
-  box-shadow: inset 0 0 0 1px cat-token-wrap(var(--base), $alpha: 0.2);
-  color: cat-token-wrap(var(--text));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--base) 20%, transparent);
+  color: var(--text);
 
   &.cat-button-disabled {
-    --base: #{cat-token('color.ui.font.muted', $wrap: false)};
-    --text: #{cat-token('color.ui.font.muted', $wrap: false)};
+    --base: #{cat-token('color.ui.font.muted')};
+    --text: #{cat-token('color.ui.font.muted')};
   }
 
   &:hover:not(.cat-button-disabled):not(.cat-button-loading) {
-    background-color: cat-token-wrap(var(--base), $alpha: 0.1);
+    background-color: color-mix(in srgb, var(--base) 10%, transparent);
   }
 
   &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading) {
-    background-color: cat-token-wrap(var(--base), $alpha: 0.1);
+    background-color: color-mix(in srgb, var(--base) 10%, transparent);
   }
 
   &:active:not(.cat-button-disabled):not(.cat-button-loading) {
-    background-color: cat-token-wrap(var(--base), $alpha: 0.1);
+    background-color: color-mix(in srgb, var(--base) 10%, transparent);
   }
 }
 
 .cat-button-text {
   background-color: transparent;
-  color: cat-token-wrap(var(--text));
+  color: var(--text);
   text-decoration: cat-token('font.decoration.linkButton');
 
   &.cat-button-disabled {
-    --text: #{cat-token('color.ui.font.muted', $wrap: false)};
+    --text: #{cat-token('color.ui.font.muted')};
   }
 
   &:hover:not(.cat-button-disabled):not(.cat-button-loading) {
@@ -170,10 +170,10 @@ $button-sizes: (
 
 .cat-button-link {
   background-color: transparent;
-  color: cat-token-wrap(var(--text));
+  color: var(--text);
 
   &.cat-button-disabled {
-    --text: #{cat-token('color.ui.font.muted', $wrap: false)};
+    --text: #{cat-token('color.ui.font.muted')};
   }
 
   &:hover:not(.cat-button-disabled):not(.cat-button-loading) {
@@ -187,26 +187,26 @@ $button-sizes: (
 
 @mixin theme($theme) {
   .cat-button-#{$theme} {
-    --bg: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};
-    --fill: #{cat-token('color.theme.#{$theme}.fill', $wrap: false)};
-    --text: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};
+    --bg: #{cat-token('color.theme.#{$theme}.bg')};
+    --fill: #{cat-token('color.theme.#{$theme}.fill')};
+    --text: #{cat-token('color.theme.#{$theme}.text')};
     @if $theme == 'secondary' {
-      --base: #{cat-token('color.theme.#{$theme}.bg', $wrap: false)};
+      --base: #{cat-token('color.theme.#{$theme}.bg')};
     } @else {
-      --base: #{cat-token('color.theme.#{$theme}.text', $wrap: false)};
+      --base: #{cat-token('color.theme.#{$theme}.text')};
     }
 
     &:hover:not(.cat-button-disabled):not(.cat-button-loading) {
-      --bg: #{cat-token('color.theme.#{$theme}.bgHover', $wrap: false)};
-      --fill: #{cat-token('color.theme.#{$theme}.fillHover', $wrap: false)};
-      --text: #{cat-token('color.theme.#{$theme}.textHover', $wrap: false)};
+      --bg: #{cat-token('color.theme.#{$theme}.bgHover')};
+      --fill: #{cat-token('color.theme.#{$theme}.fillHover')};
+      --text: #{cat-token('color.theme.#{$theme}.textHover')};
     }
 
     &.cat-button-active:not(.cat-button-disabled):not(.cat-button-loading),
     &:active:not(.cat-button-disabled):not(.cat-button-loading) {
-      --bg: #{cat-token('color.theme.#{$theme}.bgActive', $wrap: false)};
-      --fill: #{cat-token('color.theme.#{$theme}.fillActive', $wrap: false)};
-      --text: #{cat-token('color.theme.#{$theme}.textActive', $wrap: false)};
+      --bg: #{cat-token('color.theme.#{$theme}.bgActive')};
+      --fill: #{cat-token('color.theme.#{$theme}.fillActive')};
+      --text: #{cat-token('color.theme.#{$theme}.textActive')};
     }
   }
 }
diff --git a/core/src/components/cat-input/cat-input.scss b/core/src/components/cat-input/cat-input.scss
index 1d115f5a9..a7a452035 100644
--- a/core/src/components/cat-input/cat-input.scss
+++ b/core/src/components/cat-input/cat-input.scss
@@ -36,9 +36,9 @@
   overflow: hidden;
   background: cat-token('color.ui.background.input');
   border-radius: cat-border-radius('m');
-  box-shadow: inset 0 0 0 1px rgb(var(--border-color));
+  box-shadow: inset 0 0 0 1px var(--border-color);
   transition: box-shadow cat-token('time.transition.s') linear;
-  --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};
+  --border-color: #{cat-token('color.ui.border.dark')};
 
   &.input-round {
     border-radius: 10rem;
@@ -56,8 +56,8 @@
 
   &:not(.input-disabled):hover {
     box-shadow:
-      inset 0 0 0 1px rgb(var(--border-color)),
-      0 0 0 1px rgb(var(--border-color));
+      inset 0 0 0 1px var(--border-color),
+      0 0 0 1px var(--border-color);
   }
 
   &:focus-within {
@@ -70,7 +70,7 @@
   }
 
   &.input-invalid {
-    --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};
+    --border-color: color-mix(in srgb, #{cat-token('color.theme.danger.bg')} 20%, transparent);
   }
 
   /* stylelint-disable property-no-vendor-prefix */
diff --git a/core/src/components/cat-select/cat-select.scss b/core/src/components/cat-select/cat-select.scss
index 7234ce924..a590e06ed 100644
--- a/core/src/components/cat-select/cat-select.scss
+++ b/core/src/components/cat-select/cat-select.scss
@@ -42,15 +42,15 @@ label {
   align-items: flex-start;
   background: cat-token('color.ui.background.input');
   border-radius: cat-border-radius('m');
-  box-shadow: inset 0 0 0 1px rgb(var(--border-color));
+  box-shadow: inset 0 0 0 1px var(--border-color);
   transition: box-shadow cat-token('time.transition.s') linear;
   padding: 0.25rem;
-  --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};
+  --border-color: #{cat-token('color.ui.border.dark')};
 
   &:not(.select-disabled):hover {
     box-shadow:
-      inset 0 0 0 1px rgb(var(--border-color)),
-      0 0 0 1px rgb(var(--border-color));
+      inset 0 0 0 1px var(--border-color),
+      0 0 0 1px var(--border-color);
   }
 
   &:focus-within {
@@ -59,7 +59,7 @@ label {
   }
 
   &.select-invalid {
-    --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};
+    --border-color: color-mix(in srgb, #{cat-token('color.theme.danger.bg')} 20%, transparent);
   }
 
   /* stylelint-disable property-no-vendor-prefix */
@@ -249,7 +249,7 @@ cat-spinner {
 }
 
 .select-option:hover {
-  background-color: cat-token('color.theme.secondary.bg', 0.05);
+  background-color: color-mix(in srgb, #{cat-token('color.theme.secondary.bg')} 5%, transparent);
 }
 
 .select-option-active {
diff --git a/core/src/components/cat-textarea/cat-textarea.scss b/core/src/components/cat-textarea/cat-textarea.scss
index 2d6a3f700..74f524f0a 100644
--- a/core/src/components/cat-textarea/cat-textarea.scss
+++ b/core/src/components/cat-textarea/cat-textarea.scss
@@ -42,11 +42,11 @@
   position: absolute;
   top: calc(0.625rem - 2px);
   right: 0.75rem;
-  background: cat-token('color.ui.background.input', 0.75);
+  background: color-mix(in srgb, #{cat-token('color.ui.background.input')} 75%, transparent);
   border-radius: 100rem;
 
   .textarea-disabled & {
-    background: cat-token('color.ui.background.muted', 0.75);
+    background: color-mix(in srgb, #{cat-token('color.ui.background.muted')} 75%, transparent);
   }
 }
 
@@ -59,10 +59,10 @@ textarea {
   background: cat-token('color.ui.background.input');
   border-radius: cat-border-radius('m');
   border: none;
-  box-shadow: inset 0 0 0 1px rgb(var(--border-color));
+  box-shadow: inset 0 0 0 1px var(--border-color);
   transition: box-shadow cat-token('time.transition.s') linear;
   resize: vertical;
-  --border-color: #{cat-token('color.ui.border.dark', $wrap: false)};
+  --border-color: #{cat-token('color.ui.border.dark')};
 
   &:disabled {
     background: cat-token('color.ui.background.muted');
@@ -73,8 +73,8 @@ textarea {
 
   &:not(:disabled):hover {
     box-shadow:
-      inset 0 0 0 1px rgb(var(--border-color)),
-      0 0 0 1px rgb(var(--border-color));
+      inset 0 0 0 1px var(--border-color),
+      0 0 0 1px var(--border-color);
   }
 
   &:focus {
@@ -83,7 +83,7 @@ textarea {
   }
 
   .textarea-invalid & {
-    --border-color: #{cat-token('color.theme.danger.bg', 0.2, $wrap: false)};
+    --border-color: color-mix(in srgb, #{cat-token('color.theme.danger.bg')} 20%, transparent);
   }
 
   &::placeholder {
diff --git a/core/src/components/cat-toggle/cat-toggle.scss b/core/src/components/cat-toggle/cat-toggle.scss
index 1ba717c43..be3a2cbc0 100644
--- a/core/src/components/cat-toggle/cat-toggle.scss
+++ b/core/src/components/cat-toggle/cat-toggle.scss
@@ -88,7 +88,7 @@ input {
 
 :host(.cat-error) {
   .toggle {
-    background-color: cat-token('color.theme.danger.bg', 0.2);
+    background-color: color-mix(in srgb, #{cat-token('color.theme.danger.bg')} 20%, transparent);
   }
 
   :checked + .toggle {
diff --git a/core/src/components/cat-tooltip/cat-tooltip.scss b/core/src/components/cat-tooltip/cat-tooltip.scss
index 01c4c9485..6754595cf 100644
--- a/core/src/components/cat-tooltip/cat-tooltip.scss
+++ b/core/src/components/cat-tooltip/cat-tooltip.scss
@@ -14,8 +14,8 @@ $-shift-padding: 0.25rem; // padding given to the shift() middleware
 }
 
 .tooltip {
-  --cat-font-color-head: #{cat-token('color.ui.font.tooltip', $wrap: false)};
-  --cat-font-color-body: #{cat-token('color.ui.font.tooltip', $wrap: false)};
+  --cat-font-color-head: #{cat-token('color.ui.font.tooltip')};
+  --cat-font-color-body: #{cat-token('color.ui.font.tooltip')};
   position: fixed;
   width: max-content;
   top: 0;
diff --git a/core/src/styles/_snippets/_form-label.scss b/core/src/styles/_snippets/_form-label.scss
index aa29299af..3a82a623e 100644
--- a/core/src/styles/_snippets/_form-label.scss
+++ b/core/src/styles/_snippets/_form-label.scss
@@ -31,7 +31,7 @@ $cat-input-height: 2.5rem;
   flex-grow: 1;
   justify-content: space-between;
   gap: 0.25rem;
-  color: cat-token('color.ui.font.muted');
+  color: $cat-color-ui-font-muted;
 }
 
 .label-optional,
diff --git a/core/src/styles/_variables.scss b/core/src/styles/_variables.scss
index 43e906264..ee7e40b07 100644
--- a/core/src/styles/_variables.scss
+++ b/core/src/styles/_variables.scss
@@ -1,5 +1,32 @@
-@use 'variables.tokens' as *;
-@forward 'variables.tokens';
+@use 'sass:map';
+@use 'sass:string';
+@use 'sass:list';
+@use '~@haiilo/catalyst-tokens/dist/scss/variables' as *;
+@forward '~@haiilo/catalyst-tokens/dist/scss/variables';
+
+@function -map-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map.get($map, $key);
+  }
+  @return $map;
+}
+
+@function -split($string, $separator: ' ') {
+  $result: ();
+  $index: string.index($string, $separator);
+  @while $index != null {
+    $item: string.slice($string, 1, $index - 1);
+    $result: list.append($result, $item);
+    $string: string.slice($string, $index + string.length($separator));
+    $index: string.index($string, $separator);
+  }
+  $result: list.append($result, $string);
+  @return $result;
+}
+
+@function cat-token($key) {
+  @return -map-get($tokens, -split($key, '.')...);
+}
 
 // --------
 // -- Variables
@@ -10,8 +37,8 @@
 // --------
 
 $cat-font-family-head: var(--cat-font-family-head);
-$cat-font-color-head: rgb(var(--cat-font-color-head));
-$cat-font-color-mono: rgb(var(--cat-font-color-mono));
+$cat-font-color-head: var(--cat-font-color-head);
+$cat-font-color-mono: var(--cat-font-color-mono);
 
 // --------
 // -- Spacings
@@ -25,7 +52,7 @@ $cat-nav-padding-horizontal: 0.75rem;
 // -- Typography
 // --------
 
-$cat-mark-color: cat-token('color.theme.primary.bg', 0.2);
+$cat-mark-color: color-mix(in srgb, #{cat-token('color.theme.primary.bg')} 20%, transparent);
 /* stylelint-disable value-keyword-case */
 $font-fallback-base:
   system-ui,
diff --git a/core/src/styles/_variables.tokens.scss b/core/src/styles/_variables.tokens.scss
deleted file mode 100644
index 0c976216b..000000000
--- a/core/src/styles/_variables.tokens.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:color';
-@use 'sass:string';
-
-@use '~@haiilo/catalyst-tokens/dist/scss/variables' as *;
-@forward '~@haiilo/catalyst-tokens/dist/scss/variables' show $tokens;
-
-// -----
-// -- Split a string using the given separator.
-// -----
-@function -cat-split($string, $separator: ' ') {
-  $result: ();
-  $index: string.index($string, $separator);
-  @while $index != null {
-    $item: string.slice($string, 1, $index - 1);
-    $result: list.append($result, $item);
-    $string: string.slice($string, $index + string.length($separator));
-    $index: string.index($string, $separator);
-  }
-  $result: list.append($result, $string);
-  @return $result;
-}
-
-// -----
-// -- Join strings using the given separator.
-// -----
-@function -cat-join($strings, $separator: ' ') {
-  $result: '';
-  @each $string in $strings {
-    $result: $result + $separator + $string;
-  }
-  @return string.slice($result, string.length($separator) + 1);
-}
-
-// -----
-// -- Deep map.get using a dot-separated key.
-// -----
-@function -cat-get($map, $key) {
-  $keys: -cat-split('' + $key, '.');
-  @each $key in $keys {
-    @if $map {
-      $map: map.get($map, $key);
-    }
-  }
-  @return $map;
-}
-
-@function cat-token-wrap($value, $alpha: 1) {
-  @if meta.type-of($value) == 'string' {
-    @if meta.type-of($alpha) != 'number' or $alpha < 1 {
-      @return rgba($value, $alpha);
-    } @else {
-      @return rgb($value);
-    }
-  } @else if meta.type-of($value) == 'list' {
-    @return color.adjust(
-      #00000000,
-      $red: list.nth($value, 1),
-      $green: list.nth($value, 2),
-      $blue: list.nth($value, 3),
-      $alpha: $alpha
-    );
-  } @else {
-    @return $value;
-  }
-}
-
-// -----
-// -- Accessor for $tokens using a dot-separated key.
-// -- Automatically wraps RGB partials into an rgb() expression and
-// -- optionally adds an RGB alpha value.
-// -----
-@function cat-token($key, $alpha: 1, $wrap: true) {
-  $value: -cat-get($tokens, $key);
-  @if not $value {
-    @error 'Unknown token "#{-cat-join($key, '.')}".';
-  }
-  @if string.index($key, 'color.') == 1 {
-    @if $wrap {
-      @return cat-token-wrap($value, $alpha);
-    } @else if meta.type-of($alpha) != 'number' or $alpha < 1 {
-      @return $value, $alpha;
-    }
-  }
-  @return $value;
-}
diff --git a/core/src/styles/core/_dialog.scss b/core/src/styles/core/_dialog.scss
index 9363d3040..c7ee7abcc 100644
--- a/core/src/styles/core/_dialog.scss
+++ b/core/src/styles/core/_dialog.scss
@@ -17,7 +17,11 @@
 $-dialog-padding: 1.5rem;
 
 .cat-backdrop {
-  background-color: RGB(#{cat-token('color.ui.background.backdrop', cat-token('opacity.backdrop'), $wrap: false)});
+  background-color: color-mix(
+    in srgb,
+    #{cat-token('color.ui.background.backdrop')} #{cat-token('opacity.backdrop')},
+    transparent
+  );
 }
 
 .cat-dialog {
diff --git a/core/src/styles/core/_notification.scss b/core/src/styles/core/_notification.scss
index 4556a04da..19dd1e967 100644
--- a/core/src/styles/core/_notification.scss
+++ b/core/src/styles/core/_notification.scss
@@ -14,13 +14,13 @@
   @include cat-elevation(4);
 
   &.cat-toastify-dark {
-    --cat-font-color-base: #{cat-token('color.ui.font.baseInverted', $wrap: false)};
-    --cat-primary-text: #{cat-token('color.theme.primaryInverted.text', $wrap: false)};
-    --cat-primary-text-hover: #{cat-token('color.theme.primaryInverted.textHover', $wrap: false)};
-    --cat-primary-text-active: #{cat-token('color.theme.primaryInverted.textActive', $wrap: false)};
-    --cat-secondary-text: #{cat-token('color.theme.secondaryInverted.text', $wrap: false)};
-    --cat-secondary-text-hover: #{cat-token('color.theme.secondaryInverted.textHover', $wrap: false)};
-    --cat-secondary-text-active: #{cat-token('color.theme.secondaryInverted.textActive', $wrap: false)};
+    --cat-font-color-base: #{cat-token('color.ui.font.baseInverted')};
+    --cat-primary-text: #{cat-token('color.theme.primaryInverted.text')};
+    --cat-primary-text-hover: #{cat-token('color.theme.primaryInverted.textHover')};
+    --cat-primary-text-active: #{cat-token('color.theme.primaryInverted.textActive')};
+    --cat-secondary-text: #{cat-token('color.theme.secondaryInverted.text')};
+    --cat-secondary-text-hover: #{cat-token('color.theme.secondaryInverted.textHover')};
+    --cat-secondary-text-active: #{cat-token('color.theme.secondaryInverted.textActive')};
     background: cat-token('color.ui.background.surfaceInverted');
   }
 }
diff --git a/core/src/styles/fonts/_fonts-mixins.scss b/core/src/styles/fonts/_fonts-mixins.scss
index 1a802a553..69a85ac25 100644
--- a/core/src/styles/fonts/_fonts-mixins.scss
+++ b/core/src/styles/fonts/_fonts-mixins.scss
@@ -1,11 +1,7 @@
 @use 'fonts.mixins.lato' as *;
-@use 'fonts.mixins.ss3v' as *;
 
 @mixin cat-fonts($path) {
   @include cat-font-lato($path, 300, 400, 500, 600, 700) {
     font-display: fallback;
   }
-  @include cat-font-ss3v($path) {
-    font-display: fallback;
-  }
 }
diff --git a/core/src/styles/fonts/_fonts.mixins.ss3v.scss b/core/src/styles/fonts/_fonts.mixins.ss3v.scss
deleted file mode 100644
index 8bc86f565..000000000
--- a/core/src/styles/fonts/_fonts.mixins.ss3v.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@use '../variables' as *;
-
-@mixin cat-font-ss3v($path) {
-  @font-face {
-    font-family: 'Source Sans 3';
-    src:
-      url('#{$path}/#{cat-token("asset.font.ss3v.woff2")}') format('woff2'),
-      url('#{$path}/#{cat-token("asset.font.ss3v.woff")}') format('woff');
-    font-weight: 200 900;
-    font-style: normal;
-    @content;
-  }
-}
diff --git a/core/src/styles/utils/_color.scss b/core/src/styles/utils/_color.scss
index d01de13e1..1691335ad 100644
--- a/core/src/styles/utils/_color.scss
+++ b/core/src/styles/utils/_color.scss
@@ -5,9 +5,9 @@
     background-color: cat-token('color.theme.#{$name}.bg') !important;
     color: cat-token('color.theme.#{$name}.fill') !important;
     // adjust nested links
-    --cat-primary-text: #{cat-token('color.theme.#{$name}.fill', $wrap: false)};
-    --cat-primary-text-hover: #{cat-token('color.theme.#{$name}.fillHover', $wrap: false)};
-    --cat-primary-text-active: #{cat-token('color.theme.#{$name}.fillActive', $wrap: false)};
+    --cat-primary-text: #{cat-token('color.theme.#{$name}.fill')};
+    --cat-primary-text-hover: #{cat-token('color.theme.#{$name}.fillHover')};
+    --cat-primary-text-active: #{cat-token('color.theme.#{$name}.fillActive')};
     --cat-link-decoration: underline;
   }
 
@@ -20,9 +20,9 @@
       background-color: cat-token('color.theme.#{$name}.bgHover') !important;
       color: cat-token('color.theme.#{$name}.fillHover') !important;
       // adjust nested links
-      --cat-primary-text: #{cat-token('color.theme.#{$name}.fill', $wrap: false)};
-      --cat-primary-text-hover: #{cat-token('color.theme.#{$name}.fillHover', $wrap: false)};
-      --cat-primary-text-active: #{cat-token('color.theme.#{$name}.fillActive', $wrap: false)};
+      --cat-primary-text: #{cat-token('color.theme.#{$name}.fill')};
+      --cat-primary-text-hover: #{cat-token('color.theme.#{$name}.fillHover')};
+      --cat-primary-text-active: #{cat-token('color.theme.#{$name}.fillActive')};
       --cat-link-decoration: underline;
     }
   }
diff --git a/core/src/styles/vendor/_flatpickr.scss b/core/src/styles/vendor/_flatpickr.scss
index ddae9f30f..fed3921f7 100644
--- a/core/src/styles/vendor/_flatpickr.scss
+++ b/core/src/styles/vendor/_flatpickr.scss
@@ -78,7 +78,7 @@
 
     &:hover,
     &:focus-within {
-      background-color: cat-token('color.theme.primary.bg', 0.05);
+      background-color: color-mix(in srgb, #{cat-token('color.theme.primary.bg')} 5%, transparent);
     }
   }
 
@@ -188,7 +188,7 @@
   &.notAllowed,
   &.notAllowed.prevMonthDay,
   &.notAllowed.nextMonthDay {
-    color: cat-token('color.ui.font.muted', 0.5);
+    color: color-mix(in srgb, #{cat-token('color.ui.font.muted')} 5%, transparent);
   }
 
   &.selected,
@@ -218,7 +218,7 @@
   &:focus,
   &.prevMonthDay:focus,
   &.nextMonthDay:focus {
-    background-color: cat-token('color.theme.primary.bg', 0.1);
+    background-color: color-mix(in srgb, #{cat-token('color.theme.primary.bg')} 10%, transparent);
   }
 
   &.selected.startRange,
@@ -242,7 +242,7 @@
 
   &:hover,
   &:focus-within {
-    background-color: cat-token('color.theme.primary.bg', 0.05);
+    background-color: color-mix(in srgb, #{cat-token('color.theme.primary.bg')} 5%, transparent);
   }
 
   span {
@@ -316,7 +316,7 @@
   &:hover,
   &:focus {
     border-radius: cat-border-radius('m');
-    background-color: cat-token('color.theme.primary.bg', 0.05);
+    background-color: color-mix(in srgb, #{cat-token('color.theme.primary.bg')} 5%, transparent);
   }
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 85134333e..cece7b441 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
     devDependencies:
       '@commitlint/cli':
         specifier: ^19.0.3
-        version: 19.3.0(@types/node@20.14.2)(typescript@5.4.5)
+        version: 19.4.0(@types/node@20.14.2)(typescript@5.4.5)
       '@commitlint/config-conventional':
         specifier: ^19.0.3
         version: 19.2.2
@@ -109,45 +109,6 @@ importers:
         specifier: ~4.6.3
         version: 4.6.4
 
-  angular/dist/catalyst:
-    dependencies:
-      '@angular/cdk':
-        specifier: '>=14.0.0'
-        version: 14.2.7(@angular/common@14.3.0(@angular/core@14.3.0(rxjs@7.8.1)(zone.js@0.11.8))(rxjs@7.8.1))(@angular/core@14.3.0(rxjs@7.8.1)(zone.js@0.11.8))(rxjs@7.8.1)
-      '@angular/core':
-        specifier: '>=14.0.0'
-        version: 14.3.0(rxjs@7.8.1)(zone.js@0.11.8)
-      '@haiilo/catalyst':
-        specifier: workspace:*
-        version: link:../../../core
-      '@haiilo/catalyst-tokens':
-        specifier: workspace:*
-        version: link:../../../tokens
-      loglevel:
-        specifier: 1.8.1
-        version: 1.8.1
-      rxjs:
-        specifier: ^6.5.3 || ^7.4.0
-        version: 7.8.1
-      tslib:
-        specifier: ^2.3.0
-        version: 2.6.2
-
-  angular/dist/catalyst-formly:
-    dependencies:
-      '@angular/core':
-        specifier: ^14.0.0 || ^15.0.0 || ^16.0.0
-        version: 14.3.0(rxjs@7.8.1)(zone.js@0.11.8)
-      '@haiilo/catalyst-angular':
-        specifier: workspace:*
-        version: link:../../projects/catalyst
-      '@ngx-formly/core':
-        specifier: ^6.0.0
-        version: 6.3.0(@angular/forms@14.3.0(@angular/common@14.3.0(@angular/core@14.3.0(rxjs@7.8.1)(zone.js@0.11.8))(rxjs@7.8.1))(@angular/core@14.3.0(rxjs@7.8.1)(zone.js@0.11.8))(@angular/platform-browser@14.3.0(@angular/animations@14.3.0(@angular/core@14.3.0(rxjs@7.8.1)(zone.js@0.11.8)))(@angular/common@14.3.0(@angular/core@14.3.0(rxjs@7.8.1)(zone.js@0.11.8))(rxjs@7.8.1))(@angular/core@14.3.0(rxjs@7.8.1)(zone.js@0.11.8)))(rxjs@7.8.1))(rxjs@7.8.1)
-      tslib:
-        specifier: ^2.3.0
-        version: 2.6.2
-
   angular/projects/catalyst:
     dependencies:
       '@angular/cdk':
@@ -346,10 +307,6 @@ importers:
         version: 4.6.4
 
   tokens:
-    dependencies:
-      source-sans:
-        specifier: github:adobe-fonts/source-sans#ed18089
-        version: https://codeload.github.com/adobe-fonts/source-sans/tar.gz/ed18089
     devDependencies:
       copyfiles:
         specifier: 2.4.1
@@ -360,9 +317,6 @@ importers:
       style-dictionary-utils:
         specifier: 2.4.1
         version: 2.4.1(style-dictionary@3.8.0)
-      tinycolor2:
-        specifier: 1.6.0
-        version: 1.6.0
 
 packages:
 
@@ -1205,8 +1159,8 @@ packages:
     resolution: {integrity: sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==}
     engines: {node: '>=0.1.90'}
 
-  '@commitlint/cli@19.3.0':
-    resolution: {integrity: sha512-LgYWOwuDR7BSTQ9OLZ12m7F/qhNY+NpAyPBgo4YNMkACE7lGuUnuQq1yi9hz1KA4+3VqpOYl8H1rY/LYK43v7g==}
+  '@commitlint/cli@19.4.0':
+    resolution: {integrity: sha512-sJX4J9UioVwZHq7JWM9tjT5bgWYaIN3rC4FP7YwfEwBYiIO+wMyRttRvQLNkow0vCdM0D67r9NEWU0Ui03I4Eg==}
     engines: {node: '>=v18'}
     hasBin: true
 
@@ -1238,8 +1192,8 @@ packages:
     resolution: {integrity: sha512-xrzMmz4JqwGyKQKTpFzlN0dx0TAiT7Ran1fqEBgEmEj+PU98crOFtysJgY+QdeSagx6EDRigQIXJVnfrI0ratA==}
     engines: {node: '>=v18'}
 
-  '@commitlint/load@19.2.0':
-    resolution: {integrity: sha512-XvxxLJTKqZojCxaBQ7u92qQLFMMZc4+p9qrIq/9kJDy8DOrEa7P1yx7Tjdc2u2JxIalqT4KOGraVgCE7eCYJyQ==}
+  '@commitlint/load@19.4.0':
+    resolution: {integrity: sha512-I4lCWaEZYQJ1y+Y+gdvbGAx9pYPavqZAZ3/7/8BpWh+QjscAn8AjsUpLV2PycBsEx7gupq5gM4BViV9xwTIJuw==}
     engines: {node: '>=v18'}
 
   '@commitlint/message@19.0.0':
@@ -1250,8 +1204,8 @@ packages:
     resolution: {integrity: sha512-Il+tNyOb8VDxN3P6XoBBwWJtKKGzHlitEuXA5BP6ir/3loWlsSqDr5aecl6hZcC/spjq4pHqNh0qPlfeWu38QA==}
     engines: {node: '>=v18'}
 
-  '@commitlint/read@19.2.1':
-    resolution: {integrity: sha512-qETc4+PL0EUv7Q36lJbPG+NJiBOGg7SSC7B5BsPWOmei+Dyif80ErfWQ0qXoW9oCh7GTpTNRoaVhiI8RbhuaNw==}
+  '@commitlint/read@19.4.0':
+    resolution: {integrity: sha512-r95jLOEZzKDakXtnQub+zR3xjdnrl2XzerPwm7ch1/cc5JGq04tyaNpa6ty0CRCWdVrk4CZHhqHozb8yZwy2+g==}
     engines: {node: '>=v18'}
 
   '@commitlint/resolve-extends@19.1.0':
@@ -7544,10 +7498,6 @@ packages:
     resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==}
     engines: {node: '>= 8'}
 
-  source-sans@https://codeload.github.com/adobe-fonts/source-sans/tar.gz/ed18089:
-    resolution: {tarball: https://codeload.github.com/adobe-fonts/source-sans/tar.gz/ed18089}
-    version: 3.46.0
-
   sourcemap-codec@1.4.8:
     resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
     deprecated: Please use @jridgewell/sourcemap-codec instead
@@ -9788,12 +9738,12 @@ snapshots:
 
   '@colors/colors@1.5.0': {}
 
-  '@commitlint/cli@19.3.0(@types/node@20.14.2)(typescript@5.4.5)':
+  '@commitlint/cli@19.4.0(@types/node@20.14.2)(typescript@5.4.5)':
     dependencies:
       '@commitlint/format': 19.3.0
       '@commitlint/lint': 19.2.2
-      '@commitlint/load': 19.2.0(@types/node@20.14.2)(typescript@5.4.5)
-      '@commitlint/read': 19.2.1
+      '@commitlint/load': 19.4.0(@types/node@20.14.2)(typescript@5.4.5)
+      '@commitlint/read': 19.4.0
       '@commitlint/types': 19.0.3
       execa: 8.0.1
       yargs: 17.7.2
@@ -9839,7 +9789,7 @@ snapshots:
       '@commitlint/rules': 19.0.3
       '@commitlint/types': 19.0.3
 
-  '@commitlint/load@19.2.0(@types/node@20.14.2)(typescript@5.4.5)':
+  '@commitlint/load@19.4.0(@types/node@20.14.2)(typescript@5.4.5)':
     dependencies:
       '@commitlint/config-validator': 19.0.3
       '@commitlint/execute-rule': 19.0.0
@@ -9863,7 +9813,7 @@ snapshots:
       conventional-changelog-angular: 7.0.0
       conventional-commits-parser: 5.0.0
 
-  '@commitlint/read@19.2.1':
+  '@commitlint/read@19.4.0':
     dependencies:
       '@commitlint/top-level': 19.0.0
       '@commitlint/types': 19.0.3
@@ -17691,8 +17641,6 @@ snapshots:
 
   source-map@0.7.4: {}
 
-  source-sans@https://codeload.github.com/adobe-fonts/source-sans/tar.gz/ed18089: {}
-
   sourcemap-codec@1.4.8: {}
 
   spdx-correct@3.2.0:
diff --git a/tokens/config.js b/tokens/config.js
index 0061d71cd..561990911 100644
--- a/tokens/config.js
+++ b/tokens/config.js
@@ -1,10 +1,4 @@
 const StyleDictionary = require('style-dictionary-utils');
-const tinycolor = require("tinycolor2");
-
-StyleDictionary.registerFileHeader({
-  name: 'cat/header',
-  fileHeader: () => ['Auto-generated file. Do not edit directly.']
-});
 
 StyleDictionary.registerFormat({
   name: 'json/designTokens',
@@ -17,43 +11,34 @@ StyleDictionary.registerFormat({
       };
       return obj;
     }
-    const tokens = dictionary.allTokens.reduce((acc, token) =>
-      set(acc, token.path, token)
-    , {});
+    const tokens = dictionary.allTokens.reduce((acc, token) => set(acc, token.path, token), {});
     return JSON.stringify(tokens, null, 2);
   }
 });
 
-StyleDictionary.registerFormat({
-  name: 'json/cssProp',
-  formatter: function ({ dictionary }) {
-    const tokens = dictionary.allTokens.reduce((acc, token) => {
-      acc[token.cssProp] = {
-        $type: token.$type,
-        $value: token.value
-      };
-      return acc;
-    }, {});
-    return JSON.stringify(tokens, null, 2);
-  }
+StyleDictionary.registerTransform({
+  type: 'value',
+  name: 'cat/cssProp',
+  transitive: true,
+  matcher: token => !!token.cssProp,
+  transformer: token => `var(--cat-${token.cssProp}, ${token.value})`
 });
 
+
 StyleDictionary.registerTransform({
   type: 'value',
-  name: 'cat/rgbParts',
-  matcher: token => token.$type === 'color',
-  transformer: token => {
-    var rgb = tinycolor(token.value).toRgb();
-    return `${rgb.r}, ${rgb.g}, ${rgb.b}`;
-  }
+  name: 'opacity/percent',
+  transitive: true,
+  matcher: token => token.$type === 'opacity',
+  transformer: token => token.value * 100 + '%'
 });
 
 StyleDictionary.registerTransform({
-  type: 'value',
-  name: 'cat/cssProp',
+  type: 'name',
+  name: 'cat/scssPrivate',
   transitive: true,
-  matcher: token => !!token.cssProp,
-  transformer: token => `var(--cat-${token.cssProp}, ${token.value})`
+  matcher: token => token.attributes.category === 'color' && token.attributes.type === 'base',
+  transformer: token => `-${token.name}`
 });
 
 StyleDictionary.registerTransform({
@@ -73,75 +58,38 @@ module.exports = {
       files: [{
         destination: 'variables.js',
         format: "javascript/es6",
-        options: {
-          fileHeader: 'cat/header'
-        }
       }, {
         destination: 'variables.d.ts',
         format: 'typescript/es6-declarations',
-        options: {
-          fileHeader: 'cat/header'
-        }
-      }]
-    },
-    css: {
-      transforms: ['attribute/cti', 'name/cti/kebab', 'content/icon', 'color/css', 'cat/rgbParts'],
-      prefix: 'cat',
-      buildPath: 'dist/css/',
-      files: [{
-        destination: 'variables.css',
-        format: 'css/variables',
-        options: {
-          fileHeader: 'cat/header',
-          outputReferences: false
-        }
       }]
     },
     cssHex: {
-      transforms: ['attribute/cti', 'name/cti/kebab', 'content/icon', 'color/css'],
+      transforms: ['attribute/cti', 'name/cti/kebab', 'content/icon', 'color/hex', 'opacity/percent'],
       prefix: 'cat',
       buildPath: 'dist/css/',
       files: [{
-        destination: 'variables-hex.css',
+        destination: 'variables.css',
         format: 'css/variables',
         options: {
-          fileHeader: 'cat/header',
-          outputReferences: false
+          outputReferences: true
         }
       }]
     },
     scss: {
-      transforms: ['attribute/cti', 'name/cti/kebab', 'content/icon', 'color/css', 'cat/rgbParts', 'cat/cssProp'],
+      transforms: ['attribute/cti', 'name/cti/kebab', 'color/hex', 'opacity/percent', 'cat/cssProp', 'cat/scssPrivate'],
       prefix: 'cat',
       buildPath: 'dist/scss/',
       files: [{
         destination: '_variables.scss',
         format: 'scss/map-deep',
         options: {
-          fileHeader: 'cat/header',
           outputReferences: true,
           themeable: true
         }
       }]
     },
-    json: {
-      transforms: ['name/cti/kebab'],
-      buildPath: 'dist/json/',
-      files: [{
-        destination: 'variables.json',
-        format: 'json/nested'
-      }]
-    },
-    zeroheight: {
-      transforms: ['name/cti/kebab'],
-      buildPath: 'dist/export/',
-      files: [{
-        destination: 'zeroheight.json',
-        format: 'json/designTokens'
-      }]
-    },
     figma: {
-      transforms: ['name/cti/kebab', 'dimension/pixelUnitless'],
+      transforms: ['attribute/cti', 'name/cti/kebab', 'color/hex', 'dimension/pixelUnitless'],
       buildPath: 'dist/export/',
       files: [{
         destination: 'figma.json',
@@ -149,13 +97,13 @@ module.exports = {
         filter: (token) => token.$type !== 'asset'
       }]
     },
-    theme: {
-      transforms: ['name/cti/kebab'],
+    zeroheight: {
+      transforms: ['attribute/cti', 'name/cti/kebab', 'color/hex'],
       buildPath: 'dist/export/',
       files: [{
-        destination: 'theme.json',
-        format: 'json/cssProp',
-        filter: (token) => token.hasOwnProperty('cssProp')
+        destination: 'zeroheight.json',
+        format: 'json/designTokens',
+        filter: (token) => token.$type !== 'asset'
       }]
     }
   }
diff --git a/tokens/dist/export/theme.json b/tokens/dist/export/theme.json
deleted file mode 100644
index 6791ec434..000000000
--- a/tokens/dist/export/theme.json
+++ /dev/null
@@ -1,330 +0,0 @@
-{
-  "primary-bg": {
-    "$type": "color",
-    "$value": "#008194"
-  },
-  "primary-bg-hover": {
-    "$type": "color",
-    "$value": "#017384"
-  },
-  "primary-bg-active": {
-    "$type": "color",
-    "$value": "#026371"
-  },
-  "primary-fill": {
-    "$type": "color",
-    "$value": "#ffffff"
-  },
-  "primary-fill-hover": {
-    "$type": "color",
-    "$value": "#ffffff"
-  },
-  "primary-fill-active": {
-    "$type": "color",
-    "$value": "#ffffff"
-  },
-  "primary-text": {
-    "$type": "color",
-    "$value": "#008194"
-  },
-  "primary-text-hover": {
-    "$type": "color",
-    "$value": "#017384"
-  },
-  "primary-text-active": {
-    "$type": "color",
-    "$value": "#026371"
-  },
-  "secondary-bg": {
-    "$type": "color",
-    "$value": "#697687"
-  },
-  "secondary-bg-hover": {
-    "$type": "color",
-    "$value": "#697687"
-  },
-  "secondary-bg-active": {
-    "$type": "color",
-    "$value": "#697687"
-  },
-  "secondary-fill": {
-    "$type": "color",
-    "$value": "#ffffff"
-  },
-  "secondary-fill-hover": {
-    "$type": "color",
-    "$value": "#ffffff"
-  },
-  "secondary-fill-active": {
-    "$type": "color",
-    "$value": "#ffffff"
-  },
-  "secondary-text": {
-    "$type": "color",
-    "$value": "#000000"
-  },
-  "secondary-text-hover": {
-    "$type": "color",
-    "$value": "#000000"
-  },
-  "secondary-text-active": {
-    "$type": "color",
-    "$value": "#000000"
-  },
-  "info-bg": {
-    "$type": "color",
-    "$value": "#0073e6"
-  },
-  "info-bg-hover": {
-    "$type": "color",
-    "$value": "#006be3"
-  },
-  "info-bg-active": {
-    "$type": "color",
-    "$value": "#0060df"
-  },
-  "info-fill": {
-    "$type": "color",
-    "$value": "#ffffff"
-  },
-  "info-fill-hover": {
-    "$type": "color",
-    "$value": "#ffffff"
-  },
-  "info-fill-active": {
-    "$type": "color",
-    "$value": "#ffffff"
-  },
-  "info-text": {
-    "$type": "color",
-    "$value": "#0073e6"
-  },
-  "info-text-hover": {
-    "$type": "color",
-    "$value": "#006be3"
-  },
-  "info-text-active": {
-    "$type": "color",
-    "$value": "#0060df"
-  },
-  "success-bg": {
-    "$type": "color",
-    "$value": "#008458"
-  },
-  "success-bg-hover": {
-    "$type": "color",
-    "$value": "#00754e"
-  },
-  "success-bg-active": {
-    "$type": "color",
-    "$value": "#006946"
-  },
-  "success-fill": {
-    "$type": "color",
-    "$value": "#ffffff"
-  },
-  "success-fill-hover": {
-    "$type": "color",
-    "$value": "#ffffff"
-  },
-  "success-fill-active": {
-    "$type": "color",
-    "$value": "#ffffff"
-  },
-  "success-text": {
-    "$type": "color",
-    "$value": "#008458"
-  },
-  "success-text-hover": {
-    "$type": "color",
-    "$value": "#00754e"
-  },
-  "success-text-active": {
-    "$type": "color",
-    "$value": "#006946"
-  },
-  "warning-bg": {
-    "$type": "color",
-    "$value": "#ffce80"
-  },
-  "warning-bg-hover": {
-    "$type": "color",
-    "$value": "#ffd694"
-  },
-  "warning-bg-active": {
-    "$type": "color",
-    "$value": "#ffdea8"
-  },
-  "warning-fill": {
-    "$type": "color",
-    "$value": "#000000"
-  },
-  "warning-fill-hover": {
-    "$type": "color",
-    "$value": "#000000"
-  },
-  "warning-fill-active": {
-    "$type": "color",
-    "$value": "#000000"
-  },
-  "warning-text": {
-    "$type": "color",
-    "$value": "#9f6100"
-  },
-  "warning-text-hover": {
-    "$type": "color",
-    "$value": "#9f6100"
-  },
-  "warning-text-active": {
-    "$type": "color",
-    "$value": "#9f6100"
-  },
-  "danger-bg": {
-    "$type": "color",
-    "$value": "#d9340d"
-  },
-  "danger-bg-hover": {
-    "$type": "color",
-    "$value": "#c22e0b"
-  },
-  "danger-bg-active": {
-    "$type": "color",
-    "$value": "#ae2a0a"
-  },
-  "danger-fill": {
-    "$type": "color",
-    "$value": "#ffffff"
-  },
-  "danger-fill-hover": {
-    "$type": "color",
-    "$value": "#ffffff"
-  },
-  "danger-fill-active": {
-    "$type": "color",
-    "$value": "#ffffff"
-  },
-  "danger-text": {
-    "$type": "color",
-    "$value": "#d9340d"
-  },
-  "danger-text-hover": {
-    "$type": "color",
-    "$value": "#c22e0b"
-  },
-  "danger-text-active": {
-    "$type": "color",
-    "$value": "#ae2a0a"
-  },
-  "bg": {
-    "$type": "color",
-    "$value": "#f2f4f7"
-  },
-  "bg-tooltip": {
-    "$type": "color",
-    "$value": "#000000"
-  },
-  "bg-backdrop": {
-    "$type": "color",
-    "$value": "#1b1f26"
-  },
-  "border-color-light": {
-    "$type": "color",
-    "$value": "#f2f4f7"
-  },
-  "border-color": {
-    "$type": "color",
-    "$value": "#ebecf0"
-  },
-  "border-color-dark": {
-    "$type": "color",
-    "$value": "#d7dbe0"
-  },
-  "border-color-focus": {
-    "$type": "color",
-    "$value": "#0071ff"
-  },
-  "font-color-base": {
-    "$type": "color",
-    "$value": "#000000"
-  },
-  "font-color-muted": {
-    "$type": "color",
-    "$value": "#515c6c"
-  },
-  "font-color-quote": {
-    "$type": "color",
-    "$value": "#515c6c"
-  },
-  "font-color-tooltip": {
-    "$type": "color",
-    "$value": "#ffffff"
-  },
-  "font-family-base": {
-    "$type": "fontFamily",
-    "$value": "Lato"
-  },
-  "font-family-mono": {
-    "$type": "fontFamily",
-    "$value": "''"
-  },
-  "font-family-emoji": {
-    "$type": "fontFamily",
-    "$value": "''"
-  },
-  "font-weight-head": {
-    "$type": "fontWeight",
-    "$value": 600
-  },
-  "font-weight-body": {
-    "$type": "fontWeight",
-    "$value": 400
-  },
-  "font-weight-mono": {
-    "$type": "fontWeight",
-    "$value": 400
-  },
-  "link-decoration": {
-    "$type": "fontDecoration",
-    "$value": "none"
-  },
-  "link-decoration-hover": {
-    "$type": "fontDecoration",
-    "$value": "underline"
-  },
-  "link-button-decoration": {
-    "$type": "fontDecoration",
-    "$value": "none"
-  },
-  "link-button-decoration-hover": {
-    "$type": "fontDecoration",
-    "$value": "none"
-  },
-  "opacity-disabled": {
-    "$type": "opacity",
-    "$value": 0.65
-  },
-  "opacity-backdrop": {
-    "$type": "opacity",
-    "$value": 0.4
-  },
-  "opacity-tooltip": {
-    "$type": "opacity",
-    "$value": 1
-  },
-  "border-radius-l": {
-    "$type": "dimension",
-    "$value": "0.5rem"
-  },
-  "border-radius-m": {
-    "$type": "dimension",
-    "$value": "0.25rem"
-  },
-  "border-radius-s": {
-    "$type": "dimension",
-    "$value": "0.125rem"
-  },
-  "z-index": {
-    "$type": "number",
-    "$value": 1000
-  }
-}
\ No newline at end of file
diff --git a/tokens/dist/export/zeroheight.json b/tokens/dist/export/zeroheight.json
index 7b903864d..a9162c1d1 100644
--- a/tokens/dist/export/zeroheight.json
+++ b/tokens/dist/export/zeroheight.json
@@ -1,182 +1,4 @@
 {
-  "asset": {
-    "font": {
-      "lato": {
-        "name": {
-          "$type": "asset",
-          "$value": "Lato"
-        },
-        "woffBlack": {
-          "$type": "asset",
-          "$value": "Lato-Black.woff"
-        },
-        "woff2Black": {
-          "$type": "asset",
-          "$value": "Lato-Black.woff2"
-        },
-        "woffBlackItalic": {
-          "$type": "asset",
-          "$value": "Lato-BlackItalic.woff"
-        },
-        "woff2BlackItalic": {
-          "$type": "asset",
-          "$value": "Lato-BlackItalic.woff2"
-        },
-        "woffBold": {
-          "$type": "asset",
-          "$value": "Lato-Bold.woff"
-        },
-        "woff2Bold": {
-          "$type": "asset",
-          "$value": "Lato-Bold.woff2"
-        },
-        "woffBoldItalic": {
-          "$type": "asset",
-          "$value": "Lato-BoldItalic.woff"
-        },
-        "woff2BoldItalic": {
-          "$type": "asset",
-          "$value": "Lato-BoldItalic.woff2"
-        },
-        "woffHairline": {
-          "$type": "asset",
-          "$value": "Lato-Hairline.woff"
-        },
-        "woff2Hairline": {
-          "$type": "asset",
-          "$value": "Lato-Hairline.woff2"
-        },
-        "woffHairlineItalic": {
-          "$type": "asset",
-          "$value": "Lato-HairlineItalic.woff"
-        },
-        "woff2HairlineItalic": {
-          "$type": "asset",
-          "$value": "Lato-HairlineItalic.woff2"
-        },
-        "woffHeavy": {
-          "$type": "asset",
-          "$value": "Lato-Heavy.woff"
-        },
-        "woff2Heavy": {
-          "$type": "asset",
-          "$value": "Lato-Heavy.woff2"
-        },
-        "woffHeavyItalic": {
-          "$type": "asset",
-          "$value": "Lato-HeavyItalic.woff"
-        },
-        "woff2HeavyItalic": {
-          "$type": "asset",
-          "$value": "Lato-HeavyItalic.woff2"
-        },
-        "woffItalic": {
-          "$type": "asset",
-          "$value": "Lato-Italic.woff"
-        },
-        "woff2Italic": {
-          "$type": "asset",
-          "$value": "Lato-Italic.woff2"
-        },
-        "woffLight": {
-          "$type": "asset",
-          "$value": "Lato-Light.woff"
-        },
-        "woff2Light": {
-          "$type": "asset",
-          "$value": "Lato-Light.woff2"
-        },
-        "woffLightItalic": {
-          "$type": "asset",
-          "$value": "Lato-LightItalic.woff"
-        },
-        "woff2LightItalic": {
-          "$type": "asset",
-          "$value": "Lato-LightItalic.woff2"
-        },
-        "woffMedium": {
-          "$type": "asset",
-          "$value": "Lato-Medium.woff"
-        },
-        "woff2Medium": {
-          "$type": "asset",
-          "$value": "Lato-Medium.woff2"
-        },
-        "woffMediumItalic": {
-          "$type": "asset",
-          "$value": "Lato-MediumItalic.woff"
-        },
-        "woff2MediumItalic": {
-          "$type": "asset",
-          "$value": "Lato-MediumItalic.woff2"
-        },
-        "woffRegular": {
-          "$type": "asset",
-          "$value": "Lato-Regular.woff"
-        },
-        "woff2Regular": {
-          "$type": "asset",
-          "$value": "Lato-Regular.woff2"
-        },
-        "woffSemibold": {
-          "$type": "asset",
-          "$value": "Lato-Semibold.woff"
-        },
-        "woff2Semibold": {
-          "$type": "asset",
-          "$value": "Lato-Semibold.woff2"
-        },
-        "woffSemiboldItalic": {
-          "$type": "asset",
-          "$value": "Lato-SemiboldItalic.woff"
-        },
-        "woff2SemiboldItalic": {
-          "$type": "asset",
-          "$value": "Lato-SemiboldItalic.woff2"
-        },
-        "woffThin": {
-          "$type": "asset",
-          "$value": "Lato-Thin.woff"
-        },
-        "woff2Thin": {
-          "$type": "asset",
-          "$value": "Lato-Thin.woff2"
-        },
-        "woffThinItalic": {
-          "$type": "asset",
-          "$value": "Lato-ThinItalic.woff"
-        },
-        "woff2ThinItalic": {
-          "$type": "asset",
-          "$value": "Lato-ThinItalic.woff2"
-        }
-      },
-      "azeretMono": {
-        "name": {
-          "$type": "asset",
-          "$value": "Azeret Mono"
-        },
-        "woff2Regular": {
-          "$type": "asset",
-          "$value": "AzeretMono-Regular.woff2"
-        }
-      },
-      "ss3v": {
-        "name": {
-          "$type": "asset",
-          "$value": "Source Sans 3"
-        },
-        "woff": {
-          "$type": "asset",
-          "$value": "SourceSans3VF-Upright.ttf.woff"
-        },
-        "woff2": {
-          "$type": "asset",
-          "$value": "SourceSans3VF-Upright.ttf.woff2"
-        }
-      }
-    }
-  },
   "color": {
     "base": {
       "white": {
diff --git a/tokens/package.json b/tokens/package.json
index f00befd4c..c01e26c72 100644
--- a/tokens/package.json
+++ b/tokens/package.json
@@ -19,17 +19,13 @@
   "scripts": {
     "prebuild": "pnpm run clean",
     "build": "style-dictionary build --config config.js",
-    "postbuild": "copyfiles -f assets/fonts/* node_modules/source-sans/WOFF*/VF/* dist/assets/fonts",
+    "postbuild": "copyfiles -f assets/fonts/* dist/assets/fonts",
     "clean": "rm -rf ./dist",
     "reset": "rm -rf ./dist ./node_modules"
   },
-  "dependencies": {
-    "source-sans": "github:adobe-fonts/source-sans#ed18089"
-  },
   "devDependencies": {
     "copyfiles": "2.4.1",
     "style-dictionary": "3.8.0",
-    "style-dictionary-utils": "2.4.1",
-    "tinycolor2": "1.6.0"
+    "style-dictionary-utils": "2.4.1"
   }
 }
diff --git a/tokens/src/assets/font.json b/tokens/src/assets/font.json
index 8e2fc63c3..62de0ca1d 100644
--- a/tokens/src/assets/font.json
+++ b/tokens/src/assets/font.json
@@ -87,24 +87,6 @@
           "$type": "asset",
           "$value": "Lato-ThinItalic.woff2"
         }
-      },
-      "azeretMono": {
-        "name": { "$type": "asset", "$value": "Azeret Mono" },
-        "woff2Regular": {
-          "$type": "asset",
-          "$value": "AzeretMono-Regular.woff2"
-        }
-      },
-      "ss3v": {
-        "name": { "$type": "asset", "$value": "Source Sans 3" },
-        "woff": {
-          "$type": "asset",
-          "$value": "SourceSans3VF-Upright.ttf.woff"
-        },
-        "woff2": {
-          "$type": "asset",
-          "$value": "SourceSans3VF-Upright.ttf.woff2"
-        }
       }
     }
   }