diff --git a/.cursor/rules/no-default-export-typescript.mdc b/.cursor/rules/no-default-export-typescript.mdc
new file mode 100644
index 0000000..25cd64c
--- /dev/null
+++ b/.cursor/rules/no-default-export-typescript.mdc
@@ -0,0 +1,16 @@
+---
+description: Named exports only in TypeScript; no default exports
+globs:
+  - "**/*.ts"
+  - "**/*.tsx"
+alwaysApply: false
+---
+
+# No default exports (TypeScript)
+
+- Prefer **named exports** only: `export const Component = …`, `export { foo }`, and similar.
+- Do **not** add `export default`, including `export { Name as default }`, unless the file is an allowed tooling entrypoint (see below).
+
+**Exception:** `apps/web/vite.config.ts` and `apps/web/openapi-ts.config.ts` may use `export default` because Vite and `@hey-api/openapi-ts` load the config via the module’s default export. Biome disables `style/noDefaultExport` for those paths in `apps/web/biome.json`.
+
+Where this repository runs Biome with `style.noDefaultExport`, that config applies to the linted tree (see `apps/web/biome.json`).
diff --git a/PLAN.md b/PLAN.md
index 72ad681..34d5703 100644
--- a/PLAN.md
+++ b/PLAN.md
@@ -27,7 +27,7 @@ Tasks and subtasks for building the bread-recipes app (SolidJS + Python REST + O
 
 - [x] **4.1** Scaffold SolidJS + Vite + TypeScript in `apps/web`; **Biome** (lint + format + import organise); Vitest configured; exact dependency versions only; `README.md` for the app.
 - [x] **4.2** Generate or synchronise typed API usage from the OpenAPI spec (client/types) so API calls stay strictly typed.
-- [ ] **4.3** App shell: router, layout, and global styles (clean, minimalist, bread-appropriate palette, responsive).
+- [x] **4.3** App shell: router, layout, and global styles (clean, minimalist, bread-appropriate palette, responsive).
 - [ ] **4.4** Home page: fetch and list bread recipes with overview + thumbnail; navigate to detail on click.
 - [ ] **4.5** Recipe page: full recipe content and larger image; deep-linkable route (e.g. by id).
 - [ ] **4.6** MSW for tests; knip configured; Vitest coverage at 100% with a CI gate.
diff --git a/apps/web/README.md b/apps/web/README.md
index 4fd8012..83b4da6 100644
--- a/apps/web/README.md
+++ b/apps/web/README.md
@@ -33,6 +33,10 @@ Run from **`apps/web`** (or via **`pnpm --filter web <script>`** from the root):
 
 Configuration: **`biome.json`** (Biome **2.4.x**), **`vite.config.ts`** (includes Vitest), **`tsconfig.*.json`**.
 
+## App shell (PLAN §4.3)
+
+Routing uses [**`@solidjs/router`**](https://github.com/solidjs/solid-router): **`Router`** with a shared **`AppShell`** layout (header, main outlet, footer). Routes include **`/`** (home) and **`/recipes/:id`** (detail placeholder until §4.5). Global styles live in **`src/index.css`** (warm bread surfaces, cool complementary accents); layout CSS in **`src/layout/AppShell.css`**.
+
 ## OpenAPI client
 
 The UI uses a **full fetch-based client** generated from **`../../packages/openapi/openapi.yaml`** via [**`@hey-api/openapi-ts`**](https://github.com/hey-api/openapi-ts). Generated output lives under **`src/api/generated/`** (do not edit by hand; regenerate after spec changes).
diff --git a/apps/web/biome.json b/apps/web/biome.json
index 7785f4d..4688bc1 100644
--- a/apps/web/biome.json
+++ b/apps/web/biome.json
@@ -17,9 +17,30 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "complexity": {
+        "useArrowFunction": "error"
+      },
+      "nursery": {
+        "useExplicitType": "error"
+      },
+      "style": {
+        "noDefaultExport": "error"
+      }
     }
   },
+  "overrides": [
+    {
+      "includes": ["vite.config.ts", "openapi-ts.config.ts"],
+      "linter": {
+        "rules": {
+          "style": {
+            "noDefaultExport": "off"
+          }
+        }
+      }
+    }
+  ],
   "javascript": {
     "formatter": {
       "quoteStyle": "single",
diff --git a/apps/web/package.json b/apps/web/package.json
index 5f369f0..ff10ab7 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -15,6 +15,7 @@
     "openapi:validate": "pnpm --filter @solid-pact/openapi run lint"
   },
   "dependencies": {
+    "@solidjs/router": "0.16.1",
     "solid-js": "1.9.12"
   },
   "devDependencies": {
diff --git a/apps/web/src/App.css b/apps/web/src/App.css
deleted file mode 100644
index 8c11563..0000000
--- a/apps/web/src/App.css
+++ /dev/null
@@ -1,22 +0,0 @@
-.app {
-  max-width: 40rem;
-  margin: 2rem auto;
-  padding: 0 1rem;
-  font-family:
-    system-ui,
-    -apple-system,
-    Segoe UI,
-    Roboto,
-    sans-serif;
-}
-
-.lede {
-  color: var(--text);
-  line-height: 1.5;
-}
-
-.counter {
-  margin-top: 1rem;
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-}
diff --git a/apps/web/src/App.test.tsx b/apps/web/src/App.test.tsx
index ff6e0b1..f827428 100644
--- a/apps/web/src/App.test.tsx
+++ b/apps/web/src/App.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen } from '@solidjs/testing-library';
 import { describe, expect, it } from 'vitest';
-import App from './App';
+import { App } from './App';
 
 describe('App', () => {
   it('renders the main heading', () => {
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 0817e84..abb7cc4 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -1,25 +1,12 @@
-import { createSignal } from 'solid-js';
-import './App.css';
+import { Route, Router } from '@solidjs/router';
+import type { JSX } from 'solid-js';
+import { AppShell } from './layout/AppShell';
+import { Home } from './pages/Home';
+import { RecipePage } from './pages/RecipePage';
 
-function App() {
-  const [count, setCount] = createSignal(0);
-
-  return (
-    <main class="app">
-      <h1>Bread Recipes</h1>
-      <p class="lede">
-        SolidJS + Vite scaffold (PLAN §4.1). Replace this with the real UI in
-        later tasks.
-      </p>
-      <button
-        type="button"
-        class="counter"
-        onClick={() => setCount((c) => c + 1)}
-      >
-        Count is {count()}
-      </button>
-    </main>
-  );
-}
-
-export default App;
+export const App = (): JSX.Element => (
+  <Router root={AppShell}>
+    <Route path="/" component={Home} />
+    <Route path="/recipes/:id" component={RecipePage} />
+  </Router>
+);
diff --git a/apps/web/src/api/client.ts b/apps/web/src/api/client.ts
index db39dd7..2c18b38 100644
--- a/apps/web/src/api/client.ts
+++ b/apps/web/src/api/client.ts
@@ -1,4 +1,5 @@
 import {
+  type Client,
   type ClientOptions,
   createClient,
   createConfig,
@@ -16,6 +17,6 @@ function resolveBaseUrl(): string {
 }
 
 /** Shared fetch client for generated SDK calls (base URL from `VITE_API_BASE_URL`, or local API in dev). */
-export const apiClient = createClient(
+export const apiClient: Client = createClient(
   createConfig<ClientOptions>({ baseUrl: resolveBaseUrl() }),
 );
diff --git a/apps/web/src/api/index.ts b/apps/web/src/api/index.ts
index 7ff87c8..cb3b01e 100644
--- a/apps/web/src/api/index.ts
+++ b/apps/web/src/api/index.ts
@@ -8,22 +8,20 @@ import type { GetRecipeByIdData, ListRecipesData } from './generated/types.gen';
 
 export { apiClient } from './client';
 
-export function listRecipes<ThrowOnError extends boolean = false>(
+export const listRecipes = <ThrowOnError extends boolean = false>(
   options?: Options<ListRecipesData, ThrowOnError>,
-) {
-  return listRecipesSdk({
+): ReturnType<typeof listRecipesSdk<ThrowOnError>> =>
+  listRecipesSdk({
     ...options,
     client: options?.client ?? apiClient,
   });
-}
 
-export function getRecipeById<ThrowOnError extends boolean = false>(
+export const getRecipeById = <ThrowOnError extends boolean = false>(
   options: Options<GetRecipeByIdData, ThrowOnError>,
-) {
-  return getRecipeByIdSdk({
+): ReturnType<typeof getRecipeByIdSdk<ThrowOnError>> =>
+  getRecipeByIdSdk({
     ...options,
     client: options?.client ?? apiClient,
   });
-}
 
 export type * from './generated/types.gen';
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 1389507..b288049 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1,22 +1,31 @@
 :root {
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
-  --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
+  /*
+   * Surfaces: warm flour / crust / wheat (bread).
+   * Accents: cool slate–teal — complementary to golden bread on the wheel.
+   */
+  --text: #5c5348;
+  --text-h: #2a241c;
+  --text-muted: #7a7167;
+  --bg: #faf7f2;
+  --header-bg: rgba(255, 252, 248, 0.92);
+  --footer-bg: rgba(244, 239, 230, 0.65);
+  --border: #e8e4dc;
+  --code-bg: #e9f0f3;
+  --accent: #3a6f82;
+  --accent-hover: #2d5a6a;
+  --accent-bg: rgba(58, 111, 130, 0.12);
+  --accent-border: rgba(58, 111, 130, 0.42);
   --social-bg: rgba(244, 243, 236, 0.5);
   --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+    rgba(45, 70, 85, 0.07) 0 10px 24px -6px,
+    rgba(40, 55, 65, 0.05) 0 4px 8px -4px;
 
-  --sans: system-ui, "Segoe UI", Roboto, sans-serif;
-  --heading: system-ui, "Segoe UI", Roboto, sans-serif;
+  --sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  --heading: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
   --mono: ui-monospace, Consolas, monospace;
 
-  font: 18px / 145% var(--sans);
-  letter-spacing: 0.18px;
+  font: 17px / 1.5 var(--sans);
+  letter-spacing: 0.01em;
   color-scheme: light dark;
   color: var(--text);
   background: var(--bg);
@@ -32,17 +41,21 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
+    --text: #c4bbb0;
+    --text-h: #f2ebe3;
+    --text-muted: #9a9188;
+    --bg: #1a1816;
+    --header-bg: rgba(28, 26, 23, 0.94);
+    --footer-bg: rgba(22, 20, 18, 0.85);
+    --border: #3d3834;
+    --code-bg: #1e2a2e;
+    --accent: #7eb8c8;
+    --accent-hover: #a3d4e0;
+    --accent-bg: rgba(126, 184, 200, 0.14);
+    --accent-border: rgba(126, 184, 200, 0.45);
     --social-bg: rgba(47, 48, 58, 0.5);
     --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
+      rgba(0, 0, 0, 0.35) 0 12px 28px -8px, rgba(0, 0, 0, 0.2) 0 4px 10px -4px;
   }
 
   #social .button-icon {
@@ -55,57 +68,47 @@ body {
 }
 
 #root {
-  width: 1126px;
-  max-width: 100%;
+  width: 100%;
+  max-width: 720px;
   margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
+  min-height: 100dvh;
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  border-inline: 1px solid var(--border);
+  padding-inline: max(0px, env(safe-area-inset-left))
+    max(0px, env(safe-area-inset-right));
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+@media (min-width: 768px) {
+  #root {
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    min-height: calc(100svh - 1rem);
+    border-radius: 12px;
+    overflow: clip;
+    box-shadow: var(--shadow);
+  }
 }
 
-h1,
-h2 {
+h2,
+h3 {
   font-family: var(--heading);
   font-weight: 500;
   color: var(--text-h);
 }
 
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
-  }
-}
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
-  }
-}
 p {
   margin: 0;
 }
 
-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
-  border-radius: 4px;
-  color: var(--text-h);
-}
-
 code {
+  font-family: var(--mono);
   font-size: 15px;
   line-height: 135%;
   padding: 4px 8px;
   background: var(--code-bg);
+  border-radius: 4px;
+  color: var(--text-h);
 }
diff --git a/apps/web/src/index.tsx b/apps/web/src/index.tsx
index af80415..6ce0956 100644
--- a/apps/web/src/index.tsx
+++ b/apps/web/src/index.tsx
@@ -1,11 +1,12 @@
 /* @refresh reload */
+import type { JSX } from 'solid-js';
 import { render } from 'solid-js/web';
 import './index.css';
-import App from './App.tsx';
+import { App } from './App.tsx';
 
-const root = document.getElementById('root');
+const root: HTMLElement | null = document.getElementById('root');
 if (!root) {
   throw new Error('Missing #root element');
 }
 
-render(() => <App />, root);
+render((): JSX.Element => <App />, root);
diff --git a/apps/web/src/layout/AppShell.css b/apps/web/src/layout/AppShell.css
new file mode 100644
index 0000000..6c92fda
--- /dev/null
+++ b/apps/web/src/layout/AppShell.css
@@ -0,0 +1,82 @@
+.shell {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  flex: 1;
+  text-align: left;
+}
+
+.shell-header {
+  flex-shrink: 0;
+  padding: 1rem 1.25rem 1.25rem;
+  border-bottom: 1px solid var(--border);
+  background: var(--header-bg);
+}
+
+.shell-header-inner {
+  max-width: 42rem;
+  margin: 0 auto;
+}
+
+.site-title {
+  font-family: var(--heading);
+  font-weight: 600;
+  font-size: 1.35rem;
+  letter-spacing: -0.02em;
+  margin: 0;
+  line-height: 1.2;
+}
+
+@media (min-width: 640px) {
+  .site-title {
+    font-size: 1.5rem;
+  }
+}
+
+.site-title-link {
+  color: var(--text-h);
+  text-decoration: none;
+  border-radius: 4px;
+  outline-offset: 3px;
+}
+
+.site-title-link:hover {
+  color: var(--accent);
+}
+
+.site-title-link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.site-tagline {
+  margin: 0.35rem 0 0;
+  font-size: 0.9rem;
+  color: var(--text-muted);
+  line-height: 1.35;
+}
+
+.shell-main {
+  flex: 1;
+  width: 100%;
+  max-width: 42rem;
+  margin: 0 auto;
+  padding: 1.25rem 1.25rem 2.5rem;
+  box-sizing: border-box;
+}
+
+.shell-footer {
+  flex-shrink: 0;
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--border);
+  background: var(--footer-bg);
+}
+
+.shell-footer-note {
+  margin: 0;
+  max-width: 42rem;
+  margin-inline: auto;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+  text-align: center;
+}
diff --git a/apps/web/src/layout/AppShell.tsx b/apps/web/src/layout/AppShell.tsx
new file mode 100644
index 0000000..6a11f15
--- /dev/null
+++ b/apps/web/src/layout/AppShell.tsx
@@ -0,0 +1,23 @@
+import type { RouteSectionProps } from '@solidjs/router';
+import { A } from '@solidjs/router';
+import type { JSX } from 'solid-js';
+import './AppShell.css';
+
+export const AppShell = ({ children }: RouteSectionProps): JSX.Element => (
+  <div class="shell">
+    <header class="shell-header">
+      <div class="shell-header-inner">
+        <h1 class="site-title">
+          <A href="/" class="site-title-link" end>
+            Bread Recipes
+          </A>
+        </h1>
+        <p class="site-tagline">Simple loaves, clear steps</p>
+      </div>
+    </header>
+    <main class="shell-main">{children}</main>
+    <footer class="shell-footer">
+      <p class="shell-footer-note">A bread recipes browser</p>
+    </footer>
+  </div>
+);
diff --git a/apps/web/src/pages/Home.tsx b/apps/web/src/pages/Home.tsx
new file mode 100644
index 0000000..99fc9ea
--- /dev/null
+++ b/apps/web/src/pages/Home.tsx
@@ -0,0 +1,11 @@
+import type { JSX } from 'solid-js';
+import './Page.css';
+
+export const Home = (): JSX.Element => (
+  <section class="page" aria-labelledby="home-intro">
+    <p id="home-intro" class="lede">
+      Browse sourdough and yeasted recipes from the API. List and detail views
+      follow in the next milestones.
+    </p>
+  </section>
+);
diff --git a/apps/web/src/pages/Page.css b/apps/web/src/pages/Page.css
new file mode 100644
index 0000000..0c86750
--- /dev/null
+++ b/apps/web/src/pages/Page.css
@@ -0,0 +1,34 @@
+.page {
+  width: 100%;
+}
+
+.page-title {
+  font-family: var(--heading);
+  font-weight: 500;
+  font-size: 1.35rem;
+  color: var(--text-h);
+  margin: 0 0 0.75rem;
+  letter-spacing: -0.02em;
+}
+
+@media (min-width: 640px) {
+  .page-title {
+    font-size: 1.5rem;
+  }
+}
+
+.lede {
+  color: var(--text);
+  line-height: 1.55;
+  margin: 0;
+  font-size: 1rem;
+}
+
+.inline-code {
+  font-family: var(--mono);
+  font-size: 0.9em;
+  padding: 0.1em 0.35em;
+  border-radius: 4px;
+  background: var(--code-bg);
+  color: var(--text-h);
+}
diff --git a/apps/web/src/pages/RecipePage.tsx b/apps/web/src/pages/RecipePage.tsx
new file mode 100644
index 0000000..8828d49
--- /dev/null
+++ b/apps/web/src/pages/RecipePage.tsx
@@ -0,0 +1,19 @@
+import { useParams } from '@solidjs/router';
+import type { JSX } from 'solid-js';
+import './Page.css';
+
+export const RecipePage = (): JSX.Element => {
+  const params = useParams<{ id: string }>();
+
+  return (
+    <section class="page" aria-labelledby="recipe-heading">
+      <h2 id="recipe-heading" class="page-title">
+        Recipe
+      </h2>
+      <p class="lede">
+        Full ingredients, steps, and imagery for recipe{' '}
+        <code class="inline-code">{params.id}</code> arrive in PLAN §4.5.
+      </p>
+    </section>
+  );
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 30d2197..6834187 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,6 +16,9 @@ importers:
 
   apps/web:
     dependencies:
+      '@solidjs/router':
+        specifier: 0.16.1
+        version: 0.16.1(solid-js@1.9.12)
       solid-js:
         specifier: 1.9.12
         version: 1.9.12
@@ -28,7 +31,7 @@ importers:
         version: 0.95.0(typescript@5.9.3)
       '@solidjs/testing-library':
         specifier: 0.8.10
-        version: 0.8.10(solid-js@1.9.12)
+        version: 0.8.10(@solidjs/router@0.16.1(solid-js@1.9.12))(solid-js@1.9.12)
       '@types/node':
         specifier: 24.12.0
         version: 24.12.0
@@ -558,6 +561,11 @@ packages:
   '@rolldown/pluginutils@1.0.0-rc.12':
     resolution: {integrity: sha512-HHMwmarRKvoFsJorqYlFeFRzXZqCt2ETQlEDOb9aqssrnVBB1/+xgTGtuTrIk5vzLNX1MjMtTf7W9z3tsSbrxw==}
 
+  '@solidjs/router@0.16.1':
+    resolution: {integrity: sha512-IhyjedgC6LRpw/8CPGGI89FrV+r0xTHzOl2c4CRyzYQ1bLepJxbVI1LLKvsavMWY5TRBRacV7hAeOhuTXkjiqg==}
+    peerDependencies:
+      solid-js: ^1.8.6
+
   '@solidjs/testing-library@0.8.10':
     resolution: {integrity: sha512-qdeuIerwyq7oQTIrrKvV0aL9aFeuwTd86VYD3afdq5HYEwoox1OBTJy4y8A3TFZr8oAR0nujYgCzY/8wgHGfeQ==}
     engines: {node: '>= 14'}
@@ -2548,10 +2556,16 @@ snapshots:
 
   '@rolldown/pluginutils@1.0.0-rc.12': {}
 
-  '@solidjs/testing-library@0.8.10(solid-js@1.9.12)':
+  '@solidjs/router@0.16.1(solid-js@1.9.12)':
+    dependencies:
+      solid-js: 1.9.12
+
+  '@solidjs/testing-library@0.8.10(@solidjs/router@0.16.1(solid-js@1.9.12))(solid-js@1.9.12)':
     dependencies:
       '@testing-library/dom': 10.4.1
       solid-js: 1.9.12
+    optionalDependencies:
+      '@solidjs/router': 0.16.1(solid-js@1.9.12)
 
   '@standard-schema/spec@1.1.0': {}