diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni
index a2c035c68c..2d42f17408 100644
--- a/config/gni/devtools_grd_files.gni
+++ b/config/gni/devtools_grd_files.gni
@@ -2122,6 +2122,7 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/components/utils/imagePreview.css.js",
   "front_end/ui/legacy/components/utils/jsUtils.css.js",
   "front_end/ui/legacy/confirmDialog.css.legacy.js",
+  "front_end/ui/legacy/designTokens.css.legacy.js",
   "front_end/ui/legacy/dialog.css.legacy.js",
   "front_end/ui/legacy/dropTarget.css.legacy.js",
   "front_end/ui/legacy/emptyWidget.css.js",
diff --git a/front_end/ui/legacy/BUILD.gn b/front_end/ui/legacy/BUILD.gn
index 706838fe18..45158f6e54 100644
--- a/front_end/ui/legacy/BUILD.gn
+++ b/front_end/ui/legacy/BUILD.gn
@@ -21,6 +21,7 @@ generate_css("legacy_css_files") {
     "checkboxTextLabel.css",
     "closeButton.css",
     "confirmDialog.css",
+    "designTokens.css",
     "dialog.css",
     "dropTarget.css",
     "emptyWidget.css",
@@ -63,6 +64,7 @@ generate_css("legacy_css_files") {
 copy_to_gen("copy_stylesheets_for_server") {
   sources = [
     "applicationColorTokens.css",
+    "designTokens.css",
     "inspectorCommon.css",
     "inspectorSyntaxHighlight.css",
     "textButton.css",
diff --git a/front_end/ui/legacy/designTokens.css b/front_end/ui/legacy/designTokens.css
new file mode 100644
index 0000000000..7852f18ec5
--- /dev/null
+++ b/front_end/ui/legacy/designTokens.css
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2024 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:root {
+  --ref-typeface-weight-regular: 400;
+  --ref-typeface-weight-medium: 500;
+  --ref-typeface-weight-bold: 700;
+  --sys-size-1: 1px;
+  --sys-size-2: 0.125rem;
+  --sys-size-3: 0.25rem;
+  --sys-size-4: 0.375rem;
+  --sys-size-5: 0.5rem;
+  --sys-size-6: 0.75rem;
+  --sys-size-7: 0.875rem;
+  --sys-size-8: 1rem;
+  --sys-size-9: 1.25rem;
+  --sys-size-10: 1.375rem;
+  --sys-size-11: 1.5rem;
+  --sys-size-12: 1.75rem;
+  --sys-size-13: 2rem;
+  --sys-size-14: 2.5rem;
+  --sys-shape-corner-extra-small: 4px;
+  --sys-shape-corner-small: 8px;
+  --sys-shape-corner-medium-small: 12px;
+  --sys-shape-corner-medium: 16px;
+  --sys-shape-corner-large: 24px;
+  --sys-shape-corner-full: 9999px;
+
+  /* weight size/line-height */
+  --sys-typescale-body1-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body1-size)/var(--sys-typescale-body1-line-height);
+  --sys-typescale-body2-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body2-size)/var(--sys-typescale-body2-line-height);
+  --sys-typescale-body3-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body3-size)/var(--sys-typescale-body3-line-height);
+  --sys-typescale-body4-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body4-size)/var(--sys-typescale-body4-line-height);
+  --sys-typescale-body5-medium: var(--ref-typeface-weight-medium) var(--sys-typescale-body5-size)/var(--sys-typescale-body5-line-height);
+  --sys-typescale-headline1-size: 24px;
+  --sys-typescale-headline2-size: 20px;
+  --sys-typescale-headline3-size: 18px;
+  --sys-typescale-headline4-size: 16px;
+  --sys-typescale-headline5-size: 14px;
+  --sys-typescale-body1-size: 16px;
+  --sys-typescale-body2-size: 14px;
+  --sys-typescale-body3-size: 13px;
+  --sys-typescale-body4-size: 12px;
+  --sys-typescale-body5-size: 11px;
+  --sys-typescale-headline1-line-height: 32px;
+  --sys-typescale-headline2-line-height: 24px;
+  --sys-typescale-headline3-line-height: 24px;
+  --sys-typescale-headline4-line-height: 24px;
+  --sys-typescale-headline5-line-height: 20px;
+  --sys-typescale-body1-line-height: 24px;
+  --sys-typescale-body2-line-height: 20px;
+  --sys-typescale-body3-line-height: 20px;
+  --sys-typescale-body4-line-height: 16px;
+  --sys-typescale-body5-line-height: 16px;
+}
diff --git a/front_end/ui/legacy/utils/inject-core-styles.ts b/front_end/ui/legacy/utils/inject-core-styles.ts
index 67e03c7dfe..9c4827edb1 100644
--- a/front_end/ui/legacy/utils/inject-core-styles.ts
+++ b/front_end/ui/legacy/utils/inject-core-styles.ts
@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import applicationColorTokensStyles from '../applicationColorTokens.css.legacy.js';
+import designTokensStyles from '../designTokens.css.legacy.js';
 import inspectorCommonStyles from '../inspectorCommon.css.legacy.js';
 import textButtonStyles from '../textButton.css.legacy.js';
 import * as ThemeSupport from '../theme_support/theme_support.js';
@@ -11,6 +12,7 @@ import tokens from '../tokens.css.legacy.js';
 
 export function injectCoreStyles(root: Element|ShadowRoot): void {
   ThemeSupport.ThemeSupport.instance().appendStyle(root, applicationColorTokensStyles);
+  ThemeSupport.ThemeSupport.instance().appendStyle(root, designTokensStyles);
   ThemeSupport.ThemeSupport.instance().appendStyle(root, inspectorCommonStyles);
   ThemeSupport.ThemeSupport.instance().appendStyle(root, textButtonStyles);
   ThemeSupport.ThemeSupport.instance().appendStyle(root, themeColorsStyles);
diff --git a/scripts/component_server/server.js b/scripts/component_server/server.js
index f7d345e67f..33f1476359 100644
--- a/scripts/component_server/server.js
+++ b/scripts/component_server/server.js
@@ -102,6 +102,7 @@ const styleSheetPaths = [
   'front_end/ui/legacy/themeColors.css',
   'front_end/ui/legacy/tokens.css',
   'front_end/ui/legacy/applicationColorTokens.css',
+  'front_end/ui/legacy/designTokens.css',
   'front_end/ui/legacy/inspectorCommon.css',
   'front_end/ui/legacy/inspectorSyntaxHighlight.css',
   'front_end/ui/legacy/textButton.css',