diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
index 0089a201cd..eb250a9963 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -117,7 +117,7 @@
 		flex-direction: column;
 
 		@media (min-width: 800px) {
-			--app-controls-h: 4rem;
+			--app-controls-h: 4.4rem;
 		}
 	}
 
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
index 13aadc3585..13dc9ee920 100644
--- a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
+++ b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -215,7 +215,7 @@ export default app;`
 	/>
 
 	<div class="buttons">
-		<button class="icon" onclick={() => (zen_mode = !zen_mode)} title="fullscreen editor">
+		<button class="raised icon" onclick={() => (zen_mode = !zen_mode)} title="fullscreen editor">
 			{#if zen_mode}
 				<Icon name="close" />
 			{:else}
@@ -223,11 +223,11 @@ export default app;`
 			{/if}
 		</button>
 
-		<button class="icon" disabled={downloading} onclick={download} title="download zip file">
+		<button class="raised icon" disabled={downloading} onclick={download} title="download zip file">
 			<Icon name="download" />
 		</button>
 
-		<button class="icon" disabled={saving || !user} onclick={() => fork(false)} title="fork">
+		<button class="raised icon" disabled={saving || !user} onclick={() => fork(false)} title="fork">
 			{#if justForked}
 				<Icon name="check" />
 			{:else}
@@ -235,7 +235,7 @@ export default app;`
 			{/if}
 		</button>
 
-		<button class="icon" disabled={saving || !user} onclick={save} title="save">
+		<button class="raised icon" disabled={saving || !user} onclick={save} title="save">
 			{#if justSaved}
 				<Icon name="check" />
 			{:else}
@@ -249,7 +249,7 @@ export default app;`
 		{#if user}
 			<UserMenu {user} />
 		{:else}
-			<button class="icon" onclick={(e) => (e.preventDefault(), login())}>
+			<button class="raised icon" onclick={(e) => (e.preventDefault(), login())}>
 				<Icon name="log-in" />
 				<span>&nbsp;Log in to save</span>
 			</button>
@@ -293,7 +293,6 @@ export default app;`
 
 	.buttons {
 		text-align: right;
-		margin-right: 0.4rem;
 		display: flex;
 		align-items: center;
 		gap: 0.2em;
@@ -302,7 +301,7 @@ export default app;`
 	.icon {
 		transform: translateY(0.1rem);
 		display: inline-block;
-		padding: 0.2em;
+		padding: 0.4em;
 		opacity: 0.7;
 		transition: opacity 0.3s;
 		font-family: var(--sk-font-ui);
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
index 781864bc96..a9f81ed7a5 100644
--- a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
+++ b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -101,17 +101,45 @@
 					color: var(--sk-text-3);
 				}
 
-				&::before {
+				&::before,
+				&::after {
 					content: '';
 					position: absolute;
 					right: 0;
-					top: calc(50% - 0.5em);
-					width: 2rem;
-					height: 2rem;
-					background: url($lib/icons/chevron.svg);
-					background-size: contain;
+					top: 0.3rem;
+					width: 2.4rem;
+					height: 2.4rem;
+				}
+
+				&::before {
+					border-radius: var(--sk-border-radius);
+					border-style: solid;
+					border-color: var(--sk-raised-color);
+					border-width: var(--sk-raised-width);
+				}
+
+				&:hover::before {
+					border-color: var(--sk-raised-hover-color);
+				}
+
+				&:active::before {
+					border-color: var(--sk-raised-active-color);
+					border-width: var(--sk-raised-active-width);
+				}
+
+				&::after {
+					background: url($lib/icons/chevron.svg) 50% 50% no-repeat;
+					background-size: 2rem;
+					top: 0.4rem;
+					right: 0.2rem;
 					rotate: -90deg;
 					transition: rotate 0.2s;
+					transition: rotate 0.2s;
+				}
+
+				&:active::after {
+					top: 0.5rem;
+					right: 0.1rem;
 				}
 
 				h3 {
@@ -124,7 +152,7 @@
 			}
 
 			label:has(:checked) {
-				&::before {
+				&::after {
 					rotate: 90deg;
 				}
 
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
index a2e1b442d8..2076c83573 100644
--- a/packages/site-kit/src/lib/components/Text.svelte
+++ b/packages/site-kit/src/lib/components/Text.svelte
@@ -90,10 +90,12 @@
 
 		.code-block {
 			position: relative;
-			box-shadow: 1px 2px 1rem hsla(0 0 0 / 0.08);
+			background: var(--sk-back-2);
+			border: 1px solid var(--sk-back-5);
 			border-radius: var(--sk-border-radius);
 			overflow: hidden;
 			margin: 2rem 0;
+			/* background: var(--sk-back-3); */
 
 			.controls {
 				--height: 3.6rem;
@@ -102,7 +104,8 @@
 				position: absolute;
 				top: 0;
 				height: var(--height);
-				padding: 0.3rem;
+				padding: 0.3rem 0.5rem 0.3rem 1rem;
+				gap: 0.5rem;
 				width: 100%;
 				z-index: 2;
 				justify-content: end;
@@ -110,17 +113,20 @@
 
 				&:has(.filename) {
 					position: relative;
-					background: var(--sk-back-4);
 				}
 
 				.filename {
 					content: attr(data-file);
 					display: block;
+					position: relative;
+					top: 0.1rem;
 					flex: 1;
-					font-family: var(--sk-font-mono);
-					font-size: var(--sk-font-size-code);
-					padding: 0 1rem;
-					color: var(--sk-text-2);
+					font-family: var(--sk-font-ui);
+					font-size: var(--sk-font-size-ui-small);
+					color: var(--sk-text-4);
+					text-overflow: ellipsis;
+					overflow: hidden;
+					white-space: nowrap;
 
 					&::after {
 						content: attr(data-ext);
@@ -137,9 +143,9 @@
 					appearance: none;
 					display: flex;
 					align-items: center;
-					height: calc(var(--height) - 0.6rem);
+					height: calc(var(--height) - 1rem);
 					outline-offset: 0;
-					padding: 0 0.4rem;
+					padding: 0 0.6rem;
 
 					&::before,
 					&::after {
@@ -175,7 +181,7 @@
 
 				.copy-to-clipboard {
 					position: relative;
-					height: calc(var(--height) - 0.6rem);
+					height: calc(var(--height) - 1rem);
 					aspect-ratio: 1;
 					border-radius: var(--sk-border-radius);
 
@@ -420,18 +426,46 @@
 		}
 
 		details.legacy {
+			&::before,
 			&::after {
 				content: '';
-				background: url(../icons/chevron.svg);
-				background-size: contain;
 				position: absolute;
-				right: 0.5rem;
-				top: 0.5rem;
-				width: 2rem;
-				height: 2rem;
+				right: 0.6rem;
+				top: 0.1rem;
+				width: 2.4rem;
+				height: 2.4rem;
+				pointer-events: none;
+			}
+
+			&::before {
+				border-radius: var(--sk-border-radius);
+				border-style: solid;
+				border-color: var(--sk-raised-color);
+				border-width: var(--sk-raised-width);
+			}
+
+			&:hover::before {
+				border-color: var(--sk-raised-hover-color);
+			}
+
+			&:has(summary:active)::before {
+				border-color: var(--sk-raised-active-color);
+				border-width: var(--sk-raised-active-width);
+			}
+
+			&::after {
+				background: url($lib/icons/chevron.svg) 50% 50% no-repeat;
+				background-size: 2rem;
 				rotate: -90deg;
 				transition: rotate 0.2s;
-				pointer-events: none;
+				transition: rotate 0.2s;
+				top: 0.2rem;
+				right: 0.8rem;
+			}
+
+			&:has(summary:active)::after {
+				top: 0.3rem;
+				right: 0.7rem;
 			}
 
 			& > summary {
@@ -453,7 +487,7 @@
 					position: absolute;
 					display: flex;
 					align-items: center;
-					right: 3rem;
+					right: 4rem;
 					top: 0;
 					height: 100%;
 					content: 'show all';
diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
index 778f548bc6..d32f90d51b 100644
--- a/packages/site-kit/src/lib/components/ThemeToggle.svelte
+++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -38,24 +38,55 @@
 	onDestroy(() => query?.removeEventListener('change', cb));
 </script>
 
-<button
-	onclick={toggle}
-	type="button"
-	aria-pressed={$theme.current === 'dark' ? 'true' : 'false'}
-	aria-label={label}
-></button>
+<div class="appearance">
+	<span class="caption">Theme</span>
+	<button
+		onclick={toggle}
+		class="raised"
+		type="button"
+		aria-pressed={$theme.current === 'dark' ? 'true' : 'false'}
+		aria-label={label}
+	></button>
+</div>
 
 <style>
 	button {
-		width: 2.3rem;
-		height: 2.3rem;
+		width: 3.2rem;
+		aspect-ratio: 1;
 		background: red;
-		background: url($lib/icons/theme-light.svg) no-repeat 50% 50% / contain;
+		background: url($lib/icons/theme-light.svg) no-repeat 50% 50% / 2.3rem 2.3rem;
 		opacity: 0.6;
 
 		:global(.dark) & {
-			background: url($lib/icons/theme-dark.svg);
+			background-image: url($lib/icons/theme-dark.svg);
 			opacity: 0.8;
 		}
 	}
+
+	.appearance {
+		display: flex;
+		align-items: center;
+
+		.caption {
+			display: none;
+			font-size: var(--sk-text-xs);
+			line-height: 1;
+			margin-right: 0rem;
+		}
+	}
+
+	@media (max-width: 799px) {
+		.appearance {
+			position: relative;
+			display: flex;
+			padding: 1.5rem 0;
+			justify-content: space-between;
+		}
+
+		.appearance .caption {
+			display: block;
+
+			font-size: var(--sk-text-s);
+		}
+	}
 </style>
diff --git a/packages/site-kit/src/lib/markdown/renderer.ts b/packages/site-kit/src/lib/markdown/renderer.ts
index ba71f4aca9..8b993c8005 100644
--- a/packages/site-kit/src/lib/markdown/renderer.ts
+++ b/packages/site-kit/src/lib/markdown/renderer.ts
@@ -171,11 +171,11 @@ export async function render_content_markdown(
 			}
 
 			if (converted) {
-				html += `<input class="ts-toggle" checked title="Toggle language" type="checkbox" aria-label="Toggle JS/TS">`;
+				html += `<input class="ts-toggle raised" checked title="Toggle language" type="checkbox" aria-label="Toggle JS/TS">`;
 			}
 
 			if (options.copy) {
-				html += `<button class="copy-to-clipboard" title="Copy to clipboard" aria-label="Copy to clipboard"></button>`;
+				html += `<button class="copy-to-clipboard raised" title="Copy to clipboard" aria-label="Copy to clipboard"></button>`;
 			}
 
 			html += '</div>';
@@ -298,7 +298,7 @@ async function parse({
 		blockquote(token) {
 			let content = this.parser?.parse(token.tokens) ?? '';
 			if (content.includes('[!LEGACY]')) {
-				content = `<details class="legacy"><summary>Legacy mode</summary>${content.replace('[!LEGACY]', '')}</details>`;
+				content = `<details class="legacy"><summary><label>Legacy mode <button class="raised"></button></label></summary>${content.replace('[!LEGACY]', '')}</details>`;
 			}
 			return `<blockquote>${content}</blockquote>`;
 		}
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
index 2f7745d302..16f1380ad1 100644
--- a/packages/site-kit/src/lib/styles/base.css
+++ b/packages/site-kit/src/lib/styles/base.css
@@ -34,9 +34,6 @@ body {
 	scrollbar-width: thin;
 	scrollbar-color: var(--sk-scrollbar) transparent;
 	-webkit-tap-highlight-color: hsla(var(--sk-theme-1-hsl), 0.1);
-
-	transition: 0.5s var(--quint-out);
-	transition-property: background, background-color, background-image, border;
 }
 
 *:focus-visible {
@@ -167,6 +164,27 @@ button > svg {
 	stroke: currentColor !important;
 }
 
+.raised {
+	border-radius: var(--sk-border-radius);
+	border-style: solid;
+	border-color: var(--sk-raised-color);
+	border-width: var(--sk-raised-width);
+
+	&:hover {
+		border-color: var(--sk-raised-hover-color);
+	}
+
+	&:active {
+		border-color: var(--sk-raised-active-color);
+		border-width: var(--sk-raised-active-width);
+	}
+
+	&:disabled {
+		border-color: transparent;
+		border-width: 1px;
+	}
+}
+
 /*  links ------------------------------------- */
 a {
 	color: var(--sk-theme-1);
diff --git a/packages/site-kit/src/lib/styles/tokens.css b/packages/site-kit/src/lib/styles/tokens.css
index b7412a40d8..8abaf52436 100644
--- a/packages/site-kit/src/lib/styles/tokens.css
+++ b/packages/site-kit/src/lib/styles/tokens.css
@@ -49,6 +49,7 @@
 	--sk-back-3: hsla(0, 0%, 99%, 1);
 	--sk-back-4: hsl(0, 0%, 95%);
 	--sk-back-5: hsl(0, 0%, 92%);
+	--sk-back-6: hsl(0, 0%, 86%);
 
 	--sk-text-1: hsla(0, 0%, 0%, 0.95);
 	--sk-text-2: hsla(0, 0%, 0%, 0.88);
@@ -85,14 +86,22 @@
 	/* overrides */
 	--shiki-color-background: var(--sk-back-2);
 
+	/* raised buttons */
+	--sk-raised-color: var(--sk-back-4) var(--sk-back-5) var(--sk-back-5) var(--sk-back-4);
+	--sk-raised-width: 1px 2px 2px 1px;
+	--sk-raised-hover-color: var(--sk-back-5) var(--sk-back-6) var(--sk-back-6) var(--sk-back-5);
+	--sk-raised-active-color: var(--sk-back-6) var(--sk-back-5) var(--sk-back-5) var(--sk-back-6);
+	--sk-raised-active-width: 2px 1px 1px 2px;
+
 	&.dark {
 		color-scheme: dark;
 
 		--sk-back-1: hsl(0 0 1);
-		--sk-back-2: hsl(0 0 18);
+		--sk-back-2: hsl(0 0 15);
 		--sk-back-3: hsl(0 0 12);
 		--sk-back-4: hsl(0 0 22);
 		--sk-back-5: hsl(0 0 25);
+		--sk-back-6: hsl(0 0 32);
 		--sk-back-translucent: hsla(0, 0%, 100%, 0.1);
 		--sk-theme-1-hsl: 12, 94%, 62%;
 		--sk-theme-2-hsl: 240, 8%, 44%;
@@ -125,6 +134,11 @@
 
 		/* overrides */
 		--shiki-color-background: var(--sk-back-3);
+
+		/* raised buttons */
+		--sk-raised-color: var(--sk-back-5) var(--sk-back-3) var(--sk-back-3) var(--sk-back-5);
+		--sk-raised-hover-color: var(--sk-back-6) var(--sk-back-3) var(--sk-back-3) var(--sk-back-6);
+		--sk-raised-active-color: var(--sk-back-3) var(--sk-back-6) var(--sk-back-6) var(--sk-back-3);
 	}
 }