diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index d6a6a4f..890f4f5 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -25,9 +25,20 @@ export default defineConfig({
starlight({
title: 'RDBMS Playground',
tagline: 'Learn relational databases by doing.',
- // TODO(Phase B): point at the real repository once it moves to its
- // public home. Omitted for now rather than linking the wrong repo.
- // social: [{ icon: 'github', label: 'GitHub', href: '…' }],
+ // Header logo: a database-table glyph with a teal primary-key cell.
+ // Separate light/dark files so the outline adapts to the theme;
+ // `replacesTitle: false` keeps the "RDBMS Playground" wordmark beside it.
+ logo: {
+ light: './src/assets/relplay-logo-light.svg',
+ dark: './src/assets/relplay-logo-dark.svg',
+ replacesTitle: false,
+ },
+ // Footer override: Starlight's default footer + a small company/source line.
+ components: {
+ Footer: './src/components/Footer.astro',
+ },
+ // TODO(Phase B): a header social link to the repo is deliberately omitted
+ // — the source/issues link lives understated in the footer instead.
customCss: ['./src/styles/global.css'],
// Register the simple-mode command grammar with Expressive Code (Shiki).
expressiveCode: { shiki: { langs: [rdbmsLang, rdbmsSyntax] } },
diff --git a/website/public/favicon.svg b/website/public/favicon.svg
index cba5ac1..0714453 100644
--- a/website/public/favicon.svg
+++ b/website/public/favicon.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/website/src/assets/relplay-logo-dark.svg b/website/src/assets/relplay-logo-dark.svg
new file mode 100644
index 0000000..b51dccb
--- /dev/null
+++ b/website/src/assets/relplay-logo-dark.svg
@@ -0,0 +1,7 @@
+
diff --git a/website/src/assets/relplay-logo-light.svg b/website/src/assets/relplay-logo-light.svg
new file mode 100644
index 0000000..8bb197f
--- /dev/null
+++ b/website/src/assets/relplay-logo-light.svg
@@ -0,0 +1,7 @@
+
diff --git a/website/src/components/Footer.astro b/website/src/components/Footer.astro
new file mode 100644
index 0000000..526d5a3
--- /dev/null
+++ b/website/src/components/Footer.astro
@@ -0,0 +1,44 @@
+---
+/**
+ * Footer override: render Starlight's default footer (pagination, last-updated,
+ * "Built with Starlight"), then append a small, understated brand line — the
+ * company (linked to its disclosures) and an unobtrusive source/issues link
+ * (true to "people can join in, but don't advertise it loudly").
+ */
+import Default from '@astrojs/starlight/components/Footer.astro';
+---
+
+
+
+
+
+
diff --git a/website/src/components/Wordmark.astro b/website/src/components/Wordmark.astro
new file mode 100644
index 0000000..da3796d
--- /dev/null
+++ b/website/src/components/Wordmark.astro
@@ -0,0 +1,78 @@
+---
+/**
+ * Brand lockup — "RELational PLAYground" doing double duty:
+ *
+ * RELational ┐
+ * DataBase Management Sys │ PLAYground (PLAYground large, spanning both rows)
+ *
+ * Two hidden readings, both drawn out in teal:
+ * • the domain brand → REL + PLAY = "relplay"
+ * • the acronym → R(elational) D(ataBase) M(anagement) S(ystem) = RDBMS,
+ * so a learner who doesn't know what RDBMS stands for sees it spelled out.
+ *
+ * Decorative; the product name stays "RDBMS Playground". The DOM order reads
+ * naturally to screen readers: "RELational DataBase Management System PLAYground".
+ */
+---
+
+
+
+
diff --git a/website/src/content/docs/index.mdx b/website/src/content/docs/index.mdx
index dd4d7f4..2bcbf9d 100644
--- a/website/src/content/docs/index.mdx
+++ b/website/src/content/docs/index.mdx
@@ -15,6 +15,9 @@ hero:
import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components';
import Demo from '../../components/Demo.astro';
+import Wordmark from '../../components/Wordmark.astro';
+
+
RDBMS Playground is a cross-platform terminal app that gives you a safe
sandbox for exploring relational database concepts: tables, columns,
diff --git a/website/src/styles/global.css b/website/src/styles/global.css
index 9be8784..5811720 100644
--- a/website/src/styles/global.css
+++ b/website/src/styles/global.css
@@ -3,6 +3,37 @@
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);
+/* ── Brand accent ────────────────────────────────────────────────────────
+ Anchor the site accent to the product's in-TUI "identifier" teal, so the
+ docs and the app read as one product rather than a generic docs theme.
+ Starlight derives link / active-nav / focus colours from these three
+ accent shades: `-low` = subtle background, base = mid, `-high` = strong /
+ high-contrast (link text). Dark theme is `:root`; light overrides under
+ `[data-theme='light']`. These are unlayered, so they win over Starlight's
+ layered defaults. Tweakable — eyeball on the dev server. */
+:root {
+ --sl-color-accent-low: #0e343b;
+ --sl-color-accent: #2f8f9e;
+ --sl-color-accent-high: #7ed6e3;
+}
+:root[data-theme='light'] {
+ --sl-color-accent-low: #cfe9ec;
+ --sl-color-accent: #0f6b76;
+ --sl-color-accent-high: #063b42;
+}
+
+/* Landing hero spacing. On wide viewports Starlight pads the splash hero with
+ up to 10rem block padding (Hero.astro, @media min-width:50rem), which leaves
+ an outsized gap between the hero actions and the wordmark that follows it.
+ Trim just the bottom so the wordmark sits closer; the top padding (hero
+ breathing room below the header) is untouched. Only the landing uses the
+ splash template, so this is scoped in practice. */
+@media (min-width: 50rem) {
+ .hero {
+ padding-block-end: 2.5rem;
+ }
+}
+
/* Command prompt for simple-mode (`rdbms`) code blocks: a decorative "> "
before each command line so consecutive commands read as distinct entered
lines (advanced-mode `sql` blocks are left unprefixed). It is CSS ::before