diff --git a/packages/documentation/.storybook/styles/components/typo.scss b/packages/documentation/.storybook/styles/components/typo.scss
index 12c389db3f..0f6a972b11 100644
--- a/packages/documentation/.storybook/styles/components/typo.scss
+++ b/packages/documentation/.storybook/styles/components/typo.scss
@@ -30,7 +30,7 @@ body {
     }
 
     .docs-story > :first-child {
-      font-family: tokens.get('post-body', 'font-family');
+      font-family: tokens.get('body-font-family');
     }
 
     .font-sans-serif {
@@ -44,6 +44,6 @@ body {
 
   // full-screen preview
   #storybook-root {
-    font-family: tokens.get('post-body', 'font-family');
+    font-family: tokens.get('body-font-family');
   }
 }
diff --git a/packages/styles/src/components/lead.scss b/packages/styles/src/components/lead.scss
index 207a8300f8..f6a5d0813a 100644
--- a/packages/styles/src/components/lead.scss
+++ b/packages/styles/src/components/lead.scss
@@ -5,6 +5,6 @@
 tokens.$default-map: components.$post-lead;
 
 .lead {
-  font-size: tokens.get('post-lead', 'font-size');
-  font-weight: tokens.get('post-lead', 'font-weight');
+  font-size: tokens.get('lead-font-size');
+  font-weight: tokens.get('lead-font-weight');
 }
diff --git a/packages/styles/src/components/text-highlight.scss b/packages/styles/src/components/text-highlight.scss
index c07f32b046..2a3e62351c 100644
--- a/packages/styles/src/components/text-highlight.scss
+++ b/packages/styles/src/components/text-highlight.scss
@@ -5,10 +5,10 @@
 tokens.$default-map: components.$post-text-highlighted;
 
 .text-highlighted {
-  background-color: tokens.get('post-text', 'highlighted-bg');
-  color: tokens.get('post-text', 'highlighted-fg');
-  padding: tokens.get('post-text', 'highlighted-padding-text');
-  margin-block-start: tokens.get('post-text', 'highlighted-height-space-bottom');
-  margin-block-end: tokens.get('post-text', 'highlighted-height-space-bottom');
-  border-radius: tokens.get('post-text', 'highlighted-border-radius');
+  background-color: tokens.get('text-highlighted-bg');
+  color: tokens.get('text-highlighted-fg');
+  padding: tokens.get('text-highlighted-padding-text');
+  margin-block-start: tokens.get('text-highlighted-height-space-bottom');
+  margin-block-end: tokens.get('text-highlighted-height-space-bottom');
+  border-radius: tokens.get('text-highlighted-border-radius');
 }
diff --git a/packages/styles/src/elements/body.scss b/packages/styles/src/elements/body.scss
index 95a8f1835c..91a74e8958 100644
--- a/packages/styles/src/elements/body.scss
+++ b/packages/styles/src/elements/body.scss
@@ -8,10 +8,10 @@ tokens.$default-map: elements.$post-body;
 @use '../components/fonts';
 
 body {
-  font-family: tokens.get('post-body', 'font-family');
-  font-size: tokens.get('post-body', 'font-size');
-  font-weight: tokens.get('post-body', 'font-weight');
-  line-height: tokens.get('post-body', 'line-height');
-  letter-spacing: tokens.get('post-body', 'letter-spacing');
-  color: tokens.get('post-body', 'color');
+  font-family: tokens.get('body-font-family');
+  font-size: tokens.get('body-font-size');
+  font-weight: tokens.get('body-font-weight');
+  line-height: tokens.get('body-line-height');
+  letter-spacing: tokens.get('body-letter-spacing');
+  color: tokens.get('body-color');
 }
