diff --git a/projects/js-packages/charts/changelog/charts-199-spacing-border-tokenization b/projects/js-packages/charts/changelog/charts-199-spacing-border-tokenization
new file mode 100644
index 000000000000..404fd125cf31
--- /dev/null
+++ b/projects/js-packages/charts/changelog/charts-199-spacing-border-tokenization
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Charts: Replace hardcoded spacing and border values in module SCSS with WPDS dimension and border design tokens.
diff --git a/projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss b/projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss
index 52b4891936f0..b72cdbb1fd72 100644
--- a/projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss
+++ b/projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss
@@ -54,11 +54,9 @@
 .step-label {
 	color: #757575;
 	font-size: var(--wpds-font-size-sm, 12px);
-	font-style: normal;
 	font-weight: var(--wpds-font-weight-regular, 400);
 	line-height: var(--wpds-font-line-height-xs, 16px);
-	margin: 0 0 2px 0;
-	display: block;
+	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
@@ -66,16 +64,13 @@
 .step-rate {
 	color: #1e1e1e;
 	font-size: var(--wpds-font-size-md, 13px);
-	font-style: normal;
 	font-weight: var(--wpds-font-weight-medium, 499);
-	line-height: var(--wpds-font-line-height-sm, 20px);
-	margin: 0;
-	display: block;
+	line-height: var(--wpds-font-line-height-xs, 16px);
 }
 
 .bar-container {
 	flex: 1;
-	border-radius: 4px;
+	border-radius: var(--wpds-border-radius-md, 4px);
 	position: relative;
 	cursor: pointer;
 }
@@ -83,7 +78,7 @@
 .funnel-bar {
 	width: 100%;
 	min-height: 4px;
-	border-radius: 4px 4px 0 0;
+	border-radius: var(--wpds-border-radius-md, 4px) var(--wpds-border-radius-md, 4px) 0 0;
 
 	&--animated {
 		transform-origin: bottom;
@@ -101,12 +96,12 @@
 }
 
 .tooltip-wrapper {
-	border-bottom: 1px solid var(--Gray-Gray-5, #dcdcde);
+	border-bottom: var(--wpds-border-width-xs, 1px) solid var(--Gray-Gray-5, #dcdcde);
 	background: var(--black-white-white, #fff);
 
 	// Override .visx-tooltip inline styles.
-	border-radius: 4px !important;
-	padding: 12px !important;
+	border-radius: var(--wpds-border-radius-md, 4px) !important;
+	padding: var(--wpds-dimension-padding-md, 12px) !important;
 	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.15), 0 3px 9px 0 rgba(0, 0, 0, 0.12) !important;
 
 }
@@ -129,7 +124,6 @@
 
 .empty-state {
 	text-align: center;
-	padding: 48px 24px;
 	color: #6b7280;
 	font-size: var(--wpds-font-size-lg, 16px);
 }
diff --git a/projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx b/projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
index 05fb970b5523..35a15492215b 100644
--- a/projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
+++ b/projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.tsx
@@ -300,6 +300,8 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 		return (
 			<Stack
 				direction="column"
+				align="center"
+				justify="center"
 				data-testid="conversion-funnel-chart"
 				className={ clsx(
 					styles[ 'conversion-funnel-chart' ],
@@ -369,7 +371,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 								gap="xl"
 							>
 								{ /* Step Label and Rate */ }
-								<div>
+								<Stack direction="column" gap="xs">
 									{ renderStepLabel ? (
 										renderStepLabel( {
 											step,
@@ -390,7 +392,7 @@ const ConversionFunnelChartInternal: FC< ConversionFunnelChartProps > = ( {
 											{ formatPercentage( step.rate ) }
 										</span>
 									) }
-								</div>
+								</Stack>
 
 								{ /* Funnel Bar */ }
 								<Stack
diff --git a/projects/js-packages/charts/src/charts/leaderboard-chart/leaderboard-chart.module.scss b/projects/js-packages/charts/src/charts/leaderboard-chart/leaderboard-chart.module.scss
index d950bfed08cb..02a94213fcfa 100644
--- a/projects/js-packages/charts/src/charts/leaderboard-chart/leaderboard-chart.module.scss
+++ b/projects/js-packages/charts/src/charts/leaderboard-chart/leaderboard-chart.module.scss
@@ -21,6 +21,10 @@
 	display: grid;
 	align-items: center;
 	grid-template-columns: 1fr;
+	// Outlier: not tokenized. The leaderboard's compact bar + gap + bar
+	// rhythm (6px bar, 6px row-gap, 6px bar) is intentional and does not
+	// map to any WPDS dimension token — gap-sm (8px) breaks the visual
+	// balance between the rows and the bars.
 	row-gap: 6px;
 	isolation: isolate;
 
@@ -34,7 +38,7 @@
 		}
 
 		.label {
-			padding-left: 8px;
+			padding-left: var(--wpds-dimension-padding-sm, 8px);
 		}
 	}
 
@@ -70,7 +74,7 @@
 }
 
 .emptyState {
-	padding: 32px 16px;
+	padding: var(--wpds-dimension-padding-3xl, 32px) var(--wpds-dimension-padding-lg, 16px);
 	text-align: center;
 	color: #666;
 	font-size: var(--wpds-font-size-md, 13px);
diff --git a/projects/js-packages/charts/src/charts/line-chart/line-chart.module.scss b/projects/js-packages/charts/src/charts/line-chart/line-chart.module.scss
index 67d40905763a..16f46fa783ec 100644
--- a/projects/js-packages/charts/src/charts/line-chart/line-chart.module.scss
+++ b/projects/js-packages/charts/src/charts/line-chart/line-chart.module.scss
@@ -17,21 +17,21 @@
 	&__tooltip,
 	&__annotation-label-popover {
 		background: #fff;
-		padding: 0.5rem;
+		padding: var(--wpds-dimension-padding-sm, 8px);
 	}
 
 	&__tooltip-date {
 		font-weight: var(--wpds-font-weight-medium, 499);
-		padding-bottom: 10px;
+		padding-bottom: var(--wpds-dimension-padding-md, 12px);
 	}
 
 	&__tooltip-row {
-		padding: 4px 0;
+		padding: var(--wpds-dimension-padding-xs, 4px) 0;
 	}
 
 	&__tooltip-label {
 		font-weight: var(--wpds-font-weight-medium, 499);
-		padding-right: 1rem;
+		padding-right: var(--wpds-dimension-padding-lg, 16px);
 	}
 
 	&__annotations-overlay {
@@ -61,11 +61,14 @@
 		min-width: 125px;
 		background: #fff;
 		border: none;
-		border-radius: 4px;
+		border-radius: var(--wpds-border-radius-md, 4px);
 		font-size: var(--wpds-font-size-md, 13px);
 		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 		position: fixed;
-		margin: 0.5rem;
+		// Without margin set, the popover has margin:auto which upsets the
+		// positioning relative to the trigger button. A gap token is appropriate
+		// because it creates a gap to the trigger button.
+		margin: var(--wpds-dimension-gap-sm, 8px);
 		visibility: hidden;
 
 		&--visible {
@@ -79,7 +82,7 @@
 	}
 
 	&__annotation-label-popover-content {
-		padding: 0.5rem;
+		padding: var(--wpds-dimension-padding-sm, 8px);
 	}
 
 	&__annotation-label-popover-close-button {
diff --git a/projects/js-packages/charts/src/components/legend/private/base-legend.module.scss b/projects/js-packages/charts/src/components/legend/private/base-legend.module.scss
index d29410dcc58c..1dfee1685de2 100644
--- a/projects/js-packages/charts/src/components/legend/private/base-legend.module.scss
+++ b/projects/js-packages/charts/src/components/legend/private/base-legend.module.scss
@@ -17,7 +17,7 @@
 		&:focus {
 			outline: 2px solid currentColor;
 			outline-offset: 2px;
-			border-radius: 4px;
+			border-radius: var(--wpds-border-radius-md, 4px);
 		}
 
 		&:focus:not(:focus-visible) {
diff --git a/projects/js-packages/charts/src/components/tooltip/base-tooltip.module.scss b/projects/js-packages/charts/src/components/tooltip/base-tooltip.module.scss
index 430725df41f6..4a8459617c3a 100644
--- a/projects/js-packages/charts/src/components/tooltip/base-tooltip.module.scss
+++ b/projects/js-packages/charts/src/components/tooltip/base-tooltip.module.scss
@@ -1,8 +1,8 @@
 .tooltip {
-	padding: 0.5rem;
+	padding: var(--wpds-dimension-padding-sm, 8px);
 	background-color: rgba(0, 0, 0, 0.85);
 	color: #fff;
-	border-radius: 4px;
+	border-radius: var(--wpds-border-radius-md, 4px);
 	font-size: var(--wpds-font-size-md, 13px);
 	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 	position: absolute;