kvlonge · Nov 1, 2026 · Nov 1, 2026
diff --git a/website/README.md b/website/README.md
@@ -13,6 +13,9 @@ The SQLClean website: the homepage at `/` and the documentation at `/docs/`, bui
 - `public/fonts/`: self-hosted fonts, each with its licence.
 - `recordings/`: the VHS tapes behind the README demo; see `recordings/README.md`.
 
+The footer's SQLStack symbols (`public/assets/sqlstack.png` and `sqlstack-dark.png`) are unchanged
+copies from [`sqlstack-io/sqlstack` at `9b37b9e`](https://github.com/sqlstack-io/sqlstack/tree/9b37b9e128d36930e1fe0c5880606525100b228b/assets/icons).
+
 Search uses Pagefind, and `llms.txt`, `llms-small.txt` and `llms-full.txt` are generated at build
 time. The Website workflow builds the site and checks its links on every change; it does not deploy.
 Cloudflare Pages deploys it: every push to `main` publishes https://sqlclean.io, and every other

diff --git a/website/astro.config.mjs b/website/astro.config.mjs
@@ -36,6 +36,7 @@ export default defineConfig({
 				SiteTitle: './src/components/SiteTitle.astro',
 				Pagination: './src/components/Pagination.astro',
 				ThemeSelect: './src/components/ThemeSelect.astro',
+				Footer: './src/components/Footer.astro',
 			},
 			customCss: ['./src/styles/fonts.css', './src/styles/sqlclean.css'],
 			expressiveCode: {

diff --git a/website/public/assets/sqlstack-dark.png b/website/public/assets/sqlstack-dark.png
diff --git a/website/public/assets/sqlstack.png b/website/public/assets/sqlstack.png
diff --git a/website/public/index.html b/website/public/index.html
@@ -33,10 +33,13 @@
 	<body>
 		<header class="site-header">
 			<div class="wrap">
-				<a class="brand" href="/" aria-label="SQLClean home">
-					<img class="logo-for-light" src="assets/logo-light.png" alt="SQLClean" width="139" height="30" />
-					<img class="logo-for-dark" src="assets/logo-dark.png" alt="SQLClean" width="139" height="30" />
-				</a>
+				<div class="brand-lockup">
+					<a class="brand" href="/" aria-label="SQLClean home">
+						<img class="logo-for-light" src="assets/logo-light.png" alt="SQLClean" width="139" height="30" />
+						<img class="logo-for-dark" src="assets/logo-dark.png" alt="SQLClean" width="139" height="30" />
+					</a>
+					<a class="brand-byline" href="https://sqlstack.io">by SQLStack</a>
+				</div>
 				<nav class="nav" aria-label="Main">
 					<a class="hide-sm" href="#how">How it works</a>
 					<a href="/docs/">Docs</a>
@@ -447,6 +450,19 @@ <h2>Make clean SQL the default</h2>
 					<a href="https://pypi.org/project/sqlclean/">PyPI</a>
 				</span>
 			</div>
+			<div class="wrap sqlstack-family">
+				<a class="sqlstack-parent" href="https://sqlstack.io">
+					<img class="sqlstack-for-light" src="/assets/sqlstack.png" alt="" width="28" height="23" />
+					<img class="sqlstack-for-dark" src="/assets/sqlstack-dark.png" alt="" width="28" height="23" />
+					<span>Part of SQLStack</span>
+				</a>
+				<nav class="sqlstack-tools" aria-label="SQLStack tools">
+					<a href="https://sqlbuild.com">SQLBuild</a>
+					<a href="/">SQLClean</a>
+					<a href="https://docs.streambuild.dev">SQLTide</a>
+					<a href="https://fensu.io">Fensu</a>
+				</nav>
+			</div>
 		</footer>
 
 		<script>

diff --git a/website/public/styles.css b/website/public/styles.css
@@ -96,6 +96,7 @@
 html {
 	-webkit-text-size-adjust: 100%;
 	scroll-behavior: smooth;
+	scroll-padding-top: 88px;
 }
 
 body {
@@ -140,7 +141,24 @@ pre {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	height: 60px;
+	height: 80px;
+}
+
+.brand-lockup {
+	display: flex;
+	flex-direction: column;
+	flex-shrink: 0;
+}
+
+.brand-byline {
+	display: flex;
+	align-items: center;
+	min-height: 24px;
+	margin-inline-start: 41%;
+	color: var(--muted-foreground);
+	font-size: 11px;
+	line-height: 14px;
+	white-space: nowrap;
 }
 
 .brand {
@@ -657,6 +675,39 @@ footer a {
 	color: var(--muted-foreground);
 }
 
+.sqlstack-family {
+	align-items: center;
+	margin-top: 20px;
+	padding-top: 20px;
+	border-top: 1px solid var(--inner-line);
+}
+
+.sqlstack-parent {
+	display: inline-flex;
+	align-items: center;
+	gap: 10px;
+}
+
+.sqlstack-parent img {
+	width: 28px;
+	height: auto;
+}
+
+.sqlstack-for-dark,
+:root[data-theme='dark'] .sqlstack-for-light {
+	display: none;
+}
+
+:root[data-theme='dark'] .sqlstack-for-dark {
+	display: block;
+}
+
+.sqlstack-tools {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px 20px;
+}
+
 @media (max-width: 880px) {
 	.problem,
 	.grid,

diff --git a/website/src/components/Footer.astro b/website/src/components/Footer.astro
@@ -0,0 +1,67 @@
+---
+import DefaultFooter from '@astrojs/starlight/components/Footer.astro';
+---
+
+<DefaultFooter />
+<div class="sqlstack-family">
+	<a class="sqlstack-parent" href="https://sqlstack.io">
+		<img class="sqlstack-for-light" src="/assets/sqlstack.png" alt="" width="28" height="23" />
+		<img class="sqlstack-for-dark" src="/assets/sqlstack-dark.png" alt="" width="28" height="23" />
+		<span>Part of SQLStack</span>
+	</a>
+	<nav class="sqlstack-tools" aria-label="SQLStack tools">
+		<a href="https://sqlbuild.com">SQLBuild</a>
+		<a href="/">SQLClean</a>
+		<a href="https://docs.streambuild.dev">SQLTide</a>
+		<a href="https://fensu.io">Fensu</a>
+	</nav>
+</div>
+
+<style>
+	.sqlstack-family {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 16px;
+		margin-top: 20px;
+		padding-top: 20px;
+		border-top: 1px solid var(--sqc-line);
+		font-size: 13px;
+	}
+
+	a {
+		color: var(--sqc-muted);
+		text-decoration: none;
+	}
+
+	a:hover {
+		color: var(--sqc-primary);
+	}
+
+	.sqlstack-parent {
+		display: inline-flex;
+		align-items: center;
+		gap: 10px;
+	}
+
+	img {
+		width: 28px;
+		height: auto;
+	}
+
+	.sqlstack-for-dark,
+	:global(:root[data-theme='dark']) .sqlstack-for-light {
+		display: none;
+	}
+
+	:global(:root[data-theme='dark']) .sqlstack-for-dark {
+		display: block;
+	}
+
+	.sqlstack-tools {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px 20px;
+	}
+</style>
diff --git a/website/src/components/SiteTitle.astro b/website/src/components/SiteTitle.astro
@@ -4,10 +4,13 @@ import logoLight from '../assets/logo-light.png';
 ---
 
 <div class="site-title">
-	<a class="logo" href="/" aria-label="SQLClean home">
-		<img class="logo-for-light" src={logoLight.src} alt="SQLClean" width={111} height={30} />
-		<img class="logo-for-dark" src={logoDark.src} alt="SQLClean" width={111} height={30} />
-	</a>
+	<div class="brand-lockup">
+		<a class="logo" href="/" aria-label="SQLClean home">
+			<img class="logo-for-light" src={logoLight.src} alt="SQLClean" width={111} height={30} />
+			<img class="logo-for-dark" src={logoDark.src} alt="SQLClean" width={111} height={30} />
+		</a>
+		<a class="brand-byline" href="https://sqlstack.io">by SQLStack</a>
+	</div>
 	<a class="docs" href="/docs/">Docs</a>
 </div>
 
@@ -20,6 +23,27 @@ import logoLight from '../assets/logo-light.png';
 		min-width: 0;
 	}
 
+	.brand-lockup {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.brand-byline {
+		display: flex;
+		align-items: center;
+		min-height: 24px;
+		margin-inline-start: 41%;
+		color: var(--sqc-muted);
+		font-size: 11px;
+		line-height: 14px;
+		text-decoration: none;
+		white-space: nowrap;
+	}
+
+	.brand-byline:hover {
+		color: var(--sqc-primary);
+	}
+
 	.logo {
 		display: flex;
 	}

diff --git a/website/src/styles/sqlclean.css b/website/src/styles/sqlclean.css
@@ -2,7 +2,7 @@
 :root {
 	--sl-font: 'Inter', system-ui, sans-serif;
 	--sl-font-mono: 'IBM Plex Mono', 'SQLClean Box Drawing', ui-monospace, monospace;
-	--sl-nav-height: 60px;
+	--sl-nav-height: 80px;
 	--sl-content-width: 50rem;
 	--sl-sidebar-width: 18rem;
 	--sqc-toc-width: 16rem;