diff --git a/packages/styles/src/elements/fieldset-legend.scss b/packages/styles/src/elements/fieldset-legend.scss
index c050142b93..1adb691cce 100644
--- a/packages/styles/src/elements/fieldset-legend.scss
+++ b/packages/styles/src/elements/fieldset-legend.scss
@@ -4,15 +4,15 @@
 tokens.$default-map: elements.$post-legend;
 
 legend {
-  font-weight: tokens.get('legend', 'font-weight');
-  line-height: tokens.get('legend', 'line-height');
+  font-weight: tokens.get('legend-font-weight');
+  line-height: tokens.get('legend-line-height');
   width: 100%;
 
   &.large {
-    font-size: tokens.get('legend', 'large-font-size');
-    margin-block-start: tokens.get('legend', 'large-margin-block-start');
-    margin-block-end: tokens.get('legend', 'large-margin-block-end');
-    padding-block-end: tokens.get('legend', 'large-padding-block-end');
-    border-bottom: tokens.get('legend', 'large-border-bottom');
+    font-size: tokens.get('legend-large-font-size');
+    margin-block-start: tokens.get('legend-large-margin-block-start');
+    margin-block-end: tokens.get('legend-large-margin-block-end');
+    padding-block-end: tokens.get('legend-large-padding-block-end');
+    border-bottom: tokens.get('legend-large-border-bottom');
   }
 }
diff --git a/packages/styles/src/elements/heading.scss b/packages/styles/src/elements/heading.scss
index 6d2f76e011..f7861198e6 100644
--- a/packages/styles/src/elements/heading.scss
+++ b/packages/styles/src/elements/heading.scss
@@ -15,48 +15,48 @@ h5,
 .h5,
 h6,
 .h6 {
-  line-height: tokens.get('post-heading', 'line-height');
-  font-weight: tokens.get('post-heading', 'font-weight');
+  line-height: tokens.get('heading-line-height');
+  font-weight: tokens.get('heading-font-weight');
 }
 
 h1,
 .h1 {
-  font-size: tokens.get('post-h1', 'font-size');
-  margin-block-start: tokens.get('post-h1', 'margin-block-start');
-  margin-block-end: tokens.get('post-h1', 'margin-block-end');
+  font-size: tokens.get('h1-font-size');
+  margin-block-start: tokens.get('h1-margin-block-start');
+  margin-block-end: tokens.get('h1-margin-block-end');
 }
 
 h2,
 .h2 {
-  font-size: tokens.get('post-h2', 'font-size');
-  margin-block-start: tokens.get('post-h2', 'margin-block-start');
-  margin-block-end: tokens.get('post-h2', 'margin-block-end');
+  font-size: tokens.get('h2-font-size');
+  margin-block-start: tokens.get('h2-margin-block-start');
+  margin-block-end: tokens.get('h2-margin-block-end');
 }
 
 h3,
 .h3 {
-  font-size: tokens.get('post-h3', 'font-size');
-  margin-block-start: tokens.get('post-h3', 'margin-block-start');
-  margin-block-end: tokens.get('post-h3', 'margin-block-end');
+  font-size: tokens.get('h3-font-size');
+  margin-block-start: tokens.get('h3-margin-block-start');
+  margin-block-end: tokens.get('h3-margin-block-end');
 }
 
 h4,
 .h4 {
-  font-size: tokens.get('post-h4', 'font-size');
-  margin-block-start: tokens.get('post-h4', 'margin-block-start');
-  margin-block-end: tokens.get('post-h4', 'margin-block-end');
+  font-size: tokens.get('h4-font-size');
+  margin-block-start: tokens.get('h4-margin-block-start');
+  margin-block-end: tokens.get('h4-margin-block-end');
 }
 
 h5,
 .h5 {
-  font-size: tokens.get('post-h5', 'font-size');
-  margin-block-start: tokens.get('post-h5', 'margin-block-start');
-  margin-block-end: tokens.get('post-h5', 'margin-block-end');
+  font-size: tokens.get('h5-font-size');
+  margin-block-start: tokens.get('h5-margin-block-start');
+  margin-block-end: tokens.get('h5-margin-block-end');
 }
 
 h6,
 .h6 {
-  font-size: tokens.get('post-h6', 'font-size');
-  margin-block-start: tokens.get('post-h6', 'margin-block-start');
-  margin-block-end: tokens.get('post-h6', 'margin-block-end');
+  font-size: tokens.get('h6-font-size');
+  margin-block-start: tokens.get('h6-margin-block-start');
+  margin-block-end: tokens.get('h6-margin-block-end');
 }
diff --git a/packages/styles/src/functions/_tokens.scss b/packages/styles/src/functions/_tokens.scss
index 0254d87b68..b66fa11ef7 100644
--- a/packages/styles/src/functions/_tokens.scss
+++ b/packages/styles/src/functions/_tokens.scss
@@ -1,74 +1,54 @@
 @use 'sass:meta';
 @use 'sass:map';
 @use 'sass:string';
