diff --git a/.changeset/toc-css-variables.md b/.changeset/toc-css-variables.md
new file mode 100644
index 00000000..d184e00c
--- /dev/null
+++ b/.changeset/toc-css-variables.md
@@ -0,0 +1,9 @@
+---
+"@ainsleydev/sveltekit-helper": patch
+---
+
+feat(toc): expose CSS variables on TableOfContents for active colour, border colour and offset
+
+- `--toc-colour-active` — overrides active/hover link colour (fallback: `--token-text-action`)
+- `--toc-border-colour` — overrides border colour (fallback: `--colour-light-600`)
+- `--toc-border-offset` — overrides `margin-left` and `padding-left` on the border variant (fallback: `$size-48`)
diff --git a/packages/sveltekit-helper/src/components/TableOfContents.svelte b/packages/sveltekit-helper/src/components/TableOfContents.svelte
index 9b352a24..8590c339 100644
--- a/packages/sveltekit-helper/src/components/TableOfContents.svelte
+++ b/packages/sveltekit-helper/src/components/TableOfContents.svelte
@@ -175,20 +175,20 @@ export type TableOfContentsProps = {
 			will-change: color;
 
 			&--active {
-				color: var(--token-text-action);
+				color: var(--toc-colour-active, var(--token-text-action));
 				font-weight: var(--font-weight-medium);
 			}
 
 			&:hover {
-				color: var(--token-text-action);
+				color: var(--toc-colour-active, var(--token-text-action));
 			}
 		}
 
 		@include a.mq(tablet) {
 			&--border {
-				margin-left: a.$size-48;
-				padding-left: a.$size-48;
-				border-left: 1px solid var(--colour-light-600);
+				margin-left: var(--toc-border-offset, #{a.$size-48});
+				padding-left: var(--toc-border-offset, #{a.$size-48});
+				border-left: 1px solid var(--toc-border-colour, var(--colour-light-600));
 			}
 		}
 	}