diff --git a/.claude/docs/DESIGN.md b/.claude/docs/DESIGN.md
index 517da825..2fdbc5e9 100644
--- a/.claude/docs/DESIGN.md
+++ b/.claude/docs/DESIGN.md
@@ -45,7 +45,15 @@ Any change to a brand/status token must keep ≥4.5:1 contrast against its paire
 
 - **Radius:** `--radius: 0.75rem`. Use `rounded-md`/`rounded-lg`/`rounded-xl` (derived from the scale); don't use arbitrary radii. Inputs/buttons/cards inherit the shadcn defaults.
 - **Spacing:** Tailwind 4-point scale. Card padding `p-6` (compact `p-4`); stack gaps `gap-4`/`gap-6`; form field gap `gap-2`. Be consistent rather than pixel-tuning.
-- **Containers:** constrain reading width (`max-w-*`), center with `mx-auto`; full-bleed only for tables/dashboards.
+- **Page width tiers:** every route inside the app shell picks exactly one tier for its top-level container. `app-shell.tsx` supplies only `p-6`, so the page owns the width.
+
+  | Tier           | Container classes   | Use for                                                                                                                 |
+  | -------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+  | **Full-bleed** | none (no `max-w`)   | list, table and dashboard pages — `/`, `/positions`, `/users`, `/applications`, `/my-applications`, `/global-questions` |
+  | **Wide**       | `mx-auto max-w-5xl` | two-column review/detail pages — `/applications/[id]`, `/my-applications/[id]`                                          |
+  | **Narrow**     | `mx-auto max-w-2xl` | single-column forms and reading views — `/profile`, `/positions/[id]/apply`, `/positions/[id]/edit`                     |
+
+  There is no fourth tier: `max-w-6xl`/`4xl`/`3xl` on a page container is a bug. Inside a full-bleed page, constraining an individual prose block (`max-w-2xl` on a description) is correct and not a tier violation — see `/positions/[id]`. A route's `loading.tsx` must use the same tier as its `page.tsx`, or the skeleton shifts on resolve. Routes outside the app shell (`(legal)`, `login`) set their own width.
 
 ## 5. Components
 
diff --git a/app/(main)/(auth)/applications/loading.tsx b/app/(main)/(auth)/applications/loading.tsx
index ab8de85d..67d7a890 100644
--- a/app/(main)/(auth)/applications/loading.tsx
+++ b/app/(main)/(auth)/applications/loading.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 
 export default function ApplicationsLoading() {
   return (
-    <div className="mx-auto flex max-w-6xl flex-col gap-6">
+    <div className="flex flex-col gap-6">
       {/* Header skeleton */}
       <div className="flex flex-col gap-2">
         <Skeleton className="h-7 w-36" />
diff --git a/app/(main)/(auth)/applications/page.tsx b/app/(main)/(auth)/applications/page.tsx
index 462c7692..99ad5d9e 100644
--- a/app/(main)/(auth)/applications/page.tsx
+++ b/app/(main)/(auth)/applications/page.tsx
@@ -86,7 +86,7 @@ export default async function ApplicationsPage({
     : fetchedApplications;
 
   return (
-    <div className="mx-auto flex max-w-6xl flex-col gap-6">
+    <div className="flex flex-col gap-6">
       <PageHeader
         title="Applications"
         description="Review and track submitted applications."