+@use 'sass:list';
+
+$_namespace: 'post';
+$default-map: null !default;
 
 /**
- * @function get($prefix, $key-name)
- * Gets a token-key, normalizes and resolves it with the $default-map.
+ * @function get($key, $map)
+ * Gets a token-key, normalizes and resolves it with the given map or $default-map.
  *
- * @param {string} $prefix - The token map name.
- * @param {string} $key-name - The token key name.
- * @param {map} $map - The map to get the token key from.
+ * @param {string} $key - The full token key (including prefix).
+ * @param {map} $map - The map to get the token key from (optional).
  *
- * @returns {any} $value of $normalized-prefix[$normalized-key-name]
+ * @returns {any} $value of $normalized-key in the specified map
  *
  * @example
  * @use '../tokens/components' as components;
  * @use '../functions/tokens' as tokens;
  *
- * // set the default map to use or always use the third function parameter to specify a different map.
- * tokens.$default-map: components.$post-body;
- *
- * // lets say you have two keys: 'post-selector-font-family' and 'post-selector-font-size' in the same map.
- * // then use it like so:
+ * // set the default map to use or always use the second function parameter to specify a different map.
+ * tokens.$default-map: components.$post-badge;
  *
  * selector {
- *   font-family: tokens.get('post-selector', 'font-family');
- *   font-family: tokens.get('selector', 'font-family');
- *
- *   font-family: tokens.get('selector-font', 'family');
- *   font-size: tokens.get('selector-font', 'size');
- *
- *   font-family: tokens.get('selector', 'font-family', $my-custom-map);  // use a different map than the default one
+ *   background-color: tokens.get('post-badge-bg');
+ *   color: tokens.get('badge-fg');
+ *   border-width: tokens.get('app-store-focus-outline-width', components.$post-app-store-badge);  // use a different map than the default one
  * }
  */
+@function get($key, $map: $default-map) {
+  $normalized-key: normalize-key($key);
 
-$_namespace: 'post';
-$default-map: null !default;
-
-@function get($prefix, $key-name, $map: $default-map) {
-  $key-name: normalize-key-name($prefix, $key-name);
-
-  @if not map.has-key($map, $key-name) {
-    @error 'No such key "#{$key-name}" in given map! Available keys are: #{meta.inspect(map.keys($map))}.';
+  @if not meta.type-of($map) == 'map' {
+    @error 'No map provided or provided $map is not valid. Got #{meta.type-of($map)} instead.';
   }
 
-  @return map.get($map, $key-name);
-}
-
-@function normalize-key-name($original-prefix, $key-name) {
-  $namespaced-prefix: normalize-prefix($original-prefix);
-  $prefix: string.slice($namespaced-prefix, string.length('#{$_namespace}-') + 1);
-  $key-contains-namespace: string.index($key-name, '#{$_namespace}-') == 1;
-  $key-contains-prefix: string.index($key-name, '#{$prefix}-') == 1;
-
-  @if not $key-contains-namespace {
-    @if not $key-contains-prefix {
-      $key-name: '#{$namespaced-prefix}-#{$key-name}';
-    } @else {
-      $key-name: '#{$_namespace}-#{$key-name}';
-    }
+  @if not map.has-key($map, $normalized-key) {
+    @error 'No such key "#{$normalized-key}" in given map! Available keys are: #{meta.inspect(map.keys($map))}.';
   }
 
-  @return $key-name;
+  @return map.get($map, $normalized-key);
 }
 
-@function normalize-prefix($prefix) {
-  $prefix-contains-namespace: string.index($prefix, '#{$_namespace}-') == 1;
+@function normalize-key($key) {
+  $key-parts: string.split($key, '-');
+  $key-contains-namespace: list.nth($key-parts, 1) == $_namespace;
 
-  @if not $prefix-contains-namespace {
-    $prefix: '#{$_namespace}-#{$prefix}';
+  @if not $key-contains-namespace {
+    $key: '#{$_namespace}-#{$key}';
   }
 
-  @return $prefix;
+  @return $key;
 }
diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss
index 7dc24521ad..60bab4b596 100644
--- a/packages/styles/src/variables/components/_stepper.scss
+++ b/packages/styles/src/variables/components/_stepper.scss
@@ -35,4 +35,3 @@ $stepper-link-color: var(--post-gray-60);
 
 $stepper-link-current-color: var(--post-gray-80);
 $stepper-link-current-font-weight: type.$font-weight-bold;
-