diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index 6bd054b53..3b90df127 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -116,11 +116,11 @@
 			border: 1px solid var(--sk-back-5);
 			border-radius: var(--sk-border-radius);
 			overflow: hidden;
-			margin: 2rem 0;
+			margin: calc(0.5 * var(--sk-line-height-body)) 0;
 			/* background: var(--sk-back-3); */
 
 			@media (min-width: 767px) {
-				margin: 3rem 0;
+				margin: var(--sk-line-height-body) 0;
 			}
 
 			.controls {
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index 4cb3c8cbf..f0e403cbd 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -39,7 +39,9 @@
 	--sk-font-size-ui-large: 3rem;
 	--sk-font-size-mono: 1.4rem;
 
-	--sk-line-height-body: 1.5;
+	/* doing it this way (rather than just `1.5`) means it has a unit, and can be used elsewhere */
+	--sk-line-height-body: calc(1.5 * var(--sk-font-size-body));
+	--sk-line-height-body-small: calc(1.5 * var(--sk-font-size-body-small));
 
 	--sk-font-h1: 500 var(--sk-font-size-h1) / 1.2 var(--sk-font-family-heading);
 	--sk-font-h2: 500 var(--sk-font-size-h2) / 1.2 var(--sk-font-family-heading);