diff --git a/.changeset/large-weeks-tap.md b/.changeset/large-weeks-tap.md
new file mode 100644
index 0000000000..71d9ec754d
--- /dev/null
+++ b/.changeset/large-weeks-tap.md
@@ -0,0 +1,10 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added four new entry files that enable working with Design Tokens:
+
+- post-external.(s)css: For portal and other external pages
+- post-internal.(s)css: For applications and other internal pages
+- post-tokens-external.(s)css: External tokens only
+- post-tokens-internal.(s)css: Internal tokens only
diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
index 17ac5c0106..8858bc1f13 100644
--- a/packages/documentation/.storybook/styles/preview.scss
+++ b/packages/documentation/.storybook/styles/preview.scss
@@ -1,6 +1,5 @@
 // importing the complete styles package scss
-// TODO: replace intranet.scss with index.scss as soon as the issues in the portal.scss are fixed
-@use '@swisspost/design-system-styles/intranet.scss';
+@use '@swisspost/design-system-styles/post-external.scss';
 @use '@swisspost/design-system-styles/core.scss' as post;
 @use '@swisspost/design-system-styles/mixins/utilities';
 @use '@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.css';
diff --git a/packages/styles/.gitignore b/packages/styles/.gitignore
index cde4a4d891..f6ed3a2011 100644
--- a/packages/styles/.gitignore
+++ b/packages/styles/.gitignore
@@ -13,3 +13,6 @@ storybook-static
 # Mac OSX Finder files.
 **/.DS_Store
 .DS_Store
+
+# Temporary files
+src/tokens/temp/
diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js
index 6151f05e7c..3268e80cfd 100644
--- a/packages/styles/gulpfile.js
+++ b/packages/styles/gulpfile.js
@@ -20,6 +20,15 @@ gulp.task('copy', () => {
     .pipe(gulp.dest(options.outputDir));
 });
 
+/**
+ * Temporary task to copy token files from tokens package to the styles package since
+ * pnpm does not correctly install dependencies of dependencies for workspace packages.
+ * See https://github.com/pnpm/pnpm/issues/8338 for more information and reproduction
+ */
+gulp.task('temporarily-copy-token-files', () => {
+  return gulp.src(['../tokens/dist/*.scss']).pipe(gulp.dest('./src/tokens/temp'));
+});
+
 /**
  * Autoprefix SCSS files
  */
@@ -168,9 +177,12 @@ gulp.task('sass:tests', () => {
 /**
  * Watch task for scss development
  */
-gulp.task('watch', () => {
-  return gulp.watch('./src/**/*.scss', gulp.series('copy'));
-});
+gulp.task(
+  'watch',
+  gulp.series('temporarily-copy-token-files', () => {
+    return gulp.watch('./src/**/*.scss', 'copy');
+  }),
+);
 
 /**
  * Run copy and sass task in parallel per default
@@ -179,7 +191,7 @@ exports.default = gulp.task(
   'build',
   gulp.parallel(
     gulp.series('map-icons', 'copy', 'autoprefixer', 'transform-package-json'),
-    gulp.series('sass'),
+    gulp.series('temporarily-copy-token-files', 'sass'),
     gulp.series('build-components'),
   ),
 );
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 0f93279ea7..59fa6f4da2 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -47,6 +47,7 @@
     "bootstrap": "5.3.3"
   },
   "devDependencies": {
+    "@swisspost/design-system-tokens": "workspace:*",
     "@swisspost/design-system-icons": "workspace:8.1.0",
     "@types/node": "20.14.14",
     "autoprefixer": "10.4.19",
diff --git a/packages/styles/src/mixins/_media.scss b/packages/styles/src/mixins/_media.scss
new file mode 100644
index 0000000000..2744a83c39
--- /dev/null
+++ b/packages/styles/src/mixins/_media.scss
@@ -0,0 +1,17 @@
+@mixin min($device-size) {
+  @media screen and (min-width: $device-size) {
+    @content;
+  }
+}
+
+@mixin max($device-size) {
+  @media screen and (max-width: ($device-size - 0.01)) {
+    @content;
+  }
+}
+
+@mixin between($min-size, $max-size) {
+  @media screen and (min-width: $min-size) and (max-width: ($max-size - 0.01)) {
+    @content;
+  }
+}
diff --git a/packages/styles/src/mixins/_tokens.scss b/packages/styles/src/mixins/_tokens.scss
new file mode 100644
index 0000000000..0b24145f94
--- /dev/null
+++ b/packages/styles/src/mixins/_tokens.scss
@@ -0,0 +1,5 @@
+@mixin from($map) {
+  @each $key, $value in $map {
+    --#{$key}: #{$value};
+  }
+}
diff --git a/packages/styles/src/placeholders/_modes.scss b/packages/styles/src/placeholders/_modes.scss
new file mode 100644
index 0000000000..2bb8abd34f
--- /dev/null
+++ b/packages/styles/src/placeholders/_modes.scss
@@ -0,0 +1,10 @@
+@use '../tokens/temp/mode' as mode;
+@use './../mixins/tokens';
+
+%color-mode-light {
+  @include tokens.from(mode.$post-light);
+}
+
+%color-mode-dark {
+  @include tokens.from(mode.$post-dark);
+}
diff --git a/packages/styles/src/post-external.scss b/packages/styles/src/post-external.scss
new file mode 100644
index 0000000000..f989a86310
--- /dev/null
+++ b/packages/styles/src/post-external.scss
@@ -0,0 +1,2 @@
+@use './post-tokens-external';
+@use './components';
diff --git a/packages/styles/src/post-internal.scss b/packages/styles/src/post-internal.scss
new file mode 100644
index 0000000000..e00158f349
--- /dev/null
+++ b/packages/styles/src/post-internal.scss
@@ -0,0 +1,2 @@
+@use './post-tokens-internal';
+@use './components';
diff --git a/packages/styles/src/post-tokens-external.scss b/packages/styles/src/post-tokens-external.scss
new file mode 100644
index 0000000000..83413253b6
--- /dev/null
+++ b/packages/styles/src/post-tokens-external.scss
@@ -0,0 +1,4 @@
+@use './tokens/modes';
+@use './tokens/device';
+@use './tokens/external';
+@use './tokens/post-theme';
diff --git a/packages/styles/src/post-tokens-internal.scss b/packages/styles/src/post-tokens-internal.scss
new file mode 100644
index 0000000000..f025362bc0
--- /dev/null
+++ b/packages/styles/src/post-tokens-internal.scss
@@ -0,0 +1,4 @@
+@use './tokens/modes';
+@use './tokens/device';
+@use './tokens/internal';
+@use './tokens/post-theme';
diff --git a/packages/styles/src/tokens/_core.scss b/packages/styles/src/tokens/_core.scss
new file mode 100644
index 0000000000..d983e599e1
--- /dev/null
+++ b/packages/styles/src/tokens/_core.scss
@@ -0,0 +1 @@
+@use './temp/core';
diff --git a/packages/styles/src/tokens/_device.scss b/packages/styles/src/tokens/_device.scss
new file mode 100644
index 0000000000..8a21eecbc8
--- /dev/null
+++ b/packages/styles/src/tokens/_device.scss
@@ -0,0 +1,19 @@
+@use './temp/device' as device;
+
+@use './core';
+@use './../mixins/tokens';
+@use './../mixins/media';
+
+:root {
+  @include media.max(600px) {
+    @include tokens.from(device.$post-mobile);
+  }
+
+  @include media.between(600px, 1024px) {
+    @include tokens.from(device.$post-tablet);
+  }
+
+  @include media.min(1024px) {
+    @include tokens.from(device.$post-desktop);
+  }
+}
diff --git a/packages/styles/src/tokens/_external.scss b/packages/styles/src/tokens/_external.scss
new file mode 100644
index 0000000000..d625768535
--- /dev/null
+++ b/packages/styles/src/tokens/_external.scss
@@ -0,0 +1,8 @@
+@use './temp/channel' as channel;
+
+@use './core';
+@use './../mixins/tokens';
+
+:root {
+  @include tokens.from(channel.$post-edk);
+}
diff --git a/packages/styles/src/tokens/_internal.scss b/packages/styles/src/tokens/_internal.scss
new file mode 100644
index 0000000000..415249cb2a
--- /dev/null
+++ b/packages/styles/src/tokens/_internal.scss
@@ -0,0 +1,8 @@
+@use './temp/channel' as channel;
+
+@use './core';
+@use './../mixins/tokens';
+
+:root {
+  @include tokens.from(channel.$post-idk);
+}
diff --git a/packages/styles/src/tokens/_modes.scss b/packages/styles/src/tokens/_modes.scss
new file mode 100644
index 0000000000..500b9a423a
--- /dev/null
+++ b/packages/styles/src/tokens/_modes.scss
@@ -0,0 +1,11 @@
+@use './core';
+@use './../placeholders/modes';
+
+:root,
+[data-color-mode='light'] {
+  @extend %color-mode-light;
+}
+
+[data-color-mode='dark'] {
+  @extend %color-mode-dark;
+}
diff --git a/packages/styles/src/tokens/_post-theme.scss b/packages/styles/src/tokens/_post-theme.scss
new file mode 100644
index 0000000000..ee7ab8a77d
--- /dev/null
+++ b/packages/styles/src/tokens/_post-theme.scss
@@ -0,0 +1,8 @@
+@use './temp/theme' as themes;
+
+@use './core';
+@use './../mixins/tokens';
+
+:root {
+  @include tokens.from(themes.$post-theme);
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cea647286c..e52060ce12 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1043,6 +1043,9 @@ importers:
       '@swisspost/design-system-icons':
         specifier: workspace:8.1.0
         version: link:../icons
+      '@swisspost/design-system-tokens':
+        specifier: workspace:*
+        version: link:../tokens/dist
       '@types/node':
         specifier: 20.14.14
         version: 20.14.14