diff --git a/.cursor/rules/component-props.mdc b/.cursor/rules/component-props.mdc
index d906ffc..200beec 100644
--- a/.cursor/rules/component-props.mdc
+++ b/.cursor/rules/component-props.mdc
@@ -1,59 +1,51 @@
 ---
-description: Figma ↔ codebase prop alignment & normalization for design-system components
+description: Component prop conventions — lowercase-canonical enums, Figma traceability
 globs: app/components/**/*.{ts,tsx}
 alwaysApply: false
 ---
 
 # Component prop alignment
 
-Figma emits PascalCase enum values (`"Standard"`, `"Inverse"`); the codebase
-stores lowercase (`"standard"`, `"inverse"`). Components must accept **both**,
-normalize to lowercase internally, and never break existing consumer call
-sites.
+Figma is the source of truth for component **design** (existence, variants,
+visual specification). The codebase implements those components using
+idiomatic TypeScript naming. Enum props are **lowercase** in code; PascalCase
+is a Figma-side concern only.
 
-## Scope
+## Enum prop convention
 
-Applies to enum-like string props: `variant`, `size`, `state`, `mode`, `type`,
-`position`, `alignment`, `status`, `color`, `palette`. **Skip** for free-form
-strings (URLs, classNames), booleans, numbers, or internal-only props.
-
-## Pattern
+- Types use lowercase string unions: `"small" | "medium" | "large"`.
+- Do NOT add PascalCase variants to type unions.
+- Do NOT call normalizers in containers. The container layer is for `memo`,
+  derived state, prop defaults, and bound logic — not for casing translation.
+- Each enum prop has a sibling `<COMPONENT>_<PROP>_OPTIONS as const` array
+  exported alongside the type. Storybook `argTypes` and any runtime guard
+  consume that array as the single source of valid values.
 
 ```typescript
-// Type accepts both formats
-export type ComponentSizeValue = "small" | "medium" | "Small" | "Medium";
-
-// Container normalizes via helpers from lib/propNormalization.ts
-import { normalizeSize } from "../../../lib/propNormalization";
-
-const ComponentContainer = ({ size: sizeProp = "small" }: Props) => {
-  const size = normalizeSize(sizeProp, SIZE_OPTIONS, "small");
-  return <ComponentView size={size} />;
-};
+export const CHIP_PALETTE_OPTIONS = ["primary", "secondary"] as const;
+export type ChipPaletteValue = (typeof CHIP_PALETTE_OPTIONS)[number];
 ```
 
-## Normalizers
-
-Use an existing helper from `lib/propNormalization.ts` before writing a new
-one. Generic: `normalizeMode`, `normalizeState`, `normalizeInputState`,
-`normalizeSize`, `normalizeAlignment`, `normalizeSmallMediumLargeSize`,
-`normalizeLabelVariant`. Component-specific variants are named
-`normalize<Component><Prop>` (e.g. `normalizeChipPalette`,
-`normalizeButtonState`) — add one there rather than inlining a switch in your
-container.
-
 ## Figma traceability
 
-Every DS component's container docstring cites its Figma origin so designers
-and engineers can jump between the two. Format: `Figma: "<Component Path>"
-(<node-id>)`.
+- Container docstring (required on every DS container): `Figma:
+  "<Component Path>" (<node-id>)`.
+- View root element: `data-figma-node="<id>"` when the view maps to a
+  distinct Figma node.
+- For create-flow screens, node ids come from `CREATE_FLOW_SCREEN_REGISTRY`
+  in `app/(app)/create/utils/createFlowScreenRegistry.ts`. For everything else,
+  pull the node id from the Figma file directly. Use `TODO(figma)` as a
+  placeholder rather than omitting the docstring entirely.
 
 ```typescript
 /**
- * Figma: "Control / Incrementer" (`17857:30943`). A compact [ - value + ]
- * row used for numeric step inputs…
+ * Figma: "Control / Incrementer" (17857:30943). A compact [ - value + ]
+ * row used for numeric step inputs.
  */
 ```
 
-When the view renders a distinct Figma node, add `data-figma-node="<id>"` on
-the root element for quick DOM-to-design lookup.
+## Pasting from Figma
+
+Figma's "Inspect → Code" output emits PascalCase. When importing a snippet,
+lowercase the enum values before committing — same pattern as removing
+inline pixel values in favor of design tokens.
diff --git a/.cursor/rules/component-structure.mdc b/.cursor/rules/component-structure.mdc
index 6bd9f32..449befe 100644
--- a/.cursor/rules/component-structure.mdc
+++ b/.cursor/rules/component-structure.mdc
@@ -22,24 +22,27 @@ app/components/controls/<Name>/
 **Container** (`<Name>.container.tsx`):
 
 - Marked `"use client"`.
-- Receives `<Name>Props`; normalizes PascalCase enums via
-  `lib/propNormalization.ts`; computes derived state (clamps, ids, bounds).
-- Renders `<<Name>View />` with already-normalized `<Name>ViewProps`.
+- Receives `<Name>Props`; computes derived state (clamps, ids, bounds, prop
+  defaults) and bound event handlers.
+- Renders `<<Name>View />`. Containers do **not** translate prop casing —
+  enum props are lowercase end-to-end (see `component-props.mdc`).
 - Default export: `memo(<Name>Container)` with `.displayName = "<Name>"`.
+- Carries the Figma docstring (`Figma: "<Path>" (<node-id>)`).
 
 **View** (`<Name>.view.tsx`):
 
 - Marked `"use client"`.
-- Pure render of `<Name>ViewProps`. No prop normalization, no data fetching,
-  no derived business logic.
-- Default export: `memo(<Name>View)` with
-  `.displayName = "<Name>View"`.
+- Pure render of `<Name>ViewProps`. No data fetching, no derived business
+  logic, no enum casing translation.
+- Default export: `memo(<Name>View)` with `.displayName = "<Name>View"`.
 
 **Types** (`<Name>.types.ts`):
 
-- Export `<Name>Props` (consumer-facing, accepts PascalCase + lowercase).
-- Export `<Name>ViewProps` (already-normalized shape the view consumes).
-- Export any locally-defined value types (`<Name>SizeValue`, etc.).
+- Export `<Name>Props` (consumer-facing).
+- Export `<Name>ViewProps` (the shape the view consumes — typically a
+  resolved superset of `<Name>Props`).
+- Export any locally-defined value types (`<Name>SizeValue`, etc.) sourced
+  from the matching `*_OPTIONS` array in `lib/propNormalization.ts`.
 
 **Index** (`index.tsx`):
 
@@ -51,10 +54,10 @@ export type { <Name>Props } from "./<Name>.types";
 ## Single-file pattern (exception)
 
 `app/components/buttons/*.tsx` and other trivially-presentational components
-can stay as a single file when they have **no enum prop normalization and no
-derived state** (e.g. `Button.tsx`, `InlineTextButton.tsx`). If you find
-yourself adding state, enum normalization, or more than a handful of props,
-promote it to the split pattern.
+can stay as a single file when they have **no derived state and only a
+handful of props** (e.g. `Button.tsx`, `InlineTextButton.tsx`). If you find
+yourself adding state, side effects, or enum logic, promote it to the split
+pattern.
 
 ## Wrapper / group components
 
diff --git a/.cursor/rules/create-flow.mdc b/.cursor/rules/create-flow.mdc
index e64c450..9c9a417 100644
--- a/.cursor/rules/create-flow.mdc
+++ b/.cursor/rules/create-flow.mdc
@@ -1,6 +1,6 @@
 ---
 description: Create-flow structure & design-system reuse guardrails
-globs: app/create/**/*.{ts,tsx},messages/en/create/**/*.json
+globs: app/(app)/create/**/*.{ts,tsx},messages/en/create/**/*.json
 alwaysApply: false
 ---
 
@@ -8,15 +8,15 @@ alwaysApply: false
 
 ## Folder & file layout
 
-- Screens live in `app/create/screens/<layoutKind>/<StepIdPascal>Screen.tsx`
+- Screens live in `app/(app)/create/screens/<layoutKind>/<StepIdPascal>Screen.tsx`
   where `<layoutKind>` mirrors `CreateFlowLayoutKind` (`card`, `select`,
   `right-rail`, `completed`, …). File + export name is the **step id**, never
   the layout kind (e.g. `DecisionApproachesScreen`, not `RightRailScreen`).
 - Step id ↔ layout kind mapping is declared in
-  `app/create/utils/createFlowScreenRegistry.ts`. Never branch on layout kind
+  `app/(app)/create/utils/createFlowScreenRegistry.ts`. Never branch on layout kind
   inside a screen — pick the matching shell (`CreateFlowStepShell` /
   `CreateFlowTwoColumnSelectShell`).
-- Shared create-flow pieces go in `app/create/components/` (layout shells,
+- Shared create-flow pieces go in `app/(app)/create/components/` (layout shells,
   field composites). Generic primitives go in `app/components/`.
 
 ## Use the design system — don't hand-roll
@@ -25,8 +25,8 @@ Reach for these before writing new markup:
 
 | Need | Component |
 | --- | --- |
-| Labelled text-area section in a modal | `app/create/components/ModalTextAreaField` |
-| Toggle-chip row + inline "+ Add" input | `app/create/components/ApplicableScopeField` |
+| Labelled text-area section in a modal | `app/(app)/create/components/ModalTextAreaField` |
+| Toggle-chip row + inline "+ Add" input | `app/(app)/create/components/ApplicableScopeField` |
 | `[– value +]` numeric stepper (± label) | `app/components/controls/Incrementer` / `IncrementerBlock` |
 | Mid-paragraph "expand / see all" link button | `app/components/buttons/InlineTextButton` |
 | Help-icon + label above a control | `app/components/utility/InputLabel` (`helpIcon` prop) |
diff --git a/.cursor/rules/hooks.mdc b/.cursor/rules/hooks.mdc
new file mode 100644
index 0000000..245199e
--- /dev/null
+++ b/.cursor/rules/hooks.mdc
@@ -0,0 +1,59 @@
+---
+description: Custom hooks live in app/hooks; co-locate logic, document via TSDoc.
+globs: app/hooks/**/*.{ts,tsx}
+alwaysApply: false
+---
+
+# Custom hooks
+
+Reusable component logic lives in `app/hooks/`. Each hook is a small, focused
+module with a TSDoc block that doubles as the API reference (no separate doc
+file).
+
+## File layout
+
+- One file per hook: `app/hooks/use<Name>.ts`.
+- Re-export from `app/hooks/index.ts`. Consumers import from the barrel:
+  `import { useFoo } from "../hooks";`.
+- Companion unit test (when there is non-trivial logic): `tests/unit/hooks/`.
+
+## Authoring rules
+
+- Marked as a regular function (`export function useFoo() {}`); React handles
+  the `use*` naming convention.
+- Wrap exposed callbacks in `useCallback` and computed values in `useMemo`
+  so consumers can list them in dependency arrays without churn.
+- Read DOM/browser APIs only inside `useEffect` so the hook stays SSR-safe.
+- Never throw on missing globals (e.g. `window`, `gtag`); guard and no-op.
+
+## TSDoc — the only reference
+
+Every exported hook gets a TSDoc block with:
+
+- 1–2 sentence summary.
+- `@param` per argument and `@returns` describing the shape.
+- `@example` showing the typical call site.
+
+```ts
+/**
+ * Detect clicks outside a set of elements (e.g. close a dropdown).
+ *
+ * @param refs Elements that should NOT trigger the handler.
+ * @param handler Invoked when a click lands outside every ref.
+ * @param enabled Toggle without unmounting the consumer (default true).
+ *
+ * @example
+ * useClickOutside([menuRef, buttonRef], () => setOpen(false), open);
+ */
+export function useClickOutside(
+  refs: Array<RefObject<HTMLElement>>,
+  handler: (event: MouseEvent | TouchEvent) => void,
+  enabled = true,
+): void { /* ... */ }
+```
+
+## Container/view consumption
+
+Hooks belong in **container** files (per `component-structure.mdc`). Views
+stay pure and read derived values via props — never call hooks that touch
+state or side effects from a view.
diff --git a/.cursor/rules/routes.mdc b/.cursor/rules/routes.mdc
new file mode 100644
index 0000000..1f9d9dd
--- /dev/null
+++ b/.cursor/rules/routes.mdc
@@ -0,0 +1,88 @@
+---
+description: App Router route organization (groups, layouts, chrome composition)
+globs: app/**/*.{ts,tsx}
+alwaysApply: false
+---
+
+# Route organization
+
+Top-level routes live inside **route groups** so each surface owns its own
+layout and chrome. Groups are wrapping folders in `(parens)` — they organize
+the file tree without affecting URLs.
+
+## Group map
+
+| Group | URL surface | Audience | Chrome |
+|---|---|---|---|
+| `app/(marketing)/` | `/`, `/learn`, `/blog`, `/templates`, future public pages | Public, indexable | TopNav (via root) + marketing `<Footer />` |
+| `app/(app)/` | `/create/*`, `/login`, `/profile`, future signed-in surfaces | Authenticated product | TopNav (via root) — no footer |
+| `app/(admin)/` | `/monitor`, future ops dashboards | Operators | TopNav (via root) — no footer |
+| `app/(dev)/` | `/components-preview`, future dev previews | Local dev (NODE_ENV gated) | TopNav (via root) — no footer |
+| `app/api/` | API routes | n/a | n/a |
+
+Route folders **must not** sit loose at the top level of `app/`. If a new
+surface doesn't fit an existing group, add a new group rather than dropping
+the folder next to `(marketing)/`.
+
+## Layout responsibilities
+
+- **`app/layout.tsx`** — `<html>`, `<body>`, providers (`MessagesProvider`,
+  `AuthModalProvider`), fonts, and `ConditionalNavigation`. Renders
+  `{children}` directly inside the flex column. **Does not** render
+  `<main>` — each group layout owns that.
+- **`app/(marketing)/layout.tsx`** — wraps with `<main className="flex-1">`
+  and appends the public `<Footer />`.
+- **`app/(app)/layout.tsx`** / **`(admin)/layout.tsx`** / **`(dev)/layout.tsx`** —
+  wrap with `<main className="flex-1">`. No footer.
+- **Nested layouts** (e.g. `(app)/create/layout.tsx`) compose feature-specific
+  chrome inside the group's `<main>` — never render `<html>`, `<body>`,
+  `<main>`, or providers.
+
+If a route needs different chrome than its group provides, prefer adding a
+**nested layout** under that route — don't introduce pathname-sniffing
+client components. (`ConditionalNavigation` is the lone tolerated exception
+because it carries SSR session state; do not add new pathname-conditional
+chrome components.)
+
+## Co-located component folders
+
+Page-private server/client components that are **only** used by routes in a
+given group go in `_components/` inside that group:
+
+```
+app/(marketing)/_components/MarketingRuleStackSection.tsx
+```
+
+The leading underscore makes Next.js treat the folder as **private** — it's
+ignored by the router. Use this instead of letting page-only files sit next
+to `page.tsx`.
+
+Components reused across groups belong in `app/components/<category>/`
+(see `component-structure.mdc`).
+
+## Adding a new route
+
+1. **Choose the group** by audience: marketing (public), app (signed-in),
+   admin (operators), dev (local-only). When in doubt, ask whether the
+   public marketing footer should appear — if yes, it's `(marketing)`.
+2. Create `app/(<group>)/<route>/page.tsx`. URLs do **not** include the
+   group name.
+3. If the route needs its own chrome (e.g. a wizard header), add
+   `app/(<group>)/<route>/layout.tsx`.
+4. If the route ships private helpers, put them in
+   `app/(<group>)/<route>/_components/` (or
+   `app/(<group>)/_components/` for group-wide page components).
+
+## Splitting a group
+
+Promote a sub-cluster to its own group only when **both** are true:
+
+- It will hold ≥2 routes that share a layout, **or** it has a clearly
+  distinct audience/access model (e.g. a future `(auth)/` for
+  signup/forgot/verify alongside login).
+- Moving the routes pays for itself by replacing existing pathname
+  conditionals or by composing real shared chrome — not just by tidying
+  the folder list.
+
+YAGNI applies: a group with one route and no shared layout is just a
+folder with parens.
diff --git a/.cursor/rules/storybook.mdc b/.cursor/rules/storybook.mdc
index a73b31c..873a716 100644
--- a/.cursor/rules/storybook.mdc
+++ b/.cursor/rules/storybook.mdc
@@ -6,14 +6,22 @@ alwaysApply: false
 
 # Where stories live
 
-All stories live in the top-level `stories/` folder, mirroring the
-`app/components/` directory tree:
+All stories live in the top-level `stories/` folder. Two layout rules:
 
-| Source                            | Story location                         |
-| --------------------------------- | -------------------------------------- |
-| `app/components/controls/Chip`    | `stories/controls/Chip.stories.js`     |
-| `app/components/buttons/Button`   | `stories/buttons/Button.stories.js`    |
-| `app/create/screens/.../FooScreen`| `stories/pages/FooPage.stories.js`     |
+- **Design-system components** mirror `app/components/`. A component at
+  `app/components/<bucket>/<Name>` gets `stories/<bucket>/<Name>.stories.js`.
+- **Create-flow material** has two carve-outs:
+  - `stories/create-flow/` — shared create-flow pieces that aren't in
+    `app/components/` (e.g. composed wizard fragments).
+  - `stories/pages/` — integration stories that exercise an entire
+    `app/(app)/create/screens/<...>` screen as it appears in the wizard.
+
+| Source                            | Story location                          |
+| --------------------------------- | --------------------------------------- |
+| `app/components/controls/Chip`    | `stories/controls/Chip.stories.js`      |
+| `app/components/buttons/Button`   | `stories/buttons/Button.stories.js`     |
+| `app/(app)/create/screens/.../FooScreen`| `stories/pages/FooPage.stories.js`      |
+| Shared create-flow fragment       | `stories/create-flow/<Name>.stories.js` |
 
 Do **not** colocate `*.stories.*` next to components. The Storybook config
 (`.storybook/main.js`) only globs `stories/**`.
@@ -65,8 +73,9 @@ export const Default = { args: { variant: "filled" } };
 ## `argTypes`
 
 For every Figma enum prop (`variant`, `size`, `state`, `mode`, `palette`,
-…) expose a `select` control listing the **lowercase** option set — even
-though the prop accepts PascalCase too. See `.cursor/rules/component-props.mdc`.
+…) expose a `select` control listing the **lowercase** option set, sourced
+from the matching `*_OPTIONS` const in `lib/propNormalization.ts`. See
+`.cursor/rules/component-props.mdc`.
 
 # Rely on the global preview — don't re-wrap
 
@@ -101,5 +110,5 @@ export const Interactive = {
 # Coverage expectation
 
 Every new component in `app/components/**` ships with a story. Screens in
-`app/create/screens/**` ship with a `stories/pages/<Name>Page.stories.js`
+`app/(app)/create/screens/**` ship with a `stories/pages/<Name>Page.stories.js`
 entry. A new component without a story is considered incomplete.
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000..fd83a27
--- /dev/null
+++ b/AGENTS.md
@@ -0,0 +1,82 @@
+# Agent guide
+
+Orientation for AI coding agents working in this repo. Per-file conventions
+live in `.cursor/rules/*.mdc` (auto-loaded by Cursor; other agents should
+read them on demand). This file is the **map** — load it first, then load
+the rule(s) matching the file you're editing.
+
+## What this is
+
+Next.js 16 / React 19 app for community decision-making and governance.
+Single-locale (English) today; designed for i18n via `messages/`.
+
+## Read before editing
+
+| If you're touching… | Load this rule |
+| --- | --- |
+| `app/components/**` | `component-structure.mdc`, `component-props.mdc`, `tailwind-styling.mdc` |
+| `app/(app)/create/**` | `create-flow.mdc` (+ component rules) |
+| `app/api/**` | `api-routes.mdc` |
+| `app/hooks/**` | `hooks.mdc` |
+| `app/**/page.tsx` or `app/**/layout.tsx` | `routes.mdc` |
+| `messages/**` or any user-visible string | `localization.mdc` |
+| `tests/**` | `testing.mdc` |
+| `stories/**` | `storybook.mdc` |
+
+When in doubt about file structure or naming, the rules win over your
+priors — they reflect deliberate decisions.
+
+## Cross-cutting principles (no single rule owns these)
+
+1. **Figma is the source of truth for design.** Container files carry a
+   `Figma: "<Path>" (<node-id>)` docstring; views render Figma intent.
+   Codebase naming uses lowercase conventions (see `component-props.mdc`)
+   even when Figma uses PascalCase enum values.
+2. **Container / view split is the component pattern.** Never put state
+   or side effects in a `*.view.tsx`. Hooks belong in containers.
+3. **All user-visible text lives in `messages/`.** Hardcoded strings in
+   components are a bug — even for placeholders.
+4. **Tests live in `tests/`, not co-located.** Mirror the source path
+   (`app/components/Foo` → `tests/components/Foo.test.tsx`).
+5. **Routes live inside groups** — `(marketing)`, `(app)`, `(admin)`,
+   `(dev)`. Don't drop a new route folder loose at the top of `app/`.
+6. **No new pathname-sniffing chrome.** Compose chrome via group/nested
+   layouts, not `usePathname()` checks. (`ConditionalNavigation` is the
+   sole tolerated exception — it carries SSR session state.)
+
+## Legacy / scaffolding
+
+Some code exists temporarily while backend services are stood up:
+
+- `NEXT_PUBLIC_ENABLE_BACKEND_SYNC` gating
+- `migrateLegacyCreateFlowState`, `LEGACY_LIVE_KEY`, `LEGACY_DRAFT_KEY`
+- `/create/right-rail` redirect
+- `docs/guides/backend-roadmap.md`, `backend-linear-tickets.md`,
+  `template-recommendation-matrix.md`
+
+**Do not delete** without an explicit ask. Do not add new code in this
+shape — when adding scaffolding, leave a `// TODO(legacy): …` with the
+removal trigger.
+
+## Verification recipe
+
+Run these (in order) before declaring a change done. They mirror CI:
+
+```bash
+rm -rf .next            # only if you moved/renamed routes or layouts
+npx tsc --noEmit        # type check
+npx vitest run          # unit + component (101 files / ~700 tests)
+npx next build          # production build + route manifest
+```
+
+For UI-only changes, also: `npm run storybook` and visually confirm.
+For E2E-relevant changes: `npm run e2e`.
+
+## Where else to look
+
+- [README.md](README.md) — human onboarding, scripts, project layout.
+- [CONTRIBUTING.md](CONTRIBUTING.md) — local Postgres + Prisma + magic-link
+  setup, PR workflow.
+- [docs/README.md](docs/README.md) — index of user-facing docs.
+- [docs/create-flow.md](docs/create-flow.md) — wizard URL/persistence canon
+  (read alongside `create-flow.mdc`).
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 0ab1db8..985deb3 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,51 +1,76 @@
 # Contributing
 
-## Backend (local)
+## Local backend
 
-1. Copy [`.env.example`](.env.example) to `.env` and set `SESSION_SECRET` (at least 16 characters).
-2. `docker compose up -d postgres mailhog` — omit `mailhog` if you only need Postgres; with `SMTP_URL` unset, the **magic-link verify URL** is printed in the dev server log (see `.env.example`).
-3. Install dependencies: `npm ci`
-4. Apply migrations: `npx prisma migrate dev`
-5. (Optional) Seed curated rule templates: `npx prisma db seed` — requires `DATABASE_URL` and applied migrations. Safe to re-run; rows are upserted by `slug` so duplicates are not created.
-6. Run the app: `npm run dev`
+1. Copy [`.env.example`](.env.example) to `.env` and set `SESSION_SECRET`
+   (at least 16 characters).
+2. `docker compose up -d postgres mailhog` — omit `mailhog` if you only
+   need Postgres. Without `SMTP_URL`, the **magic-link verify URL** is
+   printed in the dev server log.
+3. `npm ci`
+4. `npx prisma migrate dev`
+5. *(Optional)* `npx prisma db seed` — seeds curated rule templates.
+   Idempotent; rows upsert by `slug`.
+6. `npm run dev`
 
 Use `npx prisma studio` to inspect the database.
 
-### Prisma migrations (important)
+### Prisma migrations
 
-- **Do not edit** migration files that have **already been applied** to **staging, production, or any shared database**. Changing history breaks `migrate deploy` and other environments.
-- To fix a bad migration, add a **new** migration that corrects the schema. See [docs/backend-roadmap.md](docs/backend-roadmap.md) §8 for the full policy.
+- **Never edit** a migration that has already been applied to staging,
+  production, or any shared database. Add a **new** migration that
+  corrects the schema instead. Full policy:
+  [docs/guides/backend-roadmap.md](docs/guides/backend-roadmap.md) §8.
 
-### API routes (overview)
+### API routes
 
-| Method     | Path                           | Purpose                                       |
-| ---------- | ------------------------------ | --------------------------------------------- |
-| GET        | `/api/health`                  | Liveness / DB check                           |
-| GET        | `/api/auth/session`            | Current user or null                          |
-| POST       | `/api/auth/magic-link/request` | Send sign-in link email                       |
-| GET        | `/api/auth/magic-link/verify`  | Validate token, set session cookie, redirect  |
-| POST       | `/api/auth/logout`             | Clear session                                 |
-| GET / PUT  | `/api/drafts/me`               | Load or save create-flow JSON (authenticated) |
-| GET / POST | `/api/rules`                   | List or publish rules (each **Finalize** creates a new published row until an update/edit-published API exists) |
-| GET        | `/api/templates`               | List curated templates                        |
+| Method | Path | Purpose |
+| --- | --- | --- |
+| GET | `/api/health` | Liveness / DB check. |
+| GET | `/api/auth/session` | Current user or null. |
+| POST | `/api/auth/magic-link/request` | Send sign-in link email. |
+| GET | `/api/auth/magic-link/verify` | Validate token, set cookie, redirect. |
+| POST | `/api/auth/logout` | Clear session. |
+| GET / PUT | `/api/drafts/me` | Load or save the create-flow draft. |
+| GET / POST | `/api/rules` | List or publish rules. |
+| GET | `/api/templates` | List curated templates. |
 
-### Email magic link (sign-in)
+### Magic-link sign-in
 
-- Open **[http://localhost:3000/login](http://localhost:3000/login)** or use **Log in** in the site header (modal or full page).
-- Enter email and request a link. Complete sign-in by opening the link in the **same browser** you use for the app (session cookie).
-- **No `SMTP_URL`:** the full **`GET /api/auth/magic-link/verify?...`** URL is printed in the **dev server terminal** — paste it into the browser address bar.
-- **Mailhog:** with Compose Mailhog running, set `SMTP_URL=smtp://localhost:1025` and open the link from the message in the Mailhog UI ([http://localhost:8025](http://localhost:8025)).
-
-**Staging / production:** Sign-in links use the app’s origin. Ensure your reverse proxy sets **`Host`** (and TLS) so links in email match the URL users open. See [docs/backend-roadmap.md](docs/backend-roadmap.md) §9.
+- Visit **[/login](http://localhost:3000/login)** or use **Log in** in the
+  site header.
+- Without `SMTP_URL`: copy the verify URL from the dev server terminal.
+- With Mailhog: set `SMTP_URL=smtp://localhost:1025` and open the message
+  at [http://localhost:8025](http://localhost:8025).
+- Open the link in the **same browser** as the app (session cookie).
 
 ### Optional draft sync
 
-Set `NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true` in `.env` so **signed-in** users can persist create-flow drafts to Postgres via **Save & Exit** and so **anonymous** progress can be **uploaded after magic-link sign-in** from the save-progress exit modal. Without it, server **PUT** `/api/drafts/me` is skipped; anonymous work stays in **browser `localStorage`**, but after sign-in with a `?syncDraft=1` return URL the app still **merges that local draft into the in-memory create flow** (no server write) so you can continue and publish.
+`NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true` enables Postgres draft persistence
+via `PUT /api/drafts/me` for signed-in users and post-sign-in upload of
+anonymous drafts. Without it, anonymous progress stays in `localStorage`
+and signed-in progress stays in memory until **Save & Exit**.
 
-### Create flow URLs (custom wizard)
+### Create flow
 
-The **custom** create-rule wizard lives under **`/create/…`**. The header links to **`/create`**, which redirects to the first step. **Semantic** URL segments (e.g. `community-name`, `community-size`) match Figma intent; order is **`FLOW_STEP_ORDER`** in `app/create/utils/flowSteps.ts`, with UI from **`app/create/[screenId]/page.tsx`** and **`CREATE_FLOW_SCREEN_REGISTRY`** for Figma traceability. **Figma** stages: **Create Community** (through `review`), **Create Custom CommunityRule** (`communication-methods`–`right-rail`), **Review and complete** (`confirm-stakeholders`–`completed`). **`/create/review-template/[slug]`** is a template **preview** only. Full tables and persistence are in **[docs/create-flow.md](docs/create-flow.md)**; engineering tracking: Linear **CR-89** / Ticket 17 in [docs/backend-linear-tickets.md](docs/backend-linear-tickets.md).
+The custom wizard lives under `/create/…`. Step order, URLs, and Figma
+stage mapping are canon in [docs/create-flow.md](docs/create-flow.md).
+Engineering tracking: Linear **CR-89** /
+[docs/guides/backend-linear-tickets.md](docs/guides/backend-linear-tickets.md)
+Ticket 17.
 
-## Frontend / tests
+## Frontend & tests
 
-See [docs/TESTING_GUIDE.md](docs/TESTING_GUIDE.md) and the root [README.md](README.md).
+- Code conventions are enforced by `.cursor/rules/*.mdc` — Cursor surfaces
+  the relevant rule when editing matching files.
+- See [docs/testing-guide.md](docs/testing-guide.md) for testing
+  philosophy and `.cursor/rules/testing.mdc` for layout/helpers.
+
+## Pull request workflow
+
+1. Branch from `main`: `git checkout -b feature/<short-name>`.
+2. Make the change and add/update tests.
+3. `npm test && npm run e2e` (and `npm run storybook:build` if you touched
+   stories).
+4. Commit using a clear message (`feat:`, `fix:`, `chore:`, …).
+5. Open a PR; CI runs unit, E2E, visual regression, and Lighthouse.
diff --git a/README.md b/README.md
index 4ef1aaf..769f4ed 100644
--- a/README.md
+++ b/README.md
@@ -1,252 +1,64 @@
 # Community Rule
 
-A Next.js application for community decision-making and governance documentation.
+A Next.js application for community decision-making and governance
+documentation.
 
-## 📋 Requirements
+## Requirements
 
-- **Node.js**: 20.0.0 or higher (LTS recommended)
-- **npm**: 10.0.0 or higher
+- Node.js **20+** (LTS)
+- npm **10+**
 
-## 🚀 Getting Started
-
-Run the development server:
+## Getting started
 
 ```bash
+npm ci
 npm run dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3000](http://localhost:3000).
 
-Backend (Postgres, Prisma, API routes) setup is documented in [CONTRIBUTING.md](CONTRIBUTING.md).
+Backend setup (Postgres, Prisma, magic-link auth) is documented in
+[CONTRIBUTING.md](CONTRIBUTING.md).
 
-## 🧪 Testing Framework
+## Common scripts
 
-This project uses a simplified, component‑first testing model:
+| Command | What it does |
+| --- | --- |
+| `npm run dev` | Next.js dev server (Turbopack). |
+| `npm run build` / `npm start` | Production build / serve. |
+| `npm test` | Vitest unit + component tests with coverage. |
+| `npm run test:component` | Faster inner loop — components only. |
+| `npm run e2e` | Playwright E2E + visual regression. |
+| `npm run storybook` | Storybook on port 6006. |
+| `npm run lhci` | Lighthouse CI performance pass. |
 
-- **Component tests (Vitest + RTL)** live in `tests/components/` with a single file per component.
-- **E2E tests (Playwright)** cover critical user journeys and visual regression.
+## Project layout
 
-### Quick Test Commands
-
-```bash
-# All component tests with coverage
-npm test
-
-# Component tests only (new structure)
-npm run test:component
-
-# E2E tests only
-npm run test:e2e
+```text
+app/              Next.js app router (routes, components, hooks, contexts)
+lib/              Shared library code (i18n, validation, utilities)
+messages/en/      Localized UI copy (see docs/guides/i18n-translation-workflow.md)
+prisma/           Database schema, migrations, seed
+public/           Static assets
+stories/          Storybook stories
+tests/            Vitest + Playwright suites
+docs/             User-facing documentation (start with docs/README.md)
+.cursor/rules/    Implementation conventions enforced by Cursor
 ```
 
-### Test Coverage
+## Tech stack
 
-- ✅ **428 Unit Tests** (94.88% coverage - exceeds 85% target)
-- ✅ **92 E2E Tests** across 4 browsers
-- ✅ **23 Visual Regression Tests** per browser
-- ✅ **Performance Budgets** with Lighthouse CI
-- ✅ **WCAG 2.1 AA Compliance** with automated testing
-- ✅ **Bundle Analysis** with automated monitoring
-- ✅ **Web Vitals Tracking** with real-time metrics
+Next.js 16 · React 19 · TypeScript · Tailwind CSS 4 · Prisma · Vitest ·
+Playwright · Storybook 10 · Lighthouse CI.
 
-### CI/CD Pipeline
+## Documentation
 
-- **Gitea Actions** with 7 parallel jobs
-- **Cross-browser testing** (Chromium, Firefox, WebKit, Mobile)
-- **Visual regression testing**
-- **Performance monitoring**
-- **Code coverage reporting**
+- [docs/README.md](docs/README.md) — index of guides and rules.
+- [docs/create-flow.md](docs/create-flow.md) — create-rule wizard canon.
+- [docs/testing-guide.md](docs/testing-guide.md) — testing philosophy.
+- [CONTRIBUTING.md](CONTRIBUTING.md) — local backend, API routes, PR
+  workflow.
 
-📖 **For detailed testing documentation, see `docs/TESTING_GUIDE.md` and [docs/README.md](docs/README.md)**
+## License
 
-## ⚡ Performance Optimizations
-
-This project includes comprehensive performance optimizations for sub-2-second load times:
-
-### Frontend Optimizations
-
-- **✅ Code Splitting**: Dynamic imports for non-critical components
-- **✅ React.memo**: Applied to all 30+ components to prevent unnecessary re-renders
-- **✅ Image Optimization**: Enhanced `next/image` with lazy loading and blur placeholders
-- **✅ Font Optimization**: Preloading and fallbacks for all fonts
-- **✅ Bundle Analysis**: Real-time monitoring with performance budgets
-- **✅ Error Boundaries**: Comprehensive error handling
-
-### Performance Monitoring
-
-Performance testing is handled by:
-
-- **Lighthouse CI** (`.lighthouserc.json`): Comprehensive performance testing in CI
-
-  ```bash
-  npm run lhci              # Run Lighthouse CI
-  npm run lhci:mobile       # Mobile preset
-  npm run lhci:desktop      # Desktop preset
-  npm run performance:budget # With performance budgets
-  ```
-
-- **E2E Performance Tests** (`tests/e2e/performance.spec.ts`): Essential performance checks
-
-  ```bash
-  npm run e2e:performance   # Run E2E performance tests
-  ```
-
-- **Bundle Analysis**: Analyze bundle sizes
-  ```bash
-  npm run bundle:analyze    # Analyze bundle sizes
-  ```
-
-### Performance Targets
-
-- **Bundle Size**: <250KB gzipped (currently 101KB) ✅
-- **Core Web Vitals**: All metrics in "Good" range ✅
-- **Lighthouse Score**: >90 on all critical pages ✅
-- **Load Time**: <2 seconds on 3G connections ✅
-
-## 📚 Storybook Development
-
-This project includes Storybook for component development and documentation. The setup automatically detects the environment and applies the appropriate configuration.
-
-### Local Development
-
-For local Storybook development:
-
-```bash
-npm run storybook:local
-# or simply
-npm run storybook
-```
-
-This will:
-
-- Start Storybook at `http://localhost:6006`
-- Use relative paths for assets (no base path)
-
-### GitHub Pages Deployment
-
-For GitHub Pages deployment with base path:
-
-```bash
-npm run storybook:build:github
-```
-
-This will:
-
-- Build Storybook with `/communityrulestorybook/` base path
-- Generate files ready for GitHub Pages deployment
-
-### CI/CD Integration
-
-The CI pipeline automatically uses the GitHub Pages configuration when building Storybook.
-
-### Configuration
-
-The Storybook configuration automatically detects the environment:
-
-- **Local development**: No base path, relative assets
-- **CI/Production**: Base path `/communityrulestorybook/` for GitHub Pages
-
-## 📋 Available Scripts
-
-### Development
-
-- `npm run dev` - Start Next.js development server
-- `npm run build` - Build Next.js application for production
-- `npm run start` - Start Next.js production server
-
-### Testing
-
-- `npm test` - Run all component tests with coverage
-- `npm run test:component` - Run tests in `tests/components/` only
-- `npm run test:watch` - Run tests in watch mode
-- `npm run test:ui` - Run tests with UI
-- `npm run test:e2e` - Run E2E tests only
-- `npm run e2e` - Alias for Playwright E2E tests
-- `npm run e2e:ui` - Run E2E tests with UI
-- `npm run e2e:serve` - Start dev server and run E2E tests
-- `npm run lhci` - Run performance tests
-
-### Storybook
-
-- `npm run storybook:local` - Start Storybook for local development
-- `npm run storybook:github` - Start Storybook with GitHub Pages configuration
-- `npm run storybook:build` - Build Storybook for local deployment
-- `npm run storybook:build:github` - Build Storybook for GitHub Pages
-- `npm run storybook` - Start Storybook with current configuration
-
-## 🏗️ Project Structure
-
-```
-community-rule/
-├── app/                          # Next.js app directory
-│   ├── components/              # React components
-│   ├── hooks/                   # Custom React hooks
-│   ├── layout.tsx              # Root layout
-│   └── page.tsx                # Homepage
-├── config/                       # Project-specific configuration
-│   ├── gitea-runner.yaml       # Gitea runner configuration
-│   └── runner-config.yaml      # Runner configuration
-├── docs/                         # Documentation
-│   ├── README.md               # Documentation index
-│   ├── TESTING_GUIDE.md        # Testing guide
-│   ├── CUSTOM_HOOKS.md         # Custom hooks documentation
-│   └── guides/                 # Guides
-│       └── content-creation.md # Content creation guide
-├── scripts/                      # Utility scripts
-│   ├── start-runner.sh        # Start Gitea runner
-│   ├── status-runner.sh       # Check runner status
-│   └── stop-runner.sh         # Stop Gitea runner
-├── tests/                        # Test files
-│   ├── components/             # Component tests (Vitest + RTL)
-│   ├── pages/                 # Page-level tests
-│   ├── e2e/                   # E2E tests (Playwright)
-│   ├── utils/                 # Test utilities (componentTestSuite, etc.)
-│   ├── msw/                   # MSW server setup
-│   └── accessibility/         # E2E accessibility checks
-├── .storybook/                  # Storybook configuration
-├── .gitea/                      # Gitea Actions workflows
-│   └── workflows/
-│       └── ci.yaml            # CI/CD pipeline
-└── public/                      # Static assets
-```
-
-## 🔧 Technology Stack
-
-- **Framework**: Next.js 16 + React 19
-- **Runtime**: Node.js 20+ (LTS)
-- **Styling**: Tailwind CSS 4
-- **Testing**: Vitest + Playwright + Lighthouse CI
-- **Documentation**: Storybook 10
-- **CI/CD**: Gitea Actions
-- **Hosting**: Gitea (Git hosting)
-
-## 📖 Documentation
-
-- **[Documentation Index](docs/README.md)** - Complete documentation guide
-- **[Testing Guide](docs/TESTING_GUIDE.md)** - Testing strategy, component tests, E2E tests, and accessibility
-- **[Custom Hooks](docs/CUSTOM_HOOKS.md)** - Documentation for custom React hooks
-- **[Content Creation Guide](docs/guides/content-creation.md)** - Guide for creating blog content
-- **[Storybook](http://localhost:6006)** - Component documentation (local)
-
-## 🤝 Contributing
-
-1. **Fork the repository**
-2. **Create a feature branch**: `git checkout -b feature/amazing-feature`
-3. **Write tests first** (see [Testing Guide](docs/TESTING_GUIDE.md))
-4. **Make your changes**
-5. **Run tests**: `npm test && npm run e2e`
-6. **Commit changes**: `git commit -m "feat: add amazing feature"`
-7. **Push to branch**: `git push origin feature/amazing-feature`
-8. **Create Pull Request**
-
-### Development Workflow
-
-- All changes must have tests
-- CI pipeline runs automatically on PRs
-- Visual regression tests ensure UI consistency
-- Performance budgets must be met
-- Accessibility standards must be maintained
-
-## 📄 License
-
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+[MIT](LICENSE).
diff --git a/app/(admin)/layout.tsx b/app/(admin)/layout.tsx
new file mode 100644
index 0000000..52df07c
--- /dev/null
+++ b/app/(admin)/layout.tsx
@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+// Operator/admin dashboards (e.g. `/monitor`) intentionally render without the
+// public marketing footer. Auth/access is enforced upstream.
+export default function AdminLayout({ children }: { children: ReactNode }) {
+  return <main className="flex-1">{children}</main>;
+}
diff --git a/app/(admin)/monitor/page.tsx b/app/(admin)/monitor/page.tsx
index 0082f3d..9ba8ff2 100644
--- a/app/(admin)/monitor/page.tsx
+++ b/app/(admin)/monitor/page.tsx
@@ -1,4 +1,4 @@
-import WebVitalsDashboard from "../../components/WebVitalsDashboard";
+import WebVitalsDashboard from "../../components/sections/WebVitalsDashboard";
 import TopNav from "../../components/navigation/TopNav";
 import Footer from "../../components/navigation/Footer";
 
diff --git a/app/create/CreateFlowLayoutClient.tsx b/app/(app)/create/CreateFlowLayoutClient.tsx
similarity index 96%
rename from app/create/CreateFlowLayoutClient.tsx
rename to app/(app)/create/CreateFlowLayoutClient.tsx
index 3f757c3..6448898 100644
--- a/app/create/CreateFlowLayoutClient.tsx
+++ b/app/(app)/create/CreateFlowLayoutClient.tsx
@@ -11,35 +11,35 @@ import { usePathname, useRouter } from "next/navigation";
 import { CreateFlowProvider, useCreateFlow } from "./context/CreateFlowContext";
 import { useCreateFlowNavigation } from "./hooks/useCreateFlowNavigation";
 import { useCreateFlowExit } from "./hooks/useCreateFlowExit";
-import CreateFlowTopNav from "../components/utility/CreateFlowTopNav";
+import CreateFlowTopNav from "../../components/utility/CreateFlowTopNav";
 import { getNextStep, getStepIndex } from "./utils/flowSteps";
 import { getProportionBarProgressForCreateFlowStep } from "./utils/createFlowProportionProgress";
 import {
   createFlowStepUsesCenteredTextLayout,
   createFlowStepUsesCardLayout,
 } from "./utils/createFlowScreenRegistry";
-import CreateFlowFooter from "../components/utility/CreateFlowFooter";
-import Button from "../components/buttons/Button";
-import { buildPublishPayload } from "../../lib/create/buildPublishPayload";
-import { isValidCreateFlowSaveEmail } from "../../lib/create/isValidCreateFlowSaveEmail";
+import CreateFlowFooter from "../../components/utility/CreateFlowFooter";
+import Button from "../../components/buttons/Button";
+import { buildPublishPayload } from "../../../lib/create/buildPublishPayload";
+import { isValidCreateFlowSaveEmail } from "../../../lib/create/isValidCreateFlowSaveEmail";
 import {
   fetchAuthSession,
   publishRule,
   requestMagicLink,
-} from "../../lib/create/api";
-import { safeInternalPath } from "../../lib/safeInternalPath";
+} from "../../../lib/create/api";
+import { safeInternalPath } from "../../../lib/safeInternalPath";
 import { setTransferPendingFlag } from "./utils/anonymousDraftStorage";
-import { writeLastPublishedRule } from "../../lib/create/lastPublishedRule";
+import { writeLastPublishedRule } from "../../../lib/create/lastPublishedRule";
 import {
   fetchTemplateBySlug,
   type RuleTemplateDto,
-} from "../../lib/create/fetchTemplates";
-import messages from "../../messages/en/index";
-import { useAuthModal } from "../contexts/AuthModalContext";
-import { useMessages, useTranslation } from "../contexts/MessagesContext";
+} from "../../../lib/create/fetchTemplates";
+import messages from "../../../messages/en/index";
+import { useAuthModal } from "../../contexts/AuthModalContext";
+import { useMessages, useTranslation } from "../../contexts/MessagesContext";
 import { PostLoginDraftTransfer } from "./PostLoginDraftTransfer";
 import { SignedInDraftHydration } from "./SignedInDraftHydration";
-import Alert from "../components/modals/Alert";
+import Alert from "../../components/modals/Alert";
 import {
   CreateFlowDraftSaveBannerProvider,
   useCreateFlowDraftSaveBanner,
diff --git a/app/create/CreateFlowLayoutGate.tsx b/app/(app)/create/CreateFlowLayoutGate.tsx
similarity index 100%
rename from app/create/CreateFlowLayoutGate.tsx
rename to app/(app)/create/CreateFlowLayoutGate.tsx
diff --git a/app/create/PostLoginDraftTransfer.tsx b/app/(app)/create/PostLoginDraftTransfer.tsx
similarity index 97%
rename from app/create/PostLoginDraftTransfer.tsx
rename to app/(app)/create/PostLoginDraftTransfer.tsx
index 92725e7..bf56460 100644
--- a/app/create/PostLoginDraftTransfer.tsx
+++ b/app/(app)/create/PostLoginDraftTransfer.tsx
@@ -9,8 +9,8 @@ import {
 } from "./utils/anonymousDraftStorage";
 import { useCreateFlow } from "./context/CreateFlowContext";
 import { parseCreateFlowScreenFromPathname } from "./utils/flowSteps";
-import { saveDraftToServer } from "../../lib/create/api";
-import messages from "../../messages/en/index";
+import { saveDraftToServer } from "../../../lib/create/api";
+import messages from "../../../messages/en/index";
 
 const SYNC_ENABLED = process.env.NEXT_PUBLIC_ENABLE_BACKEND_SYNC === "true";
 
diff --git a/app/create/SignedInDraftHydration.tsx b/app/(app)/create/SignedInDraftHydration.tsx
similarity index 95%
rename from app/create/SignedInDraftHydration.tsx
rename to app/(app)/create/SignedInDraftHydration.tsx
index a68e7d4..c191c86 100644
--- a/app/create/SignedInDraftHydration.tsx
+++ b/app/(app)/create/SignedInDraftHydration.tsx
@@ -3,15 +3,15 @@
 import { useEffect, useRef, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import type { CreateFlowState } from "./types";
-import { createFlowStateHasKeys } from "../../lib/create/draftHydrationUtils";
+import { createFlowStateHasKeys } from "../../../lib/create/draftHydrationUtils";
 import {
   clearAnonymousCreateFlowStorage,
   hasTransferPendingFlag,
   readAnonymousCreateFlowState,
 } from "./utils/anonymousDraftStorage";
 import { useCreateFlow } from "./context/CreateFlowContext";
-import { fetchDraftFromServer } from "../../lib/create/api";
-import messages from "../../messages/en/index";
+import { fetchDraftFromServer } from "../../../lib/create/api";
+import messages from "../../../messages/en/index";
 
 const SYNC_ENABLED = process.env.NEXT_PUBLIC_ENABLE_BACKEND_SYNC === "true";
 
diff --git a/app/create/[screenId]/page.tsx b/app/(app)/create/[screenId]/page.tsx
similarity index 100%
rename from app/create/[screenId]/page.tsx
rename to app/(app)/create/[screenId]/page.tsx
diff --git a/app/create/components/ApplicableScopeField.tsx b/app/(app)/create/components/ApplicableScopeField.tsx
similarity index 95%
rename from app/create/components/ApplicableScopeField.tsx
rename to app/(app)/create/components/ApplicableScopeField.tsx
index 730bd93..eb993c6 100644
--- a/app/create/components/ApplicableScopeField.tsx
+++ b/app/(app)/create/components/ApplicableScopeField.tsx
@@ -8,8 +8,8 @@
  */
 
 import { memo, useState } from "react";
-import Chip from "../../components/controls/Chip";
-import InputLabel from "../../components/utility/InputLabel";
+import Chip from "../../../components/controls/Chip";
+import InputLabel from "../../../components/utility/InputLabel";
 
 export interface ApplicableScopeFieldProps {
   /** Label rendered above the capsule row. */
@@ -74,9 +74,9 @@ function ApplicableScopeFieldComponent({
             <Chip
               key={scope}
               label={scope}
-              state={isSelected ? "Selected" : "Disabled"}
-              palette="Default"
-              size="S"
+              state={isSelected ? "selected" : "disabled"}
+              palette="default"
+              size="s"
               disabled={false}
               onClick={() => onToggleScope(scope)}
               ariaLabel={`${isSelected ? "Deselect" : "Select"} ${scope}`}
diff --git a/app/create/components/CreateFlowHeaderLockup.tsx b/app/(app)/create/components/CreateFlowHeaderLockup.tsx
similarity index 79%
rename from app/create/components/CreateFlowHeaderLockup.tsx
rename to app/(app)/create/components/CreateFlowHeaderLockup.tsx
index 301cb94..ec1e099 100644
--- a/app/create/components/CreateFlowHeaderLockup.tsx
+++ b/app/(app)/create/components/CreateFlowHeaderLockup.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import HeaderLockup from "../../components/type/HeaderLockup";
-import type { HeaderLockupProps } from "../../components/type/HeaderLockup/HeaderLockup.types";
+import HeaderLockup from "../../../components/type/HeaderLockup";
+import type { HeaderLockupProps } from "../../../components/type/HeaderLockup/HeaderLockup.types";
 import { useCreateFlowMdUp } from "../hooks/useCreateFlowMdUp";
 
 export type CreateFlowHeaderLockupProps = Omit<HeaderLockupProps, "size"> & {
diff --git a/app/create/components/CreateFlowLockupCardStepShell.tsx b/app/(app)/create/components/CreateFlowLockupCardStepShell.tsx
similarity index 100%
rename from app/create/components/CreateFlowLockupCardStepShell.tsx
rename to app/(app)/create/components/CreateFlowLockupCardStepShell.tsx
diff --git a/app/create/components/CreateFlowStepShell.tsx b/app/(app)/create/components/CreateFlowStepShell.tsx
similarity index 100%
rename from app/create/components/CreateFlowStepShell.tsx
rename to app/(app)/create/components/CreateFlowStepShell.tsx
diff --git a/app/create/components/CreateFlowTwoColumnSelectShell.tsx b/app/(app)/create/components/CreateFlowTwoColumnSelectShell.tsx
similarity index 100%
rename from app/create/components/CreateFlowTwoColumnSelectShell.tsx
rename to app/(app)/create/components/CreateFlowTwoColumnSelectShell.tsx
diff --git a/app/create/components/ModalTextAreaField.tsx b/app/(app)/create/components/ModalTextAreaField.tsx
similarity index 93%
rename from app/create/components/ModalTextAreaField.tsx
rename to app/(app)/create/components/ModalTextAreaField.tsx
index 1cd3676..143b35d 100644
--- a/app/create/components/ModalTextAreaField.tsx
+++ b/app/(app)/create/components/ModalTextAreaField.tsx
@@ -7,8 +7,8 @@
  */
 
 import { memo, useId } from "react";
-import TextArea from "../../components/controls/TextArea";
-import InputLabel from "../../components/utility/InputLabel";
+import TextArea from "../../../components/controls/TextArea";
+import InputLabel from "../../../components/utility/InputLabel";
 
 export interface ModalTextAreaFieldProps {
   /** Label rendered above the text area. */
diff --git a/app/create/components/createFlowLayoutTokens.ts b/app/(app)/create/components/createFlowLayoutTokens.ts
similarity index 100%
rename from app/create/components/createFlowLayoutTokens.ts
rename to app/(app)/create/components/createFlowLayoutTokens.ts
diff --git a/app/create/context/CreateFlowContext.tsx b/app/(app)/create/context/CreateFlowContext.tsx
similarity index 100%
rename from app/create/context/CreateFlowContext.tsx
rename to app/(app)/create/context/CreateFlowContext.tsx
diff --git a/app/create/context/CreateFlowDraftSaveBannerContext.tsx b/app/(app)/create/context/CreateFlowDraftSaveBannerContext.tsx
similarity index 100%
rename from app/create/context/CreateFlowDraftSaveBannerContext.tsx
rename to app/(app)/create/context/CreateFlowDraftSaveBannerContext.tsx
diff --git a/app/create/hooks/useCreateFlowExit.ts b/app/(app)/create/hooks/useCreateFlowExit.ts
similarity index 93%
rename from app/create/hooks/useCreateFlowExit.ts
rename to app/(app)/create/hooks/useCreateFlowExit.ts
index d7b5315..02c6090 100644
--- a/app/create/hooks/useCreateFlowExit.ts
+++ b/app/(app)/create/hooks/useCreateFlowExit.ts
@@ -2,8 +2,8 @@
 
 import { useCallback } from "react";
 import type { CreateFlowState, CreateFlowStep } from "../types";
-import { saveDraftToServer } from "../../../lib/create/api";
-import messages from "../../../messages/en/index";
+import { saveDraftToServer } from "../../../../lib/create/api";
+import messages from "../../../../messages/en/index";
 
 const SYNC_ENABLED = process.env.NEXT_PUBLIC_ENABLE_BACKEND_SYNC === "true";
 
diff --git a/app/create/hooks/useCreateFlowLgUp.ts b/app/(app)/create/hooks/useCreateFlowLgUp.ts
similarity index 91%
rename from app/create/hooks/useCreateFlowLgUp.ts
rename to app/(app)/create/hooks/useCreateFlowLgUp.ts
index 903bee9..7b813dd 100644
--- a/app/create/hooks/useCreateFlowLgUp.ts
+++ b/app/(app)/create/hooks/useCreateFlowLgUp.ts
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useMediaQuery } from "../../hooks/useMediaQuery";
+import { useMediaQuery } from "../../../hooks/useMediaQuery";
 
 /** `--breakpoint-lg` (1024px); same SSR/first-paint pattern as `useCreateFlowMdUp`. */
 const CREATE_FLOW_MIN_WIDTH_LG = "(min-width: 1024px)";
diff --git a/app/create/hooks/useCreateFlowMdUp.ts b/app/(app)/create/hooks/useCreateFlowMdUp.ts
similarity index 91%
rename from app/create/hooks/useCreateFlowMdUp.ts
rename to app/(app)/create/hooks/useCreateFlowMdUp.ts
index 9b8aaf1..b87cc5f 100644
--- a/app/create/hooks/useCreateFlowMdUp.ts
+++ b/app/(app)/create/hooks/useCreateFlowMdUp.ts
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { useMediaQuery } from "../../hooks/useMediaQuery";
+import { useMediaQuery } from "../../../hooks/useMediaQuery";
 
 /** `--breakpoint-md` (640px); same SSR/first-paint pattern as `useCreateFlowLgUp`. */
 const CREATE_FLOW_MIN_WIDTH_MD = "(min-width: 640px)";
diff --git a/app/create/hooks/useCreateFlowNavigation.ts b/app/(app)/create/hooks/useCreateFlowNavigation.ts
similarity index 100%
rename from app/create/hooks/useCreateFlowNavigation.ts
rename to app/(app)/create/hooks/useCreateFlowNavigation.ts
diff --git a/app/create/layout.tsx b/app/(app)/create/layout.tsx
similarity index 100%
rename from app/create/layout.tsx
rename to app/(app)/create/layout.tsx
diff --git a/app/create/page.tsx b/app/(app)/create/page.tsx
similarity index 100%
rename from app/create/page.tsx
rename to app/(app)/create/page.tsx
diff --git a/app/create/review-template/[slug]/page.tsx b/app/(app)/create/review-template/[slug]/page.tsx
similarity index 91%
rename from app/create/review-template/[slug]/page.tsx
rename to app/(app)/create/review-template/[slug]/page.tsx
index 0816015..ba38dff 100644
--- a/app/create/review-template/[slug]/page.tsx
+++ b/app/(app)/create/review-template/[slug]/page.tsx
@@ -1,15 +1,15 @@
 "use client";
 
 import { use, useEffect, useState } from "react";
-import { TemplateReviewCard } from "../../../components/cards/TemplateReviewCard";
-import { useTranslation } from "../../../contexts/MessagesContext";
+import { TemplateReviewCard } from "../../../../components/cards/TemplateReviewCard";
+import { useTranslation } from "../../../../contexts/MessagesContext";
 import {
   fetchTemplateBySlug,
   isTemplatesFetchAborted,
   type RuleTemplateDto,
-} from "../../../../lib/create/fetchTemplates";
-import messages from "../../../../messages/en/index";
-import Alert from "../../../components/modals/Alert";
+} from "../../../../../lib/create/fetchTemplates";
+import messages from "../../../../../messages/en/index";
+import Alert from "../../../../components/modals/Alert";
 import {
   CREATE_FLOW_REVIEW_RULE_CARD_LAYOUT_CLASS,
   CreateFlowLockupCardStepShell,
diff --git a/app/create/screens/CreateFlowScreenView.tsx b/app/(app)/create/screens/CreateFlowScreenView.tsx
similarity index 100%
rename from app/create/screens/CreateFlowScreenView.tsx
rename to app/(app)/create/screens/CreateFlowScreenView.tsx
diff --git a/app/create/screens/card/CommunicationMethodsScreen.tsx b/app/(app)/create/screens/card/CommunicationMethodsScreen.tsx
similarity index 96%
rename from app/create/screens/card/CommunicationMethodsScreen.tsx
rename to app/(app)/create/screens/card/CommunicationMethodsScreen.tsx
index e8bb90f..033f74b 100644
--- a/app/create/screens/card/CommunicationMethodsScreen.tsx
+++ b/app/(app)/create/screens/card/CommunicationMethodsScreen.tsx
@@ -10,13 +10,13 @@
  */
 
 import { useState, useCallback, useMemo } from "react";
-import { useMessages } from "../../../contexts/MessagesContext";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
-import CardStack from "../../../components/utility/CardStack";
-import Create from "../../../components/modals/Create";
-import InlineTextButton from "../../../components/buttons/InlineTextButton";
+import CardStack from "../../../../components/utility/CardStack";
+import Create from "../../../../components/modals/Create";
+import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import {
   CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
diff --git a/app/create/screens/card/ConflictManagementScreen.tsx b/app/(app)/create/screens/card/ConflictManagementScreen.tsx
similarity index 97%
rename from app/create/screens/card/ConflictManagementScreen.tsx
rename to app/(app)/create/screens/card/ConflictManagementScreen.tsx
index 26ba4e1..3bac17e 100644
--- a/app/create/screens/card/ConflictManagementScreen.tsx
+++ b/app/(app)/create/screens/card/ConflictManagementScreen.tsx
@@ -12,13 +12,13 @@
  */
 
 import { useState, useCallback, useMemo } from "react";
-import { useMessages } from "../../../contexts/MessagesContext";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
-import CardStack from "../../../components/utility/CardStack";
-import Create from "../../../components/modals/Create";
-import InlineTextButton from "../../../components/buttons/InlineTextButton";
+import CardStack from "../../../../components/utility/CardStack";
+import Create from "../../../../components/modals/Create";
+import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import {
   CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
diff --git a/app/create/screens/card/MembershipMethodsScreen.tsx b/app/(app)/create/screens/card/MembershipMethodsScreen.tsx
similarity index 96%
rename from app/create/screens/card/MembershipMethodsScreen.tsx
rename to app/(app)/create/screens/card/MembershipMethodsScreen.tsx
index 99ba344..de23389 100644
--- a/app/create/screens/card/MembershipMethodsScreen.tsx
+++ b/app/(app)/create/screens/card/MembershipMethodsScreen.tsx
@@ -12,13 +12,13 @@
  */
 
 import { useState, useCallback, useMemo } from "react";
-import { useMessages } from "../../../contexts/MessagesContext";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
-import CardStack from "../../../components/utility/CardStack";
-import Create from "../../../components/modals/Create";
-import InlineTextButton from "../../../components/buttons/InlineTextButton";
+import CardStack from "../../../../components/utility/CardStack";
+import Create from "../../../../components/modals/Create";
+import InlineTextButton from "../../../../components/buttons/InlineTextButton";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import {
   CREATE_FLOW_CARD_STACK_AREA_MAX_CLASS,
diff --git a/app/create/screens/completed/CompletedScreen.tsx b/app/(app)/create/screens/completed/CompletedScreen.tsx
similarity index 87%
rename from app/create/screens/completed/CompletedScreen.tsx
rename to app/(app)/create/screens/completed/CompletedScreen.tsx
index 1c69718..7e4294c 100644
--- a/app/create/screens/completed/CompletedScreen.tsx
+++ b/app/(app)/create/screens/completed/CompletedScreen.tsx
@@ -1,12 +1,12 @@
 "use client";
 
 import { useState, useEffect, useMemo } from "react";
-import CommunityRuleDocument from "../../../components/sections/CommunityRuleDocument";
-import type { CommunityRuleDocumentSection } from "../../../components/sections/CommunityRuleDocument/CommunityRuleDocument.types";
-import Alert from "../../../components/modals/Alert";
-import { useMessages } from "../../../contexts/MessagesContext";
-import { parseDocumentSectionsForDisplay } from "../../../../lib/create/buildPublishPayload";
-import { readLastPublishedRule } from "../../../../lib/create/lastPublishedRule";
+import CommunityRuleDocument from "../../../../components/sections/CommunityRuleDocument";
+import type { CommunityRuleDocumentSection } from "../../../../components/sections/CommunityRuleDocument/CommunityRuleDocument.types";
+import Alert from "../../../../components/modals/Alert";
+import { useMessages } from "../../../../contexts/MessagesContext";
+import { parseDocumentSectionsForDisplay } from "../../../../../lib/create/buildPublishPayload";
+import { readLastPublishedRule } from "../../../../../lib/create/lastPublishedRule";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import {
diff --git a/app/create/screens/informational/InformationalScreen.tsx b/app/(app)/create/screens/informational/InformationalScreen.tsx
similarity index 93%
rename from app/create/screens/informational/InformationalScreen.tsx
rename to app/(app)/create/screens/informational/InformationalScreen.tsx
index f721876..7069bf4 100644
--- a/app/create/screens/informational/InformationalScreen.tsx
+++ b/app/(app)/create/screens/informational/InformationalScreen.tsx
@@ -1,8 +1,8 @@
 "use client";
 
 import type { ReactNode } from "react";
-import NumberedList from "../../../components/type/NumberedList";
-import { useMessages } from "../../../contexts/MessagesContext";
+import NumberedList from "../../../../components/type/NumberedList";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
diff --git a/app/create/screens/review/CommunityReviewScreen.tsx b/app/(app)/create/screens/review/CommunityReviewScreen.tsx
similarity index 94%
rename from app/create/screens/review/CommunityReviewScreen.tsx
rename to app/(app)/create/screens/review/CommunityReviewScreen.tsx
index 96f6d3c..e1ff1cf 100644
--- a/app/create/screens/review/CommunityReviewScreen.tsx
+++ b/app/(app)/create/screens/review/CommunityReviewScreen.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import RuleCard from "../../../components/cards/RuleCard";
-import { useTranslation } from "../../../contexts/MessagesContext";
+import RuleCard from "../../../../components/cards/RuleCard";
+import { useTranslation } from "../../../../contexts/MessagesContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowLgUp } from "../../hooks/useCreateFlowLgUp";
diff --git a/app/create/screens/review/FinalReviewScreen.tsx b/app/(app)/create/screens/review/FinalReviewScreen.tsx
similarity index 89%
rename from app/create/screens/review/FinalReviewScreen.tsx
rename to app/(app)/create/screens/review/FinalReviewScreen.tsx
index 4c970d0..db45cb6 100644
--- a/app/create/screens/review/FinalReviewScreen.tsx
+++ b/app/(app)/create/screens/review/FinalReviewScreen.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useMemo } from "react";
-import RuleCard from "../../../components/cards/RuleCard";
-import type { Category } from "../../../components/cards/RuleCard/RuleCard.types";
-import { useMessages, useTranslation } from "../../../contexts/MessagesContext";
+import RuleCard from "../../../../components/cards/RuleCard";
+import type { Category } from "../../../../components/cards/RuleCard/RuleCard.types";
+import { useMessages, useTranslation } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import {
diff --git a/app/create/screens/right-rail/DecisionApproachesScreen.tsx b/app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx
similarity index 93%
rename from app/create/screens/right-rail/DecisionApproachesScreen.tsx
rename to app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx
index 052a2d3..9773969 100644
--- a/app/create/screens/right-rail/DecisionApproachesScreen.tsx
+++ b/app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx
@@ -14,14 +14,14 @@
  */
 
 import { useState, useCallback, useMemo } from "react";
-import DecisionMakingSidebar from "../../../components/utility/DecisionMakingSidebar";
-import CardStack from "../../../components/utility/CardStack";
-import Create from "../../../components/modals/Create";
-import IncrementerBlock from "../../../components/controls/IncrementerBlock";
-import InlineTextButton from "../../../components/buttons/InlineTextButton";
-import type { InfoMessageBoxItem } from "../../../components/utility/InfoMessageBox/InfoMessageBox.types";
-import type { CardStackItem } from "../../../components/utility/CardStack/CardStack.types";
-import { useMessages } from "../../../contexts/MessagesContext";
+import DecisionMakingSidebar from "../../../../components/utility/DecisionMakingSidebar";
+import CardStack from "../../../../components/utility/CardStack";
+import Create from "../../../../components/modals/Create";
+import IncrementerBlock from "../../../../components/controls/IncrementerBlock";
+import InlineTextButton from "../../../../components/buttons/InlineTextButton";
+import type { InfoMessageBoxItem } from "../../../../components/utility/InfoMessageBox/InfoMessageBox.types";
+import type { CardStackItem } from "../../../../components/utility/CardStack/CardStack.types";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
diff --git a/app/create/screens/select/CommunitySizeSelectScreen.tsx b/app/(app)/create/screens/select/CommunitySizeSelectScreen.tsx
similarity index 79%
rename from app/create/screens/select/CommunitySizeSelectScreen.tsx
rename to app/(app)/create/screens/select/CommunitySizeSelectScreen.tsx
index a65f088..a7d313e 100644
--- a/app/create/screens/select/CommunitySizeSelectScreen.tsx
+++ b/app/(app)/create/screens/select/CommunitySizeSelectScreen.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import MultiSelect from "../../../components/controls/MultiSelect";
-import type { ChipOption } from "../../../components/controls/MultiSelect/MultiSelect.types";
-import { useMessages } from "../../../contexts/MessagesContext";
+import MultiSelect from "../../../../components/controls/MultiSelect";
+import type { ChipOption } from "../../../../components/controls/MultiSelect/MultiSelect.types";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
@@ -14,13 +14,13 @@ function chipRowsFromLabels(
   return rows.map((row, i) => ({
     id: String(i + 1),
     label: row.label,
-    state: "Unselected" as const,
+    state: "unselected" as const,
   }));
 }
 
 function selectedIdsFromOptions(options: ChipOption[]): string[] {
   return options
-    .filter((o) => o.state === "Selected")
+    .filter((o) => o.state === "selected")
     .map((o) => o.id);
 }
 
@@ -37,7 +37,7 @@ export function CommunitySizeSelectScreen() {
     const selected = new Set(state.selectedCommunitySizeIds ?? []);
     return base.map((opt) => ({
       ...opt,
-      state: selected.has(opt.id) ? ("Selected" as const) : ("Unselected" as const),
+      state: selected.has(opt.id) ? ("selected" as const) : ("unselected" as const),
     }));
   });
 
@@ -45,13 +45,13 @@ export function CommunitySizeSelectScreen() {
     const selected = new Set(state.selectedCommunitySizeIds ?? []);
     setCommunitySizeOptions((prev) =>
       prev.map((opt) =>
-        opt.state === "Custom"
+        opt.state === "custom"
           ? opt
           : {
               ...opt,
               state: selected.has(opt.id)
-                ? ("Selected" as const)
-                : ("Unselected" as const),
+                ? ("selected" as const)
+                : ("unselected" as const),
             },
       ),
     );
@@ -71,9 +71,9 @@ export function CommunitySizeSelectScreen() {
         ? {
             ...opt,
             state:
-              opt.state === "Selected"
-                ? ("Unselected" as const)
-                : ("Selected" as const),
+              opt.state === "selected"
+                ? ("unselected" as const)
+                : ("selected" as const),
           }
         : opt,
     );
@@ -83,7 +83,7 @@ export function CommunitySizeSelectScreen() {
   const multiSelectBlock = (
     <MultiSelect
       formHeader={false}
-      size="M"
+      size="m"
       options={communitySizeOptions}
       onChipClick={handleCommunitySizeClick}
       addButton={false}
diff --git a/app/create/screens/select/CommunityStructureSelectScreen.tsx b/app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx
similarity index 89%
rename from app/create/screens/select/CommunityStructureSelectScreen.tsx
rename to app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx
index 1b27100..8784e32 100644
--- a/app/create/screens/select/CommunityStructureSelectScreen.tsx
+++ b/app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx
@@ -7,9 +7,9 @@ import {
   type Dispatch,
   type SetStateAction,
 } from "react";
-import MultiSelect from "../../../components/controls/MultiSelect";
-import type { ChipOption } from "../../../components/controls/MultiSelect/MultiSelect.types";
-import { useMessages } from "../../../contexts/MessagesContext";
+import MultiSelect from "../../../../components/controls/MultiSelect";
+import type { ChipOption } from "../../../../components/controls/MultiSelect/MultiSelect.types";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import type { CommunityStructureChipSnapshotRow } from "../../types";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
@@ -17,7 +17,7 @@ import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoCo
 
 function createListCustomHandlers(
   setList: Dispatch<SetStateAction<ChipOption[]>>,
-  confirmState: "Unselected" | "Selected",
+  confirmState: "unselected" | "selected",
   onInteraction?: () => void,
 ) {
   const touch = () => onInteraction?.();
@@ -26,7 +26,7 @@ function createListCustomHandlers(
       touch();
       setList((prev) => [
         ...prev,
-        { id: crypto.randomUUID(), label: "", state: "Custom" },
+        { id: crypto.randomUUID(), label: "", state: "custom" },
       ]);
     },
     onCustomChipConfirm: (chipId: string, value: string) => {
@@ -52,7 +52,7 @@ function chipRowsFromLabels(
   return rows.map((row, i) => ({
     id: String(i + 1),
     label: row.label,
-    state: "Unselected" as const,
+    state: "unselected" as const,
   }));
 }
 
@@ -62,20 +62,20 @@ function applySavedSelection(
 ): ChipOption[] {
   const selected = new Set(saved ?? []);
   return options.map((opt) =>
-    opt.state === "Custom"
+    opt.state === "custom"
       ? opt
       : {
           ...opt,
           state: selected.has(opt.id)
-            ? ("Selected" as const)
-            : ("Unselected" as const),
+            ? ("selected" as const)
+            : ("unselected" as const),
         },
   );
 }
 
 function selectedIdsFromOptions(options: ChipOption[]): string[] {
   return options
-    .filter((o) => o.state === "Selected")
+    .filter((o) => o.state === "selected")
     .map((o) => o.id);
 }
 
@@ -194,7 +194,7 @@ export function CommunityStructureSelectScreen() {
     () =>
       createListCustomHandlers(
         setOrganizationTypeOptions,
-        "Unselected",
+        "unselected",
         markCreateFlowInteraction,
       ),
     [markCreateFlowInteraction],
@@ -203,7 +203,7 @@ export function CommunityStructureSelectScreen() {
     () =>
       createListCustomHandlers(
         setScaleOptions,
-        "Unselected",
+        "unselected",
         markCreateFlowInteraction,
       ),
     [markCreateFlowInteraction],
@@ -212,7 +212,7 @@ export function CommunityStructureSelectScreen() {
     () =>
       createListCustomHandlers(
         setMaturityOptions,
-        "Unselected",
+        "unselected",
         markCreateFlowInteraction,
       ),
     [markCreateFlowInteraction],
@@ -258,9 +258,9 @@ export function CommunityStructureSelectScreen() {
           ? {
               ...opt,
               state:
-                opt.state === "Selected"
-                  ? ("Unselected" as const)
-                  : ("Selected" as const),
+                opt.state === "selected"
+                  ? ("unselected" as const)
+                  : ("selected" as const),
             }
           : opt,
       ),
@@ -274,9 +274,9 @@ export function CommunityStructureSelectScreen() {
           ? {
               ...opt,
               state:
-                opt.state === "Selected"
-                  ? ("Unselected" as const)
-                  : ("Selected" as const),
+                opt.state === "selected"
+                  ? ("unselected" as const)
+                  : ("selected" as const),
             }
           : opt,
       ),
@@ -290,9 +290,9 @@ export function CommunityStructureSelectScreen() {
           ? {
               ...opt,
               state:
-                opt.state === "Selected"
-                  ? ("Unselected" as const)
-                  : ("Selected" as const),
+                opt.state === "selected"
+                  ? ("unselected" as const)
+                  : ("selected" as const),
             }
           : opt,
       ),
@@ -304,7 +304,7 @@ export function CommunityStructureSelectScreen() {
       <MultiSelect
         label={cs.organizationMultiSelect.label}
         showHelpIcon
-        size="S"
+        size="s"
         options={organizationTypeOptions}
         onChipClick={handleOrganizationTypeClick}
         {...organizationCustomHandlers}
@@ -314,7 +314,7 @@ export function CommunityStructureSelectScreen() {
       <MultiSelect
         label={cs.scaleMultiSelect.label}
         showHelpIcon
-        size="S"
+        size="s"
         options={scaleOptions}
         onChipClick={handleScaleClick}
         {...scaleCustomHandlers}
@@ -324,7 +324,7 @@ export function CommunityStructureSelectScreen() {
       <MultiSelect
         label={cs.maturityMultiSelect.label}
         showHelpIcon
-        size="S"
+        size="s"
         options={maturityOptions}
         onChipClick={handleMaturityClick}
         {...maturityCustomHandlers}
diff --git a/app/create/screens/select/ConfirmStakeholdersScreen.tsx b/app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx
similarity index 87%
rename from app/create/screens/select/ConfirmStakeholdersScreen.tsx
rename to app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx
index 116d8b8..8a4fee2 100644
--- a/app/create/screens/select/ConfirmStakeholdersScreen.tsx
+++ b/app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { useState } from "react";
-import MultiSelect from "../../../components/controls/MultiSelect";
-import Alert from "../../../components/modals/Alert";
-import type { ChipOption } from "../../../components/controls/MultiSelect/MultiSelect.types";
-import { useTranslation } from "../../../contexts/MessagesContext";
+import MultiSelect from "../../../../components/controls/MultiSelect";
+import Alert from "../../../../components/modals/Alert";
+import type { ChipOption } from "../../../../components/controls/MultiSelect/MultiSelect.types";
+import { useTranslation } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
@@ -22,7 +22,7 @@ export function ConfirmStakeholdersScreen() {
     markCreateFlowInteraction();
     setStakeholderOptions((prev) => [
       ...prev,
-      { id: crypto.randomUUID(), label: "", state: "Custom" },
+      { id: crypto.randomUUID(), label: "", state: "custom" },
     ]);
   };
 
@@ -30,7 +30,7 @@ export function ConfirmStakeholdersScreen() {
     markCreateFlowInteraction();
     setStakeholderOptions((prev) =>
       prev.map((opt) =>
-        opt.id === chipId ? { ...opt, label: value, state: "Selected" } : opt,
+        opt.id === chipId ? { ...opt, label: value, state: "selected" } : opt,
       ),
     );
   };
@@ -64,7 +64,7 @@ export function ConfirmStakeholdersScreen() {
           <MultiSelect
             formHeader={false}
             showHelpIcon={false}
-            size="S"
+            size="s"
             options={stakeholderOptions}
             onChipClick={handleChipClick}
             onAddClick={handleAddStakeholder}
diff --git a/app/create/screens/select/CoreValuesSelectScreen.tsx b/app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
similarity index 90%
rename from app/create/screens/select/CoreValuesSelectScreen.tsx
rename to app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
index 5cdd0bd..d8639fd 100644
--- a/app/create/screens/select/CoreValuesSelectScreen.tsx
+++ b/app/(app)/create/screens/select/CoreValuesSelectScreen.tsx
@@ -1,12 +1,12 @@
 "use client";
 
 import { useState, useEffect, useCallback, useMemo } from "react";
-import MultiSelect from "../../../components/controls/MultiSelect";
-import type { ChipOption } from "../../../components/controls/MultiSelect/MultiSelect.types";
-import TextArea from "../../../components/controls/TextArea";
-import Create from "../../../components/modals/Create";
-import ContentLockup from "../../../components/type/ContentLockup";
-import { useMessages } from "../../../contexts/MessagesContext";
+import MultiSelect from "../../../../components/controls/MultiSelect";
+import type { ChipOption } from "../../../../components/controls/MultiSelect/MultiSelect.types";
+import TextArea from "../../../../components/controls/TextArea";
+import Create from "../../../../components/modals/Create";
+import ContentLockup from "../../../../components/type/ContentLockup";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import type { CommunityStructureChipSnapshotRow } from "../../types";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
@@ -46,7 +46,7 @@ function chipRowsFromPresets(presets: readonly CoreValuePreset[]): ChipOption[]
   return presets.map((row, i) => ({
     id: String(i + 1),
     label: row.label,
-    state: "Unselected" as const,
+    state: "unselected" as const,
   }));
 }
 
@@ -56,20 +56,20 @@ function applySavedSelection(
 ): ChipOption[] {
   const selected = new Set(saved ?? []);
   return options.map((opt) =>
-    opt.state === "Custom"
+    opt.state === "custom"
       ? opt
       : {
           ...opt,
           state: selected.has(opt.id)
-            ? ("Selected" as const)
-            : ("Unselected" as const),
+            ? ("selected" as const)
+            : ("unselected" as const),
         },
   );
 }
 
 function selectedIdsFromOptions(options: ChipOption[]): string[] {
   return options
-    .filter((o) => o.state === "Selected")
+    .filter((o) => o.state === "selected")
     .map((o) => o.id);
 }
 
@@ -194,7 +194,7 @@ export function CoreValuesSelectScreen() {
     if (activeModalChipId && modalSession === "pending") {
       const next = coreValueOptions.map((opt) =>
         opt.id === activeModalChipId
-          ? { ...opt, state: "Unselected" as const }
+          ? { ...opt, state: "unselected" as const }
           : opt,
       );
       persistCoreValues(next);
@@ -226,16 +226,16 @@ export function CoreValuesSelectScreen() {
 
   const handleChipClick = (chipId: string) => {
     const target = coreValueOptions.find((o) => o.id === chipId);
-    if (!target || target.state === "Custom") return;
+    if (!target || target.state === "custom") return;
 
     const selectedCount = coreValueOptions.filter(
-      (o) => o.state === "Selected",
+      (o) => o.state === "selected",
     ).length;
 
-    if (target.state === "Selected") {
+    if (target.state === "selected") {
       const next: ChipOption[] = coreValueOptions.map((opt) =>
         opt.id === chipId
-          ? { ...opt, state: "Unselected" as const }
+          ? { ...opt, state: "unselected" as const }
           : opt,
       );
       persistCoreValues(next);
@@ -246,7 +246,7 @@ export function CoreValuesSelectScreen() {
 
     const next: ChipOption[] = coreValueOptions.map((opt) =>
       opt.id === chipId
-        ? { ...opt, state: "Selected" as const }
+        ? { ...opt, state: "selected" as const }
         : opt,
     );
     persistCoreValues(next);
@@ -259,7 +259,7 @@ export function CoreValuesSelectScreen() {
       setCoreValueOptions((prev) => {
         const next: ChipOption[] = [
           ...prev,
-          { id: crypto.randomUUID(), label: "", state: "Custom" },
+          { id: crypto.randomUUID(), label: "", state: "custom" },
         ];
         queueMicrotask(() => syncCoreValuesToDraft(next));
         return next;
@@ -270,17 +270,17 @@ export function CoreValuesSelectScreen() {
       setCoreValueOptions((prev) => {
         const withLabel = prev.map((opt) =>
           opt.id === chipId
-            ? { ...opt, label: value, state: "Unselected" as const }
+            ? { ...opt, label: value, state: "unselected" as const }
             : opt,
         );
         const selectedCount = withLabel.filter(
-          (o) => o.state === "Selected",
+          (o) => o.state === "selected",
         ).length;
         const canSelect = selectedCount < MAX_CORE_VALUES;
         const next = canSelect
           ? withLabel.map((opt) =>
               opt.id === chipId
-                ? { ...opt, state: "Selected" as const }
+                ? { ...opt, state: "selected" as const }
                 : opt,
             )
           : withLabel;
@@ -343,7 +343,7 @@ export function CoreValuesSelectScreen() {
     >
       <MultiSelect
         formHeader={false}
-        size="M"
+        size="m"
         options={coreValueOptions}
         onChipClick={handleChipClick}
         onAddClick={addHandlers.onAddClick}
diff --git a/app/create/screens/text/CreateFlowTextFieldScreen.tsx b/app/(app)/create/screens/text/CreateFlowTextFieldScreen.tsx
similarity index 93%
rename from app/create/screens/text/CreateFlowTextFieldScreen.tsx
rename to app/(app)/create/screens/text/CreateFlowTextFieldScreen.tsx
index 57a4174..4d17acf 100644
--- a/app/create/screens/text/CreateFlowTextFieldScreen.tsx
+++ b/app/(app)/create/screens/text/CreateFlowTextFieldScreen.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useState, useEffect, type HTMLInputTypeAttribute } from "react";
-import TextInput from "../../../components/controls/TextInput";
-import type { HeaderLockupJustificationValue } from "../../../components/type/HeaderLockup/HeaderLockup.types";
-import { useTranslation } from "../../../contexts/MessagesContext";
+import TextInput from "../../../../components/controls/TextInput";
+import type { HeaderLockupJustificationValue } from "../../../../components/type/HeaderLockup/HeaderLockup.types";
+import { useTranslation } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { useCreateFlowMdUp } from "../../hooks/useCreateFlowMdUp";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
diff --git a/app/create/screens/upload/CommunityUploadScreen.tsx b/app/(app)/create/screens/upload/CommunityUploadScreen.tsx
similarity index 91%
rename from app/create/screens/upload/CommunityUploadScreen.tsx
rename to app/(app)/create/screens/upload/CommunityUploadScreen.tsx
index 0beb278..b3e17fa 100644
--- a/app/create/screens/upload/CommunityUploadScreen.tsx
+++ b/app/(app)/create/screens/upload/CommunityUploadScreen.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import Upload from "../../../components/controls/Upload";
-import { useMessages } from "../../../contexts/MessagesContext";
+import Upload from "../../../../components/controls/Upload";
+import { useMessages } from "../../../../contexts/MessagesContext";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
diff --git a/app/create/types.ts b/app/(app)/create/types.ts
similarity index 100%
rename from app/create/types.ts
rename to app/(app)/create/types.ts
diff --git a/app/create/utils/anonymousDraftStorage.ts b/app/(app)/create/utils/anonymousDraftStorage.ts
similarity index 89%
rename from app/create/utils/anonymousDraftStorage.ts
rename to app/(app)/create/utils/anonymousDraftStorage.ts
index abe9694..7ab465a 100644
--- a/app/create/utils/anonymousDraftStorage.ts
+++ b/app/(app)/create/utils/anonymousDraftStorage.ts
@@ -1,5 +1,5 @@
 import type { CreateFlowState } from "../types";
-import { migrateLegacyCreateFlowState } from "../../../lib/create/migrateLegacyCreateFlowState";
+import { migrateLegacyCreateFlowState } from "../../../../lib/create/migrateLegacyCreateFlowState";
 
 /** Anonymous in-progress create flow (local only until magic-link transfer). */
 export const CREATE_FLOW_ANONYMOUS_KEY = "create-flow-anonymous" as const;
@@ -75,15 +75,6 @@ export function hasTransferPendingFlag(): boolean {
   }
 }
 
-export function clearTransferPendingFlag(): void {
-  if (typeof window === "undefined") return;
-  try {
-    window.localStorage.removeItem(CREATE_FLOW_TRANSFER_PENDING_KEY);
-  } catch {
-    // ignore
-  }
-}
-
 /** One-time cleanup of pre–anonymous-draft keys. */
 export function clearLegacyCreateFlowKeysOnce(): void {
   if (typeof window === "undefined") return;
diff --git a/app/create/utils/coreValueDetailsLocalStorage.ts b/app/(app)/create/utils/coreValueDetailsLocalStorage.ts
similarity index 100%
rename from app/create/utils/coreValueDetailsLocalStorage.ts
rename to app/(app)/create/utils/coreValueDetailsLocalStorage.ts
diff --git a/app/create/utils/createFlowProportionProgress.ts b/app/(app)/create/utils/createFlowProportionProgress.ts
similarity index 93%
rename from app/create/utils/createFlowProportionProgress.ts
rename to app/(app)/create/utils/createFlowProportionProgress.ts
index 017986b..c5ede99 100644
--- a/app/create/utils/createFlowProportionProgress.ts
+++ b/app/(app)/create/utils/createFlowProportionProgress.ts
@@ -1,4 +1,4 @@
-import type { ProportionBarState } from "../../components/progress/ProportionBar/ProportionBar.types";
+import type { ProportionBarState } from "../../../components/progress/ProportionBar/ProportionBar.types";
 import type { CreateFlowStep } from "../types";
 import { FLOW_STEP_ORDER, getStepIndex } from "./flowSteps";
 
diff --git a/app/create/utils/createFlowScreenRegistry.ts b/app/(app)/create/utils/createFlowScreenRegistry.ts
similarity index 95%
rename from app/create/utils/createFlowScreenRegistry.ts
rename to app/(app)/create/utils/createFlowScreenRegistry.ts
index 7af764e..ff189fe 100644
--- a/app/create/utils/createFlowScreenRegistry.ts
+++ b/app/(app)/create/utils/createFlowScreenRegistry.ts
@@ -2,10 +2,10 @@ import type { CreateFlowStep } from "../types";
 
 /**
  * Figma layout families for the create flow (not encoded in the URL).
- * `app/create/screens/<kind>/` mirrors these names: e.g. `layoutKind: "select"` → `screens/select/`,
+ * `app/(app)/create/screens/<kind>/` mirrors these names: e.g. `layoutKind: "select"` → `screens/select/`,
  * `"card"` → `screens/card/` (compact card-stack frames, distinct from two-column chip selects).
  */
-export type CreateFlowLayoutKind =
+type CreateFlowLayoutKind =
   | "informational"
   | "text"
   | "select"
@@ -15,7 +15,7 @@ export type CreateFlowLayoutKind =
   | "right-rail"
   | "completed";
 
-export interface CreateFlowScreenDefinition {
+interface CreateFlowScreenDefinition {
   layoutKind: CreateFlowLayoutKind;
   /** Figma node id (file Community-Rule-System), dev mode. */
   figmaNodeId: string;
diff --git a/app/create/utils/flowSteps.ts b/app/(app)/create/utils/flowSteps.ts
similarity index 100%
rename from app/create/utils/flowSteps.ts
rename to app/(app)/create/utils/flowSteps.ts
diff --git a/app/create/utils/hasCreateFlowUserInput.ts b/app/(app)/create/utils/hasCreateFlowUserInput.ts
similarity index 100%
rename from app/create/utils/hasCreateFlowUserInput.ts
rename to app/(app)/create/utils/hasCreateFlowUserInput.ts
diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
new file mode 100644
index 0000000..7b87c70
--- /dev/null
+++ b/app/(app)/layout.tsx
@@ -0,0 +1,8 @@
+import type { ReactNode } from "react";
+
+// Signed-in product surfaces (`/create/*`, `/login`, `/profile`) intentionally
+// run without the marketing footer. Per-route chrome (e.g. CreateFlow's own
+// header/footer lockup) is composed in nested layouts.
+export default function AppLayout({ children }: { children: ReactNode }) {
+  return <main className="flex-1">{children}</main>;
+}
diff --git a/app/login/layout.tsx b/app/(app)/login/layout.tsx
similarity index 100%
rename from app/login/layout.tsx
rename to app/(app)/login/layout.tsx
diff --git a/app/login/page.tsx b/app/(app)/login/page.tsx
similarity index 85%
rename from app/login/page.tsx
rename to app/(app)/login/page.tsx
index 7f3e70e..3a67fa4 100644
--- a/app/login/page.tsx
+++ b/app/(app)/login/page.tsx
@@ -3,18 +3,19 @@
 import { Suspense } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useTranslation } from "../contexts/MessagesContext";
-import Login from "../components/modals/Login";
-import LoginForm from "../components/modals/Login/LoginForm";
+import { useTranslation } from "../../contexts/MessagesContext";
+import Login from "../../components/modals/Login";
+import LoginForm from "../../components/modals/Login/LoginForm";
 
 const loginPageBgClass =
   "min-h-[100dvh] bg-[var(--color-surface-inverse-brand-primary)]";
 
 function LoginLoadingFallback() {
+  const t = useTranslation("pages.login");
   return (
     <div className={`${loginPageBgClass} flex items-center justify-center`}>
       <p className="font-inter text-[14px] text-[var(--color-content-default-primary)]">
-        Loading…
+        {t("loadingFallback")}
       </p>
     </div>
   );
diff --git a/app/profile/ProfilePageClient.tsx b/app/(app)/profile/ProfilePageClient.tsx
similarity index 88%
rename from app/profile/ProfilePageClient.tsx
rename to app/(app)/profile/ProfilePageClient.tsx
index f2a6f4f..b2b8e44 100644
--- a/app/profile/ProfilePageClient.tsx
+++ b/app/(app)/profile/ProfilePageClient.tsx
@@ -1,9 +1,9 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
-import { useTranslation } from "../contexts/MessagesContext";
-import Button from "../components/buttons/Button";
-import { fetchAuthSession, logout } from "../../lib/create/api";
+import { useTranslation } from "../../contexts/MessagesContext";
+import Button from "../../components/buttons/Button";
+import { fetchAuthSession, logout } from "../../../lib/create/api";
 
 export default function ProfilePageClient() {
   const t = useTranslation("pages.profile");
diff --git a/app/profile/page.tsx b/app/(app)/profile/page.tsx
similarity index 100%
rename from app/profile/page.tsx
rename to app/(app)/profile/page.tsx
diff --git a/app/(dev)/components-preview/page.tsx b/app/(dev)/components-preview/page.tsx
index 5bf532a..6681f22 100644
--- a/app/(dev)/components-preview/page.tsx
+++ b/app/(dev)/components-preview/page.tsx
@@ -14,27 +14,26 @@ let ruleCardIdCounter = 0;
 interface ChipData {
   id: string;
   label: string;
-  state: "Unselected" | "Selected" | "Custom";
-  palette: "Default" | "Inverse";
-  size: "S" | "M";
+  state: "unselected" | "selected" | "custom";
+  palette: "default" | "inverse";
+  size: "s" | "m";
 }
 
-// MultiSelect example component with state management
-function MultiSelectExample({ size }: { size: "S" | "M" }) {
+function MultiSelectExample({ size }: { size: "s" | "m" }) {
   const [options, setOptions] = useState<
     Array<{
       id: string;
       label: string;
-      state: "Unselected" | "Selected" | "Custom";
+      state: "unselected" | "selected" | "custom";
     }>
   >([
-    { id: "1", label: "1 member", state: "Unselected" },
-    { id: "2", label: "2-10 members", state: "Unselected" },
-    { id: "3", label: "10-24 members", state: "Unselected" },
-    { id: "4", label: "24-64 members", state: "Unselected" },
-    { id: "5", label: "64-128 members", state: "Unselected" },
-    { id: "6", label: "125-1000 members", state: "Unselected" },
-    { id: "7", label: "1000+ members", state: "Unselected" },
+    { id: "1", label: "1 member", state: "unselected" },
+    { id: "2", label: "2-10 members", state: "unselected" },
+    { id: "3", label: "10-24 members", state: "unselected" },
+    { id: "4", label: "24-64 members", state: "unselected" },
+    { id: "5", label: "64-128 members", state: "unselected" },
+    { id: "6", label: "125-1000 members", state: "unselected" },
+    { id: "7", label: "1000+ members", state: "unselected" },
   ]);
 
   const handleChipClick = (chipId: string) => {
@@ -43,7 +42,7 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
         opt.id === chipId
           ? {
               ...opt,
-              state: opt.state === "Selected" ? "Unselected" : "Selected",
+              state: opt.state === "selected" ? "unselected" : "selected",
             }
           : opt,
       ),
@@ -52,14 +51,14 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
 
   const handleAddClick = () => {
     const newId = `custom-${Date.now()}`;
-    setOptions((prev) => [...prev, { id: newId, label: "", state: "Custom" }]);
+    setOptions((prev) => [...prev, { id: newId, label: "", state: "custom" }]);
   };
 
   const handleCustomConfirm = (chipId: string, value: string) => {
     setOptions((prev) =>
       prev.map((opt) =>
         opt.id === chipId
-          ? { ...opt, label: value, state: "Selected" as const }
+          ? { ...opt, label: value, state: "selected" as const }
           : opt,
       ),
     );
@@ -72,7 +71,7 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
   return (
     <div className="space-y-[var(--spacing-scale-016)]">
       <h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)]">
-        {size === "S" ? "Small (S)" : "Medium (M)"}
+        {size === "s" ? "Small (S)" : "Medium (M)"}
       </h3>
       <MultiSelect
         label="Label"
@@ -91,12 +90,12 @@ function MultiSelectExample({ size }: { size: "S" | "M" }) {
 
 export default function ComponentsPreview() {
   const [chipStates, setChipStates] = useState<
-    Record<string, "Unselected" | "Selected">
+    Record<string, "unselected" | "selected">
   >({
-    "default-s": "Unselected",
-    "default-m": "Unselected",
-    "inverse-s": "Unselected",
-    "inverse-m": "Unselected",
+    "default-s": "unselected",
+    "default-m": "unselected",
+    "inverse-s": "unselected",
+    "inverse-m": "unselected",
   });
 
   // Manage custom chips separately
@@ -104,16 +103,16 @@ export default function ComponentsPreview() {
     {
       id: "custom-1",
       label: "",
-      state: "Custom",
-      palette: "Default",
-      size: "S",
+      state: "custom",
+      palette: "default",
+      size: "s",
     },
     {
       id: "custom-2",
       label: "",
-      state: "Custom",
-      palette: "Default",
-      size: "M",
+      state: "custom",
+      palette: "default",
+      size: "m",
     },
   ]);
 
@@ -124,7 +123,7 @@ export default function ComponentsPreview() {
       chipOptions: Array<{
         id: string;
         label: string;
-        state: "Unselected" | "Selected" | "Custom";
+        state: "unselected" | "selected" | "custom";
       }>;
       onChipClick?: (_categoryName: string, _chipId: string) => void;
       onAddClick?: (_categoryName: string) => void;
@@ -139,11 +138,11 @@ export default function ComponentsPreview() {
     {
       name: "Values",
       chipOptions: [
-        { id: "values-1", label: "Consciousness", state: "Unselected" },
-        { id: "values-2", label: "Ecology", state: "Unselected" },
-        { id: "values-3", label: "Abundance", state: "Unselected" },
-        { id: "values-4", label: "Art", state: "Unselected" },
-        { id: "values-5", label: "Decisiveness", state: "Unselected" },
+        { id: "values-1", label: "Consciousness", state: "unselected" },
+        { id: "values-2", label: "Ecology", state: "unselected" },
+        { id: "values-3", label: "Abundance", state: "unselected" },
+        { id: "values-4", label: "Art", state: "unselected" },
+        { id: "values-5", label: "Decisiveness", state: "unselected" },
       ],
       onChipClick: (categoryName: string, chipId: string) => {
         setRuleCardCategories((prev) =>
@@ -156,9 +155,9 @@ export default function ComponentsPreview() {
                       ? {
                           ...opt,
                           state:
-                            opt.state === "Selected"
-                              ? "Unselected"
-                              : "Selected",
+                            opt.state === "selected"
+                              ? "unselected"
+                              : "selected",
                         }
                       : opt,
                   ),
@@ -176,7 +175,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: [
                     ...cat.chipOptions,
-                    { id: newId, label: "", state: "Custom" },
+                    { id: newId, label: "", state: "custom" },
                   ],
                 }
               : cat,
@@ -195,7 +194,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
-                      ? { ...opt, label: value, state: "Selected" }
+                      ? { ...opt, label: value, state: "selected" }
                       : opt,
                   ),
                 }
@@ -220,7 +219,7 @@ export default function ComponentsPreview() {
     },
     {
       name: "Communication",
-      chipOptions: [{ id: "comm-1", label: "Signal", state: "Unselected" }],
+      chipOptions: [{ id: "comm-1", label: "Signal", state: "unselected" }],
       onChipClick: (categoryName: string, chipId: string) => {
         setRuleCardCategories((prev) =>
           prev.map((cat) =>
@@ -232,9 +231,9 @@ export default function ComponentsPreview() {
                       ? {
                           ...opt,
                           state:
-                            opt.state === "Selected"
-                              ? "Unselected"
-                              : "Selected",
+                            opt.state === "selected"
+                              ? "unselected"
+                              : "selected",
                         }
                       : opt,
                   ),
@@ -252,7 +251,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: [
                     ...cat.chipOptions,
-                    { id: newId, label: "", state: "Custom" },
+                    { id: newId, label: "", state: "custom" },
                   ],
                 }
               : cat,
@@ -271,7 +270,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
-                      ? { ...opt, label: value, state: "Selected" }
+                      ? { ...opt, label: value, state: "selected" }
                       : opt,
                   ),
                 }
@@ -297,7 +296,7 @@ export default function ComponentsPreview() {
     {
       name: "Membership",
       chipOptions: [
-        { id: "membership-1", label: "Open Admission", state: "Unselected" },
+        { id: "membership-1", label: "Open Admission", state: "unselected" },
       ],
       onChipClick: (categoryName: string, chipId: string) => {
         setRuleCardCategories((prev) =>
@@ -310,9 +309,9 @@ export default function ComponentsPreview() {
                       ? {
                           ...opt,
                           state:
-                            opt.state === "Selected"
-                              ? "Unselected"
-                              : "Selected",
+                            opt.state === "selected"
+                              ? "unselected"
+                              : "selected",
                         }
                       : opt,
                   ),
@@ -330,7 +329,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: [
                     ...cat.chipOptions,
-                    { id: newId, label: "", state: "Custom" },
+                    { id: newId, label: "", state: "custom" },
                   ],
                 }
               : cat,
@@ -349,7 +348,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
-                      ? { ...opt, label: value, state: "Selected" }
+                      ? { ...opt, label: value, state: "selected" }
                       : opt,
                   ),
                 }
@@ -375,8 +374,8 @@ export default function ComponentsPreview() {
     {
       name: "Decision-making",
       chipOptions: [
-        { id: "decision-1", label: "Lazy Consensus", state: "Unselected" },
-        { id: "decision-2", label: "Modified Consensus", state: "Unselected" },
+        { id: "decision-1", label: "Lazy Consensus", state: "unselected" },
+        { id: "decision-2", label: "Modified Consensus", state: "unselected" },
       ],
       onChipClick: (categoryName: string, chipId: string) => {
         setRuleCardCategories((prev) =>
@@ -389,9 +388,9 @@ export default function ComponentsPreview() {
                       ? {
                           ...opt,
                           state:
-                            opt.state === "Selected"
-                              ? "Unselected"
-                              : "Selected",
+                            opt.state === "selected"
+                              ? "unselected"
+                              : "selected",
                         }
                       : opt,
                   ),
@@ -409,7 +408,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: [
                     ...cat.chipOptions,
-                    { id: newId, label: "", state: "Custom" },
+                    { id: newId, label: "", state: "custom" },
                   ],
                 }
               : cat,
@@ -428,7 +427,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
-                      ? { ...opt, label: value, state: "Selected" }
+                      ? { ...opt, label: value, state: "selected" }
                       : opt,
                   ),
                 }
@@ -454,8 +453,8 @@ export default function ComponentsPreview() {
     {
       name: "Conflict management",
       chipOptions: [
-        { id: "conflict-1", label: "Code of Conduct", state: "Unselected" },
-        { id: "conflict-2", label: "Restorative Justice", state: "Unselected" },
+        { id: "conflict-1", label: "Code of Conduct", state: "unselected" },
+        { id: "conflict-2", label: "Restorative Justice", state: "unselected" },
       ],
       onChipClick: (categoryName: string, chipId: string) => {
         setRuleCardCategories((prev) =>
@@ -468,9 +467,9 @@ export default function ComponentsPreview() {
                       ? {
                           ...opt,
                           state:
-                            opt.state === "Selected"
-                              ? "Unselected"
-                              : "Selected",
+                            opt.state === "selected"
+                              ? "unselected"
+                              : "selected",
                         }
                       : opt,
                   ),
@@ -488,7 +487,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: [
                     ...cat.chipOptions,
-                    { id: newId, label: "", state: "Custom" },
+                    { id: newId, label: "", state: "custom" },
                   ],
                 }
               : cat,
@@ -507,7 +506,7 @@ export default function ComponentsPreview() {
                   ...cat,
                   chipOptions: cat.chipOptions.map((opt) =>
                     opt.id === chipId
-                      ? { ...opt, label: value, state: "Selected" }
+                      ? { ...opt, label: value, state: "selected" }
                       : opt,
                   ),
                 }
@@ -560,45 +559,45 @@ export default function ComponentsPreview() {
                 <Chip
                   label="Small"
                   state={chipStates["default-s"]}
-                  palette="Default"
-                  size="S"
+                  palette="default"
+                  size="s"
                   onClick={() =>
                     setChipStates((prev) => ({
                       ...prev,
                       "default-s":
-                        prev["default-s"] === "Selected"
-                          ? "Unselected"
-                          : "Selected",
+                        prev["default-s"] === "selected"
+                          ? "unselected"
+                          : "selected",
                     }))
                   }
                 />
                 <Chip
                   label="Medium"
                   state={chipStates["default-m"]}
-                  palette="Default"
-                  size="M"
+                  palette="default"
+                  size="m"
                   onClick={() =>
                     setChipStates((prev) => ({
                       ...prev,
                       "default-m":
-                        prev["default-m"] === "Selected"
-                          ? "Unselected"
-                          : "Selected",
+                        prev["default-m"] === "selected"
+                          ? "unselected"
+                          : "selected",
                     }))
                   }
                 />
                 <Chip
                   label="Disabled"
-                  state="Disabled"
-                  palette="Default"
-                  size="S"
+                  state="disabled"
+                  palette="default"
+                  size="s"
                 />
                 {customChips
-                  .filter((chip) => chip.palette === "Default")
+                  .filter((chip) => chip.palette === "default")
                   .map((chip) => (
                     <Chip
                       key={chip.id}
-                      label={chip.state === "Custom" ? "" : chip.label}
+                      label={chip.state === "custom" ? "" : chip.label}
                       state={chip.state}
                       palette={chip.palette}
                       size={chip.size}
@@ -607,7 +606,7 @@ export default function ComponentsPreview() {
                         setCustomChips((prev) =>
                           prev.map((c) =>
                             c.id === chip.id
-                              ? { ...c, label: value, state: "Selected" }
+                              ? { ...c, label: value, state: "selected" }
                               : c,
                           ),
                         );
@@ -622,8 +621,8 @@ export default function ComponentsPreview() {
                         e.stopPropagation();
                         // Only toggle if the chip is in Selected or Unselected state (not Custom)
                         if (
-                          chip.state === "Selected" ||
-                          chip.state === "Unselected"
+                          chip.state === "selected" ||
+                          chip.state === "unselected"
                         ) {
                           setCustomChips((prev) =>
                             prev.map((c) =>
@@ -631,9 +630,9 @@ export default function ComponentsPreview() {
                                 ? {
                                     ...c,
                                     state:
-                                      c.state === "Selected"
-                                        ? "Unselected"
-                                        : "Selected",
+                                      c.state === "selected"
+                                        ? "unselected"
+                                        : "selected",
                                   }
                                 : c,
                             ),
@@ -652,9 +651,9 @@ export default function ComponentsPreview() {
                       {
                         id: newId,
                         label: "",
-                        state: "Custom",
-                        palette: "Default",
-                        size: "S",
+                        state: "custom",
+                        palette: "default",
+                        size: "s",
                       },
                     ]);
                   }}
@@ -698,38 +697,38 @@ export default function ComponentsPreview() {
                   <Chip
                     label="Small"
                     state={chipStates["inverse-s"]}
-                    palette="Inverse"
-                    size="S"
+                    palette="inverse"
+                    size="s"
                     onClick={() =>
                       setChipStates((prev) => ({
                         ...prev,
                         "inverse-s":
-                          prev["inverse-s"] === "Selected"
-                            ? "Unselected"
-                            : "Selected",
+                          prev["inverse-s"] === "selected"
+                            ? "unselected"
+                            : "selected",
                       }))
                     }
                   />
                   <Chip
                     label="Medium"
                     state={chipStates["inverse-m"]}
-                    palette="Inverse"
-                    size="M"
+                    palette="inverse"
+                    size="m"
                     onClick={() =>
                       setChipStates((prev) => ({
                         ...prev,
                         "inverse-m":
-                          prev["inverse-m"] === "Selected"
-                            ? "Unselected"
-                            : "Selected",
+                          prev["inverse-m"] === "selected"
+                            ? "unselected"
+                            : "selected",
                       }))
                     }
                   />
                   <Chip
                     label="Disabled"
-                    state="Disabled"
-                    palette="Inverse"
-                    size="S"
+                    state="disabled"
+                    palette="inverse"
+                    size="s"
                   />
                 </div>
               </div>
@@ -959,10 +958,10 @@ export default function ComponentsPreview() {
           </h2>
           <div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
             {/* Small size */}
-            <MultiSelectExample size="S" />
+            <MultiSelectExample size="s" />
 
             {/* Medium size */}
-            <MultiSelectExample size="M" />
+            <MultiSelectExample size="m" />
           </div>
         </section>
       </div>
diff --git a/app/(dev)/layout.tsx b/app/(dev)/layout.tsx
new file mode 100644
index 0000000..84b2b8c
--- /dev/null
+++ b/app/(dev)/layout.tsx
@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+// Development-only previews (e.g. `/components-preview`) — no public chrome.
+// Routes here are gated by NODE_ENV checks at the page level.
+export default function DevLayout({ children }: { children: ReactNode }) {
+  return <main className="flex-1">{children}</main>;
+}
diff --git a/app/(marketing)/MarketingRuleStackSection.tsx b/app/(marketing)/_components/MarketingRuleStackSection.tsx
similarity index 66%
rename from app/(marketing)/MarketingRuleStackSection.tsx
rename to app/(marketing)/_components/MarketingRuleStackSection.tsx
index 5672fd0..fb372bb 100644
--- a/app/(marketing)/MarketingRuleStackSection.tsx
+++ b/app/(marketing)/_components/MarketingRuleStackSection.tsx
@@ -1,9 +1,9 @@
 import dynamic from "next/dynamic";
-import { listRuleTemplatesFromDb } from "../../lib/server/ruleTemplates";
-import { GOVERNANCE_TEMPLATE_HOME_SLUGS } from "../../lib/templates/governanceTemplateCatalog";
-import { gridEntriesForSlugOrderWithCatalogFallback } from "../../lib/templates/templateGridPresentation";
+import { listRuleTemplatesFromDb } from "../../../lib/server/ruleTemplates";
+import { GOVERNANCE_TEMPLATE_HOME_SLUGS } from "../../../lib/templates/governanceTemplateCatalog";
+import { gridEntriesForSlugOrderWithCatalogFallback } from "../../../lib/templates/templateGridPresentation";
 
-const RuleStack = dynamic(() => import("../components/sections/RuleStack"), {
+const RuleStack = dynamic(() => import("../../components/sections/RuleStack"), {
   loading: () => (
     <section className="py-[var(--spacing-scale-032)] min-h-[400px]" />
   ),
diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
new file mode 100644
index 0000000..bd29e83
--- /dev/null
+++ b/app/(marketing)/layout.tsx
@@ -0,0 +1,21 @@
+import dynamic from "next/dynamic";
+import type { ReactNode } from "react";
+
+// Site footer is part of the public marketing chrome only — not rendered for
+// signed-in product surfaces, admin dashboards, or dev previews. See
+// `.cursor/rules/routes.mdc` for the full chrome composition map.
+const Footer = dynamic(() => import("../components/navigation/Footer"), {
+  loading: () => (
+    <footer className="bg-[var(--color-surface-default-primary)] w-full min-h-[200px]" />
+  ),
+  ssr: true,
+});
+
+export default function MarketingLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <main className="flex-1">{children}</main>
+      <Footer />
+    </>
+  );
+}
diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx
index ce576cf..8a29944 100644
--- a/app/(marketing)/page.tsx
+++ b/app/(marketing)/page.tsx
@@ -4,7 +4,7 @@ import messages from "../../messages/en/index";
 import { getTranslation } from "../../lib/i18n/getTranslation";
 import HeroBanner from "../components/sections/HeroBanner";
 import AskOrganizer from "../components/sections/AskOrganizer";
-import { MarketingRuleStackSection } from "./MarketingRuleStackSection";
+import { MarketingRuleStackSection } from "./_components/MarketingRuleStackSection";
 
 // Code split below-the-fold components to reduce initial bundle size
 const LogoWall = dynamic(() => import("../components/sections/LogoWall"), {
diff --git a/app/components/asset/index.ts b/app/components/asset/index.tsx
similarity index 100%
rename from app/components/asset/index.ts
rename to app/components/asset/index.tsx
diff --git a/app/components/asset/logo/index.ts b/app/components/asset/logo/index.tsx
similarity index 100%
rename from app/components/asset/logo/index.ts
rename to app/components/asset/logo/index.tsx
diff --git a/app/components/buttons/Button.tsx b/app/components/buttons/Button.tsx
index 50b8c2d..ef5308c 100644
--- a/app/components/buttons/Button.tsx
+++ b/app/components/buttons/Button.tsx
@@ -5,34 +5,26 @@ import type {
   ButtonPaletteValue,
   ButtonStateValue,
 } from "../../../lib/propNormalization";
-import {
-  normalizeSize,
-  normalizeButtonType,
-  normalizeButtonPalette,
-} from "../../../lib/propNormalization";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   children: React.ReactNode;
   /**
-   * Button type (Figma prop). Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Button type (Figma prop).
    * @default "filled"
    */
   buttonType?: ButtonTypeValue;
   /**
-   * Button palette (Figma prop). Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses "Invert", codebase uses "inverse" - both are supported.
+   * Button palette (Figma prop).
    * @default "default"
    */
   palette?: ButtonPaletteValue;
   /**
-   * Button size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Button size.
    * @default "xsmall"
    */
   size?: SizeValue;
   /**
-   * Button state (Figma prop). Accepts both lowercase and PascalCase (case-insensitive).
+   * Button state (Figma prop).
    * @default "default"
    */
   state?: ButtonStateValue;
@@ -83,12 +75,9 @@ const Button = memo<ButtonProps>(
     ariaLabel,
     ...props
   }) => {
-    // Normalize props
-    const buttonType = normalizeButtonType(typeProp, "filled");
-    const buttonPalette = normalizeButtonPalette(paletteProp, "default");
-    const size = normalizeSize(sizeProp);
-    // State prop is for Figma alignment - actual state is handled by CSS pseudo-classes
-    // We accept it for API alignment but don't use it for styling (CSS handles states)
+    const buttonType = typeProp ?? "filled";
+    const buttonPalette = paletteProp ?? "default";
+    const size = sizeProp;
 
     // Map type + palette to variant string for styling (internal use only)
     const getVariantFromTypeAndPalette = (
diff --git a/app/components/cards/NumberCard.tsx b/app/components/cards/NumberCard.tsx
index 5d0e311..6772da0 100644
--- a/app/components/cards/NumberCard.tsx
+++ b/app/components/cards/NumberCard.tsx
@@ -3,80 +3,57 @@
 import { memo } from "react";
 import SectionNumber from "../sections/SectionNumber";
 
-import { normalizeNumberCardSize } from "../../../lib/propNormalization";
-
-export type NumberCardSizeValue =
-  | "Small"
-  | "Medium"
-  | "Large"
-  | "XLarge"
-  | "small"
-  | "medium"
-  | "large"
-  | "xlarge";
+export type NumberCardSizeValue = "small" | "medium" | "large" | "xlarge";
 
 interface NumberCardProps {
   number: number;
   text: string;
-  /**
-   * Number card size. Accepts both PascalCase (Figma default) and lowercase (case-insensitive).
-   * Figma uses PascalCase, codebase uses PascalCase - both are supported.
-   */
   size?: NumberCardSizeValue;
   iconShape?: string;
   iconColor?: string;
 }
 
 const NumberCard = memo<NumberCardProps>(({ number, text, size: sizeProp }) => {
-  // Base classes common to all sizes
   const baseClasses =
     "bg-[var(--color-surface-inverse-primary)] rounded-[12px] shadow-lg";
 
-  // If size prop is provided, use explicit size classes
-  // Otherwise, use responsive breakpoints for backward compatibility
   if (sizeProp) {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const size = normalizeNumberCardSize(sizeProp);
-    // Size-specific classes
+    const size = sizeProp;
     const sizeClasses = {
-      Small: "flex flex-col items-end justify-center gap-4 p-5 relative",
-      Medium: "flex flex-row items-center gap-8 p-8 relative",
-      Large:
+      small: "flex flex-col items-end justify-center gap-4 p-5 relative",
+      medium: "flex flex-row items-center gap-8 p-8 relative",
+      large:
         "flex flex-col items-start justify-end gap-[22px] h-[238px] p-8 relative",
-      XLarge:
+      xlarge:
         "flex flex-col items-start justify-end gap-[22px] h-[238px] p-8 relative",
     };
 
-    // Text size classes
     const textClasses = {
-      Small:
+      small:
         "font-bricolage-grotesque font-medium text-[24px] leading-[32px] text-[#141414]",
-      Medium:
+      medium:
         "font-bricolage-grotesque font-medium text-[24px] leading-[24px] text-[#141414]",
-      Large:
+      large:
         "font-bricolage-grotesque font-medium text-[24px] leading-[24px] text-[#141414]",
-      XLarge:
+      xlarge:
         "font-bricolage-grotesque font-medium text-[32px] leading-[32px] text-[#141414]",
     };
 
-    // Section number wrapper classes - Small doesn't need a wrapper
     const sectionNumberWrapperClasses = {
-      Small: "relative shrink-0",
-      Medium: "flex justify-start flex-shrink-0",
-      Large: "absolute top-8 right-8",
-      XLarge: "absolute top-8 right-8",
+      small: "relative shrink-0",
+      medium: "flex justify-start flex-shrink-0",
+      large: "absolute top-8 right-8",
+      xlarge: "absolute top-8 right-8",
     };
 
-    // Content container classes
     const contentClasses = {
-      Small: "min-w-full relative shrink-0",
-      Medium: "flex-1",
-      Large: "absolute bottom-8 left-8 right-16",
-      XLarge: "absolute bottom-8 left-8 right-16",
+      small: "min-w-full relative shrink-0",
+      medium: "flex-1",
+      large: "absolute bottom-8 left-8 right-16",
+      xlarge: "absolute bottom-8 left-8 right-16",
     };
 
-    // Small variant has section number as direct child, others need wrapper
-    if (size === "Small") {
+    if (size === "small") {
       return (
         <div className={`${baseClasses} ${sizeClasses[size]}`}>
           {/* Section Number - Direct child for Small */}
diff --git a/app/components/cards/RuleCard/RuleCard.container.tsx b/app/components/cards/RuleCard/RuleCard.container.tsx
index 6e55e42..6605c02 100644
--- a/app/components/cards/RuleCard/RuleCard.container.tsx
+++ b/app/components/cards/RuleCard/RuleCard.container.tsx
@@ -3,7 +3,6 @@
 import { memo } from "react";
 import { RuleCardView } from "./RuleCard.view";
 import type { RuleCardProps } from "./RuleCard.types";
-import { normalizeRuleCardSize } from "../../../../lib/propNormalization";
 
 declare global {
   interface Window {
@@ -33,8 +32,7 @@ const RuleCardContainer = memo<RuleCardProps>(
     logoAlt,
     communityInitials,
   }) => {
-    // Normalize size prop
-    const size = normalizeRuleCardSize(sizeProp, "L");
+    const size = sizeProp ?? "L";
 
     const handleClick = () => {
       // Basic analytics event tracking
diff --git a/app/components/cards/RuleCard/RuleCard.types.ts b/app/components/cards/RuleCard/RuleCard.types.ts
index c766789..8c5f67a 100644
--- a/app/components/cards/RuleCard/RuleCard.types.ts
+++ b/app/components/cards/RuleCard/RuleCard.types.ts
@@ -21,7 +21,7 @@ export interface RuleCardProps {
   className?: string;
   onClick?: () => void;
   expanded?: boolean;
-  size?: "XS" | "S" | "M" | "L" | "xs" | "s" | "m" | "l";
+  size?: "XS" | "S" | "M" | "L";
   categories?: Category[];
   logoUrl?: string;
   logoAlt?: string;
diff --git a/app/components/cards/RuleCard/RuleCard.view.tsx b/app/components/cards/RuleCard/RuleCard.view.tsx
index c58c3a9..84c0341 100644
--- a/app/components/cards/RuleCard/RuleCard.view.tsx
+++ b/app/components/cards/RuleCard/RuleCard.view.tsx
@@ -261,8 +261,8 @@ export function RuleCardView({
                   key={categoryIndex}
                   label={category.name}
                   showHelpIcon={false}
-                  size="S"
-                  palette="Inverse"
+                  size="s"
+                  palette="inverse"
                   options={category.chipOptions}
                   onChipClick={(chipId) => {
                     category.onChipClick?.(category.name, chipId);
diff --git a/app/components/cards/TemplateReviewCard/index.ts b/app/components/cards/TemplateReviewCard/index.tsx
similarity index 100%
rename from app/components/cards/TemplateReviewCard/index.ts
rename to app/components/cards/TemplateReviewCard/index.tsx
diff --git a/app/components/content/ContentContainer/ContentContainer.container.tsx b/app/components/content/ContentContainer/ContentContainer.container.tsx
index ce82012..99a8363 100644
--- a/app/components/content/ContentContainer/ContentContainer.container.tsx
+++ b/app/components/content/ContentContainer/ContentContainer.container.tsx
@@ -4,12 +4,10 @@ import { memo } from "react";
 import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import ContentContainerView from "./ContentContainer.view";
 import type { ContentContainerProps } from "./ContentContainer.types";
-import { normalizeContentContainerSize } from "../../../../lib/propNormalization";
 
 const ContentContainerContainer = memo<ContentContainerProps>(
   ({ post, width = "200px", size: sizeProp = "responsive" }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const size = normalizeContentContainerSize(sizeProp);
+    const size = sizeProp;
     // Get the corresponding icon based on the same logic as background images
     const getIconImage = (slug: string): string => {
       const icons = [
diff --git a/app/components/content/ContentContainer/ContentContainer.types.ts b/app/components/content/ContentContainer/ContentContainer.types.ts
index 7fbe41d..b341738 100644
--- a/app/components/content/ContentContainer/ContentContainer.types.ts
+++ b/app/components/content/ContentContainer/ContentContainer.types.ts
@@ -1,17 +1,12 @@
 import type { BlogPost } from "../../../../lib/content";
 
-export type ContentContainerSizeValue =
-  | "xs"
-  | "responsive"
-  | "Xs"
-  | "Responsive";
+export type ContentContainerSizeValue = "xs" | "responsive";
 
 export interface ContentContainerProps {
   post: BlogPost;
   width?: string;
   /**
-   * Content container size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Content container size.
    */
   size?: ContentContainerSizeValue;
 }
diff --git a/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx b/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx
index 646b0da..06cf0f5 100644
--- a/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx
+++ b/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.container.tsx
@@ -4,12 +4,10 @@ import { memo } from "react";
 import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import ContentThumbnailTemplateView from "./ContentThumbnailTemplate.view";
 import type { ContentThumbnailTemplateProps } from "./ContentThumbnailTemplate.types";
-import { normalizeContentThumbnailVariant } from "../../../../lib/propNormalization";
 
 const ContentThumbnailTemplateContainer = memo<ContentThumbnailTemplateProps>(
   ({ post, className = "", variant: variantProp = "vertical" }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const variant = normalizeContentThumbnailVariant(variantProp);
+    const variant = variantProp;
     // Get article-specific background image from frontmatter
     const getBackgroundImage = (
       post: ContentThumbnailTemplateProps["post"],
diff --git a/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts b/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts
index 425ee5b..f487c30 100644
--- a/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts
+++ b/app/components/content/ContentThumbnailTemplate/ContentThumbnailTemplate.types.ts
@@ -1,17 +1,12 @@
 import type { BlogPost } from "../../../../lib/content";
 
-export type ContentThumbnailTemplateVariantValue =
-  | "vertical"
-  | "horizontal"
-  | "Vertical"
-  | "Horizontal";
+export type ContentThumbnailTemplateVariantValue = "vertical" | "horizontal";
 
 export interface ContentThumbnailTemplateProps {
   post: BlogPost;
   className?: string;
   /**
-   * Content thumbnail variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Content thumbnail variant.
    */
   variant?: ContentThumbnailTemplateVariantValue;
   slugOrder?: string[];
diff --git a/app/components/controls/Checkbox/Checkbox.container.tsx b/app/components/controls/Checkbox/Checkbox.container.tsx
index df9e74d..7235392 100644
--- a/app/components/controls/Checkbox/Checkbox.container.tsx
+++ b/app/components/controls/Checkbox/Checkbox.container.tsx
@@ -4,11 +4,11 @@ import { memo } from "react";
 import { useComponentId } from "../../../hooks";
 import { CheckboxView } from "./Checkbox.view";
 import type { CheckboxProps } from "./Checkbox.types";
-import {
-  normalizeMode,
-  normalizeState,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / Checkbox" (TODO(figma)). Single boolean checkbox with
+ * optional label, supporting standard and inverse modes.
+ */
 const CheckboxContainer = memo<CheckboxProps>(
   ({
     checked = false,
@@ -24,9 +24,8 @@ const CheckboxContainer = memo<CheckboxProps>(
     ariaLabel,
     ...props
   }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const mode = normalizeMode(modeProp);
-    const state = normalizeState(stateProp);
+    const mode = modeProp;
+    const state = stateProp;
 
     const isInverse = mode === "inverse";
     const isStandard = mode === "standard";
diff --git a/app/components/controls/Checkbox/Checkbox.types.ts b/app/components/controls/Checkbox/Checkbox.types.ts
index f292633..60fa2ba 100644
--- a/app/components/controls/Checkbox/Checkbox.types.ts
+++ b/app/components/controls/Checkbox/Checkbox.types.ts
@@ -2,15 +2,9 @@ import type { ModeValue, StateValue } from "../../../../lib/propNormalization";
 
 export interface CheckboxProps {
   checked?: boolean;
-  /**
-   * Mode variant. Accepts both "standard"/"Standard" and "inverse"/"Inverse" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
-   */
+  /** Mode variant (Figma: Mode). */
   mode?: ModeValue;
-  /**
-   * Visual state. Accepts "default"/"Default", "hover"/"Hover", "focus"/"Focus" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
-   */
+  /** Visual state (Figma: State). */
   state?: StateValue;
   disabled?: boolean;
   label?: string;
diff --git a/app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx b/app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx
index ea96562..bc1b9f4 100644
--- a/app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx
+++ b/app/components/controls/CheckboxGroup/CheckboxGroup.container.tsx
@@ -3,8 +3,11 @@
 import { memo, useCallback, useId, useState } from "react";
 import { CheckboxGroupView } from "./CheckboxGroup.view";
 import type { CheckboxGroupProps } from "./CheckboxGroup.types";
-import { normalizeMode } from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / CheckboxGroup" (TODO(figma)). Group of checkboxes sharing
+ * a name that emits the array of currently selected values.
+ */
 const CheckboxGroupContainer = ({
   name,
   value,
@@ -15,8 +18,7 @@ const CheckboxGroupContainer = ({
   className = "",
   ...props
 }: CheckboxGroupProps) => {
-  // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-  const mode = normalizeMode(modeProp);
+  const mode = modeProp;
   // Generate unique ID for accessibility if not provided
   const generatedId = useId();
   const groupId = name || `checkbox-group-${generatedId}`;
diff --git a/app/components/controls/CheckboxGroup/CheckboxGroup.types.ts b/app/components/controls/CheckboxGroup/CheckboxGroup.types.ts
index 2a4b9be..c4f370a 100644
--- a/app/components/controls/CheckboxGroup/CheckboxGroup.types.ts
+++ b/app/components/controls/CheckboxGroup/CheckboxGroup.types.ts
@@ -12,8 +12,7 @@ export interface CheckboxGroupProps {
   value?: string[];
   onChange?: (_data: { value: string[] }) => void;
   /**
-   * Mode variant. Accepts both "standard"/"Standard" and "inverse"/"Inverse" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Mode variant.
    */
   mode?: ModeValue;
   disabled?: boolean;
diff --git a/app/components/controls/Chip/Chip.container.tsx b/app/components/controls/Chip/Chip.container.tsx
index 717ce32..edb36d8 100644
--- a/app/components/controls/Chip/Chip.container.tsx
+++ b/app/components/controls/Chip/Chip.container.tsx
@@ -3,18 +3,17 @@
 import { memo, useState, useEffect, useRef } from "react";
 import ChipView from "./Chip.view";
 import type { ChipProps } from "./Chip.types";
-import {
-  normalizeChipPalette,
-  normalizeChipSize,
-  normalizeChipState,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / Chip" (TODO(figma)). Compact pill-shaped tag with
+ * selectable, removable, and inline-editable (custom) states.
+ */
 const ChipContainer = memo<ChipProps>(
   ({
     label,
-    state: stateProp = "Unselected",
-    palette: paletteProp = "Default",
-    size: sizeProp = "S",
+    state: stateProp = "unselected",
+    palette: paletteProp = "default",
+    size: sizeProp = "s",
     className = "",
     disabled,
     onClick,
@@ -23,9 +22,9 @@ const ChipContainer = memo<ChipProps>(
     onClose,
     ariaLabel,
   }) => {
-    const state = normalizeChipState(stateProp);
-    const palette = normalizeChipPalette(paletteProp);
-    const size = normalizeChipSize(sizeProp);
+    const state = stateProp;
+    const palette = paletteProp;
+    const size = sizeProp;
 
     const isDisabled = disabled ?? state === "disabled";
     const isCustom = state === "custom";
diff --git a/app/components/controls/Chip/Chip.types.ts b/app/components/controls/Chip/Chip.types.ts
index 7b91bf9..d0ddc6c 100644
--- a/app/components/controls/Chip/Chip.types.ts
+++ b/app/components/controls/Chip/Chip.types.ts
@@ -7,38 +7,32 @@ import type {
 export interface ChipProps {
   label: string;
   /**
-   * Visual state of the chip, aligned with Figma:
-   * - "Unselected"
-   * - "Selected"
-   * - "Disabled"
-   * - "Custom" (editable chips with check/close buttons)
-   *
-   * Accepts both PascalCase (Figma) and lowercase values.
+   * Visual state of the chip:
+   * - "unselected"
+   * - "selected"
+   * - "disabled"
+   * - "custom" (editable chips with check/close buttons)
    */
   state?: ChipStateValue;
   /**
-   * Palette of the chip, aligned with Figma:
-   * - "Default"
-   * - "Inverse"
-   *
-   * Accepts both PascalCase (Figma) and lowercase values.
+   * Palette of the chip:
+   * - "default"
+   * - "inverse"
    */
   palette?: ChipPaletteValue;
   /**
-   * Size of the chip, aligned with Figma:
-   * - "S"
-   * - "M"
-   *
-   * Accepts both uppercase (Figma) and lowercase values.
+   * Size of the chip:
+   * - "s"
+   * - "m"
    */
   size?: ChipSizeValue;
   className?: string;
   /**
    * Whether the chip should be non-interactive. Defaults to `true` when
    * `state === "disabled"` to preserve historical behavior. Pass
-   * `disabled={false}` alongside `state="Disabled"` to render the dimmed
+   * `disabled={false}` alongside `state="disabled"` to render the dimmed
    * "disabled" visual while keeping the chip clickable — useful for toggle
-   * groups where the unselected state is the disabled Figma visual.
+   * groups where the unselected state is the disabled visual.
    */
   disabled?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
diff --git a/app/components/controls/InputWithCounter/InputWithCounter.container.tsx b/app/components/controls/InputWithCounter/InputWithCounter.container.tsx
new file mode 100644
index 0000000..7cdba29
--- /dev/null
+++ b/app/components/controls/InputWithCounter/InputWithCounter.container.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { memo } from "react";
+import { InputWithCounterView } from "./InputWithCounter.view";
+import type { InputWithCounterProps } from "./InputWithCounter.types";
+
+/**
+ * Figma: "Control / InputWithCounter" (TODO(figma)).
+ * Single-line text input with a label, optional help glyph, and a live
+ * `value.length / maxLength` counter underneath.
+ */
+const InputWithCounterContainer = memo<InputWithCounterProps>((props) => {
+  return <InputWithCounterView {...props} />;
+});
+
+InputWithCounterContainer.displayName = "InputWithCounter";
+
+export default InputWithCounterContainer;
diff --git a/app/components/controls/InputWithCounter/index.tsx b/app/components/controls/InputWithCounter/index.tsx
index 84207e0..0d1746a 100644
--- a/app/components/controls/InputWithCounter/index.tsx
+++ b/app/components/controls/InputWithCounter/index.tsx
@@ -1,2 +1,2 @@
-export { InputWithCounterView as default } from "./InputWithCounter.view";
+export { default } from "./InputWithCounter.container";
 export type { InputWithCounterProps } from "./InputWithCounter.types";
diff --git a/app/components/controls/MultiSelect/MultiSelect.container.tsx b/app/components/controls/MultiSelect/MultiSelect.container.tsx
index 159c6df..fd70a8a 100644
--- a/app/components/controls/MultiSelect/MultiSelect.container.tsx
+++ b/app/components/controls/MultiSelect/MultiSelect.container.tsx
@@ -3,17 +3,17 @@
 import { memo } from "react";
 import MultiSelectView from "./MultiSelect.view";
 import type { MultiSelectProps } from "./MultiSelect.types";
-import {
-  normalizeMultiSelectSize,
-  normalizeChipPalette,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / MultiSelect" (TODO(figma)). Labelled set of chips for
+ * picking multiple values, with an optional add button for custom entries.
+ */
 const MultiSelectContainer = memo<MultiSelectProps>(
   ({
     label,
     showHelpIcon = true,
-    size: sizeProp = "M",
-    palette: paletteProp = "Default",
+    size: sizeProp = "m",
+    palette: paletteProp = "default",
     options,
     onChipClick,
     onAddClick,
@@ -24,8 +24,8 @@ const MultiSelectContainer = memo<MultiSelectProps>(
     onCustomChipClose,
     className = "",
   }) => {
-    const size = normalizeMultiSelectSize(sizeProp);
-    const palette = normalizeChipPalette(paletteProp);
+    const size = sizeProp;
+    const palette = paletteProp;
 
     return (
       <MultiSelectView
diff --git a/app/components/controls/MultiSelect/MultiSelect.types.ts b/app/components/controls/MultiSelect/MultiSelect.types.ts
index edaec7c..873956b 100644
--- a/app/components/controls/MultiSelect/MultiSelect.types.ts
+++ b/app/components/controls/MultiSelect/MultiSelect.types.ts
@@ -9,7 +9,7 @@ export interface ChipOption {
   state?: ChipStateValue;
 }
 
-export type MultiSelectSizeValue = "S" | "M" | "s" | "m";
+export type MultiSelectSizeValue = "s" | "m";
 
 export interface MultiSelectProps {
   /**
@@ -21,13 +21,11 @@ export interface MultiSelectProps {
    */
   showHelpIcon?: boolean;
   /**
-   * Size variant: "S" (small) or "M" (medium)
-   * Accepts both uppercase (Figma) and lowercase values.
+   * Size variant: "s" (small) or "m" (medium)
    */
   size?: MultiSelectSizeValue;
   /**
-   * Palette for chips: "Default" or "Inverse"
-   * Accepts both PascalCase (Figma) and lowercase values.
+   * Palette for chips: "default" or "inverse"
    */
   palette?: ChipPaletteValue;
   /**
diff --git a/app/components/controls/MultiSelect/MultiSelect.view.tsx b/app/components/controls/MultiSelect/MultiSelect.view.tsx
index 8ab81b8..0bb1b96 100644
--- a/app/components/controls/MultiSelect/MultiSelect.view.tsx
+++ b/app/components/controls/MultiSelect/MultiSelect.view.tsx
@@ -28,7 +28,7 @@ function MultiSelectView({
     ? "gap-[var(--measures-spacing-200,8px)]"
     : "gap-[var(--measures-spacing-300,12px)]";
 
-  const chipSize = isSmall ? "S" : "M";
+  const chipSize = size;
 
   return (
     <div
@@ -41,8 +41,8 @@ function MultiSelectView({
           helpIcon={showHelpIcon}
           asterisk={false}
           helperText={false}
-          size={size === "s" ? "S" : "M"}
-          palette={palette === "inverse" ? "Inverse" : "Default"}
+          size={size}
+          palette={palette}
         />
       )}
 
@@ -53,13 +53,12 @@ function MultiSelectView({
         {options.map((option) => (
           <Chip
             key={option.id}
-            label={option.state === "Custom" ? "" : option.label}
-            state={option.state || "Unselected"}
-            palette={palette === "inverse" ? "Inverse" : "Default"}
+            label={option.state === "custom" ? "" : option.label}
+            state={option.state || "unselected"}
+            palette={palette}
             size={chipSize}
             onClick={() => {
-              // Only toggle if not in Custom state
-              if (option.state !== "Custom" && onChipClick) {
+              if (option.state !== "custom" && onChipClick) {
                 onChipClick(option.id);
               }
             }}
diff --git a/app/components/controls/RadioButton/RadioButton.container.tsx b/app/components/controls/RadioButton/RadioButton.container.tsx
index 59ec6f1..c54bad4 100644
--- a/app/components/controls/RadioButton/RadioButton.container.tsx
+++ b/app/components/controls/RadioButton/RadioButton.container.tsx
@@ -3,10 +3,6 @@
 import { memo, useCallback, useId } from "react";
 import { RadioButtonView } from "./RadioButton.view";
 import type { RadioButtonProps } from "./RadioButton.types";
-import {
-  normalizeMode,
-  normalizeState,
-} from "../../../../lib/propNormalization";
 
 const RadioButtonContainer = ({
   checked = false,
@@ -22,9 +18,8 @@ const RadioButtonContainer = ({
   ariaLabel,
   className = "",
 }: RadioButtonProps) => {
-  // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-  const mode = normalizeMode(modeProp);
-  const state = normalizeState(stateProp);
+  const mode = modeProp;
+  const state = stateProp;
 
   // If state is "selected", it means checked in Figma terms
   const normalizedState = state === "selected" || checked ? "selected" : state;
diff --git a/app/components/controls/RadioButton/RadioButton.types.ts b/app/components/controls/RadioButton/RadioButton.types.ts
index 48cc32a..c5b6f10 100644
--- a/app/components/controls/RadioButton/RadioButton.types.ts
+++ b/app/components/controls/RadioButton/RadioButton.types.ts
@@ -3,14 +3,12 @@ import type { ModeValue, StateValue } from "../../../../lib/propNormalization";
 export interface RadioButtonProps {
   checked?: boolean;
   /**
-   * Mode variant. Accepts both "standard"/"Standard" and "inverse"/"Inverse" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Mode variant.
    */
   mode?: ModeValue;
   /**
-   * Visual state. Accepts "default"/"Default", "hover"/"Hover", "focus"/"Focus", "selected"/"Selected" (case-insensitive).
+   * Visual state.
    * Note: "selected" state is represented by the `checked` prop in practice.
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
    */
   state?: StateValue;
   /**
diff --git a/app/components/controls/RadioGroup/RadioGroup.container.tsx b/app/components/controls/RadioGroup/RadioGroup.container.tsx
index 0b44466..80faa14 100644
--- a/app/components/controls/RadioGroup/RadioGroup.container.tsx
+++ b/app/components/controls/RadioGroup/RadioGroup.container.tsx
@@ -3,11 +3,11 @@
 import { memo, useCallback, useId } from "react";
 import { RadioGroupView } from "./RadioGroup.view";
 import type { RadioGroupProps } from "./RadioGroup.types";
-import {
-  normalizeMode,
-  normalizeState,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / RadioGroup" (TODO(figma)). Group of radio buttons sharing
+ * a name that emits the single currently selected value.
+ */
 const RadioGroupContainer = ({
   name,
   value,
@@ -19,14 +19,11 @@ const RadioGroupContainer = ({
   className = "",
   ...props
 }: RadioGroupProps) => {
-  // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-  const mode = normalizeMode(modeProp);
-  // Normalize state, but handle "With Subtext" separately (it's represented by options with subtext)
-  const state =
-    typeof stateProp === "string" &&
-    (stateProp.toLowerCase() === "with subtext" || stateProp === "With Subtext")
-      ? "default" // "With Subtext" is handled via RadioOption.subtext, use default state
-      : normalizeState(stateProp);
+  const mode = modeProp;
+  const state: "default" | "hover" | "focus" | "selected" =
+    stateProp === "With Subtext" || stateProp === "with subtext"
+      ? "default"
+      : stateProp;
   // Generate unique ID for accessibility if not provided
   const generatedId = useId();
   const groupId = name || `radio-group-${generatedId}`;
diff --git a/app/components/controls/RadioGroup/RadioGroup.types.ts b/app/components/controls/RadioGroup/RadioGroup.types.ts
index 2a6ef2e..7b378d2 100644
--- a/app/components/controls/RadioGroup/RadioGroup.types.ts
+++ b/app/components/controls/RadioGroup/RadioGroup.types.ts
@@ -12,14 +12,12 @@ export interface RadioGroupProps {
   value?: string;
   onChange?: (_data: { value: string }) => void;
   /**
-   * Mode variant. Accepts both "standard"/"Standard" and "inverse"/"Inverse" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Mode variant.
    */
   mode?: ModeValue;
   /**
-   * Visual state. Accepts "default"/"Default", "hover"/"Hover", "focus"/"Focus" (case-insensitive).
+   * Visual state.
    * Figma also supports "With Subtext" state, which is handled via RadioOption.subtext.
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
    */
   state?: StateValue | "With Subtext" | "with subtext";
   disabled?: boolean;
diff --git a/app/components/controls/SelectInput/SelectInput.container.tsx b/app/components/controls/SelectInput/SelectInput.container.tsx
index 9a60a6d..6106320 100644
--- a/app/components/controls/SelectInput/SelectInput.container.tsx
+++ b/app/components/controls/SelectInput/SelectInput.container.tsx
@@ -16,12 +16,11 @@ import React, {
 import { useClickOutside } from "../../../hooks";
 import { SelectInputView } from "./SelectInput.view";
 import type { SelectInputProps } from "./SelectInput.types";
-import {
-  normalizeState,
-  normalizeSmallMediumLargeSize,
-  normalizeLabelVariant,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / SelectInput" (TODO(figma)). Custom-styled select dropdown
+ * with a labelled trigger button and floating option menu.
+ */
 const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
   (
     {
@@ -53,22 +52,14 @@ const SelectInputContainer = forwardRef<HTMLButtonElement, SelectInputProps>(
     const shouldShowLabel =
       showLabel !== undefined ? showLabel : labelText !== undefined;
 
-    // Normalize state - handle "state5" as disabled
     let normalizedState = externalStateProp;
     if (normalizedState === "state5" || normalizedState === "State5") {
-      normalizedState = "default"; // Map to default, disabled prop handles the disabled state
+      normalizedState = "default";
     }
-    const externalState = normalizeState(normalizedState);
+    const externalState = normalizedState;
 
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    // Note: labelVariant and size are normalized for future use but not yet implemented in the view
-    const _labelVariant = labelVariantProp
-      ? normalizeLabelVariant(labelVariantProp)
-      : undefined;
-    const _size = sizeProp
-      ? normalizeSmallMediumLargeSize(sizeProp)
-      : undefined;
-    // Mark as intentionally unused for future implementation
+    const _labelVariant = labelVariantProp;
+    const _size = sizeProp;
     void _labelVariant;
     void _size;
 
diff --git a/app/components/controls/SelectInput/SelectInput.types.ts b/app/components/controls/SelectInput/SelectInput.types.ts
index 199846f..aa04389 100644
--- a/app/components/controls/SelectInput/SelectInput.types.ts
+++ b/app/components/controls/SelectInput/SelectInput.types.ts
@@ -7,18 +7,8 @@ export interface SelectOptionData {
 
 import type { StateValue } from "../../../../lib/propNormalization";
 
-export type SelectInputLabelVariantValue =
-  | "default"
-  | "horizontal"
-  | "Default"
-  | "Horizontal";
-export type SelectInputSizeValue =
-  | "small"
-  | "medium"
-  | "large"
-  | "Small"
-  | "Medium"
-  | "Large";
+export type SelectInputLabelVariantValue = "default" | "horizontal";
+export type SelectInputSizeValue = "small" | "medium" | "large";
 
 export interface SelectInputProps {
   id?: string;
@@ -33,18 +23,15 @@ export interface SelectInputProps {
    */
   showLabel?: boolean;
   /**
-   * Label variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Label variant.
    */
   labelVariant?: SelectInputLabelVariantValue;
   /**
-   * Select input size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Select input size.
    */
   size?: SelectInputSizeValue;
   /**
-   * Visual state. Accepts "default"/"Default", "active"/"Active", "focus"/"Focus", "error"/"Error", "state5"/"State5" (State5 = Disabled).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Visual state. "state5" maps to disabled.
    */
   state?: StateValue | "state5" | "State5";
   /**
diff --git a/app/components/controls/SelectInput/SelectInput.view.tsx b/app/components/controls/SelectInput/SelectInput.view.tsx
index 2e3bad2..8c8b786 100644
--- a/app/components/controls/SelectInput/SelectInput.view.tsx
+++ b/app/components/controls/SelectInput/SelectInput.view.tsx
@@ -1,7 +1,7 @@
 import React, { Children, type ReactNode } from "react";
 import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import SelectDropdown from "./SelectDropdown";
-import SelectOption from "./SelectOption";
+import SelectOption from "../SelectOption";
 import type { SelectOptionData } from "./SelectInput.types";
 
 export interface SelectInputViewProps {
diff --git a/app/components/controls/SelectInput/SelectOption/SelectOption.container.tsx b/app/components/controls/SelectOption/SelectOption.container.tsx
similarity index 91%
rename from app/components/controls/SelectInput/SelectOption/SelectOption.container.tsx
rename to app/components/controls/SelectOption/SelectOption.container.tsx
index c92b089..675614a 100644
--- a/app/components/controls/SelectInput/SelectOption/SelectOption.container.tsx
+++ b/app/components/controls/SelectOption/SelectOption.container.tsx
@@ -3,8 +3,11 @@
 import { forwardRef, memo, useCallback } from "react";
 import { SelectOptionView } from "./SelectOption.view";
 import type { SelectOptionProps } from "./SelectOption.types";
-import { normalizeContextMenuItemSize } from "../../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / SelectOption" (TODO(figma)). Single option row rendered
+ * inside `SelectInput`'s dropdown menu.
+ */
 const SelectOptionContainer = forwardRef<HTMLDivElement, SelectOptionProps>(
   (
     {
@@ -18,8 +21,7 @@ const SelectOptionContainer = forwardRef<HTMLDivElement, SelectOptionProps>(
     },
     ref,
   ) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const size = normalizeContextMenuItemSize(sizeProp);
+    const size = sizeProp;
     const getTextSize = (): string => {
       switch (size) {
         case "small":
diff --git a/app/components/controls/SelectInput/SelectOption/SelectOption.types.ts b/app/components/controls/SelectOption/SelectOption.types.ts
similarity index 68%
rename from app/components/controls/SelectInput/SelectOption/SelectOption.types.ts
rename to app/components/controls/SelectOption/SelectOption.types.ts
index 4004bb2..4a86be4 100644
--- a/app/components/controls/SelectInput/SelectOption/SelectOption.types.ts
+++ b/app/components/controls/SelectOption/SelectOption.types.ts
@@ -1,10 +1,4 @@
-export type SelectOptionSizeValue =
-  | "small"
-  | "medium"
-  | "large"
-  | "Small"
-  | "Medium"
-  | "Large";
+export type SelectOptionSizeValue = "small" | "medium" | "large";
 
 export interface SelectOptionProps {
   children?: React.ReactNode;
@@ -15,8 +9,7 @@ export interface SelectOptionProps {
     _e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
   ) => void;
   /**
-   * Select option size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Select option size.
    */
   size?: SelectOptionSizeValue;
 }
diff --git a/app/components/controls/SelectInput/SelectOption/SelectOption.view.tsx b/app/components/controls/SelectOption/SelectOption.view.tsx
similarity index 100%
rename from app/components/controls/SelectInput/SelectOption/SelectOption.view.tsx
rename to app/components/controls/SelectOption/SelectOption.view.tsx
diff --git a/app/components/controls/SelectInput/SelectOption/index.tsx b/app/components/controls/SelectOption/index.tsx
similarity index 100%
rename from app/components/controls/SelectInput/SelectOption/index.tsx
rename to app/components/controls/SelectOption/index.tsx
diff --git a/app/components/controls/Switch/Switch.container.tsx b/app/components/controls/Switch/Switch.container.tsx
index 2331b2b..5019501 100644
--- a/app/components/controls/Switch/Switch.container.tsx
+++ b/app/components/controls/Switch/Switch.container.tsx
@@ -3,8 +3,11 @@
 import { memo, useCallback, useId, forwardRef } from "react";
 import { SwitchView } from "./Switch.view";
 import type { SwitchProps } from "./Switch.types";
-import { normalizeState } from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / Switch" (TODO(figma)). Animated on/off toggle switch,
+ * optionally paired with a trailing text label.
+ */
 const SwitchContainer = memo(
   forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
     const {
@@ -18,8 +21,7 @@ const SwitchContainer = memo(
       ...rest
     } = props;
 
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const state = normalizeState(stateProp);
+    const state = stateProp;
 
     const switchId = useId();
 
diff --git a/app/components/controls/Switch/Switch.types.ts b/app/components/controls/Switch/Switch.types.ts
index 208a399..167defd 100644
--- a/app/components/controls/Switch/Switch.types.ts
+++ b/app/components/controls/Switch/Switch.types.ts
@@ -17,8 +17,7 @@ export interface SwitchProps extends Omit<
   onFocus?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
   onBlur?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
   /**
-   * Visual state. Accepts "default"/"Default", "hover"/"Hover", "focus"/"Focus" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Visual state.
    */
   state?: StateValue;
   /**
diff --git a/app/components/controls/TextArea/TextArea.container.tsx b/app/components/controls/TextArea/TextArea.container.tsx
index 45b1105..f72a6eb 100644
--- a/app/components/controls/TextArea/TextArea.container.tsx
+++ b/app/components/controls/TextArea/TextArea.container.tsx
@@ -4,13 +4,11 @@ import { memo, forwardRef } from "react";
 import { useComponentId, useFormField } from "../../../hooks";
 import { TextAreaView } from "./TextArea.view";
 import type { TextAreaProps } from "./TextArea.types";
-import {
-  normalizeInputState,
-  normalizeSmallMediumLargeSize,
-  normalizeLabelVariant,
-  normalizeTextAreaAppearance,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / TextArea" (TODO(figma)). Multi-line text input with size
+ * variants, an embedded appearance, and an optional label and help glyph.
+ */
 const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
   (
     {
@@ -37,11 +35,10 @@ const TextAreaContainer = forwardRef<HTMLTextAreaElement, TextAreaProps>(
     },
     ref,
   ) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const size = normalizeSmallMediumLargeSize(sizeProp);
-    const labelVariant = normalizeLabelVariant(labelVariantProp);
-    const state = normalizeInputState(stateProp);
-    const appearance = normalizeTextAreaAppearance(appearanceProp);
+    const size = sizeProp;
+    const labelVariant = labelVariantProp;
+    const state = stateProp;
+    const appearance = appearanceProp;
     // Generate unique ID for accessibility if not provided
     const { id: textareaId, labelId } = useComponentId("textarea", id);
 
diff --git a/app/components/controls/TextArea/TextArea.types.ts b/app/components/controls/TextArea/TextArea.types.ts
index 0997525..b6981a5 100644
--- a/app/components/controls/TextArea/TextArea.types.ts
+++ b/app/components/controls/TextArea/TextArea.types.ts
@@ -1,41 +1,24 @@
 import type { InputStateValue } from "../../../../lib/propNormalization";
 
-export type TextAreaSizeValue =
-  | "small"
-  | "medium"
-  | "large"
-  | "Small"
-  | "Medium"
-  | "Large";
-export type TextAreaLabelVariantValue =
-  | "default"
-  | "horizontal"
-  | "Default"
-  | "Horizontal";
+export type TextAreaSizeValue = "small" | "medium" | "large";
+export type TextAreaLabelVariantValue = "default" | "horizontal";
 
-export type TextAreaAppearanceValue =
-  | "default"
-  | "embedded"
-  | "Default"
-  | "Embedded";
+export type TextAreaAppearanceValue = "default" | "embedded";
 
 export interface TextAreaProps extends Omit<
   React.TextareaHTMLAttributes<HTMLTextAreaElement>,
   "size" | "onChange" | "onFocus" | "onBlur"
 > {
   /**
-   * Text area size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Text area size.
    */
   size?: TextAreaSizeValue;
   /**
-   * Label variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Label variant.
    */
   labelVariant?: TextAreaLabelVariantValue;
   /**
-   * Visual state. Accepts "default"/"Default", "active"/"Active", "hover"/"Hover", "focus"/"Focus" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Visual state.
    */
   state?: InputStateValue;
   disabled?: boolean;
diff --git a/app/components/controls/TextInput/TextInput.container.tsx b/app/components/controls/TextInput/TextInput.container.tsx
index ae3e854..cc1ca9b 100644
--- a/app/components/controls/TextInput/TextInput.container.tsx
+++ b/app/components/controls/TextInput/TextInput.container.tsx
@@ -4,11 +4,11 @@ import { memo, forwardRef, useState, useRef } from "react";
 import { useComponentId, useFormField } from "../../../hooks";
 import { TextInputView } from "./TextInput.view";
 import type { TextInputProps } from "./TextInput.types";
-import {
-  normalizeInputState,
-  normalizeTextInputSize,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / TextInput" (TODO(figma)). Single-line text input with size
+ * variants and managed default/active/focus/error states.
+ */
 const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
   (
     {
@@ -33,9 +33,8 @@ const TextInputContainer = forwardRef<HTMLInputElement, TextInputProps>(
     },
     ref,
   ) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const externalState = normalizeInputState(externalStateProp);
-    const inputSize = normalizeTextInputSize(inputSizeProp);
+    const externalState = externalStateProp;
+    const inputSize = inputSizeProp;
 
     // Generate unique ID for accessibility if not provided
     const { id: inputId, labelId } = useComponentId("text-input", id);
diff --git a/app/components/controls/TextInput/TextInput.types.ts b/app/components/controls/TextInput/TextInput.types.ts
index b98e653..acbcb18 100644
--- a/app/components/controls/TextInput/TextInput.types.ts
+++ b/app/components/controls/TextInput/TextInput.types.ts
@@ -1,19 +1,17 @@
 import type { InputStateValue } from "../../../../lib/propNormalization";
 
-export type TextInputSizeValue = "small" | "medium" | "Small" | "Medium";
+export type TextInputSizeValue = "small" | "medium";
 
 export interface TextInputProps extends Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
   "size" | "onChange" | "onFocus" | "onBlur"
 > {
   /**
-   * Visual state. Accepts "default"/"Default", "active"/"Active", "hover"/"Hover", "focus"/"Focus" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Visual state.
    */
   state?: InputStateValue;
   /**
-   * Size variant. Accepts both PascalCase (Figma) and lowercase (codebase).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Size variant.
    * @default "medium"
    */
   inputSize?: TextInputSizeValue;
diff --git a/app/components/controls/Toggle/Toggle.container.tsx b/app/components/controls/Toggle/Toggle.container.tsx
index d6b7fd4..6186b1e 100644
--- a/app/components/controls/Toggle/Toggle.container.tsx
+++ b/app/components/controls/Toggle/Toggle.container.tsx
@@ -3,8 +3,11 @@
 import { memo, useCallback, useId, forwardRef } from "react";
 import { ToggleView } from "./Toggle.view";
 import type { ToggleProps } from "./Toggle.types";
-import { normalizeState } from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / Toggle" (TODO(figma)). Pill-shaped toggle button with
+ * checked/unchecked states and optional leading icon and text.
+ */
 const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(
   (
     {
@@ -24,8 +27,7 @@ const ToggleContainer = forwardRef<HTMLButtonElement, ToggleProps>(
     },
     ref,
   ) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const state = normalizeState(stateProp);
+    const state = stateProp;
     const toggleId = useId();
     const labelId = useId();
 
diff --git a/app/components/controls/Toggle/Toggle.types.ts b/app/components/controls/Toggle/Toggle.types.ts
index 9dd5517..c5a1c29 100644
--- a/app/components/controls/Toggle/Toggle.types.ts
+++ b/app/components/controls/Toggle/Toggle.types.ts
@@ -15,8 +15,7 @@ export interface ToggleProps extends Omit<
   onBlur?: (_e: React.FocusEvent<HTMLButtonElement>) => void;
   disabled?: boolean;
   /**
-   * Visual state. Accepts "default"/"Default", "hover"/"Hover", "focus"/"Focus" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Visual state.
    */
   state?: StateValue;
   showIcon?: boolean;
diff --git a/app/components/controls/ToggleGroup/ToggleGroup.container.tsx b/app/components/controls/ToggleGroup/ToggleGroup.container.tsx
index 5a07bd2..9281a40 100644
--- a/app/components/controls/ToggleGroup/ToggleGroup.container.tsx
+++ b/app/components/controls/ToggleGroup/ToggleGroup.container.tsx
@@ -3,11 +3,11 @@
 import { memo, useCallback, useId, forwardRef } from "react";
 import { ToggleGroupView } from "./ToggleGroup.view";
 import type { ToggleGroupProps } from "./ToggleGroup.types";
-import {
-  normalizeToggleState,
-  normalizeToggleGroupPosition,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Control / ToggleGroup" (TODO(figma)). Segmented row of `Toggle`
+ * buttons whose corner radii are shared based on position (left/middle/right).
+ */
 const ToggleGroupContainer = memo(
   forwardRef<HTMLButtonElement, ToggleGroupProps>((props, _ref) => {
     const {
@@ -23,9 +23,8 @@ const ToggleGroupContainer = memo(
       ...rest
     } = props;
 
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const position = normalizeToggleGroupPosition(positionProp);
-    const state = normalizeToggleState(stateProp);
+    const position = positionProp;
+    const state = stateProp;
 
     const groupId = useId();
 
diff --git a/app/components/controls/ToggleGroup/ToggleGroup.types.ts b/app/components/controls/ToggleGroup/ToggleGroup.types.ts
index d646a94..0d6c424 100644
--- a/app/components/controls/ToggleGroup/ToggleGroup.types.ts
+++ b/app/components/controls/ToggleGroup/ToggleGroup.types.ts
@@ -1,12 +1,6 @@
 import type { StateValue } from "../../../../lib/propNormalization";
 
-export type ToggleGroupPositionValue =
-  | "left"
-  | "middle"
-  | "right"
-  | "Left"
-  | "Middle"
-  | "Right";
+export type ToggleGroupPositionValue = "left" | "middle" | "right";
 
 export interface ToggleGroupProps extends Omit<
   React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -15,15 +9,13 @@ export interface ToggleGroupProps extends Omit<
   children?: React.ReactNode;
   className?: string;
   /**
-   * Toggle group position. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Toggle group position.
    */
   position?: ToggleGroupPositionValue;
   /**
-   * Visual state. Accepts "default"/"Default", "hover"/"Hover", "focus"/"Focus", "selected"/"Selected" (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Visual state.
    */
-  state?: StateValue | "selected" | "Selected";
+  state?: StateValue | "selected";
   showText?: boolean;
   ariaLabel?: string;
   onChange?: (
diff --git a/app/components/controls/Upload/Upload.container.tsx b/app/components/controls/Upload/Upload.container.tsx
index 9b73ef2..78b8f2b 100644
--- a/app/components/controls/Upload/Upload.container.tsx
+++ b/app/components/controls/Upload/Upload.container.tsx
@@ -4,6 +4,10 @@ import { memo } from "react";
 import UploadView from "./Upload.view";
 import type { UploadProps } from "./Upload.types";
 
+/**
+ * Figma: "Control / Upload" (TODO(figma)). Click-to-upload tile with a label
+ * and hint text used to add an image from the user's device.
+ */
 const UploadContainer = memo<UploadProps>(
   ({
     active = true,
diff --git a/app/components/controls/Upload/Upload.view.tsx b/app/components/controls/Upload/Upload.view.tsx
index 8409881..eb4cbaf 100644
--- a/app/components/controls/Upload/Upload.view.tsx
+++ b/app/components/controls/Upload/Upload.view.tsx
@@ -44,8 +44,8 @@ function UploadView({
           helpIcon={showHelpIcon}
           asterisk={false}
           helperText={false}
-          size="S"
-          palette="Default"
+          size="s"
+          palette="default"
         />
       )}
 
diff --git a/app/components/icons/Avatar.tsx b/app/components/icons/Avatar.tsx
index 3a85066..35ae5c1 100644
--- a/app/components/icons/Avatar.tsx
+++ b/app/components/icons/Avatar.tsx
@@ -1,31 +1,17 @@
 import { memo } from "react";
-import { normalizeSize } from "../../../lib/propNormalization";
 
-export type AvatarSizeValue =
-  | "small"
-  | "medium"
-  | "large"
-  | "xlarge"
-  | "Small"
-  | "Medium"
-  | "Large"
-  | "XLarge";
+export type AvatarSizeValue = "small" | "medium" | "large" | "xlarge";
 
 interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
   src: string;
   alt: string;
-  /**
-   * Avatar size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
-   */
   size?: AvatarSizeValue;
   className?: string;
 }
 
 const Avatar = memo<AvatarProps>(
   ({ src, alt, size: sizeProp = "small", className = "", ...props }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const size = normalizeSize(sizeProp, "small");
+    const size = sizeProp;
     const sizeStyles: Record<string, string> = {
       small:
         "w-[var(--spacing-scale-016)] h-[var(--spacing-scale-016)] border-[1.5px] border-[#FFFFFF4D] border-solid",
diff --git a/app/components/localization/LanguageSwitcher/index.ts b/app/components/localization/LanguageSwitcher/index.tsx
similarity index 100%
rename from app/components/localization/LanguageSwitcher/index.ts
rename to app/components/localization/LanguageSwitcher/index.tsx
diff --git a/app/components/modals/Alert/Alert.container.tsx b/app/components/modals/Alert/Alert.container.tsx
index e01624a..cdd678d 100644
--- a/app/components/modals/Alert/Alert.container.tsx
+++ b/app/components/modals/Alert/Alert.container.tsx
@@ -3,10 +3,6 @@
 import { memo } from "react";
 import { AlertView } from "./Alert.view";
 import type { AlertProps } from "./Alert.types";
-import {
-  normalizeAlertStatus,
-  normalizeAlertType,
-} from "../../../../lib/propNormalization";
 
 const AlertContainer = memo<AlertProps>(
   ({
@@ -19,9 +15,8 @@ const AlertContainer = memo<AlertProps>(
     onClose,
     className = "",
   }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const status = normalizeAlertStatus(statusProp);
-    const type = normalizeAlertType(typeProp);
+    const status = statusProp;
+    const type = typeProp;
     // Determine background and border colors based on status and type
     const getStatusStyles = () => {
       switch (status) {
diff --git a/app/components/modals/Alert/Alert.types.ts b/app/components/modals/Alert/Alert.types.ts
index e43ff15..e01a8d2 100644
--- a/app/components/modals/Alert/Alert.types.ts
+++ b/app/components/modals/Alert/Alert.types.ts
@@ -1,26 +1,16 @@
-export type AlertStatusValue =
-  | "default"
-  | "positive"
-  | "warning"
-  | "danger"
-  | "Default"
-  | "Positive"
-  | "Warning"
-  | "Danger";
+export type AlertStatusValue = "default" | "positive" | "warning" | "danger";
 
-export type AlertTypeValue = "toast" | "banner" | "Toast" | "Banner";
+export type AlertTypeValue = "toast" | "banner";
 
 export interface AlertProps {
   title: string;
   description?: string;
   /**
-   * Alert status. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Alert status.
    */
   status?: AlertStatusValue;
   /**
-   * Alert type. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Alert type.
    */
   type?: AlertTypeValue;
   /**
diff --git a/app/components/ContextMenu/ContextMenu.tsx b/app/components/modals/ContextMenu/ContextMenu.tsx
similarity index 100%
rename from app/components/ContextMenu/ContextMenu.tsx
rename to app/components/modals/ContextMenu/ContextMenu.tsx
diff --git a/app/components/ContextMenu/ContextMenuDivider.tsx b/app/components/modals/ContextMenu/ContextMenuDivider.tsx
similarity index 100%
rename from app/components/ContextMenu/ContextMenuDivider.tsx
rename to app/components/modals/ContextMenu/ContextMenuDivider.tsx
diff --git a/app/components/ContextMenu/ContextMenuSection.tsx b/app/components/modals/ContextMenu/ContextMenuSection.tsx
similarity index 100%
rename from app/components/ContextMenu/ContextMenuSection.tsx
rename to app/components/modals/ContextMenu/ContextMenuSection.tsx
diff --git a/app/components/ContextMenu/ContextMenuItem/ContextMenuItem.container.tsx b/app/components/modals/ContextMenuItem/ContextMenuItem.container.tsx
similarity index 91%
rename from app/components/ContextMenu/ContextMenuItem/ContextMenuItem.container.tsx
rename to app/components/modals/ContextMenuItem/ContextMenuItem.container.tsx
index 23beff6..4d50ba5 100644
--- a/app/components/ContextMenu/ContextMenuItem/ContextMenuItem.container.tsx
+++ b/app/components/modals/ContextMenuItem/ContextMenuItem.container.tsx
@@ -3,7 +3,6 @@
 import { forwardRef, memo, useCallback } from "react";
 import { ContextMenuItemView } from "./ContextMenuItem.view";
 import type { ContextMenuItemProps } from "./ContextMenuItem.types";
-import { normalizeContextMenuItemSize } from "../../../../lib/propNormalization";
 
 const ContextMenuItemContainer = forwardRef<
   HTMLDivElement,
@@ -22,8 +21,7 @@ const ContextMenuItemContainer = forwardRef<
     },
     ref,
   ) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const size = normalizeContextMenuItemSize(sizeProp);
+    const size = sizeProp;
     const getTextSize = (): string => {
       switch (size) {
         case "small":
diff --git a/app/components/ContextMenu/ContextMenuItem/ContextMenuItem.types.ts b/app/components/modals/ContextMenuItem/ContextMenuItem.types.ts
similarity index 71%
rename from app/components/ContextMenu/ContextMenuItem/ContextMenuItem.types.ts
rename to app/components/modals/ContextMenuItem/ContextMenuItem.types.ts
index c78a934..27aadbe 100644
--- a/app/components/ContextMenu/ContextMenuItem/ContextMenuItem.types.ts
+++ b/app/components/modals/ContextMenuItem/ContextMenuItem.types.ts
@@ -1,10 +1,4 @@
-export type ContextMenuItemSizeValue =
-  | "small"
-  | "medium"
-  | "large"
-  | "Small"
-  | "Medium"
-  | "Large";
+export type ContextMenuItemSizeValue = "small" | "medium" | "large";
 
 export interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
@@ -16,8 +10,7 @@ export interface ContextMenuItemProps extends React.HTMLAttributes<HTMLDivElemen
     _e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
   ) => void;
   /**
-   * Context menu item size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Context menu item size.
    */
   size?: ContextMenuItemSizeValue;
 }
diff --git a/app/components/ContextMenu/ContextMenuItem/ContextMenuItem.view.tsx b/app/components/modals/ContextMenuItem/ContextMenuItem.view.tsx
similarity index 100%
rename from app/components/ContextMenu/ContextMenuItem/ContextMenuItem.view.tsx
rename to app/components/modals/ContextMenuItem/ContextMenuItem.view.tsx
diff --git a/app/components/ContextMenu/ContextMenuItem/index.tsx b/app/components/modals/ContextMenuItem/index.tsx
similarity index 100%
rename from app/components/ContextMenu/ContextMenuItem/index.tsx
rename to app/components/modals/ContextMenuItem/index.tsx
diff --git a/app/components/modals/Login/LoginForm.tsx b/app/components/modals/Login/LoginForm.tsx
index b79e3b8..2276c84 100644
--- a/app/components/modals/Login/LoginForm.tsx
+++ b/app/components/modals/Login/LoginForm.tsx
@@ -9,7 +9,7 @@ import TextInput from "../../controls/TextInput";
 import ContentLockup from "../../type/ContentLockup";
 import { requestMagicLink } from "../../../../lib/create/api";
 import { safeInternalPath } from "../../../../lib/safeInternalPath";
-import { setTransferPendingFlag } from "../../../create/utils/anonymousDraftStorage";
+import { setTransferPendingFlag } from "../../../(app)/create/utils/anonymousDraftStorage";
 
 /** Mail icon for login modal (inline SVG; same pattern as InfoMessageBox ExclamationIconInline). */
 function MailIconInline() {
diff --git a/app/components/modals/Tooltip/Tooltip.container.tsx b/app/components/modals/Tooltip/Tooltip.container.tsx
index 4f278f3..1781f41 100644
--- a/app/components/modals/Tooltip/Tooltip.container.tsx
+++ b/app/components/modals/Tooltip/Tooltip.container.tsx
@@ -3,7 +3,6 @@
 import { memo, useState } from "react";
 import { TooltipView } from "./Tooltip.view";
 import type { TooltipProps } from "./Tooltip.types";
-import { normalizeTooltipPosition } from "../../../../lib/propNormalization";
 
 const TooltipContainer = memo<TooltipProps>(
   ({
@@ -13,8 +12,7 @@ const TooltipContainer = memo<TooltipProps>(
     className = "",
     disabled = false,
   }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const position = normalizeTooltipPosition(positionProp);
+    const position = positionProp;
     const [isVisible, setIsVisible] = useState(false);
 
     if (disabled) {
diff --git a/app/components/modals/Tooltip/Tooltip.types.ts b/app/components/modals/Tooltip/Tooltip.types.ts
index fc778ba..463b6b1 100644
--- a/app/components/modals/Tooltip/Tooltip.types.ts
+++ b/app/components/modals/Tooltip/Tooltip.types.ts
@@ -1,11 +1,10 @@
-export type TooltipPositionValue = "top" | "bottom" | "Top" | "Bottom";
+export type TooltipPositionValue = "top" | "bottom";
 
 export interface TooltipProps {
   children: React.ReactNode;
   text: string;
   /**
-   * Tooltip position. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Tooltip position.
    */
   position?: TooltipPositionValue;
   className?: string;
diff --git a/app/components/navigation/ConditionalFooter.tsx b/app/components/navigation/ConditionalFooter.tsx
deleted file mode 100644
index 4347e46..0000000
--- a/app/components/navigation/ConditionalFooter.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import { usePathname } from "next/navigation";
-import dynamic from "next/dynamic";
-
-// Code split Footer - below the fold, can be lazy loaded
-const Footer = dynamic(() => import("./Footer"), {
-  loading: () => (
-    <footer className="bg-[var(--color-surface-default-primary)] w-full min-h-[200px]" />
-  ),
-  ssr: true, // Keep SSR for SEO
-});
-
-/**
- * Conditionally renders Footer based on pathname.
- * Hides footer for /create/* and /login (full-screen flows; no site chrome).
- */
-const ConditionalFooter = memo(() => {
-  const pathname = usePathname();
-  const isCreateFlow = pathname?.startsWith("/create");
-  const isLogin = pathname === "/login";
-
-  if (isCreateFlow || isLogin) {
-    return null;
-  }
-
-  return <Footer />;
-});
-
-ConditionalFooter.displayName = "ConditionalFooter";
-
-export default ConditionalFooter;
diff --git a/app/components/navigation/MenuBar.tsx b/app/components/navigation/MenuBar.tsx
index 803bfc0..50c7cbe 100644
--- a/app/components/navigation/MenuBar.tsx
+++ b/app/components/navigation/MenuBar.tsx
@@ -2,7 +2,6 @@
 
 import { memo } from "react";
 import { useTranslation } from "../../contexts/MessagesContext";
-import { normalizeMenuBarSize } from "../../../lib/propNormalization";
 
 export type MenuBarSizeValue =
   | "X Small"
@@ -23,7 +22,7 @@ interface MenuBarProps extends React.HTMLAttributes<HTMLElement> {
 
 const MenuBar = memo<MenuBarProps>(
   ({ children, className = "", size: sizeProp = "X Small", ...props }) => {
-    const size = normalizeMenuBarSize(sizeProp);
+    const size = sizeProp ?? "X Small";
     const t = useTranslation("menuBar");
 
     // Size styles based on Figma specifications
diff --git a/app/components/navigation/MenuBarItem/MenuBarItem.container.tsx b/app/components/navigation/MenuBarItem/MenuBarItem.container.tsx
index c2d6be7..cd232db 100644
--- a/app/components/navigation/MenuBarItem/MenuBarItem.container.tsx
+++ b/app/components/navigation/MenuBarItem/MenuBarItem.container.tsx
@@ -3,11 +3,6 @@
 import { memo } from "react";
 import MenuBarItemView from "./MenuBarItem.view";
 import type { MenuBarItemProps } from "./MenuBarItem.types";
-import {
-  normalizeMenuBarItemState,
-  normalizeMenuBarItemMode,
-  normalizeMenuBarItemSize,
-} from "../../../../lib/propNormalization";
 
 const MenuBarItemContainer = memo<MenuBarItemProps>(
   ({
@@ -24,9 +19,9 @@ const MenuBarItemContainer = memo<MenuBarItemProps>(
     ariaLabel,
     ...props
   }) => {
-    const state = normalizeMenuBarItemState(stateProp, "default");
-    const mode = normalizeMenuBarItemMode(modeProp, "default");
-    const size = normalizeMenuBarItemSize(sizeProp, "X Small");
+    const state = stateProp ?? "default";
+    const mode = modeProp ?? "default";
+    const size = sizeProp ?? "X Small";
 
     // Size styles based on Figma specifications
     const sizeStyles: Record<
diff --git a/app/components/navigation/NavigationItem/NavigationItem.container.tsx b/app/components/navigation/NavigationItem/NavigationItem.container.tsx
index 0e15c57..fdf7aa2 100644
--- a/app/components/navigation/NavigationItem/NavigationItem.container.tsx
+++ b/app/components/navigation/NavigationItem/NavigationItem.container.tsx
@@ -3,10 +3,6 @@
 import { memo } from "react";
 import NavigationItemView from "./NavigationItem.view";
 import type { NavigationItemProps } from "./NavigationItem.types";
-import {
-  normalizeNavigationItemVariant,
-  normalizeNavigationItemSize,
-} from "../../../../lib/propNormalization";
 
 const NavigationItemContainer = memo<NavigationItemProps>(
   ({
@@ -19,9 +15,8 @@ const NavigationItemContainer = memo<NavigationItemProps>(
     isActive = false,
     ...props
   }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const variant = normalizeNavigationItemVariant(variantProp);
-    const size = normalizeNavigationItemSize(sizeProp);
+    const variant = variantProp;
+    const size = sizeProp;
     // Variant styles
     const variantStyles: Record<string, string> = {
       default:
diff --git a/app/components/navigation/NavigationItem/NavigationItem.types.ts b/app/components/navigation/NavigationItem/NavigationItem.types.ts
index e99e2cd..1f39227 100644
--- a/app/components/navigation/NavigationItem/NavigationItem.types.ts
+++ b/app/components/navigation/NavigationItem/NavigationItem.types.ts
@@ -1,9 +1,5 @@
-export type NavigationItemVariantValue = "default" | "Default";
-export type NavigationItemSizeValue =
-  | "default"
-  | "xsmall"
-  | "Default"
-  | "XSmall";
+export type NavigationItemVariantValue = "default";
+export type NavigationItemSizeValue = "default" | "xsmall";
 
 export interface NavigationItemProps extends Omit<
   React.AnchorHTMLAttributes<HTMLAnchorElement>,
@@ -12,13 +8,11 @@ export interface NavigationItemProps extends Omit<
   href?: string;
   children?: React.ReactNode;
   /**
-   * Navigation item variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Navigation item variant.
    */
   variant?: NavigationItemVariantValue;
   /**
-   * Navigation item size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Navigation item size.
    */
   size?: NavigationItemSizeValue;
   className?: string;
diff --git a/app/components/progress/ProportionBar/ProportionBar.container.tsx b/app/components/progress/ProportionBar/ProportionBar.container.tsx
index 62cd255..a8d085e 100644
--- a/app/components/progress/ProportionBar/ProportionBar.container.tsx
+++ b/app/components/progress/ProportionBar/ProportionBar.container.tsx
@@ -1,13 +1,12 @@
 "use client";
 
 import { memo } from "react";
-import { normalizeProportionBarVariant } from "../../../../lib/propNormalization";
 import { ProportionBarView } from "./ProportionBar.view";
 import type { ProportionBarProps } from "./ProportionBar.types";
 
 const ProportionBarContainer = memo<ProportionBarProps>(
   ({ progress = "3-2", className = "", variant: variantProp }) => {
-    const variant = normalizeProportionBarVariant(variantProp);
+    const variant = variantProp ?? "default";
     const barClasses = `h-[8px] relative w-full`;
 
     return (
diff --git a/app/components/progress/ProportionBar/ProportionBar.types.ts b/app/components/progress/ProportionBar/ProportionBar.types.ts
index 970e708..c36b6da 100644
--- a/app/components/progress/ProportionBar/ProportionBar.types.ts
+++ b/app/components/progress/ProportionBar/ProportionBar.types.ts
@@ -22,8 +22,8 @@ export interface ProportionBarProps {
   className?: string;
   /**
    * Kept for backwards compatibility. Both `default` and `segmented` render the
-   * same fill geometry (square leading edges, matching Figma). Future variants
-   * can differentiate here without API changes.
+   * same fill geometry. Future variants can differentiate here without API
+   * changes.
    */
   variant?: ProportionBarVariant;
 }
diff --git a/app/components/sections/AskOrganizer/AskOrganizer.container.tsx b/app/components/sections/AskOrganizer/AskOrganizer.container.tsx
index 33c703b..a1bc8d6 100644
--- a/app/components/sections/AskOrganizer/AskOrganizer.container.tsx
+++ b/app/components/sections/AskOrganizer/AskOrganizer.container.tsx
@@ -8,7 +8,6 @@ import type {
   AskOrganizerProps,
   AskOrganizerVariant,
 } from "./AskOrganizer.types";
-import { normalizeAskOrganizerVariant } from "../../../../lib/propNormalization";
 
 const VARIANT_STYLES: Record<
   "centered" | "left-aligned" | "compact" | "inverse",
@@ -43,10 +42,7 @@ const AskOrganizerContainer = memo<AskOrganizerProps>(
     variant: variantProp = "centered",
     onContactClick,
   }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const variant = normalizeAskOrganizerVariant(
-      variantProp,
-    ) as AskOrganizerVariant;
+    const variant = variantProp;
     const t = useTranslation();
     const defaultButtonText = buttonText ?? t("askOrganizer.buttonText");
     const defaultButtonHref = buttonHref ?? t("askOrganizer.buttonHref");
diff --git a/app/components/sections/AskOrganizer/AskOrganizer.types.ts b/app/components/sections/AskOrganizer/AskOrganizer.types.ts
index ed425f2..29c2bb7 100644
--- a/app/components/sections/AskOrganizer/AskOrganizer.types.ts
+++ b/app/components/sections/AskOrganizer/AskOrganizer.types.ts
@@ -4,11 +4,7 @@ export type AskOrganizerVariant =
   | "centered"
   | "left-aligned"
   | "compact"
-  | "inverse"
-  | "Centered"
-  | "Left-Aligned"
-  | "Compact"
-  | "Inverse";
+  | "inverse";
 
 export interface AskOrganizerProps {
   title?: string;
@@ -18,8 +14,7 @@ export interface AskOrganizerProps {
   buttonHref?: string;
   className?: string;
   /**
-   * Ask organizer variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Ask organizer variant.
    */
   variant?: AskOrganizerVariant;
   onContactClick?: (_data: {
diff --git a/app/components/sections/GovernanceTemplateGrid/index.ts b/app/components/sections/GovernanceTemplateGrid/index.tsx
similarity index 100%
rename from app/components/sections/GovernanceTemplateGrid/index.ts
rename to app/components/sections/GovernanceTemplateGrid/index.tsx
diff --git a/app/components/sections/QuoteBlock/QuoteBlock.container.tsx b/app/components/sections/QuoteBlock/QuoteBlock.container.tsx
index a88ebac..19737bf 100644
--- a/app/components/sections/QuoteBlock/QuoteBlock.container.tsx
+++ b/app/components/sections/QuoteBlock/QuoteBlock.container.tsx
@@ -4,7 +4,6 @@ import { memo, useState } from "react";
 import { logger } from "../../../../lib/logger";
 import QuoteBlockView from "./QuoteBlock.view";
 import type { QuoteBlockProps, VariantConfig } from "./QuoteBlock.types";
-import { normalizeQuoteBlockVariant } from "../../../../lib/propNormalization";
 
 const QuoteBlockContainer = memo<QuoteBlockProps>(
   ({
@@ -18,8 +17,7 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
     fallbackAvatarSrc = "/assets/Quote_Avatar.svg",
     onError,
   }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const variant = normalizeQuoteBlockVariant(variantProp);
+    const variant = variantProp;
     const [imageError, setImageError] = useState(false);
     const [imageLoading, setImageLoading] = useState(true);
 
diff --git a/app/components/sections/QuoteBlock/QuoteBlock.types.ts b/app/components/sections/QuoteBlock/QuoteBlock.types.ts
index dc2555f..a339e05 100644
--- a/app/components/sections/QuoteBlock/QuoteBlock.types.ts
+++ b/app/components/sections/QuoteBlock/QuoteBlock.types.ts
@@ -1,15 +1,8 @@
-export type QuoteBlockVariantValue =
-  | "compact"
-  | "standard"
-  | "extended"
-  | "Compact"
-  | "Standard"
-  | "Extended";
+export type QuoteBlockVariantValue = "compact" | "standard" | "extended";
 
 export interface QuoteBlockProps {
   /**
-   * Quote block variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Quote block variant.
    */
   variant?: QuoteBlockVariantValue;
   className?: string;
diff --git a/app/components/sections/SectionHeader.tsx b/app/components/sections/SectionHeader.tsx
index 0a5224e..0d14e35 100644
--- a/app/components/sections/SectionHeader.tsx
+++ b/app/components/sections/SectionHeader.tsx
@@ -1,29 +1,19 @@
 "use client";
 
 import { memo } from "react";
-import { normalizeSectionHeaderVariant } from "../../../lib/propNormalization";
 
-export type SectionHeaderVariantValue =
-  | "default"
-  | "multi-line"
-  | "Default"
-  | "Multi-Line";
+export type SectionHeaderVariantValue = "default" | "multi-line";
 
 interface SectionHeaderProps {
   title: string;
   subtitle: string;
   titleLg?: string;
-  /**
-   * Section header variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
-   */
   variant?: SectionHeaderVariantValue;
 }
 
 const SectionHeader = memo<SectionHeaderProps>(
   ({ title, subtitle, titleLg, variant: variantProp = "default" }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const variant = normalizeSectionHeaderVariant(variantProp);
+    const variant = variantProp;
     return (
       <div
         className={
diff --git a/app/components/WebVitalsDashboard/WebVitalsDashboard.container.tsx b/app/components/sections/WebVitalsDashboard/WebVitalsDashboard.container.tsx
similarity index 98%
rename from app/components/WebVitalsDashboard/WebVitalsDashboard.container.tsx
rename to app/components/sections/WebVitalsDashboard/WebVitalsDashboard.container.tsx
index 9edf346..8f2d7ce 100644
--- a/app/components/WebVitalsDashboard/WebVitalsDashboard.container.tsx
+++ b/app/components/sections/WebVitalsDashboard/WebVitalsDashboard.container.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { memo, useEffect, useState } from "react";
-import { logger } from "../../../lib/logger";
+import { logger } from "../../../../lib/logger";
 import WebVitalsDashboardView from "./WebVitalsDashboard.view";
 import type { Metrics, Vitals, VitalData } from "./WebVitalsDashboard.types";
 
diff --git a/app/components/WebVitalsDashboard/WebVitalsDashboard.types.ts b/app/components/sections/WebVitalsDashboard/WebVitalsDashboard.types.ts
similarity index 100%
rename from app/components/WebVitalsDashboard/WebVitalsDashboard.types.ts
rename to app/components/sections/WebVitalsDashboard/WebVitalsDashboard.types.ts
diff --git a/app/components/WebVitalsDashboard/WebVitalsDashboard.view.tsx b/app/components/sections/WebVitalsDashboard/WebVitalsDashboard.view.tsx
similarity index 100%
rename from app/components/WebVitalsDashboard/WebVitalsDashboard.view.tsx
rename to app/components/sections/WebVitalsDashboard/WebVitalsDashboard.view.tsx
diff --git a/app/components/WebVitalsDashboard/index.tsx b/app/components/sections/WebVitalsDashboard/index.tsx
similarity index 100%
rename from app/components/WebVitalsDashboard/index.tsx
rename to app/components/sections/WebVitalsDashboard/index.tsx
diff --git a/app/components/type/ContentLockup/ContentLockup.container.tsx b/app/components/type/ContentLockup/ContentLockup.container.tsx
index 6f25b72..b177734 100644
--- a/app/components/type/ContentLockup/ContentLockup.container.tsx
+++ b/app/components/type/ContentLockup/ContentLockup.container.tsx
@@ -3,10 +3,6 @@
 import { memo } from "react";
 import ContentLockupView from "./ContentLockup.view";
 import type { ContentLockupProps, VariantStyle } from "./ContentLockup.types";
-import {
-  normalizeContentLockupVariant,
-  normalizeAlignment,
-} from "../../../../lib/propNormalization";
 
 const ContentLockupContainer = memo<ContentLockupProps>(
   ({
@@ -21,9 +17,8 @@ const ContentLockupContainer = memo<ContentLockupProps>(
     alignment: alignmentProp = "center",
     titleId,
   }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const variant = normalizeContentLockupVariant(variantProp);
-    const alignment = normalizeAlignment(alignmentProp);
+    const variant = variantProp;
+    const alignment = alignmentProp;
     // Variant-specific styling
     const variantStyles: Record<string, VariantStyle> = {
       hero: {
diff --git a/app/components/type/ContentLockup/ContentLockup.types.ts b/app/components/type/ContentLockup/ContentLockup.types.ts
index a0bce79..de4332a 100644
--- a/app/components/type/ContentLockup/ContentLockup.types.ts
+++ b/app/components/type/ContentLockup/ContentLockup.types.ts
@@ -5,16 +5,9 @@ export type ContentLockupVariantValue =
   | "ask"
   | "ask-inverse"
   | "modal"
-  | "login"
-  | "Hero"
-  | "Feature"
-  | "Learn"
-  | "Ask"
-  | "Ask-Inverse"
-  | "Modal"
-  | "Login";
+  | "login";
 
-export type ContentLockupAlignmentValue = "center" | "left" | "Center" | "Left";
+export type ContentLockupAlignmentValue = "center" | "left";
 
 export interface ContentLockupProps {
   title?: string;
@@ -24,15 +17,13 @@ export interface ContentLockupProps {
   ctaHref?: string;
   buttonClassName?: string;
   /**
-   * Content lockup variant. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Content lockup variant.
    */
   variant?: ContentLockupVariantValue;
   linkText?: string;
   linkHref?: string;
   /**
-   * Text alignment. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Text alignment.
    */
   alignment?: ContentLockupAlignmentValue;
   /**
diff --git a/app/components/type/HeaderLockup/HeaderLockup.container.tsx b/app/components/type/HeaderLockup/HeaderLockup.container.tsx
index 132037f..1376ae2 100644
--- a/app/components/type/HeaderLockup/HeaderLockup.container.tsx
+++ b/app/components/type/HeaderLockup/HeaderLockup.container.tsx
@@ -3,11 +3,6 @@
 import { memo } from "react";
 import HeaderLockupView from "./HeaderLockup.view";
 import type { HeaderLockupProps } from "./HeaderLockup.types";
-import {
-  normalizeHeaderLockupJustification,
-  normalizeHeaderLockupSize,
-  normalizeHeaderLockupPalette,
-} from "../../../../lib/propNormalization";
 
 const HeaderLockupContainer = memo<HeaderLockupProps>(
   ({
@@ -17,10 +12,9 @@ const HeaderLockupContainer = memo<HeaderLockupProps>(
     size: sizeProp = "L",
     palette: paletteProp = "default",
   }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const justification = normalizeHeaderLockupJustification(justificationProp);
-    const size = normalizeHeaderLockupSize(sizeProp);
-    const palette = normalizeHeaderLockupPalette(paletteProp);
+    const justification = justificationProp;
+    const size = sizeProp;
+    const palette = paletteProp;
 
     return (
       <HeaderLockupView
diff --git a/app/components/type/HeaderLockup/HeaderLockup.types.ts b/app/components/type/HeaderLockup/HeaderLockup.types.ts
index 44d07fa..d782a99 100644
--- a/app/components/type/HeaderLockup/HeaderLockup.types.ts
+++ b/app/components/type/HeaderLockup/HeaderLockup.types.ts
@@ -1,16 +1,8 @@
 import type { ReactNode } from "react";
 
-export type HeaderLockupJustificationValue =
-  | "left"
-  | "center"
-  | "Left"
-  | "Center";
-export type HeaderLockupSizeValue = "L" | "M" | "l" | "m";
-export type HeaderLockupPaletteValue =
-  | "default"
-  | "inverse"
-  | "Default"
-  | "Inverse";
+export type HeaderLockupJustificationValue = "left" | "center";
+export type HeaderLockupSizeValue = "L" | "M";
+export type HeaderLockupPaletteValue = "default" | "inverse";
 
 export interface HeaderLockupProps {
   /**
@@ -22,18 +14,15 @@ export interface HeaderLockupProps {
    */
   description?: ReactNode;
   /**
-   * Text justification. Accepts both PascalCase (Figma) and lowercase (codebase).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Text justification.
    */
   justification?: HeaderLockupJustificationValue;
   /**
-   * Size variant. Accepts both PascalCase (Figma) and lowercase (codebase).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Size variant.
    */
   size?: HeaderLockupSizeValue;
   /**
-   * Palette. Default = light text (dark bg); Inverse = dark text (light bg).
-   * Accepts both PascalCase (Figma) and lowercase (codebase).
+   * Palette. default = light text (dark bg); inverse = dark text (light bg).
    */
   palette?: HeaderLockupPaletteValue;
 }
diff --git a/app/components/type/NumberedList/NumberedList.container.tsx b/app/components/type/NumberedList/NumberedList.container.tsx
index e6a652d..e68bc0b 100644
--- a/app/components/type/NumberedList/NumberedList.container.tsx
+++ b/app/components/type/NumberedList/NumberedList.container.tsx
@@ -3,12 +3,10 @@
 import { memo } from "react";
 import NumberedListView from "./NumberedList.view";
 import type { NumberedListProps } from "./NumberedList.types";
-import { normalizeNumberedListSize } from "../../../../lib/propNormalization";
 
 const NumberedListContainer = memo<NumberedListProps>(
   ({ items, size: sizeProp = "M" }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const size = normalizeNumberedListSize(sizeProp);
+    const size = sizeProp;
 
     return <NumberedListView items={items} size={size} />;
   },
diff --git a/app/components/type/NumberedList/NumberedList.types.ts b/app/components/type/NumberedList/NumberedList.types.ts
index a65233c..e7bd7de 100644
--- a/app/components/type/NumberedList/NumberedList.types.ts
+++ b/app/components/type/NumberedList/NumberedList.types.ts
@@ -1,4 +1,4 @@
-export type NumberedListSizeValue = "M" | "S" | "m" | "s";
+export type NumberedListSizeValue = "M" | "S";
 
 export interface NumberedListItem {
   title: string;
@@ -11,8 +11,7 @@ export interface NumberedListProps {
    */
   items: NumberedListItem[];
   /**
-   * Size variant. Accepts both PascalCase (Figma) and lowercase (codebase).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
+   * Size variant.
    */
   size?: NumberedListSizeValue;
 }
diff --git a/app/components/utility/AvatarContainer.tsx b/app/components/utility/AvatarContainer/AvatarContainer.tsx
similarity index 62%
rename from app/components/utility/AvatarContainer.tsx
rename to app/components/utility/AvatarContainer/AvatarContainer.tsx
index 8eb4ff1..d15fb94 100644
--- a/app/components/utility/AvatarContainer.tsx
+++ b/app/components/utility/AvatarContainer/AvatarContainer.tsx
@@ -1,30 +1,16 @@
 import { memo } from "react";
-import { normalizeSize } from "../../../lib/propNormalization";
 
-export type AvatarContainerSizeValue =
-  | "small"
-  | "medium"
-  | "large"
-  | "xlarge"
-  | "Small"
-  | "Medium"
-  | "Large"
-  | "XLarge";
+export type AvatarContainerSizeValue = "small" | "medium" | "large" | "xlarge";
 
 interface AvatarContainerProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
-  /**
-   * Avatar container size. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
-   */
   size?: AvatarContainerSizeValue;
   className?: string;
 }
 
 const AvatarContainer = memo<AvatarContainerProps>(
   ({ children, size: sizeProp = "small", className = "", ...props }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const size = normalizeSize(sizeProp, "small");
+    const size = sizeProp;
     const sizeStyles: Record<string, string> = {
       small: "flex -space-x-[var(--spacing-scale-008)]",
       medium: "flex -space-x-[9px]",
diff --git a/app/components/utility/AvatarContainer/index.tsx b/app/components/utility/AvatarContainer/index.tsx
new file mode 100644
index 0000000..b2db2e6
--- /dev/null
+++ b/app/components/utility/AvatarContainer/index.tsx
@@ -0,0 +1,2 @@
+export { default } from "./AvatarContainer";
+export type { AvatarContainerSizeValue } from "./AvatarContainer";
diff --git a/app/components/utility/CardStack/CardStack.container.tsx b/app/components/utility/CardStack/CardStack.container.tsx
index 7c07fee..ada2ef1 100644
--- a/app/components/utility/CardStack/CardStack.container.tsx
+++ b/app/components/utility/CardStack/CardStack.container.tsx
@@ -7,6 +7,10 @@ import type { CardStackProps } from "./CardStack.types";
 const DEFAULT_TOGGLE_LABEL = "See all communication approaches";
 const DEFAULT_SHOW_LESS_LABEL = "Show less";
 
+/**
+ * Figma: "Utility / CardStack" (TODO(figma)). Selectable stack of cards with
+ * an optional "see all"/"show less" expand toggle.
+ */
 const CardStackContainer = memo<CardStackProps>(
   ({
     cards,
diff --git a/app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx b/app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx
index ff67759..c924229 100644
--- a/app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx
+++ b/app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx
@@ -4,6 +4,10 @@ import { memo } from "react";
 import { CreateFlowFooterView } from "./CreateFlowFooter.view";
 import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
 
+/**
+ * Figma: "Utility / CreateFlowFooter" (TODO(figma)). Sticky footer for the
+ * create flow with a back action, optional secondary button, and progress bar.
+ */
 const CreateFlowFooterContainer = memo<CreateFlowFooterProps>(
   ({
     secondButton,
diff --git a/app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx b/app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx
index 4ddf793..47265bb 100644
--- a/app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx
+++ b/app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx
@@ -1,4 +1,3 @@
-import { normalizeProportionBarVariant } from "../../../../lib/propNormalization";
 import ProportionBar from "../../progress/ProportionBar";
 import Button from "../../buttons/Button";
 import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
@@ -11,9 +10,7 @@ export function CreateFlowFooterView({
   onBackClick,
   className = "",
 }: CreateFlowFooterProps) {
-  const proportionBarVariant = normalizeProportionBarVariant(
-    proportionBarVariantProp,
-  );
+  const proportionBarVariant = proportionBarVariantProp ?? "default";
   return (
     <footer
       className={`bg-black w-full ${className}`}
diff --git a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx
index 6e63804..81c513d 100644
--- a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx
+++ b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx
@@ -5,6 +5,10 @@ import { useRouter } from "next/navigation";
 import { CreateFlowTopNavView } from "./CreateFlowTopNav.view";
 import type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types";
 
+/**
+ * Figma: "Utility / CreateFlowTopNav" (TODO(figma)). Top navigation bar for
+ * the create flow with exit, share, export, and edit actions.
+ */
 const CreateFlowTopNavContainer = memo<CreateFlowTopNavProps>(
   ({
     hasShare = false,
diff --git a/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.container.tsx b/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.container.tsx
index 74c687c..11b6180 100644
--- a/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.container.tsx
+++ b/app/components/utility/DecisionMakingSidebar/DecisionMakingSidebar.container.tsx
@@ -3,11 +3,11 @@
 import { memo } from "react";
 import DecisionMakingSidebarView from "./DecisionMakingSidebar.view";
 import type { DecisionMakingSidebarProps } from "./DecisionMakingSidebar.types";
-import {
-  normalizeHeaderLockupJustification,
-  normalizeHeaderLockupSize,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Utility / DecisionMakingSidebar" (TODO(figma)). Sidebar pairing a
+ * header lockup with an `InfoMessageBox` checklist for decision-making screens.
+ */
 const DecisionMakingSidebarContainer = memo<DecisionMakingSidebarProps>(
   ({
     title,
@@ -20,8 +20,8 @@ const DecisionMakingSidebarContainer = memo<DecisionMakingSidebarProps>(
     justification: justificationProp = "left",
     className = "",
   }) => {
-    const size = normalizeHeaderLockupSize(sizeProp);
-    const justification = normalizeHeaderLockupJustification(justificationProp);
+    const size = sizeProp;
+    const justification = justificationProp;
 
     return (
       <DecisionMakingSidebarView
diff --git a/app/components/utility/ErrorBoundary.tsx b/app/components/utility/ErrorBoundary.tsx
deleted file mode 100644
index 12379c3..0000000
--- a/app/components/utility/ErrorBoundary.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-"use client";
-
-import React, { Component, type ReactNode } from "react";
-import { logger } from "../../../lib/logger";
-
-interface ErrorBoundaryProps {
-  children: ReactNode;
-}
-
-interface ErrorBoundaryState {
-  hasError: boolean;
-  error: Error | null;
-}
-
-class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-    this.state = { hasError: false, error: null };
-  }
-
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
-    // Update state so the next render will show the fallback UI
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-    // Log the error to an error reporting service
-    logger.error("ErrorBoundary caught an error:", error, errorInfo);
-  }
-
-  render() {
-    if (this.state.hasError) {
-      // Fallback UI using design tokens
-      return (
-        <div className="min-h-[200px] flex items-center justify-center p-[var(--spacing-scale-016)]">
-          <div className="text-center">
-            <h2 className="text-xl font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-008)]">
-              Something went wrong
-            </h2>
-            <p className="text-[var(--color-content-default-secondary)] mb-[var(--spacing-scale-016)]">
-              We&apos;re sorry, but something unexpected happened.
-            </p>
-            <button
-              onClick={() => this.setState({ hasError: false, error: null })}
-              className="px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] bg-[var(--color-surface-default-brand-royal)] text-[var(--color-content-inverse-primary)] rounded-[var(--radius-measures-radius-small)] hover:bg-[var(--color-surface-hover-brand-royal)] transition-colors"
-            >
-              Try again
-            </button>
-          </div>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
-export default ErrorBoundary;
diff --git a/app/components/utility/ImagePlaceholder.tsx b/app/components/utility/ImagePlaceholder.tsx
deleted file mode 100644
index a88c232..0000000
--- a/app/components/utility/ImagePlaceholder.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import { normalizeImagePlaceholderColor } from "../../../lib/propNormalization";
-
-export type ImagePlaceholderColorValue =
-  | "blue"
-  | "green"
-  | "purple"
-  | "red"
-  | "orange"
-  | "teal"
-  | "Blue"
-  | "Green"
-  | "Purple"
-  | "Red"
-  | "Orange"
-  | "Teal";
-
-interface ImagePlaceholderProps {
-  width?: number;
-  height?: number;
-  text?: string;
-  /**
-   * Image placeholder color. Accepts both lowercase and PascalCase (case-insensitive).
-   * Figma uses PascalCase, codebase uses lowercase - both are supported.
-   */
-  color?: ImagePlaceholderColorValue;
-  className?: string;
-}
-
-/**
- * Simple image placeholder component for testing
- * Generates colored backgrounds with text overlays
- */
-const ImagePlaceholder = memo<ImagePlaceholderProps>(
-  ({
-    width = 260,
-    height = 390,
-    text = "Blog Image",
-    color: colorProp = "blue",
-    className = "",
-  }) => {
-    // Normalize props to handle both PascalCase (Figma) and lowercase (codebase)
-    const color = normalizeImagePlaceholderColor(colorProp);
-    const colors: Record<string, string> = {
-      blue: "bg-blue-500",
-      green: "bg-green-500",
-      purple: "bg-purple-500",
-      red: "bg-red-500",
-      orange: "bg-orange-500",
-      teal: "bg-teal-500",
-    };
-
-    const bgColor = colors[color] || colors.blue;
-
-    return (
-      <div
-        className={`${bgColor} flex items-center justify-center text-white font-bold text-lg ${className}`}
-        style={{ width: `${width}px`, height: `${height}px` }}
-      >
-        {text}
-      </div>
-    );
-  },
-);
-
-ImagePlaceholder.displayName = "ImagePlaceholder";
-
-export default ImagePlaceholder;
diff --git a/app/components/utility/InfoMessageBox/InfoMessageBox.container.tsx b/app/components/utility/InfoMessageBox/InfoMessageBox.container.tsx
index 763d8ee..83309a7 100644
--- a/app/components/utility/InfoMessageBox/InfoMessageBox.container.tsx
+++ b/app/components/utility/InfoMessageBox/InfoMessageBox.container.tsx
@@ -4,6 +4,10 @@ import { memo, useCallback, useState } from "react";
 import InfoMessageBoxView from "./InfoMessageBox.view";
 import type { InfoMessageBoxProps } from "./InfoMessageBox.types";
 
+/**
+ * Figma: "Utility / InfoMessageBox" (TODO(figma)). Bordered message box that
+ * lists checkbox items under a title with an optional leading icon.
+ */
 const InfoMessageBoxContainer = memo<InfoMessageBoxProps>(
   ({
     title,
diff --git a/app/components/utility/InputLabel/InputLabel.container.tsx b/app/components/utility/InputLabel/InputLabel.container.tsx
index a5d09e4..8679f6e 100644
--- a/app/components/utility/InputLabel/InputLabel.container.tsx
+++ b/app/components/utility/InputLabel/InputLabel.container.tsx
@@ -3,23 +3,23 @@
 import { memo } from "react";
 import InputLabelView from "./InputLabel.view";
 import type { InputLabelProps } from "./InputLabel.types";
-import {
-  normalizeInputLabelSize,
-  normalizeInputLabelPalette,
-} from "../../../../lib/propNormalization";
 
+/**
+ * Figma: "Utility / InputLabel" (TODO(figma)). Reusable form-input label with
+ * optional asterisk, help icon, and helper text.
+ */
 const InputLabelContainer = memo<InputLabelProps>(
   ({
     label,
     helpIcon = false,
     asterisk = false,
     helperText = false,
-    size: sizeProp = "S",
-    palette: paletteProp = "Default",
+    size: sizeProp = "s",
+    palette: paletteProp = "default",
     className = "",
   }) => {
-    const size = normalizeInputLabelSize(sizeProp);
-    const palette = normalizeInputLabelPalette(paletteProp);
+    const size = sizeProp;
+    const palette = paletteProp;
 
     return (
       <InputLabelView
diff --git a/app/components/utility/InputLabel/InputLabel.types.ts b/app/components/utility/InputLabel/InputLabel.types.ts
index ca6c139..e434aaf 100644
--- a/app/components/utility/InputLabel/InputLabel.types.ts
+++ b/app/components/utility/InputLabel/InputLabel.types.ts
@@ -1,9 +1,5 @@
-export type InputLabelSizeValue = "S" | "M" | "s" | "m";
-export type InputLabelPaletteValue =
-  | "Default"
-  | "Inverse"
-  | "default"
-  | "inverse";
+export type InputLabelSizeValue = "s" | "m";
+export type InputLabelPaletteValue = "default" | "inverse";
 
 export interface InputLabelProps {
   /**
@@ -25,13 +21,11 @@ export interface InputLabelProps {
    */
   helperText?: boolean | string;
   /**
-   * Size variant: "S" (small) or "M" (medium)
-   * Accepts both uppercase (Figma) and lowercase values.
+   * Size variant: "s" (small) or "m" (medium)
    */
   size?: InputLabelSizeValue;
   /**
-   * Palette variant: "Default" or "Inverse"
-   * Accepts both PascalCase (Figma) and lowercase values.
+   * Palette variant: "default" or "inverse"
    */
   palette?: InputLabelPaletteValue;
   className?: string;
diff --git a/app/components/utility/ModalFooter/ModalFooter.container.tsx b/app/components/utility/ModalFooter/ModalFooter.container.tsx
new file mode 100644
index 0000000..e6a2556
--- /dev/null
+++ b/app/components/utility/ModalFooter/ModalFooter.container.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { memo } from "react";
+import { ModalFooterView } from "./ModalFooter.view";
+import type { ModalFooterProps } from "./ModalFooter.types";
+
+/**
+ * Figma: "Utility / ModalFooter" (TODO(figma)).
+ * Sticky modal footer slot used by the create-flow + login modals to host
+ * primary/secondary actions.
+ */
+const ModalFooterContainer = memo<ModalFooterProps>((props) => {
+  return <ModalFooterView {...props} />;
+});
+
+ModalFooterContainer.displayName = "ModalFooter";
+
+export default ModalFooterContainer;
diff --git a/app/components/utility/ModalFooter/index.tsx b/app/components/utility/ModalFooter/index.tsx
index b722de4..0ed8ee8 100644
--- a/app/components/utility/ModalFooter/index.tsx
+++ b/app/components/utility/ModalFooter/index.tsx
@@ -1,2 +1,2 @@
-export { ModalFooterView as default } from "./ModalFooter.view";
+export { default } from "./ModalFooter.container";
 export type { ModalFooterProps } from "./ModalFooter.types";
diff --git a/app/components/utility/ModalHeader/ModalHeader.container.tsx b/app/components/utility/ModalHeader/ModalHeader.container.tsx
new file mode 100644
index 0000000..b0da587
--- /dev/null
+++ b/app/components/utility/ModalHeader/ModalHeader.container.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { memo } from "react";
+import { ModalHeaderView } from "./ModalHeader.view";
+import type { ModalHeaderProps } from "./ModalHeader.types";
+
+/**
+ * Figma: "Utility / ModalHeader" (TODO(figma)).
+ * Sticky 48px modal header with optional close (left) and more-options
+ * (right) icon buttons.
+ */
+const ModalHeaderContainer = memo<ModalHeaderProps>((props) => {
+  return <ModalHeaderView {...props} />;
+});
+
+ModalHeaderContainer.displayName = "ModalHeader";
+
+export default ModalHeaderContainer;
diff --git a/app/components/utility/ModalHeader/index.tsx b/app/components/utility/ModalHeader/index.tsx
index a26925f..3ef272c 100644
--- a/app/components/utility/ModalHeader/index.tsx
+++ b/app/components/utility/ModalHeader/index.tsx
@@ -1,2 +1,2 @@
-export { ModalHeaderView as default } from "./ModalHeader.view";
+export { default } from "./ModalHeader.container";
 export type { ModalHeaderProps } from "./ModalHeader.types";
diff --git a/app/components/utility/Scrollbar/Scrollbar.container.tsx b/app/components/utility/Scrollbar/Scrollbar.container.tsx
new file mode 100644
index 0000000..e5c16e7
--- /dev/null
+++ b/app/components/utility/Scrollbar/Scrollbar.container.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { memo } from "react";
+import { ScrollbarView } from "./Scrollbar.view";
+import type { ScrollbarProps } from "./Scrollbar.types";
+
+/**
+ * Figma: "Utility / Scrollbar" (TODO(figma)).
+ * Custom-styled scrollable wrapper. Most surfaces should attach
+ * `SCROLLBAR_DESIGN_CLASS` directly instead of nesting through this view.
+ */
+const ScrollbarContainer = memo<ScrollbarProps>((props) => {
+  return <ScrollbarView {...props} />;
+});
+
+ScrollbarContainer.displayName = "Scrollbar";
+
+export default ScrollbarContainer;
diff --git a/app/components/utility/Scrollbar/index.tsx b/app/components/utility/Scrollbar/index.tsx
index bc9e054..d4032ab 100644
--- a/app/components/utility/Scrollbar/index.tsx
+++ b/app/components/utility/Scrollbar/index.tsx
@@ -1,4 +1,4 @@
-export { ScrollbarView as default } from "./Scrollbar.view";
+export { default } from "./Scrollbar.container";
 export type { ScrollbarProps } from "./Scrollbar.types";
 
 /** Class name to apply the design system scrollbar to any scrollable element (e.g. textarea, div). */
diff --git a/app/components/utility/Separator.tsx b/app/components/utility/Separator/Separator.tsx
similarity index 100%
rename from app/components/utility/Separator.tsx
rename to app/components/utility/Separator/Separator.tsx
diff --git a/app/components/utility/Separator/index.tsx b/app/components/utility/Separator/index.tsx
new file mode 100644
index 0000000..8234c76
--- /dev/null
+++ b/app/components/utility/Separator/index.tsx
@@ -0,0 +1 @@
+export { default } from "./Separator";
diff --git a/app/components/utility/Tag/Tag.container.tsx b/app/components/utility/Tag/Tag.container.tsx
index 4eef24b..d36c36c 100644
--- a/app/components/utility/Tag/Tag.container.tsx
+++ b/app/components/utility/Tag/Tag.container.tsx
@@ -9,6 +9,10 @@ const DEFAULT_LABELS: Record<TagProps["variant"], string> = {
   selected: "SELECTED",
 };
 
+/**
+ * Figma: "Utility / Tag" (TODO(figma)). Small status pill (e.g. "RECOMMENDED"
+ * or "SELECTED") used to annotate cards and options.
+ */
 const TagContainer = memo<TagProps>(({ variant, children, className = "" }) => {
   const content = children ?? DEFAULT_LABELS[variant];
   return (
diff --git a/app/contexts/MessagesContext.tsx b/app/contexts/MessagesContext.tsx
index cb17c37..963429d 100644
--- a/app/contexts/MessagesContext.tsx
+++ b/app/contexts/MessagesContext.tsx
@@ -2,6 +2,7 @@
 
 import { createContext, useContext, type ReactNode } from "react";
 import type messages from "../../messages/en/index";
+import { getTranslation } from "../../lib/i18n/getTranslation";
 
 type Messages = typeof messages;
 
@@ -31,27 +32,6 @@ export function useMessages(): Messages {
   return messages;
 }
 
-/**
- * Get a translation value from messages using dot notation
- * @param messages - The messages object
- * @param key - Dot-separated key path (e.g., "heroBanner.title")
- * @returns The translation string or the key if not found
- */
-function getTranslationValue(messages: Messages, key: string): string {
-  const keys = key.split(".");
-  let value: unknown = messages;
-
-  for (const k of keys) {
-    if (value && typeof value === "object" && k in value) {
-      value = (value as Record<string, unknown>)[k];
-    } else {
-      return key; // Fallback to key if path not found
-    }
-  }
-
-  return typeof value === "string" ? value : key;
-}
-
 /**
  * Custom translation hook for client components
  * @param namespace - Optional namespace to scope translations (e.g., "footer")
@@ -61,11 +41,7 @@ export function useTranslation(namespace?: string) {
   const messages = useMessages();
 
   return (key: string): string => {
-    if (namespace) {
-      // If namespace is provided, prepend it to the key
-      const fullKey = `${namespace}.${key}`;
-      return getTranslationValue(messages, fullKey);
-    }
-    return getTranslationValue(messages, key);
+    const fullKey = namespace ? `${namespace}.${key}` : key;
+    return getTranslation(messages, fullKey);
   };
 }
diff --git a/app/hooks/index.ts b/app/hooks/index.ts
index 188245c..b139d4d 100644
--- a/app/hooks/index.ts
+++ b/app/hooks/index.ts
@@ -10,7 +10,6 @@ export { useClickOutside } from "./useClickOutside";
 export { useAnalytics } from "./useAnalytics";
 export { useComponentId } from "./useComponentId";
 export { useFormField } from "./useFormField";
-export { useComponentStyles } from "./useComponentStyles";
 export { useSchemaData } from "./useSchemaData";
 export {
   useMediaQuery,
@@ -18,12 +17,6 @@ export {
   useIsDesktop,
   BREAKPOINTS,
 } from "./useMediaQuery";
-export { useFormValidation, validationRules } from "./useFormValidation";
-export type {
-  SizeStyleConfig,
-  StateStyleConfig,
-  UseComponentStylesOptions,
-} from "./useComponentStyles";
 export type {
   SchemaOrganization,
   SchemaWebSite,
@@ -31,8 +24,3 @@ export type {
   SchemaArticle,
   SchemaBreadcrumbList,
 } from "./useSchemaData";
-export type {
-  ValidationRule,
-  FieldValidation,
-  UseFormValidationOptions,
-} from "./useFormValidation";
diff --git a/app/hooks/useComponentStyles.ts b/app/hooks/useComponentStyles.ts
deleted file mode 100644
index a4aa882..0000000
--- a/app/hooks/useComponentStyles.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { useMemo } from "react";
-
-/**
- * Configuration for component size styles
- */
-export interface SizeStyleConfig {
-  [key: string]: string | Record<string, string>;
-}
-
-/**
- * Configuration for component state styles
- */
-export interface StateStyleConfig {
-  [key: string]: string | Record<string, string>;
-}
-
-/**
- * Options for useComponentStyles hook
- */
-export interface UseComponentStylesOptions {
-  size: string;
-  state?: string;
-  disabled?: boolean;
-  error?: boolean;
-  sizeStyles: SizeStyleConfig;
-  stateStyles: StateStyleConfig;
-  getStateStyles?: (_params: {
-    state?: string;
-    disabled: boolean;
-    error: boolean;
-  }) => Record<string, string>;
-}
-
-/**
- * Hook for managing component size and state styles
- * Provides a consistent pattern for styling components based on size, state, and error/disabled status
- *
- * @param options - Configuration object with size, state, and style definitions
- *
- * @returns Object with computed style classes
- *
- * @example
- * ```tsx
- * const sizeStyles = {
- *   small: { input: "h-8 text-xs", label: "text-xs" },
- *   medium: { input: "h-10 text-sm", label: "text-sm" },
- * };
- *
- * const stateStyles = {
- *   default: { input: "border-gray-300", label: "text-gray-700" },
- *   focus: { input: "border-blue-500", label: "text-gray-700" },
- * };
- *
- * const { sizeClasses, stateClasses } = useComponentStyles({
- *   size: "medium",
- *   state: "default",
- *   disabled: false,
- *   error: false,
- *   sizeStyles,
- *   stateStyles,
- * });
- * ```
- */
-export function useComponentStyles(options: UseComponentStylesOptions): {
-  sizeClasses: Record<string, string>;
-  stateClasses: Record<string, string>;
-} {
-  const {
-    size,
-    state = "default",
-    disabled = false,
-    error = false,
-    sizeStyles,
-    stateStyles,
-    getStateStyles,
-  } = options;
-
-  const sizeClasses = useMemo(() => {
-    const sizeConfig = sizeStyles[size] || sizeStyles.medium || {};
-    return typeof sizeConfig === "string"
-      ? { base: sizeConfig }
-      : (sizeConfig as Record<string, string>);
-  }, [size, sizeStyles]);
-
-  const stateClasses = useMemo(() => {
-    if (getStateStyles) {
-      return getStateStyles({ state, disabled, error });
-    }
-
-    // Default state style resolution
-    if (disabled) {
-      return (stateStyles.disabled || {}) as Record<string, string>;
-    }
-
-    if (error) {
-      return (stateStyles.error || {}) as Record<string, string>;
-    }
-
-    const stateConfig = stateStyles[state] || stateStyles.default || {};
-    return typeof stateConfig === "string"
-      ? { base: stateConfig }
-      : (stateConfig as Record<string, string>);
-  }, [state, disabled, error, stateStyles, getStateStyles]);
-
-  return {
-    sizeClasses,
-    stateClasses,
-  };
-}
diff --git a/app/hooks/useFormValidation.ts b/app/hooks/useFormValidation.ts
deleted file mode 100644
index a46abab..0000000
--- a/app/hooks/useFormValidation.ts
+++ /dev/null
@@ -1,213 +0,0 @@
-import { useState, useCallback, useMemo } from "react";
-
-/**
- * Validation rule function type
- */
-export type ValidationRule<T = string> = (_value: T) => string | null;
-
-/**
- * Validation rules for common patterns
- */
-export const validationRules = {
-  required: (value: unknown): string | null => {
-    if (value === null || value === undefined || value === "") {
-      return "This field is required";
-    }
-    return null;
-  },
-
-  email: (value: string): string | null => {
-    if (!value) return null; // Let required handle empty values
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(value) ? null : "Please enter a valid email address";
-  },
-
-  minLength:
-    (min: number) =>
-    (value: string): string | null => {
-      if (!value) return null;
-      return value.length >= min
-        ? null
-        : `Must be at least ${min} characters long`;
-    },
-
-  maxLength:
-    (max: number) =>
-    (value: string): string | null => {
-      if (!value) return null;
-      return value.length <= max
-        ? null
-        : `Must be no more than ${max} characters long`;
-    },
-
-  pattern:
-    (regex: RegExp, message: string) =>
-    (value: string): string | null => {
-      if (!value) return null;
-      return regex.test(value) ? null : message;
-    },
-};
-
-/**
- * Form field validation state
- */
-export interface FieldValidation {
-  value: string;
-  error: string | null;
-  touched: boolean;
-  dirty: boolean;
-}
-
-/**
- * Options for useFormValidation hook
- */
-export interface UseFormValidationOptions {
-  initialValues: Record<string, string>;
-  validationRules?: Record<string, ValidationRule[]>;
-  validateOnChange?: boolean;
-  validateOnBlur?: boolean;
-}
-
-/**
- * Hook for form validation
- * Provides validation state and handlers for form fields
- *
- * @param options - Configuration object with initial values and validation rules
- *
- * @returns Object with validation state, handlers, and utilities
- *
- * @example
- * ```tsx
- * const {
- *   values,
- *   errors,
- *   touched,
- *   handleChange,
- *   handleBlur,
- *   validate,
- *   isValid,
- * } = useFormValidation({
- *   initialValues: { email: "", password: "" },
- *   validationRules: {
- *     email: [validationRules.required, validationRules.email],
- *     password: [validationRules.required, validationRules.minLength(8)],
- *   },
- * });
- *
- * <input
- *   value={values.email}
- *   onChange={handleChange}
- *   onBlur={handleBlur}
- *   name="email"
- * />
- * {errors.email && <span>{errors.email}</span>}
- * ```
- */
-export function useFormValidation(options: UseFormValidationOptions) {
-  const {
-    initialValues,
-    validationRules: rules = {},
-    validateOnChange = true,
-    validateOnBlur = true,
-  } = options;
-
-  const [values, setValues] = useState<Record<string, string>>(initialValues);
-  const [touched, setTouched] = useState<Record<string, boolean>>({});
-  const [errors, setErrors] = useState<Record<string, string | null>>({});
-
-  // Validate a single field
-  const validateField = useCallback(
-    (name: string, value: string): string | null => {
-      const fieldRules = rules[name] || [];
-      for (const rule of fieldRules) {
-        const error = rule(value);
-        if (error) return error;
-      }
-      return null;
-    },
-    [rules],
-  );
-
-  // Validate all fields
-  const validate = useCallback((): boolean => {
-    const newErrors: Record<string, string | null> = {};
-    let isValid = true;
-
-    Object.keys(values).forEach((name) => {
-      const error = validateField(name, values[name]);
-      if (error) {
-        newErrors[name] = error;
-        isValid = false;
-      } else {
-        newErrors[name] = null;
-      }
-    });
-
-    setErrors(newErrors);
-    return isValid;
-  }, [values, validateField]);
-
-  // Handle field change
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const { name, value } = e.target;
-      setValues((prev) => ({ ...prev, [name]: value }));
-
-      if (validateOnChange) {
-        const error = validateField(name, value);
-        setErrors((prev) => ({ ...prev, [name]: error }));
-      }
-    },
-    [validateOnChange, validateField],
-  );
-
-  // Handle field blur
-  const handleBlur = useCallback(
-    (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const { name } = e.target;
-      setTouched((prev) => ({ ...prev, [name]: true }));
-
-      if (validateOnBlur) {
-        const error = validateField(name, values[name]);
-        setErrors((prev) => ({ ...prev, [name]: error }));
-      }
-    },
-    [validateOnBlur, validateField, values],
-  );
-
-  // Check if form is valid
-  const isValid = useMemo(() => {
-    return Object.values(errors).every((error) => error === null);
-  }, [errors]);
-
-  // Reset form
-  const reset = useCallback(() => {
-    setValues(initialValues);
-    setTouched({});
-    setErrors({});
-  }, [initialValues]);
-
-  // Set field value programmatically
-  const setValue = useCallback(
-    (name: string, value: string) => {
-      setValues((prev) => ({ ...prev, [name]: value }));
-      if (validateOnChange) {
-        const error = validateField(name, value);
-        setErrors((prev) => ({ ...prev, [name]: error }));
-      }
-    },
-    [validateOnChange, validateField],
-  );
-
-  return {
-    values,
-    errors,
-    touched,
-    handleChange,
-    handleBlur,
-    validate,
-    isValid,
-    reset,
-    setValue,
-  };
-}
diff --git a/app/layout.tsx b/app/layout.tsx
index 8d778f5..a961aca 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -6,7 +6,6 @@ import { MessagesProvider } from "./contexts/MessagesContext";
 import messages from "../messages/en/index";
 import "./globals.css";
 import ConditionalNavigation from "./components/navigation/ConditionalNavigation";
-import ConditionalFooter from "./components/navigation/ConditionalFooter";
 
 /** Header reads `cr_session` via Server Components; must not use prerendered guest HTML. */
 export const dynamic = "force-dynamic";
@@ -105,8 +104,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
           <AuthModalProvider>
             <div className="min-h-screen flex flex-col">
               <ConditionalNavigation />
-              <main className="flex-1">{children}</main>
-              <ConditionalFooter />
+              {children}
             </div>
           </AuthModalProvider>
         </MessagesProvider>
diff --git a/docs/CUSTOM_HOOKS.md b/docs/CUSTOM_HOOKS.md
deleted file mode 100644
index 3353673..0000000
--- a/docs/CUSTOM_HOOKS.md
+++ /dev/null
@@ -1,381 +0,0 @@
-# Custom Hooks Documentation
-
-This document provides comprehensive documentation for all custom hooks available in the project.
-
-## Overview
-
-Custom hooks encapsulate reusable logic and patterns across components, improving code organization, maintainability, and consistency.
-
-## Available Hooks
-
-### `useClickOutside`
-
-Detects clicks outside of specified elements. Useful for closing dropdowns, modals, or menus.
-
-**Location:** `app/hooks/useClickOutside.ts`
-
-**Usage:**
-
-```tsx
-import { useClickOutside } from "../hooks";
-
-const menuRef = useRef<HTMLDivElement>(null);
-const buttonRef = useRef<HTMLButtonElement>(null);
-const [isOpen, setIsOpen] = useState(false);
-
-useClickOutside([menuRef, buttonRef], () => setIsOpen(false), isOpen);
-```
-
-**Parameters:**
-
-- `refs`: Array of refs to elements that should not trigger the callback
-- `handler`: Callback function to execute when clicking outside
-- `enabled`: Whether the hook is enabled (default: true)
-
-**Example:** Used in `Select.tsx` for closing dropdown menus
-
----
-
-### `useAnalytics`
-
-Centralized analytics tracking for component interactions. Supports both Google Analytics (gtag) and custom callbacks.
-
-**Location:** `app/hooks/useAnalytics.ts`
-
-**Usage:**
-
-```tsx
-import { useAnalytics } from "../hooks";
-
-const { trackEvent, trackCustomEvent } = useAnalytics();
-
-// Standard event tracking
-trackEvent({
-  event: "button_click",
-  category: "engagement",
-  label: "contact_button",
-  component: "AskOrganizer",
-});
-
-// Custom event with callback
-trackCustomEvent(
-  "contact_button_click",
-  {
-    component: "AskOrganizer",
-    variant: "centered",
-  },
-  onContactClick, // Optional callback
-);
-```
-
-**Returns:**
-
-- `trackEvent`: Function to track standard analytics events
-- `trackCustomEvent`: Function to track custom events with optional callback
-
-**Example:** Used in `AskOrganizer.tsx` for tracking button clicks
-
----
-
-### `useComponentId`
-
-Generates unique component IDs for accessibility. Provides consistent ID generation pattern.
-
-**Location:** `app/hooks/useComponentId.ts`
-
-**Usage:**
-
-```tsx
-import { useComponentId } from "../hooks";
-
-const { id, labelId } = useComponentId("input", props.id);
-// id: "input-123" or props.id if provided
-// labelId: "input-123-label"
-```
-
-**Parameters:**
-
-- `prefix`: Prefix for the generated ID (e.g., "input", "select")
-- `providedId`: Optional ID provided via props (takes precedence)
-
-**Returns:**
-
-- `id`: Component ID
-- `labelId`: Associated label ID for accessibility
-
-**Example:** Used in `Input.tsx`, `TextArea.tsx`, `Checkbox.tsx`
-
----
-
-### `useFormField`
-
-Manages form field event handlers with disabled state handling. Ensures handlers respect disabled state.
-
-**Location:** `app/hooks/useFormField.ts`
-
-**Usage:**
-
-```tsx
-import { useFormField } from "../hooks";
-
-const { handleChange, handleFocus, handleBlur } = useFormField(disabled, {
-  onChange: (e) => setValue(e.target.value),
-  onFocus: (e) => setFocused(true),
-  onBlur: (e) => setFocused(false),
-});
-
-// Use in component
-<input onChange={handleChange} onFocus={handleFocus} onBlur={handleBlur} />;
-```
-
-**Parameters:**
-
-- `disabled`: Whether the field is disabled
-- `handlers`: Object containing onChange, onFocus, onBlur handlers
-
-**Returns:**
-
-- `handleChange`: Wrapped onChange handler
-- `handleFocus`: Wrapped onFocus handler
-- `handleBlur`: Wrapped onBlur handler
-
-**Example:** Used in `Input.tsx`, `TextArea.tsx`
-
----
-
-### `useComponentStyles`
-
-Manages component size and state styles. Provides a consistent pattern for styling components.
-
-**Location:** `app/hooks/useComponentStyles.ts`
-
-**Usage:**
-
-```tsx
-import { useComponentStyles } from "../hooks";
-
-const sizeStyles = {
-  small: { input: "h-8 text-xs", label: "text-xs" },
-  medium: { input: "h-10 text-sm", label: "text-sm" },
-};
-
-const stateStyles = {
-  default: { input: "border-gray-300", label: "text-gray-700" },
-  focus: { input: "border-blue-500", label: "text-gray-700" },
-};
-
-const { sizeClasses, stateClasses } = useComponentStyles({
-  size: "medium",
-  state: "default",
-  disabled: false,
-  error: false,
-  sizeStyles,
-  stateStyles,
-});
-```
-
-**Note:** This hook is available but styling logic is often component-specific. Consider using it when you have multiple components with similar styling patterns.
-
----
-
-### `useSchemaData`
-
-Generates Schema.org structured data (JSON-LD) for SEO and search engines.
-
-**Location:** `app/hooks/useSchemaData.ts`
-
-**Usage:**
-
-```tsx
-import { useSchemaData } from "../hooks";
-
-// HowTo schema
-const schemaData = useSchemaData({
-  type: "HowTo",
-  name: "How to build a community",
-  description: "Step-by-step guide",
-  steps: [
-    { name: "Step 1", text: "Start here" },
-    { name: "Step 2", text: "Continue here" },
-  ],
-});
-
-// Organization schema
-const orgSchema = useSchemaData({
-  type: "Organization",
-  name: "Media Economies Design Lab",
-  url: "https://communityrule.com",
-  email: "medlab@colorado.edu",
-  sameAs: ["https://twitter.com/medlab"],
-});
-
-// Render in component
-<script
-  type="application/ld+json"
-  dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
-/>;
-```
-
-**Supported Types:**
-
-- `Organization` - Organization information
-- `WebSite` - Website navigation and search
-- `HowTo` - Step-by-step instructions
-- `Article` - Blog posts and articles
-- `BreadcrumbList` - Navigation breadcrumbs
-
-**Example:** Used in `NumberedCards.tsx`, `Header.tsx`, `Footer.tsx`
-
----
-
-### `useMediaQuery`
-
-Responsive breakpoint detection using window.matchMedia.
-
-**Location:** `app/hooks/useMediaQuery.ts`
-
-**Usage:**
-
-```tsx
-import { useMediaQuery, useIsMobile, useIsDesktop } from "../hooks";
-
-// Using breakpoint key
-const isMobile = useMediaQuery("lg", "max");
-// Returns true if screen width < 1024px
-
-// Using custom query
-const isDesktop = useMediaQuery("(min-width: 1024px)");
-
-// Convenience hooks
-const isMobile = useIsMobile(); // Below lg breakpoint
-const isDesktop = useIsDesktop(); // lg breakpoint and above
-```
-
-**Available Breakpoints:**
-
-- `sm`: 640px
-- `md`: 768px
-- `lg`: 1024px
-- `xl`: 1280px
-- `2xl`: 1536px
-
-**Example:** Used in `RelatedArticles.tsx` for responsive behavior
-
----
-
-### `useFormValidation`
-
-Form validation with field-level error handling.
-
-**Location:** `app/hooks/useFormValidation.ts`
-
-**Usage:**
-
-```tsx
-import { useFormValidation, validationRules } from "../hooks";
-
-const {
-  values,
-  errors,
-  touched,
-  handleChange,
-  handleBlur,
-  validate,
-  isValid,
-  reset,
-} = useFormValidation({
-  initialValues: { email: "", password: "" },
-  validationRules: {
-    email: [validationRules.required, validationRules.email],
-    password: [validationRules.required, validationRules.minLength(8)],
-  },
-  validateOnChange: true,
-  validateOnBlur: true,
-});
-
-// In component
-<input
-  name="email"
-  value={values.email}
-  onChange={handleChange}
-  onBlur={handleBlur}
-/>;
-{
-  errors.email && touched.email && <span>{errors.email}</span>;
-}
-```
-
-**Available Validation Rules:**
-
-- `validationRules.required` - Field is required
-- `validationRules.email` - Valid email format
-- `validationRules.minLength(n)` - Minimum length
-- `validationRules.maxLength(n)` - Maximum length
-- `validationRules.pattern(regex, message)` - Custom regex pattern
-
-**Returns:**
-
-- `values` - Current form values
-- `errors` - Field error messages
-- `touched` - Fields that have been interacted with
-- `handleChange` - Change handler
-- `handleBlur` - Blur handler
-- `validate` - Manual validation function
-- `isValid` - Boolean indicating if form is valid
-- `reset` - Reset form to initial values
-- `setValue` - Programmatically set field value
-
----
-
-## Best Practices
-
-1. **Import from index:** Always import hooks from `app/hooks` index file:
-
-   ```tsx
-   import { useAnalytics, useComponentId } from "../hooks";
-   ```
-
-2. **TypeScript:** All hooks are fully typed. Use TypeScript for better IDE support.
-
-3. **Testing:** Hooks should be tested independently. See `tests/unit/hooks/` for examples.
-
-4. **Documentation:** When creating new hooks, add JSDoc comments and update this documentation.
-
-5. **Performance:** Hooks use `useMemo` and `useCallback` where appropriate to prevent unnecessary re-renders.
-
-## Refactored Components
-
-The following components have been refactored to use custom hooks:
-
-- **Select** - Uses `useClickOutside` (now uses Container/Presentation pattern)
-- **AskOrganizer** - Uses `useAnalytics` (now uses Container/Presentation pattern)
-- **Input.tsx** - Uses `useComponentId` and `useFormField`
-- **TextArea.tsx** - Uses `useComponentId` and `useFormField`
-- **Checkbox.tsx** - Uses `useComponentId`
-- **NumberedCards** - Uses `useSchemaData` (now uses Container/Presentation pattern)
-- **RelatedArticles.tsx** - Uses `useIsMobile`
-
-> **Note**: Components marked with "Container/Presentation pattern" have been refactored to separate logic (container) from presentation (view). Hooks are used in the container components. See [Container/Presentation Pattern Guide](./guides/container-presentation-pattern.md) for details.
-
-## Adding New Hooks
-
-When creating a new hook:
-
-1. Create the hook file in `app/hooks/`
-2. Export it from `app/hooks/index.ts`
-3. Add JSDoc comments with examples
-4. Write unit tests in `tests/unit/hooks/`
-5. Update this documentation
-6. Refactor at least one component to use it as a proof of concept
-
-## Testing
-
-All hooks have unit tests in `tests/unit/hooks/`. Run tests with:
-
-```bash
-npm test -- tests/unit/hooks
-```
-
-## See Also
-
-- [React Hooks Documentation](https://react.dev/reference/react) - Official React hooks documentation
diff --git a/docs/README.md b/docs/README.md
index 6ff9adc..79b4c7f 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,76 +1,41 @@
 # Documentation
 
-This directory contains project documentation organized by topic.
+User-facing docs. Implementation conventions live in `.cursor/rules/`.
 
-## Documentation Structure
+## Canonical references
 
-### Core Documentation
+- [create-flow.md](./create-flow.md) — Custom create-rule wizard: stages,
+  URLs, persistence. Source of truth for product/eng alignment.
+- [testing-guide.md](./testing-guide.md) — Testing philosophy and what to
+  cover at each layer.
 
-- **[TESTING_GUIDE.md](./TESTING_GUIDE.md)** - Complete testing guide covering component tests, E2E tests, accessibility, and testing philosophy
-- **[CUSTOM_HOOKS.md](./CUSTOM_HOOKS.md)** - Documentation for all custom React hooks used in the project
+## Author guides (`guides/`)
 
-### Guides (`guides/`)
+- [content-creation.md](./guides/content-creation.md) — Writing and
+  publishing blog posts.
+- [i18n-translation-workflow.md](./guides/i18n-translation-workflow.md) —
+  Editing UI copy and translation bundles.
 
-- **[container-presentation-pattern.md](./guides/container-presentation-pattern.md)** - Container/Presentation pattern guide for component architecture
-- **[content-creation.md](./guides/content-creation.md)** - Guide for creating blog content
-- **[i18n-translation-workflow.md](./guides/i18n-translation-workflow.md)** - Guide for working with translations and UI content management
+## Temporary backend planning
 
-## Quick Navigation
+These will be deleted once the backend services are stood up:
 
-### For Testing
+- [guides/backend-roadmap.md](./guides/backend-roadmap.md)
+- [guides/backend-linear-tickets.md](./guides/backend-linear-tickets.md)
+- [guides/template-recommendation-matrix.md](./guides/template-recommendation-matrix.md)
 
-Start with **[TESTING_GUIDE.md](./TESTING_GUIDE.md)** for:
+## Cursor rules
 
-- Testing philosophy and approach
-- Component testing with `componentTestSuite`
-- E2E testing with Playwright
-- Accessibility testing
-- How to add tests for new components
+Implementation contracts are enforced by `.cursor/rules/*.mdc`:
 
-### For Custom Hooks
-
-See **[CUSTOM_HOOKS.md](./CUSTOM_HOOKS.md)** for:
-
-- Available custom hooks
-- Usage examples
-- API documentation
-
-### For Component Architecture
-
-See **[container-presentation-pattern.md](./guides/container-presentation-pattern.md)** for:
-
-- Container/Presentation pattern overview
-- When and how to use the pattern
-- Migration guide for existing components
-- Best practices and examples
-
-### For Content Creation
-
-See **[content-creation.md](./guides/content-creation.md)** for:
-
-- How to create blog articles
-- Content guidelines
-- Contribution workflow
-
-### For Translations and UI Content
-
-See **[i18n-translation-workflow.md](./guides/i18n-translation-workflow.md)** for:
-
-- How to update UI text content
-- Translation key structure and naming conventions
-- How to extract strings from components
-- How to add new translation keys
-- Best practices for content creators and developers
-
-## Additional Resources
-
-- **Vitest Documentation**: https://vitest.dev/
-- **Playwright Documentation**: https://playwright.dev/
-- **React Testing Library**: https://testing-library.com/
-- **Lighthouse CI**: https://github.com/GoogleChrome/lighthouse-ci
-- **Next.js Documentation**: https://nextjs.org/docs
-
----
-
-**Last Updated**: January 2025  
-**Maintained by**: CommunityRule Development Team
+| Rule | Scope |
+| --- | --- |
+| `component-structure.mdc` | 4-file split (container/view/types/index). |
+| `component-props.mdc` | Lowercase enum prop convention + Figma traceability. |
+| `tailwind-styling.mdc` | Token usage and class composition. |
+| `localization.mdc` | `messages/` bundles and `useMessages()`. |
+| `testing.mdc` | Test layout, helpers, required imports. |
+| `storybook.mdc` | Story location and `argTypes` patterns. |
+| `hooks.mdc` | Custom hook authoring + TSDoc as the API reference. |
+| `create-flow.mdc` | Wizard step / screen registry conventions. |
+| `api-routes.mdc` | API route handler conventions. |
diff --git a/docs/TESTING_GUIDE.md b/docs/TESTING_GUIDE.md
deleted file mode 100644
index 0a35865..0000000
--- a/docs/TESTING_GUIDE.md
+++ /dev/null
@@ -1,266 +0,0 @@
-## Testing Guide
-
-### Philosophy
-
-- **Test behaviour, not implementation**: Focus on what the user can see and do, not internal details.
-- **Single source of truth per component**: Each component should have **one consolidated test file**.
-- **Accessibility is mandatory**: Basic a11y checks run as part of every component suite.
-- **E2E is sparse**: Only cover critical user journeys that span pages or systems.
-
-### Test Structure
-
-The test directory structure is organized as follows:
-
-```text
-tests/
-  components/           # All component-focused tests (Vitest + RTL)
-    Button.test.tsx
-    Input.test.tsx
-    Checkbox.test.tsx
-    Select.test.tsx
-    Switch.test.tsx
-  pages/                # Page-level tests (home, blog, etc.)
-    home.test.jsx
-    blog.test.jsx
-  e2e/                  # True end‑to‑end flows + visual regression (Playwright)
-    critical-journeys.spec.ts    # Main user journeys (homepage, navigation, interactions)
-    visual-regression.spec.ts   # Critical page screenshots only (5 tests)
-    edge-cases.spec.ts          # Critical error scenarios (4 tests)
-    performance.spec.ts          # Essential performance checks (2 tests)
-  utils/                # Shared test utilities
-    componentTestSuite.tsx
-  msw/                  # MSW server setup for mocking
-    server.ts
-  accessibility/
-    e2e/                # E2E accessibility checks (WCAG compliance)
-      wcag-compliance.spec.ts
-```
-
-**Component tests** (`tests/components/`) use the standard `componentTestSuite` utility to ensure consistent baseline coverage for all UI components. **Page tests** (`tests/pages/`) cover page-level rendering and flows. **E2E tests** (`tests/e2e/`) focus on critical user journeys, visual regression, and performance. **Accessibility E2E** (`tests/accessibility/e2e/`) provides high-level WCAG compliance checks.
-
-### E2E Testing Philosophy
-
-E2E tests follow a **sparse, critical-path approach** optimized for open source projects:
-
-- **Focus on user value**: Test critical user journeys that span multiple pages or systems, not individual component interactions
-- **Maintainability over coverage**: Keep tests maintainable and contributor-friendly rather than comprehensive
-- **Visual regression is minimal**: Only capture screenshots of major pages (homepage, blog listing/post, 404), not every component or viewport
-- **Performance monitoring is essential**: Track homepage load and Core Web Vitals, but detailed performance analysis is handled by Lighthouse CI
-- **Edge cases are critical only**: Test scenarios that would break user experience (slow network, offline mode, JS errors, missing images)
-
-This approach reduces test maintenance burden while ensuring critical functionality remains stable.
-
-### Standard Component Test Suite
-
-Use the shared suite in `tests/utils/componentTestSuite.tsx` to get a consistent baseline:
-
-```ts
-import Component from "../../app/components/Component";
-import {
-  componentTestSuite,
-  type ComponentTestSuiteConfig,
-} from "../utils/componentTestSuite";
-
-type Props = React.ComponentProps<typeof Component>;
-
-const config: ComponentTestSuiteConfig<Props> = {
-  component: Component,
-  name: "Component",
-  props: {
-    /* default props */
-  } as Props,
-  requiredProps: ["label"],
-  optionalProps: {
-    disabled: true,
-  },
-  queries: {
-    getPrimaryElement: (s) => s.getByRole("button"),
-  },
-  variants: {
-    disabled: {
-      props: { disabled: true },
-      assert: (el) => {
-        expect(el).toBeDisabled();
-      },
-    },
-    error: {
-      props: { error: true } as Partial<Props>,
-      assert: (el) => {
-        expect(el).toHaveClass(
-          "border-[var(--color-border-default-utility-negative)]",
-        );
-      },
-    },
-  },
-  testCases: {
-    renders: true,
-    accessibility: true,
-    keyboardNavigation: true,
-    disabledState: true,
-    errorState: true,
-  },
-};
-
-componentTestSuite<Props>(config);
-```
-
-#### What the Standard Suite Covers
-
-- **Rendering**
-  - Component renders without throwing using the provided `props`.
-  - Required props are present and do not break rendering.
-  - Optional props can be applied without breaking.
-
-- **Accessibility**
-  - Runs `axe` against the rendered output.
-  - Fails on common WCAG 2.1 issues (roles, labels, contrast, etc.).
-
-- **Keyboard Navigation**
-  - Ensures the primary element can receive focus.
-  - Smoke‑tests basic keyboard activation (`Enter`, `Space`) without runtime errors.
-
-- **Disabled State**
-  - Uses `variants.disabled` to verify disabled behaviour (e.g., `aria-disabled`, `disabled` attribute, tab index).
-
-- **Error State**
-  - Uses `variants.error` to verify error styling/attributes when applicable.
-
-### When to Add Custom Tests
-
-Use the standard suite for **baseline coverage**, then add custom `describe` blocks in the same file when:
-
-- The component has **important variants** (different sizes, modes, label variants).
-- There is **non‑trivial interaction** (menus, dropdowns, complex keyboard behaviour).
-- You need to exercise **stateful flows** (forms, validation, error messages).
-
-Example (inside the same `*.test.tsx` file):
-
-```ts
-describe("Input – behaviour specifics", () => {
-  it("calls onChange when user types", async () => {
-    // ...
-  });
-});
-```
-
-### Test Commands
-
-- **All component tests** (Vitest + RTL):
-
-  ```bash
-  npm test
-  ```
-
-- **Component-only tests** (faster inner loop, focused on `tests/components/`):
-
-  ```bash
-  npm run test:component
-  # filter by name:
-  npm run test:component -- --run tests/components/Button.test.tsx
-  ```
-
-- **E2E tests only** (Playwright):
-
-  ```bash
-  npm run test:e2e
-  # or, equivalently:
-  npm run e2e
-  ```
-
-### What to Test vs. What Not to Test
-
-- **Do test**
-  - Public behaviour: visible text, roles, labels, ARIA, keyboard paths.
-  - State transitions that users rely on (error -> success, disabled -> enabled).
-  - Critical component interactions (clicks, form submissions, dropdown selection).
-  - Accessibility invariants (no axe violations, basic keyboard support).
-
-- **Avoid testing**
-  - Pure styling details that are likely to change frequently (exact shadow radius, minor spacing).
-  - Internal implementation details (private helpers, hook internals, memoisation specifics).
-  - Responsive visibility in JSDOM (use Playwright visual / responsive tests instead).
-
-### Adding Tests for a New Component (≈5 minutes)
-
-1. **Create the component file** in `app/components/`.
-2. **Create a test file** in `tests/components/ComponentName.test.tsx`.
-3. **Wire the standard suite** using `componentTestSuite`.
-4. **Add 1–3 custom tests** for any unique behaviours.
-5. Run:
-
-   ```bash
-   npm run test:component -- --run tests/components/ComponentName.test.tsx
-   ```
-
-### E2E and Visual Regression
-
-E2E tests are organized into focused files:
-
-- **`critical-journeys.spec.ts`**: Main user journeys (homepage loads, navigation, key interactions)
-- **`visual-regression.spec.ts`**: Critical page screenshots only (homepage full/viewport, blog listing/post, 404)
-- **`edge-cases.spec.ts`**: Critical error scenarios (slow network, offline mode, JS errors, missing images)
-- **`performance.spec.ts`**: Essential performance checks (homepage load, Core Web Vitals)
-
-**Commands:**
-
-```bash
-# Run all E2E tests
-npm run test:e2e
-
-# Run visual regression tests only
-npm run visual:test
-
-# Update visual regression snapshots (after UI changes)
-npm run visual:update
-
-# Run specific test file
-npx playwright test tests/e2e/critical-journeys.spec.ts
-```
-
-**When to add E2E tests:**
-
-- **Add E2E tests** when:
-  - A new critical user journey is introduced (e.g., new multi-step flow)
-  - A major page is added that needs visual regression coverage
-  - A critical error scenario needs to be tested (e.g., payment failure, form submission errors)
-
-- **Don't add E2E tests** for:
-  - Component-level interactions (use component tests instead)
-  - Single-page functionality (use page tests instead)
-  - Minor UI changes (visual regression will catch major regressions)
-  - Edge cases that don't impact core user experience
-
-**Visual regression snapshots:**
-
-Visual regression tests capture screenshots of critical pages. When UI changes are intentional, update snapshots:
-
-```bash
-npm run visual:update
-```
-
-This updates snapshots for all 5 critical page tests. Review the changes carefully before committing.
-
-### Storybook
-
-**Storybook is used for component documentation and visual review only.** It is not used for automated testing.
-
-- Component tests (`tests/components/*.test.tsx`) provide all test coverage previously handled by Storybook test-runner
-- Storybook stories (`stories/*.stories.js`) serve as living documentation and visual examples
-- Interaction functions are inlined in story files for demonstration purposes
-- Run Storybook locally with `npm run storybook` for component development and review
-
-### Accessibility Testing
-
-Accessibility is tested at two levels:
-
-1. **Component-level accessibility** (`tests/components/*.test.tsx`):
-   - Automatically covered by `componentTestSuite` using `jest-axe`
-   - Tests roles, labels, ARIA attributes, keyboard navigation
-   - Runs as part of every component test suite
-
-2. **Full-page accessibility** (`tests/accessibility/e2e/wcag-compliance.spec.ts`):
-   - E2E tests using Playwright and `@axe-core/playwright`
-   - Validates WCAG 2.1 AA compliance across entire pages
-   - Tests complete user journeys for accessibility barriers
-
-This two-tier approach ensures both individual components and full page experiences meet accessibility standards.
diff --git a/docs/create-flow.md b/docs/create-flow.md
index 94e3d2b..319d47b 100644
--- a/docs/create-flow.md
+++ b/docs/create-flow.md
@@ -1,20 +1,20 @@
 # Create rule flow (custom wizard) — canonical reference
 
-Product/engineering reference for the **custom** “Create rule” experience: URL order, persistence, and entry points. **Implementation work** to align code with this doc (progress bar, resume redirects, etc.) is tracked in Linear **[CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)** and [docs/backend-linear-tickets.md](backend-linear-tickets.md) **Ticket 17**.
+Product/engineering reference for the **custom** “Create rule” experience: URL order, persistence, and entry points. **Implementation work** to align code with this doc (progress bar, resume redirects, etc.) is tracked in Linear **[CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)** and [docs/guides/backend-linear-tickets.md](guides/backend-linear-tickets.md) **Ticket 17**.
 
 ---
 
 ## Product stages (Figma)
 
-The Figma **Create Community** sequence is the **source of truth** for the first segment of the wizard (eight frames). After **`review`**, the flow continues with **Create Custom CommunityRule** and **Review and complete** stages. The shipped URL sequence in [`FLOW_STEP_ORDER`](../app/create/utils/flowSteps.ts) **follows that trajectory**; stages are a **product** slice of that linear order, not separate routers today.
+The Figma **Create Community** sequence is the **source of truth** for the first segment of the wizard (eight frames). After **`review`**, the flow continues with **Create Custom CommunityRule** and **Review and complete** stages. The shipped URL sequence in [`FLOW_STEP_ORDER`](../app/(app)/create/utils/flowSteps.ts) **follows that trajectory**; stages are a **product** slice of that linear order, not separate routers today.
 
 | Stage (Figma) | Purpose (summary) | `CreateFlowStep` values (in order) |
 | --- | --- | --- |
 | **Create Community** | Intro, naming, structure, context, size, upload, save progress (email), then community review. | `informational` → `community-name` → `community-structure` → `community-context` → `community-size` → `community-upload` → `community-save` → `review` |
-| **Create Custom CommunityRule** | Author the CommunityRule content and structure. | `core-values` → `communication-methods` → `right-rail` (further card-stack steps get their own `screenId` and `screens/card/*Screen.tsx`; `right-rail` uses `layoutKind: "right-rail"`) |
+| **Create Custom CommunityRule** | Author the CommunityRule content and structure (core values + four card-stack categories). | `core-values` → `communication-methods` → `membership-methods` → `decision-approaches` → `conflict-management` |
 | **Review and complete** | Stakeholders, final card, publish, success. | `confirm-stakeholders` → `final-review` → `completed` |
 
-Treat these stages as the **canonical product sections** when adding chrome (e.g. stage headers, progress copy), breaking work across teams, or reusing flows in other surfaces. **Layout kind** is **not** encoded in the URL; it lives in [`CREATE_FLOW_SCREEN_REGISTRY`](../app/create/utils/createFlowScreenRegistry.ts) (Figma node id + `layoutKind` per step). Figma defines eight layout kinds: **informational**, **text**, **select**, **upload**, **review**, **card**, **right-rail**, **completed** — `CreateFlowLayoutKind` and [`app/create/screens/`](../app/create/screens/) mirror that list (one folder per kind; multiple steps may share a kind, e.g. several **select** screens).
+Treat these stages as the **canonical product sections** when adding chrome (e.g. stage headers, progress copy), breaking work across teams, or reusing flows in other surfaces. **Layout kind** is **not** encoded in the URL; it lives in [`CREATE_FLOW_SCREEN_REGISTRY`](../app/(app)/create/utils/createFlowScreenRegistry.ts) (Figma node id + `layoutKind` per step). Figma defines eight layout kinds: **informational**, **text**, **select**, **upload**, **review**, **card**, **right-rail**, **completed** — `CreateFlowLayoutKind` and [`app/(app)/create/screens/`](../app/(app)/create/screens/) mirror that list (one folder per kind; multiple steps may share a kind, e.g. several **select** screens).
 
 **Create from template (future):** A full **template-driven** create path is **not** finalized; it will likely live on **additional route(s)** (and may reuse these stages where it overlaps the custom trajectory). Today, **`/create/review-template/[slug]`** is only an auxiliary **preview** in the create shell; it is **not** a Figma stage and not the final template-create entry. See **Out of scope** in [CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo).
 
@@ -22,7 +22,7 @@ Treat these stages as the **canonical product sections** when adding chrome (e.g
 
 ## Step order and URLs
 
-Order is defined in code by [`FLOW_STEP_ORDER`](../app/create/utils/flowSteps.ts) and the [`CreateFlowStep`](../app/create/types.ts) type. Wizard steps use a **single dynamic route**: [`app/create/[screenId]/page.tsx`](../app/create/[screenId]/page.tsx), which validates `screenId` and renders [`CreateFlowScreenView`](../app/create/screens/CreateFlowScreenView.tsx). Implementation files are grouped under [`app/create/screens/`](../app/create/screens/) by Figma **layout kind** (subfolders: informational, text, select, upload, review, card, right-rail, completed). **`/create`** redirects to the first step.
+Order is defined in code by [`FLOW_STEP_ORDER`](../app/(app)/create/utils/flowSteps.ts) and the [`CreateFlowStep`](../app/(app)/create/types.ts) type. Wizard steps use a **single dynamic route**: [`app/(app)/create/[screenId]/page.tsx`](../app/(app)/create/[screenId]/page.tsx), which validates `screenId` and renders [`CreateFlowScreenView`](../app/(app)/create/screens/CreateFlowScreenView.tsx). Implementation files are grouped under [`app/(app)/create/screens/`](../app/(app)/create/screens/) by Figma **layout kind** (subfolders: informational, text, select, upload, review, card, right-rail, completed). **`/create`** redirects to the first step.
 
 | Order | Figma stage | Step ID (`screenId`) | Path |
 | ----: | ----------- | -------------------- | ---- |
@@ -36,14 +36,16 @@ Order is defined in code by [`FLOW_STEP_ORDER`](../app/create/utils/flowSteps.ts
 | 8 | Create Community (review frame) | `review` | `/create/review` |
 | 9 | Create Custom CommunityRule | `core-values` | `/create/core-values` |
 | 10 | Create Custom CommunityRule | `communication-methods` | `/create/communication-methods` |
-| 11 | Create Custom CommunityRule | `right-rail` | `/create/right-rail` |
-| 12 | Review and complete | `confirm-stakeholders` | `/create/confirm-stakeholders` |
-| 13 | Review and complete | `final-review` | `/create/final-review` |
-| 14 | Review and complete | `completed` | `/create/completed` |
+| 11 | Create Custom CommunityRule | `membership-methods` | `/create/membership-methods` |
+| 12 | Create Custom CommunityRule | `decision-approaches` | `/create/decision-approaches` |
+| 13 | Create Custom CommunityRule | `conflict-management` | `/create/conflict-management` |
+| 14 | Review and complete | `confirm-stakeholders` | `/create/confirm-stakeholders` |
+| 15 | Review and complete | `final-review` | `/create/final-review` |
+| 16 | Review and complete | `completed` | `/create/completed` |
 
 **Primary entry:** marketing header “Create rule” navigates to **`/create`**, which redirects to **`/create/informational`** (see [`TopNav.container.tsx`](../app/components/navigation/TopNav/TopNav.container.tsx)).
 
-Active step for chrome and navigation is resolved from the pathname via [`parseCreateFlowScreenFromPathname`](../app/create/utils/flowSteps.ts) inside [`useCreateFlowNavigation`](../app/create/hooks/useCreateFlowNavigation.ts).
+Active step for chrome and navigation is resolved from the pathname via [`parseCreateFlowScreenFromPathname`](../app/(app)/create/utils/flowSteps.ts) inside [`useCreateFlowNavigation`](../app/(app)/create/hooks/useCreateFlowNavigation.ts).
 
 ---
 
@@ -61,10 +63,10 @@ From that page, **Customize** currently navigates to `/create/informational?temp
 
 | Mode | Where progress lives | Save & Exit / server draft |
 | --- | --- | --- |
-| **Anonymous** | `localStorage` key **`create-flow-anonymous`** | **Exit** opens save-progress magic link; after verify, optional **PUT** `/api/drafts/me` when `NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true` (see Tickets 4–5 in [backend-linear-tickets.md](backend-linear-tickets.md)). |
+| **Anonymous** | `localStorage` key **`create-flow-anonymous`** | **Exit** opens save-progress magic link; after verify, optional **PUT** `/api/drafts/me` when `NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true` (see Tickets 4–5 in [guides/backend-linear-tickets.md](guides/backend-linear-tickets.md)). |
 | **Signed-in** | In-memory React state in **`CreateFlowContext`** | **Save & Exit** from the **`community-structure`** step onward (step index ≥ `community-structure`) may **PUT** `/api/drafts/me` when sync is on. **Sign out** is on profile, not in the create top nav. |
 
-Details and edge cases (conflict confirm, banners, `?syncDraft=1`) match **Ticket 4**, **Ticket 5**, and [`docs/backend-roadmap.md`](backend-roadmap.md) §12.
+Details and edge cases (conflict confirm, banners, `?syncDraft=1`) match **Ticket 4**, **Ticket 5**, and [`docs/guides/backend-roadmap.md`](guides/backend-roadmap.md) §12.
 
 ---
 
@@ -77,5 +79,5 @@ Details and edge cases (conflict confirm, banners, `?syncDraft=1`) match **Ticke
 
 ## Related docs
 
-- [docs/backend-roadmap.md](backend-roadmap.md) §12 — Frontend hook-up  
-- [docs/backend-linear-tickets.md](backend-linear-tickets.md) — Tickets 4, 5, 6, 17  
+- [docs/guides/backend-roadmap.md](guides/backend-roadmap.md) §12 — Frontend hook-up
+- [docs/guides/backend-linear-tickets.md](guides/backend-linear-tickets.md) — Tickets 4, 5, 6, 17
diff --git a/docs/backend-linear-tickets.md b/docs/guides/backend-linear-tickets.md
similarity index 86%
rename from docs/backend-linear-tickets.md
rename to docs/guides/backend-linear-tickets.md
index a1eb795..4c15acd 100644
--- a/docs/backend-linear-tickets.md
+++ b/docs/guides/backend-linear-tickets.md
@@ -86,7 +86,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Depends on:** Ticket 1 (optional but keeps docs honest).
 
-**Goal:** Replace the open `[key: string]: unknown` shape in [app/create/types.ts](app/create/types.ts) with real fields (or nested objects) agreed with design/product, and validate JSON on the server for drafts and publish.
+**Goal:** Replace the open `[key: string]: unknown` shape in [app/(app)/create/types.ts](app/(app)/create/types.ts) with real fields (or nested objects) agreed with design/product, and validate JSON on the server for drafts and publish.
 
 **Context:** `PUT /api/drafts/me` and `POST /api/rules` accept loose objects today; oversized or malformed payloads are a stability and security concern.
 
@@ -107,7 +107,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Status:** [CR-73](https://linear.app/community-rule/issue/CR-73/backend-formalize-createflowstate-validate-draftpublish-api-payloads) **Done**.
 
-**Files:** [app/create/types.ts](app/create/types.ts), [app/api/drafts/me/route.ts](app/api/drafts/me/route.ts), [app/api/rules/route.ts](app/api/rules/route.ts), [lib/server/validation/](lib/server/validation/) (Zod + plain-JSON checks), [package.json](package.json) (`zod`).
+**Files:** [app/(app)/create/types.ts](app/(app)/create/types.ts), [app/api/drafts/me/route.ts](app/api/drafts/me/route.ts), [app/api/rules/route.ts](app/api/rules/route.ts), [lib/server/validation/](lib/server/validation/) (Zod + plain-JSON checks), [package.json](package.json) (`zod`).
 
 **Note:** Repo-wide **API error JSON shape** and **request-id logging** are **Ticket 13 / CR-84**—coordinate 400 response bodies with that issue so validation errors match the agreed `{ error: { code, message } }` pattern.
 
@@ -125,12 +125,12 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Implementation (shipped):**
 
-1. **`/login`** route **and** **header modal** — primary **Log in** entry is [`AuthModalProvider`](app/contexts/AuthModalContext.tsx) + [app/components/modals/Login/](app/components/modals/Login/); [app/login/page.tsx](app/login/page.tsx) (solid shell, `usePortal={false}`) remains for verify **error** redirects and bookmarks.
+1. **`/login`** route **and** **header modal** — primary **Log in** entry is [`AuthModalProvider`](app/contexts/AuthModalContext.tsx) + [app/components/modals/Login/](app/components/modals/Login/); [app/(app)/login/page.tsx](app/(app)/login/page.tsx) (solid shell, `usePortal={false}`) remains for verify **error** redirects and bookmarks.
 2. Flow: email → “Send link” → user opens link (email, Mailhog, or dev log) → `GET /api/auth/magic-link/verify?token=...` sets session and redirects; optional `next` for post-login path.
 3. Surface API errors: invalid email, 429 `retryAfterMs`, expired/invalid token, network failure (accessible copy).
 4. Ensure `fetch` calls use `credentials: "include"` where needed (see [lib/create/api.ts](lib/create/api.ts)).
 5. **Dev:** without `SMTP_URL`, verify URL is logged; with Mailhog, use [docker-compose.yml](docker-compose.yml) and `SMTP_URL=smtp://localhost:1025`.
-6. **Marketing header:** When signed in (`fetchAuthSession`), **Log in** becomes **Profile** linking to [`/profile`](app/profile/page.tsx) (placeholder until Ticket 15 / CR-86). Implemented in [TopNavWithPathname.tsx](app/components/navigation/TopNav/TopNavWithPathname.tsx) + [TopNav.container.tsx](app/components/navigation/TopNav/TopNav.container.tsx).
+6. **Marketing header:** When signed in (`fetchAuthSession`), **Log in** becomes **Profile** linking to [`/profile`](app/(app)/profile/page.tsx) (placeholder until Ticket 15 / CR-86). Implemented in [TopNavWithPathname.tsx](app/components/navigation/TopNav/TopNavWithPathname.tsx) + [TopNav.container.tsx](app/components/navigation/TopNav/TopNav.container.tsx).
 
 **Acceptance criteria:**
 
@@ -141,7 +141,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Status:** [CR-74](https://linear.app/community-rule/issue/CR-74/backend-magic-link-sign-in-ui-apis-ticket-3-cr-75-done) **Done** for shipped UI/APIs. **Residual checklist** below: repo doc items are **done**; use Linear (CR-74 or child issue) to track **per-environment** staging URL checks.
 
-**Files:** [app/login/](app/login/), [app/profile/](app/profile/) (placeholder), [app/components/modals/Login/](app/components/modals/Login/), [messages/en/pages/login.json](messages/en/pages/login.json), [messages/en/pages/profile.json](messages/en/pages/profile.json), [messages/en/components/header.json](messages/en/components/header.json), [app/components/navigation/TopNav/TopNav.container.tsx](app/components/navigation/TopNav/TopNav.container.tsx), [app/components/navigation/TopNav/TopNavWithPathname.tsx](app/components/navigation/TopNav/TopNavWithPathname.tsx), [lib/create/api.ts](lib/create/api.ts), [app/api/auth/magic-link/request/route.ts](app/api/auth/magic-link/request/route.ts), [app/api/auth/magic-link/verify/route.ts](app/api/auth/magic-link/verify/route.ts), [prisma/schema.prisma](prisma/schema.prisma) (`MagicLinkToken`), [lib/server/mail.ts](lib/server/mail.ts). Onboarding: [CONTRIBUTING.md](CONTRIBUTING.md), [`.env.example`](.env.example).
+**Files:** [app/(app)/login/](app/(app)/login/), [app/(app)/profile/](app/(app)/profile/) (placeholder), [app/components/modals/Login/](app/components/modals/Login/), [messages/en/pages/login.json](messages/en/pages/login.json), [messages/en/pages/profile.json](messages/en/pages/profile.json), [messages/en/components/header.json](messages/en/components/header.json), [app/components/navigation/TopNav/TopNav.container.tsx](app/components/navigation/TopNav/TopNav.container.tsx), [app/components/navigation/TopNav/TopNavWithPathname.tsx](app/components/navigation/TopNav/TopNavWithPathname.tsx), [lib/create/api.ts](lib/create/api.ts), [app/api/auth/magic-link/request/route.ts](app/api/auth/magic-link/request/route.ts), [app/api/auth/magic-link/verify/route.ts](app/api/auth/magic-link/verify/route.ts), [prisma/schema.prisma](prisma/schema.prisma) (`MagicLinkToken`), [lib/server/mail.ts](lib/server/mail.ts). Onboarding: [CONTRIBUTING.md](CONTRIBUTING.md), [`.env.example`](.env.example).
 
 ### Residual / before CR-75 (create-flow session UI)
 
@@ -158,24 +158,24 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Depends on:** Ticket 3.
 
-**Goal:** In `/create/*`, **Exit** / **Save & Exit** (from `select` onward for signed-in users) is the only top-nav chrome—no email or Sign out in the create shell. **Anonymous:** progress in **`create-flow-anonymous`** localStorage; **Exit** opens the global **Save your progress?** auth modal (magic link + `?syncDraft=1` return); after verify, [`PostLoginDraftTransfer`](app/create/PostLoginDraftTransfer.tsx) **PUT**s to `/api/drafts/me` when sync is on. **Signed-in:** **Save & Exit** **PUT**s via [`useCreateFlowExit`](app/create/hooks/useCreateFlowExit.ts) when **`NEXT_PUBLIC_ENABLE_BACKEND_SYNC`**. **Sign out** for QA lives on **[ProfilePageClient](app/profile/ProfilePageClient.tsx)**. Site **Log in** opens the same modal overlay ([`AuthModalProvider`](app/contexts/AuthModalContext.tsx)), not only `/login`.
+**Goal:** In `/create/*`, **Exit** / **Save & Exit** (from `select` onward for signed-in users) is the only top-nav chrome—no email or Sign out in the create shell. **Anonymous:** progress in **`create-flow-anonymous`** localStorage; **Exit** opens the global **Save your progress?** auth modal (magic link + `?syncDraft=1` return); after verify, [`PostLoginDraftTransfer`](app/(app)/create/PostLoginDraftTransfer.tsx) **PUT**s to `/api/drafts/me` when sync is on. **Signed-in:** **Save & Exit** **PUT**s via [`useCreateFlowExit`](app/(app)/create/hooks/useCreateFlowExit.ts) when **`NEXT_PUBLIC_ENABLE_BACKEND_SYNC`**. **Sign out** for QA lives on **[ProfilePageClient](app/(app)/profile/ProfilePageClient.tsx)**. Site **Log in** opens the same modal overlay ([`AuthModalProvider`](app/contexts/AuthModalContext.tsx)), not only `/login`.
 
 **Context:** **`saveDraftOnExit`** is gated on **session + step ≥ select**. Layout **`fetchAuthSession`** drives anonymous vs authenticated persistence and exit behavior. **Save & Exit** styling: Figma [20907:212637](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=20907-212637). Save-progress exit modal: Figma `22398:23743`.
 
 **Implementation (repo):**
 
-1. [app/create/layout.tsx](app/create/layout.tsx): session + `enableAnonymousPersistence`; anonymous exit → `openLogin({ variant: 'saveProgress', nextPath })`; signed-in exit → `useCreateFlowExit`.
+1. [app/(app)/create/layout.tsx](app/(app)/create/layout.tsx): session + `enableAnonymousPersistence`; anonymous exit → `openLogin({ variant: 'saveProgress', nextPath })`; signed-in exit → `useCreateFlowExit`.
 2. [CreateFlowTopNav](app/components/utility/CreateFlowTopNav/): i18n [`messages/en/create/topNav.json`](messages/en/create/topNav.json); logo + Share/Export/Edit (completed) + Exit/Save & Exit only.
-3. [useCreateFlowExit](app/create/hooks/useCreateFlowExit.ts): `saveDraftToServer` when sync + signed in; `clearState` + home.
-4. [CreateFlowContext](app/create/context/CreateFlowContext.tsx): optional anonymous localStorage mirror via `enableAnonymousPersistence`.
-5. **QA:** [ProfilePageClient](app/profile/ProfilePageClient.tsx) Sign out when session present.
+3. [useCreateFlowExit](app/(app)/create/hooks/useCreateFlowExit.ts): `saveDraftToServer` when sync + signed in; `clearState` + home.
+4. [CreateFlowContext](app/(app)/create/context/CreateFlowContext.tsx): optional anonymous localStorage mirror via `enableAnonymousPersistence`.
+5. **QA:** [ProfilePageClient](app/(app)/profile/ProfilePageClient.tsx) Sign out when session present.
 
 **Acceptance criteria:**
 
 - [x] Completed step still works; **Save & Exit** gating uses session + step (not conflated with `completed` only).
 - [x] Signed in + sync: Save & Exit persists server-side; anonymous: localStorage + exit modal + transfer after magic link. Sign out on profile clears session. _(Re-verify on staging/prod as needed.)_
 
-**Files:** [app/create/layout.tsx](app/create/layout.tsx), [app/create/hooks/useCreateFlowExit.ts](app/create/hooks/useCreateFlowExit.ts), [app/components/utility/CreateFlowTopNav/](app/components/utility/CreateFlowTopNav/), [app/create/context/CreateFlowContext.tsx](app/create/context/CreateFlowContext.tsx), [messages/en/create/topNav.json](messages/en/create/topNav.json), [app/profile/ProfilePageClient.tsx](app/profile/ProfilePageClient.tsx).
+**Files:** [app/(app)/create/layout.tsx](app/(app)/create/layout.tsx), [app/(app)/create/hooks/useCreateFlowExit.ts](app/(app)/create/hooks/useCreateFlowExit.ts), [app/components/utility/CreateFlowTopNav/](app/components/utility/CreateFlowTopNav/), [app/(app)/create/context/CreateFlowContext.tsx](app/(app)/create/context/CreateFlowContext.tsx), [messages/en/create/topNav.json](messages/en/create/topNav.json), [app/(app)/profile/ProfilePageClient.tsx](app/(app)/profile/ProfilePageClient.tsx).
 
 ---
 
@@ -189,9 +189,9 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Implementation:**
 
-1. **Hydration:** **Done:** [SignedInDraftHydration](app/create/SignedInDraftHydration.tsx) + [messages/en/create/draftHydration.json](messages/en/create/draftHydration.json); skips `?syncDraft=1` / transfer-pending (PostLogin owns that). Wired in [layout](app/create/layout.tsx).
-2. **Conflict:** **Done:** If `create-flow-anonymous` and server draft are both non-empty, `window.confirm` (OK = account draft, Cancel = browser copy); documented on [anonymousDraftStorage](app/create/utils/anonymousDraftStorage.ts). Newer-`updatedAt` client compare remains optional.
-3. **Save failures (API surface):** **Done (CR-76):** [saveDraftToServer](lib/create/api.ts) returns `SaveDraftResult` with parsed API `message`; wired in [useCreateFlowExit](app/create/hooks/useCreateFlowExit.ts) and [PostLoginDraftTransfer](app/create/PostLoginDraftTransfer.tsx).
+1. **Hydration:** **Done:** [SignedInDraftHydration](app/(app)/create/SignedInDraftHydration.tsx) + [messages/en/create/draftHydration.json](messages/en/create/draftHydration.json); skips `?syncDraft=1` / transfer-pending (PostLogin owns that). Wired in [layout](app/(app)/create/layout.tsx).
+2. **Conflict:** **Done:** If `create-flow-anonymous` and server draft are both non-empty, `window.confirm` (OK = account draft, Cancel = browser copy); documented on [anonymousDraftStorage](app/(app)/create/utils/anonymousDraftStorage.ts). Newer-`updatedAt` client compare remains optional.
+3. **Save failures (API surface):** **Done (CR-76):** [saveDraftToServer](lib/create/api.ts) returns `SaveDraftResult` with parsed API `message`; wired in [useCreateFlowExit](app/(app)/create/hooks/useCreateFlowExit.ts) and [PostLoginDraftTransfer](app/(app)/create/PostLoginDraftTransfer.tsx).
 4. **Save failures (UX):** **Done (CR-76):** Dismissible banner with server `message` (no second confirm to leave); post-login transfer shows reason; unit tests in `tests/unit/saveDraftToServer.test.ts`. Retry/backoff remains optional.
 5. **Tests:** `saveDraftToServer` unit tests; [draftHydrationUtils](lib/create/draftHydrationUtils.ts) unit tests. Playwright against Next standalone + route mocks for `/api/auth/session` was flaky here; cover hydration with **manual QA** (signed in + sync on + server draft) or add a future E2E with a dedicated auth fixture.
 
@@ -200,7 +200,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 - [x] No silent data loss when server save fails (user sees reason in banner; stays in flow to retry Save & Exit or leave via e.g. logo).
 - [x] User understands when server draft replaced local state (if applicable) — conflict `window.confirm` when both browser anonymous draft and account draft exist; otherwise silent apply of single source.
 
-**Files:** [lib/create/api.ts](lib/create/api.ts), [app/create/hooks/useCreateFlowExit.ts](app/create/hooks/useCreateFlowExit.ts), [app/create/PostLoginDraftTransfer.tsx](app/create/PostLoginDraftTransfer.tsx), [app/create/SignedInDraftHydration.tsx](app/create/SignedInDraftHydration.tsx), [app/create/layout.tsx](app/create/layout.tsx), [CreateFlowContext](app/create/context/CreateFlowContext.tsx), tests under `tests/`.
+**Files:** [lib/create/api.ts](lib/create/api.ts), [app/(app)/create/hooks/useCreateFlowExit.ts](app/(app)/create/hooks/useCreateFlowExit.ts), [app/(app)/create/PostLoginDraftTransfer.tsx](app/(app)/create/PostLoginDraftTransfer.tsx), [app/(app)/create/SignedInDraftHydration.tsx](app/(app)/create/SignedInDraftHydration.tsx), [app/(app)/create/layout.tsx](app/(app)/create/layout.tsx), [CreateFlowContext](app/(app)/create/context/CreateFlowContext.tsx), tests under `tests/`.
 
 ---
 
@@ -210,7 +210,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Goal:** Completing the flow persists a **PublishedRule** via existing [publishRule](lib/create/api.ts).
 
-**Context:** [lib/create/api.ts](lib/create/api.ts) already wraps `POST /api/rules`. UI on the `final-review` / `completed` steps (see [app/create/screens/CreateFlowScreenView.tsx](app/create/screens/CreateFlowScreenView.tsx) and `app/create/screens/`) must call it with `{ title, summary?, document }` derived from `CreateFlowState`.
+**Context:** [lib/create/api.ts](lib/create/api.ts) already wraps `POST /api/rules`. UI on the `final-review` / `completed` steps (see [app/(app)/create/screens/CreateFlowScreenView.tsx](app/(app)/create/screens/CreateFlowScreenView.tsx) and `app/(app)/create/screens/`) must call it with `{ title, summary?, document }` derived from `CreateFlowState`.
 
 **Implementation:**
 
@@ -224,7 +224,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 - [ ] Published row appears in Postgres (`PublishedRule`) and `GET /api/rules` lists it.
 - [ ] User sees clear success/failure.
 
-**Files:** relevant `app/create/*/page.tsx`, [lib/create/api.ts](lib/create/api.ts) if request shape changes, types from Ticket 2.
+**Files:** relevant `app/(app)/create/*/page.tsx`, [lib/create/api.ts](lib/create/api.ts) if request shape changes, types from Ticket 2.
 
 ---
 
@@ -258,7 +258,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Goal:** Home or create entry surfaces use live template data instead of only static i18n JSON.
 
-**Context:** [RuleStack.view.tsx](app/components/sections/RuleStack/RuleStack.view.tsx) and create entry surfaces reference future template work. Wizard URLs are static segments under `app/create/`; see [`docs/create-flow.md`](create-flow.md) and **Ticket 17** for the canonical custom flow.
+**Context:** [RuleStack.view.tsx](app/components/sections/RuleStack/RuleStack.view.tsx) and create entry surfaces reference future template work. Wizard URLs are static segments under `app/(app)/create/`; see [`docs/create-flow.md`](create-flow.md) and **Ticket 17** for the canonical custom flow.
 
 **Implementation:**
 
@@ -271,7 +271,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 - [ ] Changing a template row in Prisma Studio reflects after refresh (or revalidate).
 - [ ] No layout shift regression on LCP-critical pages (use skeletons).
 
-**Files:** [app/components/sections/RuleStack/](app/components/sections/RuleStack/), create-flow entry routes under [app/create/](app/create/), possibly new `lib/templates/fetchTemplates.ts`.
+**Files:** [app/components/sections/RuleStack/](app/components/sections/RuleStack/), create-flow entry routes under [app/(app)/create/](app/(app)/create/), possibly new `lib/templates/fetchTemplates.ts`.
 
 **Follow-up:** **Ticket 16** — dynamic recommendations from authoring spreadsheets and create-flow answers.
 
@@ -311,14 +311,14 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 
 **Goal:** Establish the **official custom** create-rule flow (ordered steps, URLs, persistence, entry points, **Figma three-stage framing**) in repo docs and close gaps between that spec and the implementation (routing clutter, progress UI, step source of truth, resume vs URL).
 
-**Context:** Step order lives in [`app/create/utils/flowSteps.ts`](app/create/utils/flowSteps.ts). Wizard screens render from [`app/create/[screenId]/page.tsx`](app/create/[screenId]/page.tsx) plus [`CREATE_FLOW_SCREEN_REGISTRY`](app/create/utils/createFlowScreenRegistry.ts) (Figma node + layout family per slug). [`docs/create-flow.md`](create-flow.md) is the **canonical** URL/persistence summary: **Create Community** (eight semantic steps ending at `review`) → **Create Custom CommunityRule** → **Review and complete**. **Full create-from-template** will likely use **additional route(s)** when product defines it; **`/create/review-template/[slug]`** remains auxiliary preview only. **Template → `final-review` or mid-wizard prefill** is **out of scope** here (future ticket); `/create/informational?template=` is a **no-op** until then.
+**Context:** Step order lives in [`app/(app)/create/utils/flowSteps.ts`](app/(app)/create/utils/flowSteps.ts). Wizard screens render from [`app/(app)/create/[screenId]/page.tsx`](app/(app)/create/[screenId]/page.tsx) plus [`CREATE_FLOW_SCREEN_REGISTRY`](app/(app)/create/utils/createFlowScreenRegistry.ts) (Figma node + layout family per slug). [`docs/create-flow.md`](create-flow.md) is the **canonical** URL/persistence summary: **Create Community** (eight semantic steps ending at `review`) → **Create Custom CommunityRule** → **Review and complete**. **Full create-from-template** will likely use **additional route(s)** when product defines it; **`/create/review-template/[slug]`** remains auxiliary preview only. **Template → `final-review` or mid-wizard prefill** is **out of scope** here (future ticket); `/create/informational?template=` is a **no-op** until then.
 
 **Implementation:**
 
 1. Keep [`docs/create-flow.md`](create-flow.md) in sync with product/Figma (stage ↔ step mapping, future template routes).
-2. ~~Remove legacy [`app/create/[step]/page.tsx`](app/create/[step]/page.tsx)~~ — replaced by [`app/create/[screenId]/page.tsx`](app/create/[screenId]/page.tsx) with real screens; unknown slugs `notFound()`.
-3. Unify **step source of truth**: URL via [`useCreateFlowNavigation`](app/create/hooks/useCreateFlowNavigation.ts) vs unused [`CreateFlowContext`](app/create/context/CreateFlowContext.tsx) `currentStep` — pick one model; align [`useCreateFlowExit`](app/create/hooks/useCreateFlowExit.ts) / draft payload if needed.
-4. **Resume:** After [`SignedInDraftHydration`](app/create/SignedInDraftHydration.tsx), decide redirect to `/create/${state.currentStep}` vs stay on current URL; test or document.
+2. ~~Remove legacy [`app/(app)/create/[step]/page.tsx`](app/(app)/create/[step]/page.tsx)~~ — replaced by [`app/(app)/create/[screenId]/page.tsx`](app/(app)/create/[screenId]/page.tsx) with real screens; unknown slugs `notFound()`.
+3. Unify **step source of truth**: URL via [`useCreateFlowNavigation`](app/(app)/create/hooks/useCreateFlowNavigation.ts) vs unused [`CreateFlowContext`](app/(app)/create/context/CreateFlowContext.tsx) `currentStep` — pick one model; align [`useCreateFlowExit`](app/(app)/create/hooks/useCreateFlowExit.ts) / draft payload if needed.
+4. **Resume:** After [`SignedInDraftHydration`](app/(app)/create/SignedInDraftHydration.tsx), decide redirect to `/create/${state.currentStep}` vs stay on current URL; test or document.
 5. Wire [`CreateFlowFooter`](app/components/utility/CreateFlowFooter/) `ProportionBar` to step progress from `FLOW_STEP_ORDER` (and `review-template` / `completed` exceptions per design); optional **two-level progress** (stage + step within stage) when design specifies.
 6. When Figma hands off, surface **stage labels** in create shell (top nav, footer, or step chrome) using the mapping in `create-flow.md`.
 
@@ -330,7 +330,7 @@ Optional: **Docker image deploy** using the repo [Dockerfile](Dockerfile)—admi
 - [ ] Hydration + `currentStep` behavior is verified (redirect vs stay).
 - [ ] `?template=` documented as deferred; no implied “template customize → full wizard” parity.
 
-**Files:** [`docs/create-flow.md`](create-flow.md), [`app/create/`](app/create/), [`app/components/utility/CreateFlowFooter/`](app/components/utility/CreateFlowFooter/), optionally [`docs/backend-roadmap.md`](backend-roadmap.md) §12 cross-links.
+**Files:** [`docs/create-flow.md`](create-flow.md), [`app/(app)/create/`](app/(app)/create/), [`app/components/utility/CreateFlowFooter/`](app/components/utility/CreateFlowFooter/), optionally [`docs/backend-roadmap.md`](backend-roadmap.md) §12 cross-links.
 
 **Linear:** [CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo) (**Backlog**). **Parallel** to templates (7–8) and publish (6); not part of **CR-72 → CR-83**.
 
diff --git a/docs/backend-roadmap.md b/docs/guides/backend-roadmap.md
similarity index 91%
rename from docs/backend-roadmap.md
rename to docs/guides/backend-roadmap.md
index 70b6242..a9b3dd6 100644
--- a/docs/backend-roadmap.md
+++ b/docs/guides/backend-roadmap.md
@@ -9,7 +9,7 @@ Temporary working notes for building the backend. Safe to delete once the stack
 - **Next.js 16** single repo ([`package.json`](package.json)).
 - **PostgreSQL + Prisma**: schema and migrations under `prisma/`; product APIs under `app/api/*` (health, auth/magic-link, session, drafts, rules, templates, web-vitals).
 - **Server modules** in `lib/server/` (db, session, mail, rate limiting, etc.).
-- **Create flow:** **Anonymous** users mirror in-progress state to **`create-flow-anonymous`** in `localStorage`; **Exit** opens the save-progress magic-link modal; after verify, [`PostLoginDraftTransfer`](app/create/PostLoginDraftTransfer.tsx) can **PUT** `/api/drafts/me` when **`NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true`**. **Signed-in** users get a **fresh** in-memory session per “Create rule” entry, but with sync on the layout may **hydrate** from **`GET /api/drafts/me`** via [`SignedInDraftHydration`](app/create/SignedInDraftHydration.tsx); **Save & Exit** (from `community-structure` onward) **PUT**s when sync is on. **Log in** from the marketing header uses the global modal ([`AuthModalProvider`](app/contexts/AuthModalContext.tsx)); **`/login`** remains for verify errors and deep links. **Step order and URLs:** [`docs/create-flow.md`](docs/create-flow.md) and [`app/create/utils/flowSteps.ts`](app/create/utils/flowSteps.ts).
+- **Create flow:** **Anonymous** users mirror in-progress state to **`create-flow-anonymous`** in `localStorage`; **Exit** opens the save-progress magic-link modal; after verify, [`PostLoginDraftTransfer`](app/(app)/create/PostLoginDraftTransfer.tsx) can **PUT** `/api/drafts/me` when **`NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true`**. **Signed-in** users get a **fresh** in-memory session per “Create rule” entry, but with sync on the layout may **hydrate** from **`GET /api/drafts/me`** via [`SignedInDraftHydration`](app/(app)/create/SignedInDraftHydration.tsx); **Save & Exit** (from `community-structure` onward) **PUT**s when sync is on. **Log in** from the marketing header uses the global modal ([`AuthModalProvider`](app/contexts/AuthModalContext.tsx)); **`/login`** remains for verify errors and deep links. **Step order and URLs:** [`docs/create-flow.md`](docs/create-flow.md) and [`app/(app)/create/utils/flowSteps.ts`](app/(app)/create/utils/flowSteps.ts).
 - **Web vitals** [`app/api/web-vitals/route.ts`](app/api/web-vitals/route.ts) still use **file-based** storage under `.next` (not suitable for multi-instance production).
 - **CI:** [`.gitea/workflows/ci.yaml`](.gitea/workflows/ci.yaml) (build, test, lint, `prisma validate`); no in-repo production deploy definition.
 
@@ -88,7 +88,7 @@ Plain-English entities (names can evolve):
 
 **RuleDraft future (not v1):** versioning, multiple drafts per user, easier corruption recovery—only if product needs them.
 
-Align JSON shapes with `app/create/types.ts` as it matures.
+Align JSON shapes with `app/(app)/create/types.ts` as it matures.
 
 ---
 
@@ -218,7 +218,7 @@ npm run dev
 
 ## 12. Frontend hook-up
 
-**Step 1.** **Anonymous** create flow: in-progress state is stored in **`create-flow-anonymous`** (`localStorage`). **Signed-in** users: when **`NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true`**, the create layout may **hydrate** in-memory flow state from **`GET /api/drafts/me`** once per session ([`SignedInDraftHydration`](../app/create/SignedInDraftHydration.tsx)), including conflict handling if anonymous storage also has data. Without sync, signed-in progress stays **in memory** until **Save & Exit** (no automatic server read on entry). **Canonical wizard step order, URLs, and Figma product stages** (**Create Community** → **Create Custom CommunityRule** → **Review and complete**) are documented in [`docs/create-flow.md`](create-flow.md). The route **`/create/review-template/[slug]`** is an **auxiliary** template preview (not a numbered wizard step); a **full create-from-template** path will likely be **separate route(s)** when defined. **Prefilling the wizard or landing on `final-review` from a template** is **not** shipped yet — see **[CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)** / Ticket 17 in [docs/backend-linear-tickets.md](backend-linear-tickets.md).
+**Step 1.** **Anonymous** create flow: in-progress state is stored in **`create-flow-anonymous`** (`localStorage`). **Signed-in** users: when **`NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true`**, the create layout may **hydrate** in-memory flow state from **`GET /api/drafts/me`** once per session ([`SignedInDraftHydration`](../app/(app)/create/SignedInDraftHydration.tsx)), including conflict handling if anonymous storage also has data. Without sync, signed-in progress stays **in memory** until **Save & Exit** (no automatic server read on entry). **Canonical wizard step order, URLs, and Figma product stages** (**Create Community** → **Create Custom CommunityRule** → **Review and complete**) are documented in [`docs/create-flow.md`](create-flow.md). The route **`/create/review-template/[slug]`** is an **auxiliary** template preview (not a numbered wizard step); a **full create-from-template** path will likely be **separate route(s)** when defined. **Prefilling the wizard or landing on `final-review` from a template** is **not** shipped yet — see **[CR-89](https://linear.app/community-rule/issue/CR-89/product-canon-custom-create-rule-wizard-routes-resume-progress-repo)** / Ticket 17 in [docs/backend-linear-tickets.md](backend-linear-tickets.md).
 
 **Step 2.** Set `NEXT_PUBLIC_ENABLE_BACKEND_SYNC=true` to enable **PUT** on **Save & Exit** and after **magic-link transfer** from the save-progress exit modal.
 
diff --git a/docs/guides/container-presentation-pattern.md b/docs/guides/container-presentation-pattern.md
deleted file mode 100644
index d1bb041..0000000
--- a/docs/guides/container-presentation-pattern.md
+++ /dev/null
@@ -1,401 +0,0 @@
-# Container/Presentation Pattern
-
-## Overview
-
-The Container/Presentation pattern separates component logic from presentation, improving testability, reusability, and maintainability. This pattern is now the standard for complex components in this codebase.
-
-## Motivation
-
-### Benefits
-
-- **Testability**: Pure presentation components can be tested independently with simple prop assertions
-- **Reusability**: Presentation components can be reused with different data sources or logic
-- **Maintainability**: Clear separation makes it easier to locate and modify specific concerns
-- **Performance**: Easier to optimize rendering with React.memo on pure components
-
-### When to Use
-
-Use this pattern for components that have:
-
-- Business logic or state management
-- Data fetching or API calls
-- Analytics tracking
-- Complex event handlers
-- Custom hooks usage
-- Dynamic imports or side effects
-
-Simple presentational components (e.g., `Button`, `Avatar`) can remain as single files.
-
-## Folder Structure
-
-Each component following this pattern should have this structure:
-
-```
-app/components/[ComponentName]/
-  ├── index.tsx                    # Exports container as default
-  ├── [ComponentName].container.tsx # Logic, hooks, state management
-  ├── [ComponentName].view.tsx     # Pure presentation component
-  └── [ComponentName].types.ts     # Shared TypeScript types
-```
-
-### File Responsibilities
-
-#### `index.tsx`
-
-- Exports the container component as the default export
-- Optionally exports types for external use
-- Maintains backward compatibility with existing import paths
-
-```typescript
-export { default } from "./AskOrganizer.container";
-export type { AskOrganizerProps } from "./AskOrganizer.types";
-```
-
-#### `[ComponentName].container.tsx`
-
-**Contains all logic:**
-
-- React hooks (`useState`, `useEffect`, custom hooks)
-- Event handlers and business logic
-- Data fetching and API calls
-- Analytics tracking
-- State management
-- Computed values and derived state
-- Side effects
-
-**Should NOT contain:**
-
-- JSX layout details (beyond composing the view)
-- Inline styles or complex className logic (pass as props)
-- Direct DOM manipulation
-
-```typescript
-"use client";
-
-import { memo } from "react";
-import { useAnalytics } from "../../hooks";
-import { AskOrganizerView } from "./AskOrganizer.view";
-import type { AskOrganizerProps } from "./AskOrganizer.types";
-
-function AskOrganizerContainer(props: AskOrganizerProps) {
-  const { trackEvent } = useAnalytics();
-
-  const handleContactClick = () => {
-    trackEvent({
-      event: "contact_button_click",
-      category: "engagement",
-      component: "AskOrganizer",
-    });
-    // ... additional logic
-  };
-
-  // Compute derived props
-  const variantStyles = computeVariantStyles(props.variant);
-
-  return (
-    <AskOrganizerView
-      {...props}
-      onContactClick={handleContactClick}
-      variantStyles={variantStyles}
-    />
-  );
-}
-
-export default memo(AskOrganizerContainer);
-```
-
-#### `[ComponentName].view.tsx`
-
-**Pure presentation:**
-
-- Receives all data via props
-- Renders JSX based on props
-- No hooks, no state, no side effects
-- Only imports other presentational components
-
-**Should NOT contain:**
-
-- `useState`, `useEffect`, or any hooks
-- Event handler implementations (receive as callbacks)
-- Data fetching or API calls
-- Analytics tracking
-- Business logic
-
-```typescript
-import ContentLockup from "../ContentLockup";
-import Button from "../Button";
-import type { AskOrganizerViewProps } from "./AskOrganizer.types";
-
-export function AskOrganizerView({
-  title,
-  subtitle,
-  description,
-  buttonText,
-  buttonHref,
-  variant,
-  onContactClick,
-  variantStyles,
-  ...props
-}: AskOrganizerViewProps) {
-  return (
-    <section className={variantStyles.container}>
-      <ContentLockup
-        title={title}
-        subtitle={subtitle}
-        description={description}
-      />
-      <Button
-        href={buttonHref}
-        onClick={onContactClick}
-      >
-        {buttonText}
-      </Button>
-    </section>
-  );
-}
-```
-
-#### `[ComponentName].types.ts`
-
-- Shared TypeScript interfaces and types
-- Public props interface (used by consumers)
-- Internal view props (used between container and view)
-- Any utility types specific to the component
-
-```typescript
-export interface AskOrganizerProps {
-  title?: string;
-  subtitle?: string;
-  buttonText?: string;
-  buttonHref?: string;
-  variant?: "centered" | "left-aligned" | "compact" | "inverse";
-  onContactClick?: (data: ContactClickData) => void;
-}
-
-export interface AskOrganizerViewProps extends AskOrganizerProps {
-  onContactClick: () => void;
-  variantStyles: {
-    container: string;
-    buttonContainer: string;
-  };
-}
-```
-
-## Rules of Thumb
-
-### Container Components
-
-✅ **DO:**
-
-- Use React hooks (`useState`, `useEffect`, custom hooks)
-- Handle all event handlers and business logic
-- Fetch data and manage loading states
-- Track analytics events
-- Compute derived values from props/state
-- Compose the view component with computed props
-
-❌ **DON'T:**
-
-- Include complex JSX layout (delegate to view)
-- Mix presentation logic with business logic
-- Access DOM directly (use refs when necessary)
-
-### View Components
-
-✅ **DO:**
-
-- Receive all data via props
-- Render JSX based on props
-- Import only presentational components
-- Use simple conditional rendering
-- Accept callback props for user interactions
-
-❌ **DON'T:**
-
-- Use any React hooks
-- Manage state or side effects
-- Fetch data or make API calls
-- Track analytics directly
-- Implement business logic
-- Access browser APIs directly
-
-## Example: AskOrganizer
-
-### Before (Monolithic)
-
-```typescript
-"use client";
-
-import { memo } from "react";
-import { useAnalytics } from "../hooks";
-import ContentLockup from "./ContentLockup";
-import Button from "./Button";
-
-const AskOrganizer = memo(({ title, variant, ...props }) => {
-  const { trackEvent } = useAnalytics();
-
-  const handleContactClick = () => {
-    trackEvent({ event: "contact_click", component: "AskOrganizer" });
-  };
-
-  return (
-    <section>
-      <ContentLockup title={title} />
-      <Button onClick={handleContactClick}>Ask an organizer</Button>
-    </section>
-  );
-});
-```
-
-### After (Container/Presentation)
-
-**AskOrganizer.container.tsx:**
-
-```typescript
-"use client";
-
-import { memo } from "react";
-import { useAnalytics } from "../../hooks";
-import { AskOrganizerView } from "./AskOrganizer.view";
-import type { AskOrganizerProps } from "./AskOrganizer.types";
-
-function AskOrganizerContainer(props: AskOrganizerProps) {
-  const { trackEvent } = useAnalytics();
-
-  const handleContactClick = () => {
-    trackEvent({ event: "contact_click", component: "AskOrganizer" });
-  };
-
-  return <AskOrganizerView {...props} onContactClick={handleContactClick} />;
-}
-
-export default memo(AskOrganizerContainer);
-```
-
-**AskOrganizer.view.tsx:**
-
-```typescript
-import ContentLockup from "../ContentLockup";
-import Button from "../Button";
-import type { AskOrganizerViewProps } from "./AskOrganizer.types";
-
-export function AskOrganizerView({
-  title,
-  onContactClick,
-  ...props
-}: AskOrganizerViewProps) {
-  return (
-    <section>
-      <ContentLockup title={title} />
-      <Button onClick={onContactClick}>Ask an organizer</Button>
-    </section>
-  );
-}
-```
-
-## Migration Checklist
-
-When converting an existing component to this pattern:
-
-- [ ] **Identify separation points**
-  - [ ] List all hooks and state management
-  - [ ] List all event handlers and business logic
-  - [ ] List all data fetching and side effects
-  - [ ] Identify pure presentation JSX
-
-- [ ] **Create folder structure**
-  - [ ] Create `[ComponentName]/` folder
-  - [ ] Create `[ComponentName].types.ts` with shared types
-  - [ ] Create `[ComponentName].view.tsx` with pure presentation
-  - [ ] Create `[ComponentName].container.tsx` with all logic
-  - [ ] Create `index.tsx` exporting container
-
-- [ ] **Extract types**
-  - [ ] Move component props interface to `types.ts`
-  - [ ] Create view props interface extending container props
-  - [ ] Export types from `index.tsx` for external use
-
-- [ ] **Move presentation to view**
-  - [ ] Copy JSX to view component
-  - [ ] Remove all hooks and state
-  - [ ] Replace event handlers with callback props
-  - [ ] Replace computed values with props
-  - [ ] Ensure view is a pure function
-
-- [ ] **Move logic to container**
-  - [ ] Move all hooks to container
-  - [ ] Move event handlers to container
-  - [ ] Move data fetching to container
-  - [ ] Compute derived props in container
-  - [ ] Render view component with computed props
-
-- [ ] **Update exports**
-  - [ ] Export container as default from `index.tsx`
-  - [ ] Export types from `index.tsx`
-  - [ ] Delete original component file
-  - [ ] Verify import paths still work
-
-- [ ] **Update tests**
-  - [ ] Verify tests still pass (imports should resolve automatically)
-  - [ ] Update any tests that relied on implementation details
-  - [ ] Add tests for view component with mocked props if needed
-
-- [ ] **Update Storybook**
-  - [ ] Verify stories still work (imports should resolve automatically)
-  - [ ] Optionally add view-only stories with mocked props
-
-## Refactored Components
-
-The following components have been refactored to use this pattern:
-
-- ✅ **AskOrganizer** - Analytics tracking and event handlers
-- ✅ **NumberedCards** - Schema generation with `useSchemaData` hook
-- ✅ **FeatureGrid** - Memoized feature data structures
-- ✅ **WebVitalsDashboard** - Dynamic imports, data fetching, complex state
-- ✅ **Select** - Complex form state management with refs and keyboard navigation
-
-These components serve as reference implementations for the pattern.
-
-## Remaining Components
-
-The following components are candidates for future conversion:
-
-### High Priority (Complex Logic)
-
-- `Header` / `HomeHeader` - Navigation state, conditional rendering logic
-- `MenuBar` - Menu state management, keyboard navigation
-- `ContextMenu` - Positioning logic, click outside handling
-- `RadioGroup` - Group state management
-- `ToggleGroup` - Group state management
-
-### Medium Priority (Some Logic)
-
-- `ContentContainer` - Data fetching or transformation
-- `RelatedArticles` - Data fetching, filtering logic
-- `RuleStack` - Complex rendering logic
-- `LogoWall` - Animation or interaction logic
-
-### Low Priority (Mostly Presentational)
-
-- `Button`, `Avatar`, `Checkbox`, `Input`, `TextArea` - Simple presentational components
-- `Separator`, `SectionHeader`, `SectionNumber` - Pure presentation
-- `QuoteBlock`, `QuoteDecor`, `HeroDecor` - Decorative components
-
-## Best Practices
-
-1. **Start with complex components** - Components with the most logic benefit most from separation
-2. **Keep it simple** - Don't over-engineer simple presentational components
-3. **Maintain backward compatibility** - Import paths should remain unchanged
-4. **Test both layers** - Test container for logic, view for presentation
-5. **Document the pattern** - Add comments explaining non-obvious prop flows
-6. **Use TypeScript strictly** - Leverage types to enforce the separation
-
-## Additional Resources
-
-- [React Container/Presenter Pattern](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)
-- [Separation of Concerns in React](https://react.dev/learn/thinking-in-react)
-
----
-
-**Last Updated**: April 2025  
-**Maintained by**: CommunityRule Development Team
diff --git a/docs/guides/i18n-translation-workflow.md b/docs/guides/i18n-translation-workflow.md
index d63139c..f6bf948 100644
--- a/docs/guides/i18n-translation-workflow.md
+++ b/docs/guides/i18n-translation-workflow.md
@@ -1,382 +1,81 @@
-# i18n Translation Workflow Guide
+# Translations & UI copy workflow
 
-This guide explains how to work with translations in the CommunityRule application. The app uses a hybrid approach combining globalized, shared UI elements with context-aware, localized content pages, making it easy for content creators and contributors to update text without modifying component code.
+This guide is for **content editors** updating user-visible text. The
+implementation contract (file layout, `useMessages` access pattern, key
+casing rules) lives in `.cursor/rules/localization.mdc`.
 
-## Overview
+## Where copy lives
 
-All UI text is stored in JSON files under `messages/en/`. The structure follows best practices:
+All UI text is JSON under `messages/en/`:
 
-- **Page-specific content** lives in `pages/` (varies by page context)
-- **Component defaults** live in `components/` (shared across pages)
-- **Common strings** live in `common.json` (shared UI elements)
-
-Components reference these translations using keys, allowing content to be edited independently of the codebase.
-
-## Directory Structure
-
-```
-messages/
-  en/
-    pages/
-      home.json              # Home page specific content
-      learn.json             # Learn page specific content
-    components/
-      heroBanner.json        # Component defaults (aria-labels, alt texts)
-      numberedCards.json     # Component defaults
-      askOrganizer.json      # Component defaults
-      featureGrid.json       # Component defaults
-      footer.json            # Shared across pages
-      header.json            # Shared across pages
-    common.json              # Shared UI strings (buttons, links, labels)
-    navigation.json           # Navigation items
-    metadata.json            # Page metadata (title, description)
-    index.ts                 # Exports all messages
+```text
+messages/en/
+  common.json              # shared strings (buttons, links, generic labels)
+  navigation.json          # site nav items
+  metadata.json            # page <title> / description
+  pages/<slug>.json        # one file per page (home, learn, …)
+  components/<name>.json   # one file per shared component default
+  create/<step>.json       # one file per create-flow step
+  index.ts                 # wires all bundles together
 ```
 
-## When to Use `pages/` vs `components/`
+The split is intentional:
 
-### Use `pages/` for:
+- **`pages/`** — copy that varies by page context (titles, hero subheads).
+- **`components/`** — defaults that ride along with a component on every
+  page (aria-labels, alt text patterns).
+- **`common.json`** — strings reused across many components (e.g. "Cancel",
+  "Learn more").
+- **`create/`** — wizard step copy (mirrors the `screenId`).
 
-- **Page-specific content**: Titles, subtitles, descriptions that vary by page
-- **Context-aware text**: Content that changes based on where the component is used
-- **User-facing content**: All text that users see on a specific page
+## Editing existing copy
 
-**Example:** The home page hero banner title "Collaborate" goes in `pages/home.json`, not `components/heroBanner.json`
+1. Find the bundle: search `messages/en/` for the existing English string.
+2. Edit the value. Leave the key alone.
+3. Save and run `npm run dev` — text updates on reload.
 
-### Use `components/` for:
+If you can't find the string, it may still be hard-coded. Open an issue or
+ping a developer; do not change the component file directly.
 
-- **Component defaults**: Aria-labels, alt text patterns, shared behavior text
-- **Shared across pages**: Text that doesn't vary by page context
-- **Accessibility text**: Aria-labels and alt texts that are component-level
+## Adding a new key
 
-**Example:** The hero banner image alt text "Hero illustration" stays in `components/heroBanner.json` because it's the same across all pages
-
-### Use `common.json` for:
-
-- **Shared UI strings**: Buttons, links, labels used across multiple components
-- **Global strings**: Text that appears in many places
-
-## Page-Specific Translations
-
-For page-specific content, use the `pages.*` namespace pattern:
-
-**Server Components:**
-
-```typescript
-import messages from "../../messages/en/index";
-import { getTranslation } from "../../lib/i18n/getTranslation";
-
-export default function LearnPage() {
-  const t = (key: string) => getTranslation(messages, key);
-
-  const contentLockupData = {
-    title: t("pages.learn.contentLockup.title"),
-    subtitle: t("pages.learn.contentLockup.subtitle"),
-  };
-
-  return <ContentLockup {...contentLockupData} />;
-}
-```
-
-**Client Components:**
-
-```typescript
-"use client";
-import { useTranslation } from "../../contexts/MessagesContext";
-
-export default function MyComponent() {
-  const t = useTranslation("pages.home.heroBanner");
-  return <h1>{t("title")}</h1>;
-}
-```
-
-## Adding New Translation Keys
-
-### 1. Identify the Component
-
-Determine which component needs the translation. If it's a shared string (like a button label), add it to `common.json`. Otherwise, add it to the component-specific file.
-
-### 2. Add the Key to the JSON File
-
-Open the appropriate JSON file and add your translation key. Use descriptive, semantic keys:
-
-**Good:**
+1. Decide which bundle owns the copy (page vs component vs common).
+2. Add a descriptive camelCase key. Group related copy in nested objects.
+3. If you created a new JSON file, register it in `messages/en/index.ts`
+   (a developer will help if you're unsure).
+4. Reference the key from the component using `useMessages()` (see the
+   localization rule for the snippet).
 
 ```json
 {
-  "heroBanner": {
-    "title": "Collaborate",
-    "subtitle": "with clarity"
-  }
-}
-```
-
-**Bad:**
-
-```json
-{
-  "text1": "Collaborate",
-  "text2": "with clarity"
-}
-```
-
-### 3. Use Nested Objects for Organization
-
-Group related translations together:
-
-```json
-{
-  "numberedCards": {
-    "title": "How CommunityRule works",
-    "buttons": {
-      "createCommunityRule": "Create CommunityRule",
-      "seeHowItWorks": "See how it works"
-    }
-  }
-}
-```
-
-### 4. Update the Component or Page
-
-**For Page Components (Server Components):**
-
-```typescript
-import messages from "../../messages/en/index";
-import { getTranslation } from "../../lib/i18n/getTranslation";
-
-export default function MyPage() {
-  const t = (key: string) => getTranslation(messages, key);
-
-  // Use page-specific keys
-  const data = {
-    title: t("pages.home.heroBanner.title"),
-    subtitle: t("pages.home.heroBanner.subtitle"),
-  };
-
-  return <HeroBanner {...data} />;
-}
-```
-
-**For Client Components:**
-
-```typescript
-"use client";
-import { useTranslation } from "../../contexts/MessagesContext";
-
-export default function MyComponent() {
-  // For page-specific content
-  const t = useTranslation("pages.home.heroBanner");
-  return <h1>{t("title")}</h1>;
-
-  // For component defaults
-  const tDefault = useTranslation("heroBanner");
-  return <img alt={tDefault("imageAlt")} />;
-}
-```
-
-## Translation Key Naming Conventions
-
-1. **Use camelCase** for keys: `buttonText`, `ariaLabel`
-2. **Use descriptive names**: `createCommunityRule` not `btn1`
-3. **Group by component**: Each component has its own namespace
-4. **Use nested objects** for related strings: `buttons.createCommunityRule`
-5. **Include context in comments**: Use `_comment` fields for clarity
-
-Example:
-
-```json
-{
-  "_comment": "HeroBanner component translations",
-  "title": "Collaborate",
-  "subtitle": "with clarity",
-  "description": "Help your community make important decisions..."
-}
-```
-
-## Extracting Strings from Components
-
-When migrating a component to use translations:
-
-1. **Identify hardcoded strings** in the component
-2. **Create translation keys** in the appropriate JSON file
-3. **Replace hardcoded strings** with `t("key.path")` calls
-4. **Test the component** to ensure translations load correctly
-
-### Example Migration
-
-**Before:**
-
-```typescript
-export default function HeroBanner() {
-  return (
-    <div>
-      <h1>Collaborate</h1>
-      <p>with clarity</p>
-    </div>
-  );
-}
-```
-
-**After:**
-
-```typescript
-"use client";
-import { useTranslations } from "next-intl";
-
-export default function HeroBanner() {
-  const t = useTranslations("heroBanner");
-  return (
-    <div>
-      <h1>{t("title")}</h1>
-      <p>{t("subtitle")}</p>
-    </div>
-  );
-}
-```
-
-## Adding a New Page
-
-When creating a new page that needs translations:
-
-1. **Create a page translation file**: `messages/en/pages/about.json` (for example)
-2. **Add page-specific content**: All user-facing text for that page
-3. **Import in index.ts**: Add the import and export in `messages/en/index.ts`
-4. **Use in page component**: Use `t("pages.about.*")` pattern in your page
-
-**Example:**
-
-```typescript
-// messages/en/pages/about.json
-{
+  "_comment": "About page hero copy",
   "hero": {
-    "title": "About Us",
-    "subtitle": "Learn more about our mission"
-  }
-}
-
-// app/about/page.tsx
-const t = (key: string) => getTranslation(messages, key);
-const title = t("pages.about.hero.title");
-```
-
-## Adding New Languages (Future)
-
-When adding support for a new language:
-
-1. **Create a new locale directory**: `messages/es/` (for Spanish, for example)
-2. **Copy the English files** as a starting point (including `pages/` structure)
-3. **Translate all strings** in the JSON files
-4. **Test thoroughly** to ensure all translations are present
-
-## Testing Translations
-
-1. **Check for missing keys**: Ensure all translation keys used in components exist in the JSON files
-2. **Verify type safety**: TypeScript will catch typos in translation keys at compile time
-3. **Test in browser**: Run the dev server and verify text displays correctly
-4. **Check for fallbacks**: Missing translations will show the key path (e.g., `heroBanner.title`)
-
-## Best Practices
-
-### For Content Creators
-
-- **Edit JSON files directly**: No need to understand React or TypeScript
-- **Use descriptive comments**: Add `_comment` fields to explain context
-- **Maintain consistency**: Use the same terminology across components
-- **Test changes**: Run the dev server to see your changes immediately
-
-### For Developers
-
-- **Use TypeScript**: Translation keys are type-safe
-- **Namespace when possible**: Use `useTranslations("namespace")` for better organization
-- **Server components first**: Prefer server-side translations for better performance
-- **Extract incrementally**: Migrate components one at a time
-
-## Common Patterns
-
-### Buttons and CTAs
-
-```json
-{
-  "buttons": {
-    "createCommunityRule": "Create CommunityRule",
-    "seeHowItWorks": "See how it works"
+    "title": "About us",
+    "subtitle": "Why CommunityRule exists"
   }
 }
 ```
 
-### Aria Labels
+## Style notes
 
-```json
-{
-  "ariaLabels": {
-    "followBluesky": "Follow us on Bluesky",
-    "followGitlab": "Follow us on GitLab"
-  }
-}
-```
+- **camelCase** for structural keys (`compactTitle`, `imageAlt`).
+- **kebab-case** for content ids that match a URL slug, card id, or step
+  id (`"in-person-meetings"`, `"peer-mediation"`).
+- Use `_comment` to leave context for the next editor.
+- Keep terminology consistent — search the messages folder before coining a
+  new label.
 
-### Dynamic Content
+## Adding a new language (future)
 
-For content that varies (like card text), use arrays or numbered keys:
-
-```json
-{
-  "cards": {
-    "card1": { "text": "First step" },
-    "card2": { "text": "Second step" },
-    "card3": { "text": "Third step" }
-  }
-}
-```
+1. Create `messages/<locale>/` mirroring `messages/en/`.
+2. Translate strings; keep keys identical.
+3. Update `messages/en/index.ts` (or split it per locale) — a developer
+   will wire the locale switcher.
 
 ## Troubleshooting
 
-### Translation Key Not Found
-
-If you see a key path like `heroBanner.title` instead of the text:
-
-1. Check the JSON file exists and has the key
-2. Verify the key path matches exactly (case-sensitive)
-3. Restart the dev server if you just added the key
-
-### TypeScript Errors
-
-If TypeScript complains about translation keys:
-
-1. Ensure the key exists in the JSON file
-2. Check for typos in the key path
-3. Verify the namespace is correct if using `useTranslations("namespace")`
-
-### Missing Translations
-
-If text doesn't appear:
-
-1. Check the browser console for errors
-2. Verify the component is wrapped in `MessagesProvider` (for client components)
-3. Ensure `getTranslation()` is called correctly in server components
-4. Check if you're using the correct namespace (`pages.*` vs component defaults)
-
-## Architecture: Hybrid Approach
-
-This implementation follows the recognized best practice of combining:
-
-- **Globalized, shared UI elements**: Component defaults in `components/` (aria-labels, alt texts)
-- **Context-aware, localized content pages**: Page-specific content in `pages/` (titles, descriptions)
-
-This allows:
-
-- Components to remain flexible and reusable
-- Page content to be easily edited without code changes
-- Clear separation between shared defaults and page-specific content
-- Scalable structure for adding new pages
-
-## Resources
-
-- Component defaults in `messages/en/components/`
-- Page-specific content in `messages/en/pages/`
-- Shared UI strings in `messages/en/common.json`
-
----
-
-**Last Updated**: January 2025  
-**Maintained by**: CommunityRule Development Team
+| Symptom | Likely cause | Fix |
+| --- | --- | --- |
+| Key path renders instead of text (e.g. `hero.title`) | Missing key or typo | Check spelling and bundle path |
+| Copy doesn't update | Dev server cache | Restart `npm run dev` |
+| TypeScript red squiggle | Bundle not registered | Add the import in `messages/en/index.ts` |
diff --git a/docs/template-recommendation-matrix.md b/docs/guides/template-recommendation-matrix.md
similarity index 96%
rename from docs/template-recommendation-matrix.md
rename to docs/guides/template-recommendation-matrix.md
index 9b702a5..e7edf44 100644
--- a/docs/template-recommendation-matrix.md
+++ b/docs/guides/template-recommendation-matrix.md
@@ -78,7 +78,7 @@ Order is preserved here because the columns are positional in the sheets:
   see §2.4 data-quality issues).
 - Wizard chip ids are **positional 1..N** within each `messages/en/create/*`
   array (see `chipRowsFromLabels` in
-  `app/create/screens/select/CommunityStructureSelectScreen.tsx` lines 49–57).
+  `app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx` lines 49–57).
   The importer should emit a stable lookup table mapping
   `(facetGroup, label) → wizardChipId` so the recommendation engine can match
   a user's `selectedXxxIds` against the matrix without depending on label
@@ -90,7 +90,7 @@ Order is preserved here because the columns are positional in the sheets:
 
 Maps 1:1 to `messages/en/create/communication.json` and the
 `communication-methods` step
-(`app/create/screens/card/CommunicationMethodsScreen.tsx`).
+(`app/(app)/create/screens/card/CommunicationMethodsScreen.tsx`).
 
 **Content columns (positions 1–5):**
 
@@ -112,7 +112,7 @@ Matrix / Element · GitHub / GitLab · Discord · Email Distribution List · Sla
 ### 2.3 Membership / Group-Membership (`Group_Membership_Methods.xlsx`, sheet `Current`)
 
 Maps to the `membership-methods` step
-(`app/create/screens/card/MembershipMethodsScreen.tsx`) and
+(`app/(app)/create/screens/card/MembershipMethodsScreen.tsx`) and
 `messages/en/create/membership.json`.
 
 **Content columns (positions 1–5):**
@@ -142,7 +142,7 @@ Evaluation · Lottery / Sortition.
 ### 2.4 Decision-making (`Decision-making.xlsx`, sheet `Current`)
 
 Maps to the `decision-approaches` step
-(`app/create/screens/right-rail/DecisionApproachesScreen.tsx`) and
+(`app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx`) and
 `messages/en/create/rightRail.json`.
 
 **Content columns (positions 1–7):**
@@ -182,7 +182,7 @@ Hierarchical Decision-Making · Negotiated Decisions.
 ### 2.5 Conflict Management (`Conflict Management Methods.xlsx`, sheet `Current`)
 
 Maps to the `conflict-management` step
-(`app/create/screens/card/ConflictManagementScreen.tsx`) and
+(`app/(app)/create/screens/card/ConflictManagementScreen.tsx`) and
 `messages/en/create/conflictManagement.json`.
 
 **Content columns (positions 1–6):**
@@ -251,7 +251,7 @@ function governancePatternBody(coreValues: string): Prisma.InputJsonValue {
 
 ### 3.2 Wizard facets captured today (`CreateFlowState`)
 
-```83:95:app/create/types.ts
+```83:95:app/(app)/create/types.ts
 selectedCommunitySizeIds?: string[];
 selectedOrganizationTypeIds?: string[];
 selectedScaleIds?: string[];
@@ -275,7 +275,7 @@ the facet shape.
 
 ### 3.3 Wizard step order
 
-Source of truth is `app/create/utils/flowSteps.ts` (`FLOW_STEP_ORDER`). The
+Source of truth is `app/(app)/create/utils/flowSteps.ts` (`FLOW_STEP_ORDER`). The
 relevant slice is:
 
 ```
@@ -289,10 +289,10 @@ decision-approaches → conflict-management → confirm-stakeholders → final-r
 
 | Surface | File |
 |---|---|
-| Marketing home "Popular templates" | `app/(marketing)/MarketingRuleStackSection.tsx` |
+| Marketing home "Popular templates" | `app/(marketing)/_components/MarketingRuleStackSection.tsx` |
 | Templates index | `app/(marketing)/templates/page.tsx` |
-| Template preview (by slug) | `app/create/review-template/[slug]/page.tsx` |
-| "Use without changes" → publish | `app/create/CreateFlowLayoutClient.tsx` `handleUseTemplateWithoutChanges` |
+| Template preview (by slug) | `app/(app)/create/review-template/[slug]/page.tsx` |
+| "Use without changes" → publish | `app/(app)/create/CreateFlowLayoutClient.tsx` `handleUseTemplateWithoutChanges` |
 | API list | `app/api/templates/route.ts` (GET only, no params) |
 
 There is currently **no** recommendation logic, no facet filtering, and the
@@ -697,12 +697,12 @@ Once the API exists:
 - `lib/server/validation/plainJson.ts` — `assertPlainJsonValue` /
   `DEFAULT_PLAIN_JSON_LIMITS`.
 - `lib/logger.ts` — server-side `logger`.
-- `app/create/types.ts` — `CreateFlowState` and facet fields.
-- `app/create/utils/flowSteps.ts` — canonical step order.
-- `app/create/utils/createFlowScreenRegistry.ts` — screen layout per step.
-- `app/create/screens/select/CommunityStructureSelectScreen.tsx` — chip-id
+- `app/(app)/create/types.ts` — `CreateFlowState` and facet fields.
+- `app/(app)/create/utils/flowSteps.ts` — canonical step order.
+- `app/(app)/create/utils/createFlowScreenRegistry.ts` — screen layout per step.
+- `app/(app)/create/screens/select/CommunityStructureSelectScreen.tsx` — chip-id
   derivation pattern (positional `String(i+1)`).
-- `app/create/screens/card/CommunicationMethodsScreen.tsx` — section-field
+- `app/(app)/create/screens/card/CommunicationMethodsScreen.tsx` — section-field
   contract (`SECTION_FIELDS`).
 - `messages/en/create/{communitySize,communityStructure,communication,membership,rightRail,conflictManagement}.json` —
   current static card / chip copy that the matrix supersedes.
diff --git a/docs/testing-guide.md b/docs/testing-guide.md
new file mode 100644
index 0000000..f00b24e
--- /dev/null
+++ b/docs/testing-guide.md
@@ -0,0 +1,68 @@
+# Testing guide
+
+This is the **why** of testing in CommunityRule. For file layout, helper
+APIs, and required imports see `.cursor/rules/testing.mdc`.
+
+## Philosophy
+
+- **Test behaviour, not implementation.** Assert on what a user can see and
+  do (visible text, roles, labels, keyboard paths). Avoid leaning on
+  internal class names, hook internals, or memoization details.
+- **One consolidated file per component.** A component's standard suite,
+  variant assertions, and behaviour-specific cases all live in
+  `tests/components/<Name>.test.tsx`.
+- **Accessibility is non-negotiable.** Every component suite runs
+  `jest-axe`; full-page WCAG runs in Playwright. A failing axe check is a
+  failing build.
+- **E2E is sparse and high-signal.** Playwright covers critical journeys,
+  visual regression of major pages, and a handful of edge cases — not
+  per-component clicks. Component coverage is the job of Vitest.
+
+## Layered coverage
+
+| Layer | Tool | Scope |
+| --- | --- | --- |
+| Unit | Vitest | Pure logic, reducers, utilities (`tests/unit/`). |
+| Component | Vitest + RTL | DS components in isolation (`tests/components/`). |
+| Page / context | Vitest + RTL | Screens and provider wiring (`tests/pages/`, `tests/contexts/`). |
+| Accessibility (page) | Playwright + axe | WCAG 2.1 AA on key pages (`tests/accessibility/e2e/`). |
+| E2E | Playwright | Critical journeys, visual regression, edge cases (`tests/e2e/`). |
+
+## What to test vs. skip
+
+**Test:**
+
+- Public behaviour — visible text, roles, ARIA, keyboard activation.
+- State transitions users observe (error → success, disabled → enabled).
+- Interaction contracts (click handlers, form submission, dropdown
+  selection).
+- Accessibility invariants.
+
+**Skip:**
+
+- Pure styling that changes with the design system (exact shadow radius,
+  minor spacing).
+- Hook internals or memoization specifics.
+- Responsive visibility in JSDOM — use Playwright instead.
+
+## Running tests
+
+```bash
+npm test                  # vitest run with coverage
+npm run test:component    # vitest, components only (faster inner loop)
+npm run e2e               # playwright (alias: test:e2e)
+npm run visual:update     # refresh playwright screenshots after UI changes
+```
+
+## Adding tests for a new component
+
+1. Create `app/components/<Name>/`.
+2. Create `tests/components/<Name>.test.tsx` and call `componentTestSuite`
+   (see `.cursor/rules/testing.mdc`).
+3. Add behaviour-specific `describe` blocks for any unique interactions.
+4. Run `npm run test:component -- --run tests/components/<Name>.test.tsx`.
+
+## Storybook is documentation, not tests
+
+Stories are visual examples for design review and Code Connect — they do
+not replace component tests. Run `npm run storybook` locally to browse.
diff --git a/lib/cache.ts b/lib/cache.ts
deleted file mode 100644
index 9702625..0000000
--- a/lib/cache.ts
+++ /dev/null
@@ -1,266 +0,0 @@
-/**
- * Content caching utilities for improved performance
- */
-
-import { logger } from "./logger";
-
-// In-memory cache for blog posts
-const blogPostCache = new Map<string, CacheEntry<unknown>>();
-const blogListCache = new Map<string, CacheEntry<unknown[]>>();
-const tagCache = new Map<string, CacheEntry<string[]>>();
-const authorCache = new Map<string, CacheEntry<string[]>>();
-
-// Cache configuration
-const isDevelopment =
-  process.env.NODE_ENV === "development" || !process.env.NODE_ENV;
-const CACHE_TTL = isDevelopment ? 0 : 5 * 60 * 1000; // 0 in dev, 5 minutes in production
-const MAX_CACHE_SIZE = 100; // Maximum number of cached items
-
-/**
- * Cache entry with timestamp
- */
-class CacheEntry<T> {
-  data: T;
-  timestamp: number;
-
-  constructor(data: T) {
-    this.data = data;
-    this.timestamp = Date.now();
-  }
-
-  isExpired(): boolean {
-    // In development, always consider cache expired (no caching)
-    if (isDevelopment) return true;
-    return Date.now() - this.timestamp > CACHE_TTL;
-  }
-}
-
-/**
- * Get cached blog post data
- * @param key - Cache key
- * @returns Cached data or null if not found/expired
- */
-function getCached<T>(key: string): T | null {
-  const entry = blogPostCache.get(key) as CacheEntry<T> | undefined;
-  if (!entry || entry.isExpired()) {
-    blogPostCache.delete(key);
-    return null;
-  }
-  return entry.data;
-}
-
-/**
- * Set cached blog post data
- * @param key - Cache key
- * @param data - Data to cache
- */
-function setCached<T>(key: string, data: T): void {
-  // Implement LRU eviction if cache is full
-  if (blogPostCache.size >= MAX_CACHE_SIZE) {
-    const oldestKey = blogPostCache.keys().next().value;
-    blogPostCache.delete(oldestKey);
-  }
-
-  blogPostCache.set(key, new CacheEntry(data));
-}
-
-/**
- * Clear expired cache entries
- */
-function clearExpiredCache(): void {
-  for (const [key, entry] of blogPostCache.entries()) {
-    if (entry.isExpired()) {
-      blogPostCache.delete(key);
-    }
-  }
-}
-
-/**
- * Clear all caches
- */
-export function clearAllCaches(): void {
-  blogPostCache.clear();
-  blogListCache.clear();
-  tagCache.clear();
-  authorCache.clear();
-}
-
-/**
- * Get cached blog post by slug
- * @param slug - Blog post slug
- * @returns Cached blog post or null
- */
-export function getCachedBlogPost<T>(slug: string): T | null {
-  return getCached<T>(`post:${slug}`);
-}
-
-/**
- * Cache blog post data
- * @param slug - Blog post slug
- * @param postData - Blog post data
- */
-export function cacheBlogPost<T>(slug: string, postData: T): void {
-  setCached(`post:${slug}`, postData);
-}
-
-/**
- * Get cached blog post list
- * @param key - Cache key for list (e.g., 'all', 'recent', 'tag:governance')
- * @returns Cached list or null
- */
-export function getCachedBlogList<T>(key: string): T[] | null {
-  const entry = blogListCache.get(key);
-  if (!entry || entry.isExpired()) {
-    blogListCache.delete(key);
-    return null;
-  }
-  return entry.data as T[];
-}
-
-/**
- * Cache blog post list
- * @param key - Cache key
- * @param listData - List data to cache
- */
-export function cacheBlogList<T>(key: string, listData: T[]): void {
-  blogListCache.set(key, new CacheEntry(listData));
-}
-
-/**
- * Get cached tags
- * @returns Cached tags or null
- */
-export function getCachedTags(): string[] | null {
-  const entry = tagCache.get("all");
-  if (!entry || entry.isExpired()) {
-    tagCache.delete("all");
-    return null;
-  }
-  return entry.data;
-}
-
-/**
- * Cache tags
- * @param tags - Tags to cache
- */
-export function cacheTags(tags: string[]): void {
-  tagCache.set("all", new CacheEntry(tags));
-}
-
-/**
- * Get cached authors
- * @returns Cached authors or null
- */
-export function getCachedAuthors(): string[] | null {
-  const entry = authorCache.get("all");
-  if (!entry || entry.isExpired()) {
-    authorCache.delete("all");
-    return null;
-  }
-  return entry.data;
-}
-
-/**
- * Cache authors
- * @param authors - Authors to cache
- */
-export function cacheAuthors(authors: string[]): void {
-  authorCache.set("all", new CacheEntry(authors));
-}
-
-/**
- * Invalidate cache for a specific blog post
- * @param slug - Blog post slug
- */
-export function invalidateBlogPostCache(slug: string): void {
-  blogPostCache.delete(`post:${slug}`);
-  // Also invalidate list caches since they might contain this post
-  blogListCache.clear();
-}
-
-/**
- * Invalidate all caches
- */
-export function invalidateAllCaches(): void {
-  clearAllCaches();
-}
-
-export interface CacheStats {
-  blogPostCacheSize: number;
-  blogListCacheSize: number;
-  tagCacheSize: number;
-  authorCacheSize: number;
-  totalCacheSize: number;
-  maxCacheSize: number;
-  cacheTTL: number;
-}
-
-/**
- * Get cache statistics
- * @returns Cache statistics
- */
-export function getCacheStats(): CacheStats {
-  clearExpiredCache();
-
-  return {
-    blogPostCacheSize: blogPostCache.size,
-    blogListCacheSize: blogListCache.size,
-    tagCacheSize: tagCache.size,
-    authorCacheSize: authorCache.size,
-    totalCacheSize:
-      blogPostCache.size +
-      blogListCache.size +
-      tagCache.size +
-      authorCache.size,
-    maxCacheSize: MAX_CACHE_SIZE,
-    cacheTTL: CACHE_TTL,
-  };
-}
-
-/**
- * Warm up cache with frequently accessed data
- * @param getAllPosts - Function to get all blog posts
- * @param getAllTags - Function to get all tags
- */
-export async function warmCache<T>(
-  getAllPosts: () => T[],
-  getAllTags: () => string[],
-): Promise<void> {
-  try {
-    // Cache all blog posts
-    const allPosts = getAllPosts();
-    cacheBlogList("all", allPosts);
-
-    // Cache recent posts
-    const recentPosts = allPosts.slice(0, 5);
-    cacheBlogList("recent", recentPosts);
-
-    // Cache tags
-    const tags = getAllTags();
-    cacheTags(tags);
-
-    // Cache individual posts (first 10)
-    allPosts.slice(0, 10).forEach((post) => {
-      const postWithSlug = post as { slug: string };
-      cacheBlogPost(postWithSlug.slug, post);
-    });
-
-    logger.info("Cache warmed up successfully");
-  } catch (error) {
-    logger.error("Error warming up cache:", error);
-  }
-}
-
-/**
- * Check if cache is healthy
- * @returns True if cache is healthy
- */
-export function isCacheHealthy(): boolean {
-  try {
-    clearExpiredCache();
-    return blogPostCache.size < MAX_CACHE_SIZE;
-  } catch (error) {
-    logger.error("Cache health check failed:", error);
-    return false;
-  }
-}
diff --git a/lib/create/api.ts b/lib/create/api.ts
index f7b9fbc..6d1ce85 100644
--- a/lib/create/api.ts
+++ b/lib/create/api.ts
@@ -1,4 +1,4 @@
-import type { CreateFlowState } from "../../app/create/types";
+import type { CreateFlowState } from "../../app/(app)/create/types";
 import { migrateLegacyCreateFlowState } from "./migrateLegacyCreateFlowState";
 
 const jsonHeaders = { "Content-Type": "application/json" };
diff --git a/lib/create/buildPublishPayload.ts b/lib/create/buildPublishPayload.ts
index 4bdbe71..0aca7e5 100644
--- a/lib/create/buildPublishPayload.ts
+++ b/lib/create/buildPublishPayload.ts
@@ -1,4 +1,4 @@
-import type { CoreValueDetailEntry, CreateFlowState } from "../../app/create/types";
+import type { CoreValueDetailEntry, CreateFlowState } from "../../app/(app)/create/types";
 import type { CommunityRuleDocumentSection } from "../../app/components/sections/CommunityRuleDocument/CommunityRuleDocument.types";
 
 function isDocumentEntry(x: unknown): x is { title: string; body: string } {
diff --git a/lib/create/draftHydrationUtils.ts b/lib/create/draftHydrationUtils.ts
index 6842881..d56d5f4 100644
--- a/lib/create/draftHydrationUtils.ts
+++ b/lib/create/draftHydrationUtils.ts
@@ -1,4 +1,4 @@
-import type { CreateFlowState } from "../../app/create/types";
+import type { CreateFlowState } from "../../app/(app)/create/types";
 
 /** True when the client should treat a draft payload as non-empty for hydration / conflict checks. */
 export function createFlowStateHasKeys(state: CreateFlowState): boolean {
diff --git a/lib/create/migrateLegacyCreateFlowState.ts b/lib/create/migrateLegacyCreateFlowState.ts
index bf6d08a..719348c 100644
--- a/lib/create/migrateLegacyCreateFlowState.ts
+++ b/lib/create/migrateLegacyCreateFlowState.ts
@@ -1,4 +1,4 @@
-import type { CreateFlowState } from "../../app/create/types";
+import type { CreateFlowState } from "../../app/(app)/create/types";
 
 /** Legacy `currentStep` values mapped to the current `CreateFlowStep` id. */
 const LEGACY_CREATE_FLOW_STEP_RENAMES: Readonly<Record<string, string>> = {
diff --git a/lib/i18n/getTranslation.ts b/lib/i18n/getTranslation.ts
index 690fc0e..2219f95 100644
--- a/lib/i18n/getTranslation.ts
+++ b/lib/i18n/getTranslation.ts
@@ -26,31 +26,3 @@ export function getTranslation(messages: Messages, key: string): string {
 
   return typeof value === "string" ? value : key;
 }
-
-/**
- * Type-safe helper to get nested values from messages
- * Usage: getNested(messages, "heroBanner", "title")
- */
-export function getNested<T extends keyof Messages>(
-  messages: Messages,
-  namespace: T,
-  key: string,
-): string {
-  const namespaceObj = messages[namespace];
-  if (!namespaceObj || typeof namespaceObj !== "object") {
-    return key;
-  }
-
-  const keys = key.split(".");
-  let value: unknown = namespaceObj;
-
-  for (const k of keys) {
-    if (value && typeof value === "object" && k in value) {
-      value = (value as Record<string, unknown>)[k];
-    } else {
-      return key;
-    }
-  }
-
-  return typeof value === "string" ? value : key;
-}
diff --git a/lib/i18n/types.ts b/lib/i18n/types.ts
deleted file mode 100644
index e744fa9..0000000
--- a/lib/i18n/types.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Type definitions for translation keys
- *
- * These types provide type safety when accessing translation keys.
- * The actual types are inferred from the JSON files in messages/en/
- */
-
-// Import the message structure to ensure type safety
-import type messages from "../../messages/en/index";
-
-export type Messages = typeof messages;
-
-// Helper type for nested key paths
-export type NestedKeyOf<ObjectType extends object> = {
-  [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
-    ? `${Key}` | `${Key}.${NestedKeyOf<ObjectType[Key]>}`
-    : `${Key}`;
-}[keyof ObjectType & (string | number)];
-
-// Type for all possible translation keys
-export type TranslationKey = NestedKeyOf<Messages>;
diff --git a/lib/mdx.ts b/lib/mdx.ts
deleted file mode 100644
index 5d5d484..0000000
--- a/lib/mdx.ts
+++ /dev/null
@@ -1,354 +0,0 @@
-/**
- * MDX processing utilities for enhanced markdown content
- */
-
-export interface Heading {
-  level: number;
-  text: string;
-  id: string;
-  line: number;
-}
-
-export interface Link {
-  text: string;
-  url: string;
-  index: number;
-}
-
-export interface Image {
-  alt: string;
-  src: string;
-  index: number;
-}
-
-export interface ProcessedMarkdown {
-  content: string;
-  htmlContent: string;
-  headings: Heading[];
-  links: Link[];
-  images: Image[];
-}
-
-export interface ProcessedFrontmatter {
-  publishedDate: Date;
-  year: number;
-  month: number;
-  day: number;
-  isRecent: boolean;
-  [key: string]: unknown;
-}
-
-/**
- * Format date consistently across the markdown pipeline
- * Uses "Month Year" format (e.g., "April 2025")
- */
-export function formatDate(dateString: string): string {
-  const date = new Date(dateString);
-  return date.toLocaleDateString("en-US", {
-    year: "numeric",
-    month: "long",
-  });
-}
-
-/**
- * Process markdown content and extract metadata
- * @param markdown - Raw markdown content
- * @returns Processed content with metadata
- */
-export function processMarkdown(markdown: string): ProcessedMarkdown {
-  if (!markdown) {
-    return {
-      content: "",
-      htmlContent: "",
-      headings: [],
-      links: [],
-      images: [],
-    };
-  }
-
-  // Extract headings for table of contents
-  const headings = extractHeadings(markdown);
-
-  // Extract links
-  const links = extractLinks(markdown);
-
-  // Extract images
-  const images = extractImages(markdown);
-
-  // Convert markdown to HTML
-  const htmlContent = markdownToHtml(markdown);
-
-  return {
-    content: markdown,
-    htmlContent,
-    headings,
-    links,
-    images,
-  };
-}
-
-/**
- * Extract all headings from markdown content
- * @param markdown - Raw markdown content
- * @returns Array of heading objects with level, text, and id
- */
-function extractHeadings(markdown: string): Heading[] {
-  const headingRegex = /^(#{1,6})\s+(.+)$/gm;
-  const headings: Heading[] = [];
-  let match: RegExpExecArray | null;
-
-  while ((match = headingRegex.exec(markdown)) !== null) {
-    const level = match[1].length;
-    const text = match[2].trim();
-    const id = generateHeadingId(text);
-
-    headings.push({
-      level,
-      text,
-      id,
-      line: markdown.substring(0, match.index).split("\n").length,
-    });
-  }
-
-  return headings;
-}
-
-/**
- * Extract all links from markdown content
- * @param markdown - Raw markdown content
- * @returns Array of link objects
- */
-function extractLinks(markdown: string): Link[] {
-  const linkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
-  const links: Link[] = [];
-  let match: RegExpExecArray | null;
-
-  while ((match = linkRegex.exec(markdown)) !== null) {
-    links.push({
-      text: match[1],
-      url: match[2],
-      index: match.index,
-    });
-  }
-
-  return links;
-}
-
-/**
- * Extract all images from markdown content
- * @param markdown - Raw markdown content
- * @returns Array of image objects
- */
-function extractImages(markdown: string): Image[] {
-  const imageRegex = /!\[([^\]]*)\]\(([^)]+)\)/g;
-  const images: Image[] = [];
-  let match: RegExpExecArray | null;
-
-  while ((match = imageRegex.exec(markdown)) !== null) {
-    images.push({
-      alt: match[1],
-      src: match[2],
-      index: match.index,
-    });
-  }
-
-  return images;
-}
-
-/**
- * Generate a unique ID for a heading
- * @param text - Heading text
- * @returns Unique ID
- */
-function generateHeadingId(text: string): string {
-  return text
-    .toLowerCase()
-    .replace(/[^\w\s-]/g, "")
-    .replace(/\s+/g, "-")
-    .replace(/-+/g, "-")
-    .trim();
-}
-
-/**
- * Convert markdown to HTML with enhanced formatting
- * - Preserves extra blank lines between paragraphs as visible gaps
- *   (each extra blank line becomes <p class="md-gap">&nbsp;</p>)
- * @param markdown - Raw markdown content
- * @returns HTML content
- */
-function markdownToHtml(markdown: string): string {
-  if (!markdown) return "";
-
-  // Normalize line endings
-  const src = String(markdown).replace(/\r\n?/g, "\n");
-
-  // For 3+ consecutive newlines, keep 2 for the paragraph break and
-  // emit a counted gap token for additional blank lines to preserve spacing.
-  const withGaps = src.replace(/\n{3,}/g, (m) => {
-    const extra = m.length - 2;
-    return `\n\n<GAP:${extra}/>`;
-  });
-
-  return (
-    withGaps
-      // Headers with IDs
-      .replace(
-        /^###### (.*$)/gim,
-        (_match, t) => `<h6 id="${generateHeadingId(t)}">${t}</h6>`,
-      )
-      .replace(
-        /^##### (.*$)/gim,
-        (_match, t) => `<h5 id="${generateHeadingId(t)}">${t}</h5>`,
-      )
-      .replace(
-        /^#### (.*$)/gim,
-        (_match, t) => `<h4 id="${generateHeadingId(t)}">${t}</h4>`,
-      )
-      .replace(
-        /^### (.*$)/gim,
-        (_match, t) => `<h3 id="${generateHeadingId(t)}">${t}</h3>`,
-      )
-      .replace(
-        /^## (.*$)/gim,
-        (_match, t) => `<h2 id="${generateHeadingId(t)}">${t}</h2>`,
-      )
-      .replace(
-        /^# (.*$)/gim,
-        (_match, t) => `<h1 id="${generateHeadingId(t)}">${t}</h1>`,
-      )
-
-      // Code fences (block) and inline code
-      .replace(
-        /```(\w+)?\n([\s\S]*?)\n```/g,
-        (_match, lang = "", code) =>
-          `<pre><code class="language-${lang}">${code}</code></pre>`,
-      )
-      .replace(/`([^`]+)`/g, "<code>$1</code>")
-
-      // Bold and italic (strong before em to avoid overlap issues)
-      .replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")
-      .replace(/\*(.+?)\*/g, "<em>$1</em>")
-
-      // Links and images
-      .replace(
-        /!\[([^\]]*)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g,
-        (_match, alt, src, title = "") =>
-          `<img alt="${alt}" src="${src}"${title ? ` title="${title}"` : ""}>`,
-      )
-      .replace(
-        /\[([^\]]+)\]\(([^)\s]+)(?:\s+"([^"]+)")?\)/g,
-        (_match, text, href, title = "") =>
-          `<a href="${href}"${title ? ` title="${title}"` : ""}>${text}</a>`,
-      )
-
-      // Blockquotes
-      .replace(/^(>\s?.+)(\n(>\s?.+))*$/gim, (m) => {
-        const inner = m.replace(/^>\s?/gm, "");
-        return `<blockquote><p>${inner.replace(
-          /\n{2,}/g,
-          "</p><p>",
-        )}</p></blockquote>`;
-      })
-
-      // Lists (ul/ol)
-      .replace(/^(\s*[-*]\s.+(?:\n\s*[-*]\s.+)*)/gim, (m) => {
-        const items = m
-          .trim()
-          .split(/\n/)
-          .map((l) => l.replace(/^\s*[-*]\s+/, ""))
-          .map((t) => `<li>${t}</li>`)
-          .join("");
-        return `<ul>${items}</ul>`;
-      })
-      .replace(/^(\s*\d+\.\s.+(?:\n\s*\d+\.\s.+)*)/gim, (m) => {
-        const items = m
-          .trim()
-          .split(/\n/)
-          .map((l) => l.replace(/^\s*\d+\.\s+/, ""))
-          .map((t) => `<li>${t}</li>`)
-          .join("");
-        return `<ol>${items}</ol>`;
-      })
-
-      // Horizontal rules
-      .replace(/^\s*(?:-{3,}|\*{3,})\s*$/gm, "<hr>")
-
-      // Paragraphs:
-      // 1) Convert double newlines to paragraph boundaries
-      .replace(/\n\n/g, "</p><p>")
-      // 2) Convert single line breaks to <br> tags within paragraphs
-      .replace(/(?<!\n)\n(?!\n)/g, "<br>")
-      // 3) Wrap remaining bare lines that are not already block-level elements.
-      //    (Also skip our GAP_TOKEN so we can turn it into gap paragraphs later.)
-      .replace(
-        /^(?!\s*<(h[1-6]|ul|ol|li|blockquote|hr|pre|code|table|img)\b)(?!\s*<\/)(?!\s*<GAP\/>)(.+)$/gim,
-        "<p>$2</p>",
-      )
-
-      // Clean up truly empty paragraphs but keep &nbsp; gap paragraphs
-      .replace(/<p>\s*<\/p>/g, "")
-
-      // Turn counted GAP tokens into explicit, styleable gap elements
-      .replace(
-        /<GAP:(\d+)\/>/g,
-        (_match, n) =>
-          `<div class="md-gap" style="--gap:${Number(
-            n,
-          )}" aria-hidden="true"></div>`,
-      )
-  );
-}
-
-/**
- * Generate a table of contents from headings
- * @param headings - Array of heading objects
- * @returns HTML table of contents
- */
-export function generateTableOfContents(headings: Heading[]): string {
-  if (!headings || headings.length === 0) return "";
-
-  let toc = '<nav class="table-of-contents"><h4>Table of Contents</h4><ul>';
-
-  headings.forEach((heading) => {
-    const indent = (heading.level - 1) * 20;
-    toc += `<li style="margin-left: ${indent}px"><a href="#${heading.id}">${heading.text}</a></li>`;
-  });
-
-  toc += "</ul></nav>";
-  return toc;
-}
-
-/**
- * Process frontmatter with enhanced validation
- * @param frontmatter - Raw frontmatter data
- * @returns Processed and validated frontmatter
- */
-export function processFrontmatter(
-  frontmatter: Record<string, unknown>,
-): ProcessedFrontmatter {
-  // Add computed fields
-  const date = frontmatter.date as string;
-  const processed: ProcessedFrontmatter = {
-    ...frontmatter,
-    publishedDate: new Date(date),
-    year: new Date(date).getFullYear(),
-    month: new Date(date).getMonth() + 1,
-    day: new Date(date).getDate(),
-    isRecent: isRecentPost(date),
-  };
-
-  return processed;
-}
-
-/**
- * Check if a post is recent (within last 30 days)
- * @param date - Post date string
- * @returns True if post is recent
- */
-function isRecentPost(date: string): boolean {
-  const postDate = new Date(date);
-  const thirtyDaysAgo = new Date();
-  thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
-
-  return postDate > thirtyDaysAgo;
-}
diff --git a/lib/propNormalization.ts b/lib/propNormalization.ts
index ff0559d..5c7106d 100644
--- a/lib/propNormalization.ts
+++ b/lib/propNormalization.ts
@@ -1,878 +1,251 @@
 /**
- * Utility functions for normalizing component props to match Figma specifications
- * while maintaining backward compatibility with existing lowercase usage.
+ * Component prop option arrays and value types.
  *
- * Figma uses PascalCase (e.g., "Standard", "Inverse") but codebase uses lowercase.
- * These helpers accept both formats and normalize to lowercase for internal use.
+ * The codebase uses lowercase-canonical enum values (see
+ * `.cursor/rules/component-props.mdc`). This module is the single source of
+ * valid values for each enum prop — Storybook `argTypes` and any runtime guard
+ * import the corresponding `*_OPTIONS` array from here, and the matching
+ * `*Value` type is derived from it.
  */
 
-/**
- * Normalize mode prop values (Standard/Inverse -> standard/inverse)
- */
-export function normalizeMode(
-  value: string | undefined,
-  defaultValue: "standard" | "inverse" = "standard",
-): "standard" | "inverse" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (normalized === "standard" || normalized === "inverse") {
-    return normalized;
-  }
-  return defaultValue;
-}
+// ---------------------------------------------------------------------------
+// Generic shared values
+// ---------------------------------------------------------------------------
 
-/**
- * Normalize state prop values (Default/Hover/Focus/Selected -> default/hover/focus/selected)
- */
-export function normalizeState(
-  value: string | undefined,
-  defaultValue: "default" | "hover" | "focus" | "selected" = "default",
-): "default" | "hover" | "focus" | "selected" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (
-    normalized === "default" ||
-    normalized === "hover" ||
-    normalized === "focus" ||
-    normalized === "selected"
-  ) {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const MODE_OPTIONS = ["standard", "inverse"] as const;
+export type ModeValue = (typeof MODE_OPTIONS)[number];
 
-/**
- * Normalize state prop values for form inputs (Default/Active/Hover/Focus)
- */
-export function normalizeInputState(
-  value: string | undefined,
-  defaultValue: "default" | "active" | "hover" | "focus" = "default",
-): "default" | "active" | "hover" | "focus" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (
-    normalized === "default" ||
-    normalized === "active" ||
-    normalized === "hover" ||
-    normalized === "focus"
-  ) {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const STATE_OPTIONS = [
+  "default",
+  "hover",
+  "focus",
+  "selected",
+] as const;
+export type StateValue = (typeof STATE_OPTIONS)[number];
 
-/**
- * Normalize toggle state prop values (Default/Hover/Focus/Selected)
- */
-export function normalizeToggleState(
-  value: string | undefined,
-  defaultValue: "default" | "hover" | "focus" | "selected" = "default",
-): "default" | "hover" | "focus" | "selected" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (
-    normalized === "default" ||
-    normalized === "hover" ||
-    normalized === "focus" ||
-    normalized === "selected"
-  ) {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const INPUT_STATE_OPTIONS = [
+  "default",
+  "active",
+  "hover",
+  "focus",
+] as const;
+export type InputStateValue = (typeof INPUT_STATE_OPTIONS)[number];
 
-/**
- * Type helper for case-insensitive mode prop
- */
-export type ModeValue = "standard" | "inverse" | "Standard" | "Inverse";
+export const SIZE_OPTIONS = [
+  "xsmall",
+  "small",
+  "medium",
+  "large",
+  "xlarge",
+] as const;
+export type SizeValue = (typeof SIZE_OPTIONS)[number];
 
-/**
- * Type helper for case-insensitive state prop
- */
-export type StateValue =
-  | "default"
-  | "hover"
-  | "focus"
-  | "selected"
-  | "Default"
-  | "Hover"
-  | "Focus"
-  | "Selected";
+export const SMALL_MEDIUM_LARGE_OPTIONS = [
+  "small",
+  "medium",
+  "large",
+] as const;
+export type SmallMediumLargeValue =
+  (typeof SMALL_MEDIUM_LARGE_OPTIONS)[number];
 
-/**
- * Type helper for case-insensitive input state prop
- */
-export type InputStateValue =
-  | "default"
-  | "active"
-  | "hover"
-  | "focus"
-  | "Default"
-  | "Active"
-  | "Hover"
-  | "Focus";
+export const ALIGNMENT_OPTIONS = ["center", "left"] as const;
+export type AlignmentValue = (typeof ALIGNMENT_OPTIONS)[number];
 
-/**
- * Normalize button size prop values
- */
-export function normalizeSize(
-  value: string | undefined,
-  defaultValue: "xsmall" | "small" | "medium" | "large" | "xlarge" = "xsmall",
-): "xsmall" | "small" | "medium" | "large" | "xlarge" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const sizes = ["xsmall", "small", "medium", "large", "xlarge"];
-  if (sizes.includes(normalized)) {
-    return normalized as "xsmall" | "small" | "medium" | "large" | "xlarge";
-  }
-  return defaultValue;
-}
+// ---------------------------------------------------------------------------
+// Component-specific values
+// ---------------------------------------------------------------------------
 
-/**
- * Normalize alert status prop values
- */
-export function normalizeAlertStatus(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "positive" | "warning" | "danger" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const statuses = ["default", "positive", "warning", "danger"];
-  if (statuses.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const ALERT_STATUS_OPTIONS = [
+  "default",
+  "positive",
+  "warning",
+  "danger",
+] as const;
+export type AlertStatusValue = (typeof ALERT_STATUS_OPTIONS)[number];
 
-/**
- * Normalize alert type prop values
- */
-export function normalizeAlertType(
-  value: string | undefined,
-  defaultValue: "toast" = "toast",
-): "toast" | "banner" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const types = ["toast", "banner"];
-  if (types.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const ALERT_TYPE_OPTIONS = ["toast", "banner"] as const;
+export type AlertTypeValue = (typeof ALERT_TYPE_OPTIONS)[number];
 
-/**
- * Normalize tooltip position prop values
- */
-export function normalizeTooltipPosition(
-  value: string | undefined,
-  defaultValue: "top" = "top",
-): "top" | "bottom" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const positions = ["top", "bottom"];
-  if (positions.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const TOOLTIP_POSITION_OPTIONS = ["top", "bottom"] as const;
+export type TooltipPositionValue = (typeof TOOLTIP_POSITION_OPTIONS)[number];
 
-/**
- * Type helper for case-insensitive size prop
- */
-export type SizeValue =
-  | "xsmall"
-  | "small"
-  | "medium"
-  | "large"
-  | "xlarge"
-  | "XSmall"
-  | "Small"
-  | "Medium"
-  | "Large"
-  | "XLarge";
+export const MENU_BAR_SIZE_OPTIONS = [
+  "X Small",
+  "Small",
+  "Medium",
+  "Large",
+  "X Large",
+] as const;
+export type MenuBarSizeValue = (typeof MENU_BAR_SIZE_OPTIONS)[number];
 
-/**
- * Normalize MenuBar size prop values to Figma specifications
- * Maps to: "X Small" | "Small" | "Medium" | "Large" | "X Large"
- * Also supports legacy format for backward compatibility
- */
-export function normalizeMenuBarSize(
-  value: string | undefined,
-  defaultValue:
-    | "X Small"
-    | "Small"
-    | "Medium"
-    | "Large"
-    | "X Large" = "X Small",
-): "X Small" | "Small" | "Medium" | "Large" | "X Large" {
-  if (!value) return defaultValue;
-  if (
-    value === "X Small" ||
-    value === "Small" ||
-    value === "Medium" ||
-    value === "Large" ||
-    value === "X Large"
-  ) {
-    return value;
-  }
-  return defaultValue;
-}
+export const NAVIGATION_ITEM_VARIANT_OPTIONS = ["default"] as const;
+export type NavigationItemVariantValue =
+  (typeof NAVIGATION_ITEM_VARIANT_OPTIONS)[number];
 
-/**
- * Normalize navigation item variant prop values
- */
-export function normalizeNavigationItemVariant(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (normalized === "default") {
-    return "default";
-  }
-  return defaultValue;
-}
+export const NAVIGATION_ITEM_SIZE_OPTIONS = ["default", "xsmall"] as const;
+export type NavigationItemSizeValue =
+  (typeof NAVIGATION_ITEM_SIZE_OPTIONS)[number];
 
-/**
- * Normalize navigation item size prop values
- */
-export function normalizeNavigationItemSize(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "xsmall" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const sizes = ["default", "xsmall"];
-  if (sizes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const CONTENT_LOCKUP_VARIANT_OPTIONS = [
+  "hero",
+  "feature",
+  "learn",
+  "ask",
+  "ask-inverse",
+  "modal",
+  "login",
+] as const;
+export type ContentLockupVariantValue =
+  (typeof CONTENT_LOCKUP_VARIANT_OPTIONS)[number];
 
-/**
- * Normalize content lockup variant prop values
- */
-export function normalizeContentLockupVariant(
-  value: string | undefined,
-  defaultValue: "hero" = "hero",
-): "hero" | "feature" | "learn" | "ask" | "ask-inverse" | "modal" | "login" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const variants = [
-    "hero",
-    "feature",
-    "learn",
-    "ask",
-    "ask-inverse",
-    "modal",
-    "login",
-  ];
-  if (variants.includes(normalized)) {
-    return normalized as
-      | "hero"
-      | "feature"
-      | "learn"
-      | "ask"
-      | "ask-inverse"
-      | "modal"
-      | "login";
-  }
-  return defaultValue;
-}
+export const NUMBERED_LIST_SIZE_OPTIONS = ["M", "S"] as const;
+export type NumberedListSizeValue = (typeof NUMBERED_LIST_SIZE_OPTIONS)[number];
 
-/**
- * Normalize alignment prop values
- */
-export function normalizeAlignment(
-  value: string | undefined,
-  defaultValue: "center" = "center",
-): "center" | "left" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const alignments = ["center", "left"];
-  if (alignments.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const HEADER_LOCKUP_JUSTIFICATION_OPTIONS = ["left", "center"] as const;
+export type HeaderLockupJustificationValue =
+  (typeof HEADER_LOCKUP_JUSTIFICATION_OPTIONS)[number];
 
-/**
- * Normalize numbered list size prop values
- */
-export function normalizeNumberedListSize(
-  value: string | undefined,
-  defaultValue: "M" = "M",
-): "M" | "S" {
-  if (!value) return defaultValue;
-  const normalized = value.toUpperCase();
-  if (normalized === "M" || normalized === "S") {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const HEADER_LOCKUP_SIZE_OPTIONS = ["L", "M"] as const;
+export type HeaderLockupSizeValue =
+  (typeof HEADER_LOCKUP_SIZE_OPTIONS)[number];
 
-/**
- * Normalize header lockup justification prop values
- */
-export function normalizeHeaderLockupJustification(
-  value: string | undefined,
-  defaultValue: "left" = "left",
-): "left" | "center" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (normalized === "left" || normalized === "center") {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const HEADER_LOCKUP_PALETTE_OPTIONS = ["default", "inverse"] as const;
+export type HeaderLockupPaletteValue =
+  (typeof HEADER_LOCKUP_PALETTE_OPTIONS)[number];
 
-/**
- * Normalize header lockup size prop values
- */
-export function normalizeHeaderLockupSize(
-  value: string | undefined,
-  defaultValue: "L" = "L",
-): "L" | "M" {
-  if (!value) return defaultValue;
-  const normalized = value.toUpperCase();
-  if (normalized === "L" || normalized === "M") {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const TEXT_INPUT_SIZE_OPTIONS = ["small", "medium"] as const;
+export type TextInputSizeValue = (typeof TEXT_INPUT_SIZE_OPTIONS)[number];
 
-/**
- * Normalize header lockup palette prop values (Default/Inverse -> default/inverse)
- */
-export function normalizeHeaderLockupPalette(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "inverse" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (normalized === "default" || normalized === "inverse") {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const CONTENT_CONTAINER_SIZE_OPTIONS = ["xs", "responsive"] as const;
+export type ContentContainerSizeValue =
+  (typeof CONTENT_CONTAINER_SIZE_OPTIONS)[number];
 
-/**
- * Normalize text input size prop values
- */
-export function normalizeTextInputSize(
-  value: string | undefined,
-  defaultValue: "medium" = "medium",
-): "small" | "medium" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (normalized === "small" || normalized === "medium") {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const CONTENT_THUMBNAIL_VARIANT_OPTIONS = [
+  "vertical",
+  "horizontal",
+] as const;
+export type ContentThumbnailVariantValue =
+  (typeof CONTENT_THUMBNAIL_VARIANT_OPTIONS)[number];
 
-/**
- * Normalize content container size prop values
- */
-export function normalizeContentContainerSize(
-  value: string | undefined,
-  defaultValue: "responsive" = "responsive",
-): "xs" | "responsive" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const sizes = ["xs", "responsive"];
-  if (sizes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const SECTION_HEADER_VARIANT_OPTIONS = [
+  "default",
+  "multi-line",
+] as const;
+export type SectionHeaderVariantValue =
+  (typeof SECTION_HEADER_VARIANT_OPTIONS)[number];
 
-/**
- * Normalize content thumbnail variant prop values
- */
-export function normalizeContentThumbnailVariant(
-  value: string | undefined,
-  defaultValue: "vertical" = "vertical",
-): "vertical" | "horizontal" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const variants = ["vertical", "horizontal"];
-  if (variants.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const QUOTE_BLOCK_VARIANT_OPTIONS = [
+  "compact",
+  "standard",
+  "extended",
+] as const;
+export type QuoteBlockVariantValue =
+  (typeof QUOTE_BLOCK_VARIANT_OPTIONS)[number];
 
-/**
- * Normalize section header variant prop values
- */
-export function normalizeSectionHeaderVariant(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "multi-line" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const variants = ["default", "multi-line"];
-  if (variants.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const NUMBER_CARD_SIZE_OPTIONS = [
+  "small",
+  "medium",
+  "large",
+  "xlarge",
+] as const;
+export type NumberCardSizeValue = (typeof NUMBER_CARD_SIZE_OPTIONS)[number];
 
-/**
- * Normalize quote block variant prop values
- */
-export function normalizeQuoteBlockVariant(
-  value: string | undefined,
-  defaultValue: "standard" = "standard",
-): "compact" | "standard" | "extended" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const variants = ["compact", "standard", "extended"];
-  if (variants.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const ASK_ORGANIZER_VARIANT_OPTIONS = [
+  "centered",
+  "left-aligned",
+  "compact",
+  "inverse",
+] as const;
+export type AskOrganizerVariantValue =
+  (typeof ASK_ORGANIZER_VARIANT_OPTIONS)[number];
 
-/**
- * Normalize number card size prop values (already PascalCase in codebase, supports both)
- */
-export function normalizeNumberCardSize(
-  value: string | undefined,
-  defaultValue: "Medium" = "Medium",
-): "Small" | "Medium" | "Large" | "XLarge" {
-  if (!value) return defaultValue;
-  // Check if already PascalCase
-  if (
-    value === "Small" ||
-    value === "Medium" ||
-    value === "Large" ||
-    value === "XLarge"
-  ) {
-    return value;
-  }
-  // Normalize lowercase to PascalCase
-  const normalized = value.toLowerCase();
-  if (normalized === "small") return "Small";
-  if (normalized === "medium") return "Medium";
-  if (normalized === "large") return "Large";
-  if (normalized === "xlarge") return "XLarge";
-  return defaultValue;
-}
+export const CONTEXT_MENU_ITEM_SIZE_OPTIONS = [
+  "small",
+  "medium",
+  "large",
+] as const;
+export type ContextMenuItemSizeValue =
+  (typeof CONTEXT_MENU_ITEM_SIZE_OPTIONS)[number];
 
-/**
- * Normalize ask organizer variant prop values
- */
-export function normalizeAskOrganizerVariant(
-  value: string | undefined,
-  defaultValue: "centered" = "centered",
-): "centered" | "left-aligned" | "compact" | "inverse" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const variants = ["centered", "left-aligned", "compact", "inverse"];
-  if (variants.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const TOGGLE_GROUP_POSITION_OPTIONS = [
+  "left",
+  "middle",
+  "right",
+] as const;
+export type ToggleGroupPositionValue =
+  (typeof TOGGLE_GROUP_POSITION_OPTIONS)[number];
 
-/**
- * Normalize context menu item size prop values
- */
-export function normalizeContextMenuItemSize(
-  value: string | undefined,
-  defaultValue: "medium" = "medium",
-): "small" | "medium" | "large" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const sizes = ["small", "medium", "large"];
-  if (sizes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const LABEL_VARIANT_OPTIONS = ["default", "horizontal"] as const;
+export type LabelVariantValue = (typeof LABEL_VARIANT_OPTIONS)[number];
 
-/**
- * Normalize image placeholder color prop values
- */
-export function normalizeImagePlaceholderColor(
-  value: string | undefined,
-  defaultValue: "blue" = "blue",
-): "blue" | "green" | "purple" | "red" | "orange" | "teal" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const colors = ["blue", "green", "purple", "red", "orange", "teal"];
-  if (colors.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const TEXT_AREA_APPEARANCE_OPTIONS = ["default", "embedded"] as const;
+export type TextAreaAppearanceValue =
+  (typeof TEXT_AREA_APPEARANCE_OPTIONS)[number];
 
-/**
- * Normalize toggle group position prop values
- */
-export function normalizeToggleGroupPosition(
-  value: string | undefined,
-  defaultValue: "left" = "left",
-): "left" | "middle" | "right" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const positions = ["left", "middle", "right"];
-  if (positions.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const RULE_CARD_SIZE_OPTIONS = ["XS", "S", "M", "L"] as const;
+export type RuleCardSizeValue = (typeof RULE_CARD_SIZE_OPTIONS)[number];
 
-/**
- * Normalize label variant prop values
- */
-export function normalizeLabelVariant(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "horizontal" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const variants = ["default", "horizontal"];
-  if (variants.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const CHIP_STATE_OPTIONS = [
+  "unselected",
+  "selected",
+  "disabled",
+  "custom",
+] as const;
+export type ChipStateValue = (typeof CHIP_STATE_OPTIONS)[number];
 
-/**
- * Normalize TextArea appearance prop (default/embedded; Figma: Default/Embedded).
- */
-export function normalizeTextAreaAppearance(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "embedded" {
-  if (!value) return defaultValue;
-  const n = value.toLowerCase();
-  return n === "embedded" ? "embedded" : "default";
-}
+export const CHIP_PALETTE_OPTIONS = ["default", "inverse"] as const;
+export type ChipPaletteValue = (typeof CHIP_PALETTE_OPTIONS)[number];
 
-/**
- * Normalize small/medium/large size prop values (for SelectInput, TextArea, etc.)
- */
-export function normalizeSmallMediumLargeSize(
-  value: string | undefined,
-  defaultValue: "medium" = "medium",
-): "small" | "medium" | "large" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const sizes = ["small", "medium", "large"];
-  if (sizes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const CHIP_SIZE_OPTIONS = ["s", "m"] as const;
+export type ChipSizeValue = (typeof CHIP_SIZE_OPTIONS)[number];
 
-/**
- * Normalize RuleCard size prop values (L/M -> l/m -> L/M)
- */
-export function normalizeRuleCardSize(
-  value: string | undefined,
-  defaultValue: "L" = "L",
-): "XS" | "S" | "M" | "L" {
-  if (!value) return defaultValue;
-  const normalized = value.toUpperCase();
-  if (
-    normalized === "XS" ||
-    normalized === "S" ||
-    normalized === "M" ||
-    normalized === "L"
-  ) {
-    return normalized;
-  }
-  return defaultValue;
-}
+export const MULTI_SELECT_SIZE_OPTIONS = ["s", "m"] as const;
+export type MultiSelectSizeValue = (typeof MULTI_SELECT_SIZE_OPTIONS)[number];
 
-/**
- * Type helper for case-insensitive Chip state prop
- */
-export type ChipStateValue =
-  | "unselected"
-  | "selected"
-  | "disabled"
-  | "custom"
-  | "Unselected"
-  | "Selected"
-  | "Disabled"
-  | "Custom";
+export const INPUT_LABEL_SIZE_OPTIONS = ["s", "m"] as const;
+export type InputLabelSizeValue = (typeof INPUT_LABEL_SIZE_OPTIONS)[number];
 
-/**
- * Type helper for case-insensitive Chip palette prop
- */
-export type ChipPaletteValue = "default" | "inverse" | "Default" | "Inverse";
+export const INPUT_LABEL_PALETTE_OPTIONS = ["default", "inverse"] as const;
+export type InputLabelPaletteValue =
+  (typeof INPUT_LABEL_PALETTE_OPTIONS)[number];
 
-/**
- * Type helper for case-insensitive Chip size prop
- */
-export type ChipSizeValue = "s" | "m" | "S" | "M";
+export const MENU_BAR_ITEM_STATE_OPTIONS = [
+  "default",
+  "hover",
+  "selected",
+] as const;
+export type MenuBarItemStateValue =
+  (typeof MENU_BAR_ITEM_STATE_OPTIONS)[number];
 
-/**
- * Normalize Chip state prop values (Unselected/Selected/Disabled/Custom)
- */
-export function normalizeChipState(
-  value: string | undefined,
-  defaultValue: "unselected" = "unselected",
-): "unselected" | "selected" | "disabled" | "custom" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const states = ["unselected", "selected", "disabled", "custom"];
-  if (states.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const MENU_BAR_ITEM_MODE_OPTIONS = ["default", "inverse"] as const;
+export type MenuBarItemModeValue = (typeof MENU_BAR_ITEM_MODE_OPTIONS)[number];
 
-/**
- * Normalize Chip palette prop values (Default/Inverse -> default/inverse)
- */
-export function normalizeChipPalette(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "inverse" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const palettes = ["default", "inverse"];
-  if (palettes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const MENU_BAR_ITEM_SIZE_OPTIONS = MENU_BAR_SIZE_OPTIONS;
+export type MenuBarItemSizeValue = MenuBarSizeValue;
 
-/**
- * Normalize Chip size prop values (S/M -> s/m)
- */
-export function normalizeChipSize(
-  value: string | undefined,
-  defaultValue: "s" = "s",
-): "s" | "m" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const sizes = ["s", "m"];
-  if (sizes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const BUTTON_TYPE_OPTIONS = [
+  "filled",
+  "outline",
+  "ghost",
+  "danger",
+] as const;
+export type ButtonTypeValue = (typeof BUTTON_TYPE_OPTIONS)[number];
 
-/**
- * Normalize MultiSelect size prop values (S/M -> s/m)
- */
-export function normalizeMultiSelectSize(
-  value: string | undefined,
-  defaultValue: "m" = "m",
-): "s" | "m" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const sizes = ["s", "m"];
-  if (sizes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const BUTTON_PALETTE_OPTIONS = ["default", "inverse"] as const;
+export type ButtonPaletteValue = (typeof BUTTON_PALETTE_OPTIONS)[number];
 
-/**
- * Normalize InputLabel size prop values (S/M -> s/m)
- */
-export function normalizeInputLabelSize(
-  value: string | undefined,
-  defaultValue: "s" = "s",
-): "s" | "m" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const sizes = ["s", "m"];
-  if (sizes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
+export const BUTTON_STATE_OPTIONS = [
+  "default",
+  "focus",
+  "active",
+  "hover",
+  "disabled",
+] as const;
+export type ButtonStateValue = (typeof BUTTON_STATE_OPTIONS)[number];
 
-/**
- * Normalize InputLabel palette prop values (Default/Inverse -> default/inverse)
- */
-export function normalizeInputLabelPalette(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "inverse" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const palettes = ["default", "inverse"];
-  if (palettes.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
-
-/**
- * Normalize MenuBarItem state prop values (Default/Hover/Selected -> default/hover/selected)
- */
-export function normalizeMenuBarItemState(
-  value: string | undefined,
-  defaultValue: "default" | "hover" | "selected" = "default",
-): "default" | "hover" | "selected" {
-  if (!value) return defaultValue;
-  if (value === "default" || value === "hover" || value === "selected") {
-    return value;
-  }
-  return defaultValue;
-}
-
-/**
- * Normalize MenuBarItem mode prop values.
- * Default mode: yellow text on dark background (standard header)
- * Inverse mode: black text on yellow background (folderTop variant)
- */
-export function normalizeMenuBarItemMode(
-  value: string | undefined,
-  defaultValue: "default" | "inverse" = "default",
-): "default" | "inverse" {
-  if (!value) return defaultValue;
-  if (value === "default" || value === "inverse") {
-    return value;
-  }
-  return defaultValue;
-}
-
-/**
- * Normalize MenuBarItem size prop values.
- * Accepts: "X Small", "Small", "Medium", "Large", "X Large"
- */
-export function normalizeMenuBarItemSize(
-  value: string | undefined,
-  defaultValue:
-    | "X Small"
-    | "Small"
-    | "Medium"
-    | "Large"
-    | "X Large" = "X Small",
-): "X Small" | "Small" | "Medium" | "Large" | "X Large" {
-  if (!value) return defaultValue;
-  if (
-    value === "X Small" ||
-    value === "Small" ||
-    value === "Medium" ||
-    value === "Large" ||
-    value === "X Large"
-  ) {
-    return value;
-  }
-  return defaultValue;
-}
-
-/**
- * Normalize button type prop values (Filled/Outline/Ghost/Danger -> filled/outline/ghost/danger)
- */
-export function normalizeButtonType(
-  value: string | undefined,
-  defaultValue: "filled" = "filled",
-): "filled" | "outline" | "ghost" | "danger" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const types = ["filled", "outline", "ghost", "danger"];
-  if (types.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
-
-/**
- * Normalize button palette prop values (Default/Invert -> default/inverse)
- */
-export function normalizeButtonPalette(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "inverse" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  // Handle "invert" -> "inverse" mapping
-  if (normalized === "invert" || normalized === "inverse") {
-    return "inverse";
-  }
-  if (normalized === "default") {
-    return "default";
-  }
-  return defaultValue;
-}
-
-/**
- * Normalize button state prop values (Default/Focus/Active/Hover/Disabled -> default/focus/active/hover/disabled)
- */
-export function normalizeButtonState(
-  value: string | undefined,
-  defaultValue: "default" = "default",
-): "default" | "focus" | "active" | "hover" | "disabled" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  const states = ["default", "focus", "active", "hover", "disabled"];
-  if (states.includes(normalized)) {
-    return normalized as typeof defaultValue;
-  }
-  return defaultValue;
-}
-
-/**
- * Type helper for case-insensitive button type prop
- */
-export type ButtonTypeValue =
-  | "filled"
-  | "outline"
-  | "ghost"
-  | "danger"
-  | "Filled"
-  | "Outline"
-  | "Ghost"
-  | "Danger";
-
-/**
- * Type helper for case-insensitive button palette prop
- */
-export type ButtonPaletteValue =
-  | "default"
-  | "inverse"
-  | "Default"
-  | "Invert"
-  | "Inverse";
-
-/**
- * Type helper for case-insensitive button state prop
- */
-export type ButtonStateValue =
-  | "default"
-  | "focus"
-  | "active"
-  | "hover"
-  | "disabled"
-  | "Default"
-  | "Focus"
-  | "Active"
-  | "Hover"
-  | "Disabled";
-
-/**
- * ProportionBar layout variant (Figma uses a segmented track in the create-flow footer).
- */
+export const PROPORTION_BAR_VARIANT_OPTIONS = [
+  "default",
+  "segmented",
+] as const;
 export type ProportionBarVariantValue =
-  | "default"
-  | "segmented"
-  | "Default"
-  | "Segmented";
-
-/**
- * Normalize ProportionBar variant (Figma PascalCase vs codebase lowercase).
- */
-export function normalizeProportionBarVariant(
-  value: string | undefined,
-  defaultValue: "default" | "segmented" = "default",
-): "default" | "segmented" {
-  if (!value) return defaultValue;
-  const normalized = value.toLowerCase();
-  if (normalized === "default" || normalized === "segmented") {
-    return normalized;
-  }
-  return defaultValue;
-}
+  (typeof PROPORTION_BAR_VARIANT_OPTIONS)[number];
diff --git a/lib/server/validation/createFlowSchemas.ts b/lib/server/validation/createFlowSchemas.ts
index 2a7d013..1857461 100644
--- a/lib/server/validation/createFlowSchemas.ts
+++ b/lib/server/validation/createFlowSchemas.ts
@@ -1,5 +1,5 @@
 import { z } from "zod";
-import { FLOW_STEP_ORDER } from "../../../app/create/utils/flowSteps";
+import { FLOW_STEP_ORDER } from "../../../app/(app)/create/utils/flowSteps";
 import { assertPlainJsonValue, DEFAULT_PLAIN_JSON_LIMITS } from "./plainJson";
 
 const flowStepTuple = FLOW_STEP_ORDER as unknown as [string, ...string[]];
diff --git a/lib/types.ts b/lib/types.ts
deleted file mode 100644
index 37b0611..0000000
--- a/lib/types.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Shared type definitions for the CommunityRule application
- */
-
-// Re-export types from other modules for convenience
-export type { BlogPost, BlogStats } from "./content";
-
-export type { BlogPostFrontmatter, ValidationResult } from "./validation";
-
-export type {
-  Heading,
-  Link,
-  Image,
-  ProcessedMarkdown,
-  ProcessedFrontmatter,
-} from "./mdx";
-
-export type { CacheStats } from "./cache";
-
-// Additional shared types
-export interface ComponentProps {
-  className?: string;
-  children?: React.ReactNode;
-}
-
-export interface PageProps {
-  params?: Record<string, string | string[]>;
-  searchParams?: Record<string, string | string[]>;
-}
diff --git a/messages/en/pages/login.json b/messages/en/pages/login.json
index b924a90..694c911 100644
--- a/messages/en/pages/login.json
+++ b/messages/en/pages/login.json
@@ -12,6 +12,7 @@
   "legalAnd": " and ",
   "legalSuffix": ".",
   "backToHome": "← Back to home",
+  "loadingFallback": "Loading…",
   "errors": {
     "network": "Something went wrong. Check your connection and try again.",
     "emailInvalid": "Enter a valid email address.",
diff --git a/performance-budgets.json b/performance-budgets.json
index 1454f32..0be7868 100644
--- a/performance-budgets.json
+++ b/performance-budgets.json
@@ -6,9 +6,9 @@
       "description": "Largest Contentful Paint should be under 2.5s"
     },
     {
-      "name": "fid",
-      "maxValue": 100,
-      "description": "First Input Delay should be under 100ms"
+      "name": "inp",
+      "maxValue": 200,
+      "description": "Interaction to Next Paint should be under 200ms"
     },
     {
       "name": "cls",
@@ -70,8 +70,8 @@
             "budget": 0.1
           },
           {
-            "metric": "max-potential-fid",
-            "budget": 130
+            "metric": "interaction-to-next-paint",
+            "budget": 200
           }
         ],
         "resourceSizes": [
@@ -155,8 +155,8 @@
             "budget": 0.1
           },
           {
-            "metric": "max-potential-fid",
-            "budget": 130
+            "metric": "interaction-to-next-paint",
+            "budget": 200
           }
         ]
       }
@@ -250,8 +250,8 @@
             "budget": 0.1
           },
           {
-            "metric": "max-potential-fid",
-            "budget": 130
+            "metric": "interaction-to-next-paint",
+            "budget": 200
           }
         ],
         "resourceSizes": [
@@ -331,8 +331,8 @@
             "budget": 0.1
           },
           {
-            "metric": "max-potential-fid",
-            "budget": 130
+            "metric": "interaction-to-next-paint",
+            "budget": 200
           }
         ],
         "resourceSizes": [
diff --git a/scripts/test-local.sh b/scripts/test-local.sh
deleted file mode 100755
index af515de..0000000
--- a/scripts/test-local.sh
+++ /dev/null
@@ -1,92 +0,0 @@
-#!/bin/bash
-
-# Local testing script - run before committing/merging
-# Usage: ./scripts/test-local.sh
-
-set -euo pipefail  # Exit on error, undefined vars, pipe failures
-
-echo "🧪 Running local tests before commit..."
-echo ""
-
-# Cleanup function to ensure servers are killed
-cleanup() {
-  echo ""
-  echo "🧹 Cleaning up any running servers..."
-  # Kill any Next.js servers on common test ports
-  for port in 3000 3010; do
-    if lsof -ti:$port >/dev/null 2>&1; then
-      echo "  Killing process on port $port..."
-      lsof -ti:$port | xargs kill -9 2>/dev/null || true
-    fi
-  done
-  # Kill any processes from PID files if they exist
-  for pidfile in .next/runner.pid .next/performance-server.pid; do
-    if [ -f "$pidfile" ]; then
-      PID=$(cat "$pidfile" 2>/dev/null || echo "")
-      if [ -n "$PID" ] && kill -0 "$PID" 2>/dev/null; then
-        echo "  Killing server PID: $PID (from $pidfile)..."
-        kill -9 "$PID" 2>/dev/null || true
-      fi
-      rm -f "$pidfile"
-    fi
-  done
-}
-
-trap cleanup EXIT INT TERM
-
-echo "🔍 Linting..."
-npm run lint || exit 1
-
-echo ""
-echo "💅 Prettier check..."
-npm exec prettier -- --check "**/*.{js,jsx,ts,tsx,json,css,md}" || exit 1
-
-echo ""
-echo "📦 Component tests with coverage..."
-npm test || exit 1
-
-echo ""
-echo "🎭 E2E tests..."
-npm run test:e2e || exit 1
-
-echo ""
-echo "🖼️  Visual regression tests..."
-# Visual tests use Playwright's webServer config, should auto-start server
-npm run visual:test || exit 1
-
-echo ""
-echo "⚡ Performance tests (Lighthouse CI)..."
-# Performance tests need a server running on port 3010
-# Check if server is already running, if not start one
-if ! lsof -ti:3010 >/dev/null 2>&1; then
-  echo "  Starting server for performance tests..."
-  npm run build || exit 1
-  PORT=3010 HOST=127.0.0.1 node node_modules/next/dist/bin/next start -p 3010 -H 127.0.0.1 > .next/performance-server.log 2>&1 &
-  SERVER_PID=$!
-  echo "$SERVER_PID" > .next/performance-server.pid
-  echo "  Server started (PID: $SERVER_PID), waiting for readiness..."
-  npx wait-on -t 120000 "tcp:127.0.0.1:3010" || { echo "❌ Server failed to start"; kill $SERVER_PID 2>/dev/null || true; exit 1; }
-  echo "  ✅ Server ready"
-fi
-
-# Run performance tests
-npm run performance:budget || EXIT_CODE=$?
-
-# Cleanup performance server if we started it
-if [ -f .next/performance-server.pid ]; then
-  PID=$(cat .next/performance-server.pid 2>/dev/null || echo "")
-  if [ -n "$PID" ] && kill -0 "$PID" 2>/dev/null; then
-    echo "  Stopping performance test server..."
-    kill "$PID" 2>/dev/null || true
-    sleep 2
-    kill -9 "$PID" 2>/dev/null || true
-  fi
-  rm -f .next/performance-server.pid
-fi
-
-if [ -n "${EXIT_CODE:-}" ]; then
-  exit $EXIT_CODE
-fi
-
-echo ""
-echo "✅ All tests passed! Safe to commit/merge."
diff --git a/stories/ContextMenu/ContextMenu.stories.js b/stories/ContextMenu/ContextMenu.stories.js
index 89adb19..32f3c45 100644
--- a/stories/ContextMenu/ContextMenu.stories.js
+++ b/stories/ContextMenu/ContextMenu.stories.js
@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import ContextMenu from "../../app/components/ContextMenu/ContextMenu";
-import ContextMenuItem from "../../app/components/ContextMenu/ContextMenuItem";
-import ContextMenuSection from "../../app/components/ContextMenu/ContextMenuSection";
-import ContextMenuDivider from "../../app/components/ContextMenu/ContextMenuDivider";
+import ContextMenu from "../../app/components/modals/ContextMenu/ContextMenu";
+import ContextMenuItem from "../../app/components/modals/ContextMenuItem";
+import ContextMenuSection from "../../app/components/modals/ContextMenu/ContextMenuSection";
+import ContextMenuDivider from "../../app/components/modals/ContextMenu/ContextMenuDivider";
 
 export default {
   title: "Components/ContextMenu/ContextMenu",
diff --git a/stories/WebVitalsDashboard.stories.js b/stories/WebVitalsDashboard.stories.js
index c4a820e..e19144c 100644
--- a/stories/WebVitalsDashboard.stories.js
+++ b/stories/WebVitalsDashboard.stories.js
@@ -1,4 +1,4 @@
-import WebVitalsDashboard from "../app/components/WebVitalsDashboard";
+import WebVitalsDashboard from "../app/components/sections/WebVitalsDashboard";
 
 export default {
   title: "Components/WebVitalsDashboard",
diff --git a/stories/asset/Icon.stories.js b/stories/asset/Icon.stories.js
new file mode 100644
index 0000000..f6c576f
--- /dev/null
+++ b/stories/asset/Icon.stories.js
@@ -0,0 +1,42 @@
+import { Icon } from "../../app/components/asset";
+
+export default {
+  title: "Components/Asset/Icon",
+  component: Icon,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    name: {
+      control: "select",
+      options: ["exclamation"],
+      description: "Name of the icon to render",
+    },
+    size: {
+      control: { type: "number", min: 12, max: 96, step: 4 },
+      description: "Width and height in pixels",
+    },
+    className: {
+      control: "text",
+      description: "Optional className applied to the SVG",
+    },
+    "aria-hidden": {
+      control: "boolean",
+      description: "Whether to mark the icon as aria-hidden",
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    name: "exclamation",
+    size: 24,
+  },
+};
+
+export const Large = {
+  args: {
+    name: "exclamation",
+    size: 48,
+  },
+};
diff --git a/stories/cards/NumberCard.stories.js b/stories/cards/NumberCard.stories.js
index b03f9ff..552c933 100644
--- a/stories/cards/NumberCard.stories.js
+++ b/stories/cards/NumberCard.stories.js
@@ -56,7 +56,7 @@ export const Small = {
   args: {
     number: 1,
     text: "Document how your community makes decisions",
-    size: "Small",
+    size: "small",
     iconShape: "blob",
     iconColor: "green",
   },
@@ -74,7 +74,7 @@ export const Medium = {
   args: {
     number: 1,
     text: "Document how your community makes decisions",
-    size: "Medium",
+    size: "medium",
     iconShape: "blob",
     iconColor: "green",
   },
@@ -92,7 +92,7 @@ export const Large = {
   args: {
     number: 1,
     text: "Document how your community makes decisions",
-    size: "Large",
+    size: "large",
     iconShape: "blob",
     iconColor: "green",
   },
@@ -110,7 +110,7 @@ export const XLarge = {
   args: {
     number: 1,
     text: "Document how your community makes decisions",
-    size: "XLarge",
+    size: "xlarge",
     iconShape: "blob",
     iconColor: "green",
   },
diff --git a/stories/cards/RuleCard.stories.js b/stories/cards/RuleCard.stories.js
index 5dde74e..5378837 100644
--- a/stories/cards/RuleCard.stories.js
+++ b/stories/cards/RuleCard.stories.js
@@ -82,11 +82,11 @@ export const Expanded = {
       {
         name: "Values",
         chipOptions: [
-          { id: "values-1", label: "Consciousness", state: "Unselected" },
-          { id: "values-2", label: "Ecology", state: "Unselected" },
-          { id: "values-3", label: "Abundance", state: "Unselected" },
-          { id: "values-4", label: "Art", state: "Unselected" },
-          { id: "values-5", label: "Decisiveness", state: "Unselected" },
+          { id: "values-1", label: "Consciousness", state: "unselected" },
+          { id: "values-2", label: "Ecology", state: "unselected" },
+          { id: "values-3", label: "Abundance", state: "unselected" },
+          { id: "values-4", label: "Art", state: "unselected" },
+          { id: "values-5", label: "Decisiveness", state: "unselected" },
         ],
         onChipClick: (categoryName, chipId) => {
           console.log(`Chip clicked: ${categoryName} - ${chipId}`);
@@ -97,7 +97,7 @@ export const Expanded = {
       },
       {
         name: "Communication",
-        chipOptions: [{ id: "comm-1", label: "Signal", state: "Unselected" }],
+        chipOptions: [{ id: "comm-1", label: "Signal", state: "unselected" }],
         onChipClick: (categoryName, chipId) => {
           console.log(`Chip clicked: ${categoryName} - ${chipId}`);
         },
@@ -108,7 +108,7 @@ export const Expanded = {
       {
         name: "Membership",
         chipOptions: [
-          { id: "membership-1", label: "Open Admission", state: "Unselected" },
+          { id: "membership-1", label: "Open Admission", state: "unselected" },
         ],
         onChipClick: (categoryName, chipId) => {
           console.log(`Chip clicked: ${categoryName} - ${chipId}`);
@@ -120,11 +120,11 @@ export const Expanded = {
       {
         name: "Decision-making",
         chipOptions: [
-          { id: "decision-1", label: "Lazy Consensus", state: "Unselected" },
+          { id: "decision-1", label: "Lazy Consensus", state: "unselected" },
           {
             id: "decision-2",
             label: "Modified Consensus",
-            state: "Unselected",
+            state: "unselected",
           },
         ],
         onChipClick: (categoryName, chipId) => {
@@ -137,11 +137,11 @@ export const Expanded = {
       {
         name: "Conflict management",
         chipOptions: [
-          { id: "conflict-1", label: "Code of Conduct", state: "Unselected" },
+          { id: "conflict-1", label: "Code of Conduct", state: "unselected" },
           {
             id: "conflict-2",
             label: "Restorative Justice",
-            state: "Unselected",
+            state: "unselected",
           },
         ],
         onChipClick: (categoryName, chipId) => {
@@ -246,42 +246,42 @@ export const ExpandedMedium = {
       {
         name: "Values",
         chipOptions: [
-          { id: "values-1", label: "Consciousness", state: "Unselected" },
-          { id: "values-2", label: "Ecology", state: "Unselected" },
-          { id: "values-3", label: "Abundance", state: "Unselected" },
-          { id: "values-4", label: "Art", state: "Unselected" },
-          { id: "values-5", label: "Decisiveness", state: "Unselected" },
+          { id: "values-1", label: "Consciousness", state: "unselected" },
+          { id: "values-2", label: "Ecology", state: "unselected" },
+          { id: "values-3", label: "Abundance", state: "unselected" },
+          { id: "values-4", label: "Art", state: "unselected" },
+          { id: "values-5", label: "Decisiveness", state: "unselected" },
         ],
       },
       {
         name: "Communication",
-        chipOptions: [{ id: "comm-1", label: "Signal", state: "Unselected" }],
+        chipOptions: [{ id: "comm-1", label: "Signal", state: "unselected" }],
       },
       {
         name: "Membership",
         chipOptions: [
-          { id: "membership-1", label: "Open Admission", state: "Unselected" },
+          { id: "membership-1", label: "Open Admission", state: "unselected" },
         ],
       },
       {
         name: "Decision-making",
         chipOptions: [
-          { id: "decision-1", label: "Lazy Consensus", state: "Unselected" },
+          { id: "decision-1", label: "Lazy Consensus", state: "unselected" },
           {
             id: "decision-2",
             label: "Modified Consensus",
-            state: "Unselected",
+            state: "unselected",
           },
         ],
       },
       {
         name: "Conflict management",
         chipOptions: [
-          { id: "conflict-1", label: "Code of Conduct", state: "Unselected" },
+          { id: "conflict-1", label: "Code of Conduct", state: "unselected" },
           {
             id: "conflict-2",
             label: "Restorative Justice",
-            state: "Unselected",
+            state: "unselected",
           },
         ],
       },
@@ -394,9 +394,9 @@ export const InteractiveStates = {
       {
         name: "Values",
         chipOptions: [
-          { id: "values-1", label: "Consciousness", state: "Unselected" },
-          { id: "values-2", label: "Ecology", state: "Unselected" },
-          { id: "values-3", label: "Abundance", state: "Unselected" },
+          { id: "values-1", label: "Consciousness", state: "unselected" },
+          { id: "values-2", label: "Ecology", state: "unselected" },
+          { id: "values-3", label: "Abundance", state: "unselected" },
         ],
         onChipClick: (categoryName, chipId) => {
           console.log(`Chip clicked: ${categoryName} - ${chipId}`);
@@ -407,7 +407,7 @@ export const InteractiveStates = {
       },
       {
         name: "Communication",
-        chipOptions: [{ id: "comm-1", label: "Signal", state: "Unselected" }],
+        chipOptions: [{ id: "comm-1", label: "Signal", state: "unselected" }],
         onChipClick: (categoryName, chipId) => {
           console.log(`Chip clicked: ${categoryName} - ${chipId}`);
         },
diff --git a/stories/cards/TemplateReviewCard.stories.js b/stories/cards/TemplateReviewCard.stories.js
new file mode 100644
index 0000000..f8a57a9
--- /dev/null
+++ b/stories/cards/TemplateReviewCard.stories.js
@@ -0,0 +1,66 @@
+import { TemplateReviewCard } from "../../app/components/cards/TemplateReviewCard";
+
+const sampleTemplate = {
+  id: "tmpl-1",
+  slug: "consensus",
+  title: "Consensus",
+  category: null,
+  description:
+    "Important decisions require unanimous agreement. Proposals pass only if no serious objections remain.",
+  body: {
+    sections: [
+      {
+        categoryName: "Decision making",
+        entries: [
+          { title: "How proposals pass", body: "Unanimous agreement is required." },
+          { title: "Blocks", body: "Anyone with a serious objection may block." },
+        ],
+      },
+      {
+        categoryName: "Membership",
+        entries: [
+          { title: "Joining", body: "New members are welcomed by consensus." },
+        ],
+      },
+    ],
+  },
+  sortOrder: 1,
+  featured: true,
+};
+
+export default {
+  title: "Components/Cards/TemplateReviewCard",
+  component: TemplateReviewCard,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    template: {
+      control: false,
+      description: "RuleTemplateDto used to populate the card",
+    },
+    size: {
+      control: "select",
+      options: ["XS", "S", "M", "L"],
+      description: "RuleCard size variant",
+    },
+    ruleCardClassName: {
+      control: "text",
+      description: "Class names merged onto the inner RuleCard",
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    template: sampleTemplate,
+    size: "L",
+  },
+};
+
+export const Medium = {
+  args: {
+    template: sampleTemplate,
+    size: "M",
+  },
+};
diff --git a/stories/controls/Checkbox.stories.js b/stories/controls/Checkbox.stories.js
index 2963390..f0b2440 100644
--- a/stories/controls/Checkbox.stories.js
+++ b/stories/controls/Checkbox.stories.js
@@ -46,15 +46,13 @@ export default {
     },
     mode: {
       control: "select",
-      options: ["standard", "inverse", "Standard", "Inverse"],
-      description:
-        "Visual mode of the checkbox (case-insensitive: accepts both lowercase and PascalCase)",
+      options: ["standard", "inverse"],
+      description: "Visual mode of the checkbox",
     },
     state: {
       control: "select",
-      options: ["default", "hover", "focus", "Default", "Hover", "Focus"],
-      description:
-        "Interaction state for static display (case-insensitive: accepts both lowercase and PascalCase)",
+      options: ["default", "hover", "focus"],
+      description: "Interaction state for static display",
     },
     disabled: {
       control: "boolean",
@@ -228,15 +226,15 @@ export const FigmaPascalCase = () => {
           <Checkbox
             label="Standard Mode (PascalCase)"
             checked={standardChecked}
-            mode="Standard"
-            state="Default"
+            mode="standard"
+            state="default"
             onChange={({ checked }) => setStandardChecked(checked)}
           />
           <Checkbox
             label="Inverse Mode (PascalCase)"
             checked={inverseChecked}
-            mode="Inverse"
-            state="Default"
+            mode="inverse"
+            state="default"
             onChange={({ checked }) => setInverseChecked(checked)}
           />
         </div>
@@ -256,7 +254,7 @@ export const FigmaPascalCase = () => {
             label="Inverse Mode (mixed) - still works"
             checked={false}
             mode="inverse"
-            state="Default"
+            state="default"
           />
         </div>
       </div>
diff --git a/stories/controls/Chip.stories.js b/stories/controls/Chip.stories.js
new file mode 100644
index 0000000..0370303
--- /dev/null
+++ b/stories/controls/Chip.stories.js
@@ -0,0 +1,83 @@
+import Chip from "../../app/components/controls/Chip";
+
+export default {
+  title: "Components/Controls/Chip",
+  component: Chip,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Text displayed inside the chip",
+    },
+    state: {
+      control: "select",
+      options: ["unselected", "selected", "disabled", "custom"],
+      description: "Visual state of the chip",
+    },
+    palette: {
+      control: "select",
+      options: ["default", "inverse"],
+      description: "Color palette of the chip",
+    },
+    size: {
+      control: "select",
+      options: ["s", "m"],
+      description: "Size of the chip",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Override the disabled behaviour independently of state",
+    },
+    onClick: { action: "clicked" },
+    onRemove: { action: "removed" },
+    onCheck: { action: "checked" },
+    onClose: { action: "closed" },
+  },
+};
+
+export const Default = {
+  args: {
+    label: "Worker cooperative",
+    state: "unselected",
+    palette: "default",
+    size: "m",
+  },
+};
+
+export const Selected = {
+  args: {
+    label: "Worker cooperative",
+    state: "selected",
+    palette: "default",
+    size: "m",
+  },
+};
+
+export const Disabled = {
+  args: {
+    label: "Worker cooperative",
+    state: "disabled",
+    palette: "default",
+    size: "m",
+  },
+};
+
+export const Inverse = {
+  args: {
+    label: "Worker cooperative",
+    state: "selected",
+    palette: "inverse",
+    size: "m",
+  },
+};
+
+export const Small = {
+  args: {
+    label: "Worker cooperative",
+    state: "unselected",
+    palette: "default",
+    size: "s",
+  },
+};
diff --git a/stories/controls/InputWithCounter.stories.js b/stories/controls/InputWithCounter.stories.js
new file mode 100644
index 0000000..e0ae38b
--- /dev/null
+++ b/stories/controls/InputWithCounter.stories.js
@@ -0,0 +1,82 @@
+import React from "react";
+import InputWithCounter from "../../app/components/controls/InputWithCounter";
+
+export default {
+  title: "Components/Controls/InputWithCounter",
+  component: InputWithCounter,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label rendered above the input",
+    },
+    placeholder: {
+      control: "text",
+      description: "Placeholder text shown when value is empty",
+    },
+    value: {
+      control: "text",
+      description: "Current value of the input (controlled)",
+    },
+    maxLength: {
+      control: { type: "number", min: 1, max: 500, step: 1 },
+      description: "Maximum number of characters allowed",
+    },
+    showHelpIcon: {
+      control: "boolean",
+      description: "Whether to show the help icon next to the label",
+    },
+    onChange: { action: "changed" },
+  },
+};
+
+const Template = (args) => {
+  const [value, setValue] = React.useState(args.value ?? "");
+  return (
+    <div style={{ width: 320 }}>
+      <InputWithCounter
+        {...args}
+        value={value}
+        onChange={(next) => {
+          setValue(next);
+          args.onChange?.(next);
+        }}
+      />
+    </div>
+  );
+};
+
+export const Default = {
+  render: Template,
+  args: {
+    label: "Community name",
+    placeholder: "Enter a name",
+    value: "",
+    maxLength: 50,
+    showHelpIcon: false,
+  },
+};
+
+export const WithHelpIcon = {
+  render: Template,
+  args: {
+    label: "Community name",
+    placeholder: "Enter a name",
+    value: "",
+    maxLength: 50,
+    showHelpIcon: true,
+  },
+};
+
+export const WithInitialValue = {
+  render: Template,
+  args: {
+    label: "Community name",
+    placeholder: "Enter a name",
+    value: "My community",
+    maxLength: 30,
+    showHelpIcon: false,
+  },
+};
diff --git a/stories/controls/MultiSelect.stories.js b/stories/controls/MultiSelect.stories.js
new file mode 100644
index 0000000..1952354
--- /dev/null
+++ b/stories/controls/MultiSelect.stories.js
@@ -0,0 +1,85 @@
+import React from "react";
+import MultiSelect from "../../app/components/controls/MultiSelect";
+
+export default {
+  title: "Components/Controls/MultiSelect",
+  component: MultiSelect,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label displayed above the chip set",
+    },
+    showHelpIcon: {
+      control: "boolean",
+      description: "Whether to show the help icon next to the label",
+    },
+    size: {
+      control: "select",
+      options: ["s", "m"],
+      description: "Size variant of the chips",
+    },
+    palette: {
+      control: "select",
+      options: ["default", "inverse"],
+      description: "Color palette applied to the chips",
+    },
+    addButton: {
+      control: "boolean",
+      description: "Whether to show the add button",
+    },
+    addButtonText: {
+      control: "text",
+      description: "Text rendered on the add button",
+    },
+    formHeader: {
+      control: "boolean",
+      description: "Whether to show the label/help-icon header",
+    },
+    onChipClick: { action: "chip-clicked" },
+    onAddClick: { action: "add-clicked" },
+  },
+};
+
+const defaultOptions = [
+  { id: "1", label: "Worker cooperative", state: "unselected" },
+  { id: "2", label: "Consumer cooperative", state: "selected" },
+  { id: "3", label: "Housing cooperative", state: "unselected" },
+  { id: "4", label: "Producer cooperative", state: "unselected" },
+];
+
+export const Default = {
+  args: {
+    label: "Organization type",
+    showHelpIcon: true,
+    size: "m",
+    palette: "default",
+    options: defaultOptions,
+    addButton: true,
+    addButtonText: "Add organization type",
+    formHeader: true,
+  },
+};
+
+export const Small = {
+  args: {
+    ...Default.args,
+    size: "s",
+  },
+};
+
+export const Inverse = {
+  args: {
+    ...Default.args,
+    palette: "inverse",
+  },
+};
+
+export const NoAddButton = {
+  args: {
+    ...Default.args,
+    addButton: false,
+  },
+};
diff --git a/stories/controls/RadioButton.stories.js b/stories/controls/RadioButton.stories.js
index 95ae82c..ee5237a 100644
--- a/stories/controls/RadioButton.stories.js
+++ b/stories/controls/RadioButton.stories.js
@@ -21,24 +21,13 @@ export default {
     },
     mode: {
       control: "select",
-      options: ["standard", "inverse", "Standard", "Inverse"],
-      description:
-        "Visual mode of the radio button (case-insensitive: accepts both lowercase and PascalCase)",
+      options: ["standard", "inverse"],
+      description: "Visual mode of the radio button",
     },
     state: {
       control: "select",
-      options: [
-        "default",
-        "hover",
-        "focus",
-        "selected",
-        "Default",
-        "Hover",
-        "Focus",
-        "Selected",
-      ],
-      description:
-        "Interaction state for static display (case-insensitive: accepts both lowercase and PascalCase)",
+      options: ["default", "hover", "focus", "selected"],
+      description: "Interaction state for static display",
     },
     disabled: {
       control: "boolean",
@@ -286,15 +275,15 @@ export const FigmaPascalCase = () => {
           <RadioButton
             label="Standard Mode (PascalCase)"
             checked={standardChecked}
-            mode="Standard"
-            state="Default"
+            mode="standard"
+            state="default"
             onChange={({ checked }) => setStandardChecked(checked)}
           />
           <RadioButton
             label="Inverse Mode (PascalCase)"
             checked={inverseChecked}
-            mode="Inverse"
-            state="Default"
+            mode="inverse"
+            state="default"
             onChange={({ checked }) => setInverseChecked(checked)}
           />
         </div>
@@ -314,7 +303,7 @@ export const FigmaPascalCase = () => {
             label="Inverse Mode (mixed) - still works"
             checked={false}
             mode="inverse"
-            state="Default"
+            state="default"
           />
         </div>
       </div>
diff --git a/stories/create-flow/ApplicableScopeField.stories.js b/stories/create-flow/ApplicableScopeField.stories.js
index 13c7377..107417c 100644
--- a/stories/create-flow/ApplicableScopeField.stories.js
+++ b/stories/create-flow/ApplicableScopeField.stories.js
@@ -1,5 +1,5 @@
 import React from "react";
-import ApplicableScopeField from "../../app/create/components/ApplicableScopeField";
+import ApplicableScopeField from "../../app/(app)/create/components/ApplicableScopeField";
 
 export default {
   title: "Create Flow/ApplicableScopeField",
diff --git a/stories/create-flow/ModalTextAreaField.stories.js b/stories/create-flow/ModalTextAreaField.stories.js
index d557fbe..6e17f72 100644
--- a/stories/create-flow/ModalTextAreaField.stories.js
+++ b/stories/create-flow/ModalTextAreaField.stories.js
@@ -1,5 +1,5 @@
 import React from "react";
-import ModalTextAreaField from "../../app/create/components/ModalTextAreaField";
+import ModalTextAreaField from "../../app/(app)/create/components/ModalTextAreaField";
 
 export default {
   title: "Create Flow/ModalTextAreaField",
diff --git a/stories/localization/LanguageSwitcher.stories.js b/stories/localization/LanguageSwitcher.stories.js
new file mode 100644
index 0000000..51489eb
--- /dev/null
+++ b/stories/localization/LanguageSwitcher.stories.js
@@ -0,0 +1,19 @@
+import LanguageSwitcher from "../../app/components/localization/LanguageSwitcher";
+
+export default {
+  title: "Components/Localization/LanguageSwitcher",
+  component: LanguageSwitcher,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    className: {
+      control: "text",
+      description: "Optional wrapper className",
+    },
+  },
+};
+
+export const Default = {
+  args: {},
+};
diff --git a/stories/modals/Login.stories.tsx b/stories/modals/Login.stories.tsx
index b449be4..e240e2d 100644
--- a/stories/modals/Login.stories.tsx
+++ b/stories/modals/Login.stories.tsx
@@ -121,7 +121,7 @@ export const HeaderOverlayBlurred = {
   ),
 };
 
-/** Matches `app/login/page.tsx`: dedicated route, solid yellow, no portal. */
+/** Matches `app/(app)/login/page.tsx`: dedicated route, solid yellow, no portal. */
 export const FullPageRouteSolid = {
   name: "Full-page route (/login — solid)",
   parameters: {
diff --git a/stories/navigation/NavigationItem.stories.js b/stories/navigation/NavigationItem.stories.js
new file mode 100644
index 0000000..dc6785d
--- /dev/null
+++ b/stories/navigation/NavigationItem.stories.js
@@ -0,0 +1,75 @@
+import NavigationItem from "../../app/components/navigation/NavigationItem";
+
+export default {
+  title: "Components/Navigation/NavigationItem",
+  component: NavigationItem,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    href: {
+      control: "text",
+      description: "Anchor href",
+    },
+    variant: {
+      control: "select",
+      options: ["default"],
+      description: "Visual variant",
+    },
+    size: {
+      control: "select",
+      options: ["default", "xsmall"],
+      description: "Size variant",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Disable interaction (renders as span)",
+    },
+    isActive: {
+      control: "boolean",
+      description: "Mark the item as currently active",
+    },
+    children: {
+      control: "text",
+      description: "Item label",
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    children: "Templates",
+    href: "#",
+    variant: "default",
+    size: "default",
+  },
+};
+
+export const Active = {
+  args: {
+    children: "Templates",
+    href: "#",
+    variant: "default",
+    size: "default",
+    isActive: true,
+  },
+};
+
+export const Disabled = {
+  args: {
+    children: "Templates",
+    href: "#",
+    variant: "default",
+    size: "default",
+    disabled: true,
+  },
+};
+
+export const XSmall = {
+  args: {
+    children: "Templates",
+    href: "#",
+    variant: "default",
+    size: "xsmall",
+  },
+};
diff --git a/stories/pages/CommunicationMethodsPage.stories.js b/stories/pages/CommunicationMethodsPage.stories.js
index b85396c..ffd9d99 100644
--- a/stories/pages/CommunicationMethodsPage.stories.js
+++ b/stories/pages/CommunicationMethodsPage.stories.js
@@ -1,4 +1,4 @@
-import { CommunicationMethodsScreen } from "../../app/create/screens/card/CommunicationMethodsScreen";
+import { CommunicationMethodsScreen } from "../../app/(app)/create/screens/card/CommunicationMethodsScreen";
 
 export default {
   title: "Pages/Create Flow/Communication methods",
diff --git a/stories/pages/CompletedPage.stories.js b/stories/pages/CompletedPage.stories.js
index 21128b9..3e3ce00 100644
--- a/stories/pages/CompletedPage.stories.js
+++ b/stories/pages/CompletedPage.stories.js
@@ -1,4 +1,4 @@
-import { CompletedScreen } from "../../app/create/screens/completed/CompletedScreen";
+import { CompletedScreen } from "../../app/(app)/create/screens/completed/CompletedScreen";
 
 export default {
   title: "Pages/Create Flow/Completed",
diff --git a/stories/pages/ConfirmStakeholdersPage.stories.js b/stories/pages/ConfirmStakeholdersPage.stories.js
index adb22e0..85c2d0c 100644
--- a/stories/pages/ConfirmStakeholdersPage.stories.js
+++ b/stories/pages/ConfirmStakeholdersPage.stories.js
@@ -1,4 +1,4 @@
-import { ConfirmStakeholdersScreen } from "../../app/create/screens/select/ConfirmStakeholdersScreen";
+import { ConfirmStakeholdersScreen } from "../../app/(app)/create/screens/select/ConfirmStakeholdersScreen";
 
 export default {
   title: "Pages/Create Flow/Confirm stakeholders",
diff --git a/stories/pages/DecisionApproachesPage.stories.js b/stories/pages/DecisionApproachesPage.stories.js
index 1ab27b8..4385740 100644
--- a/stories/pages/DecisionApproachesPage.stories.js
+++ b/stories/pages/DecisionApproachesPage.stories.js
@@ -1,4 +1,4 @@
-import { DecisionApproachesScreen } from "../../app/create/screens/right-rail/DecisionApproachesScreen";
+import { DecisionApproachesScreen } from "../../app/(app)/create/screens/right-rail/DecisionApproachesScreen";
 
 export default {
   title: "Pages/Create Flow/Decision approaches",
diff --git a/stories/pages/FinalReviewPage.stories.js b/stories/pages/FinalReviewPage.stories.js
index 0653fe9..096cd2b 100644
--- a/stories/pages/FinalReviewPage.stories.js
+++ b/stories/pages/FinalReviewPage.stories.js
@@ -1,4 +1,4 @@
-import { FinalReviewScreen } from "../../app/create/screens/review/FinalReviewScreen";
+import { FinalReviewScreen } from "../../app/(app)/create/screens/review/FinalReviewScreen";
 
 export default {
   title: "Pages/Create Flow/Final review",
diff --git a/stories/pages/InformationalPage.stories.js b/stories/pages/InformationalPage.stories.js
index 21f4d34..6faa8c2 100644
--- a/stories/pages/InformationalPage.stories.js
+++ b/stories/pages/InformationalPage.stories.js
@@ -1,4 +1,4 @@
-import { InformationalScreen } from "../../app/create/screens/informational/InformationalScreen";
+import { InformationalScreen } from "../../app/(app)/create/screens/informational/InformationalScreen";
 
 export default {
   title: "Pages/Create/Informational",
diff --git a/stories/pages/ReviewPage.stories.js b/stories/pages/ReviewPage.stories.js
index b68ee0a..5e6ca46 100644
--- a/stories/pages/ReviewPage.stories.js
+++ b/stories/pages/ReviewPage.stories.js
@@ -1,4 +1,4 @@
-import { CommunityReviewScreen } from "../../app/create/screens/review/CommunityReviewScreen";
+import { CommunityReviewScreen } from "../../app/(app)/create/screens/review/CommunityReviewScreen";
 
 export default {
   title: "Pages/Create/Review",
diff --git a/stories/pages/SelectPage.stories.js b/stories/pages/SelectPage.stories.js
index a0c5307..b861666 100644
--- a/stories/pages/SelectPage.stories.js
+++ b/stories/pages/SelectPage.stories.js
@@ -1,4 +1,4 @@
-import { CommunitySizeSelectScreen } from "../../app/create/screens/select/CommunitySizeSelectScreen";
+import { CommunitySizeSelectScreen } from "../../app/(app)/create/screens/select/CommunitySizeSelectScreen";
 
 export default {
   title: "Pages/Create/CommunitySize",
diff --git a/stories/pages/TextPage.stories.js b/stories/pages/TextPage.stories.js
index 1510cea..b6ef156 100644
--- a/stories/pages/TextPage.stories.js
+++ b/stories/pages/TextPage.stories.js
@@ -1,4 +1,4 @@
-import { CreateFlowTextFieldScreen } from "../../app/create/screens/text/CreateFlowTextFieldScreen";
+import { CreateFlowTextFieldScreen } from "../../app/(app)/create/screens/text/CreateFlowTextFieldScreen";
 
 export default {
   title: "Pages/Create/CommunityName",
diff --git a/stories/pages/UploadPage.stories.js b/stories/pages/UploadPage.stories.js
index 387e999..9a1ef53 100644
--- a/stories/pages/UploadPage.stories.js
+++ b/stories/pages/UploadPage.stories.js
@@ -1,4 +1,4 @@
-import { CommunityUploadScreen } from "../../app/create/screens/upload/CommunityUploadScreen";
+import { CommunityUploadScreen } from "../../app/(app)/create/screens/upload/CommunityUploadScreen";
 
 export default {
   title: "Pages/Create/CommunityUpload",
diff --git a/stories/progress/ProportionBar.stories.js b/stories/progress/ProportionBar.stories.js
index 9907056..b5b1773 100644
--- a/stories/progress/ProportionBar.stories.js
+++ b/stories/progress/ProportionBar.stories.js
@@ -15,7 +15,7 @@ export default {
   argTypes: {
     variant: {
       control: { type: "select" },
-      options: ["default", "segmented", "Default", "Segmented"],
+      options: ["default", "segmented"],
       description:
         "Segmented: pill-shaped partial fills (create-flow footer / Figma).",
     },
diff --git a/stories/sections/CommunityRuleDocument.stories.js b/stories/sections/CommunityRuleDocument.stories.js
new file mode 100644
index 0000000..f882157
--- /dev/null
+++ b/stories/sections/CommunityRuleDocument.stories.js
@@ -0,0 +1,58 @@
+import CommunityRuleDocument from "../../app/components/sections/CommunityRuleDocument";
+
+const sampleSections = [
+  {
+    categoryName: "Decision making",
+    entries: [
+      {
+        title: "How proposals pass",
+        body: "Important decisions require unanimous agreement. Proposals pass only if no serious objections remain.",
+      },
+      {
+        title: "Blocks",
+        body: "Anyone with a serious objection may block consensus and require further discussion.",
+      },
+    ],
+  },
+  {
+    categoryName: "Membership",
+    entries: [
+      {
+        title: "Joining",
+        body: "New members are welcomed by consensus of existing members.",
+      },
+    ],
+  },
+];
+
+export default {
+  title: "Components/Sections/CommunityRuleDocument",
+  component: CommunityRuleDocument,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    sections: {
+      control: false,
+      description: "Document sections, each with a categoryName and entries.",
+    },
+    useCardStyle: {
+      control: "boolean",
+      description: "When true, wraps the document in a white card with a teal bar",
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    sections: sampleSections,
+    useCardStyle: false,
+  },
+};
+
+export const CardStyle = {
+  args: {
+    sections: sampleSections,
+    useCardStyle: true,
+  },
+};
diff --git a/stories/sections/GovernanceTemplateGrid.stories.js b/stories/sections/GovernanceTemplateGrid.stories.js
new file mode 100644
index 0000000..1762e20
--- /dev/null
+++ b/stories/sections/GovernanceTemplateGrid.stories.js
@@ -0,0 +1,29 @@
+import { GovernanceTemplateGrid } from "../../app/components/sections/GovernanceTemplateGrid";
+import { GOVERNANCE_TEMPLATE_CATALOG } from "../../lib/templates/governanceTemplateCatalog";
+
+export default {
+  title: "Components/Sections/GovernanceTemplateGrid",
+  component: GovernanceTemplateGrid,
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    entries: {
+      control: false,
+      description: "Catalog entries to render as a 2-column grid of RuleCards",
+    },
+    onTemplateClick: { action: "template-clicked" },
+  },
+};
+
+export const Default = {
+  args: {
+    entries: GOVERNANCE_TEMPLATE_CATALOG.slice(0, 4),
+  },
+};
+
+export const SingleEntry = {
+  args: {
+    entries: GOVERNANCE_TEMPLATE_CATALOG.slice(0, 1),
+  },
+};
diff --git a/stories/utility/ErrorBoundary.stories.js b/stories/utility/ErrorBoundary.stories.js
deleted file mode 100644
index a2eccf4..0000000
--- a/stories/utility/ErrorBoundary.stories.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import ErrorBoundary from "../../app/components/utility/ErrorBoundary";
-
-export default {
-  title: "Components/Utility/ErrorBoundary",
-  component: ErrorBoundary,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component:
-          "An error boundary component that catches JavaScript errors in its child component tree. Displays a fallback UI when errors occur and logs error information for debugging.",
-      },
-    },
-  },
-  argTypes: {
-    children: {
-      control: { type: "text" },
-      description: "Child components to wrap with error boundary",
-    },
-  },
-};
-
-export const Default = {
-  args: {
-    children: <div>Normal content</div>,
-  },
-};
-
-export const WithError = {
-  render: () => {
-    const ThrowError = () => {
-      throw new Error("Test error for ErrorBoundary");
-    };
-    return (
-      <ErrorBoundary>
-        <ThrowError />
-      </ErrorBoundary>
-    );
-  },
-};
diff --git a/stories/utility/ModalFooter.stories.js b/stories/utility/ModalFooter.stories.js
new file mode 100644
index 0000000..983d5ca
--- /dev/null
+++ b/stories/utility/ModalFooter.stories.js
@@ -0,0 +1,71 @@
+import ModalFooter from "../../app/components/utility/ModalFooter";
+
+export default {
+  title: "Components/Utility/ModalFooter",
+  component: ModalFooter,
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    showBackButton: {
+      control: "boolean",
+      description: "Whether to render the back button on the left",
+    },
+    showNextButton: {
+      control: "boolean",
+      description: "Whether to render the next button on the right",
+    },
+    backButtonText: {
+      control: "text",
+      description: "Override text for the back button",
+    },
+    nextButtonText: {
+      control: "text",
+      description: "Override text for the next button",
+    },
+    nextButtonDisabled: {
+      control: "boolean",
+      description: "Whether the next button is disabled",
+    },
+    currentStep: {
+      control: { type: "number", min: 1, max: 10, step: 1 },
+      description: "Current step (used by the centered Stepper)",
+    },
+    totalSteps: {
+      control: { type: "number", min: 1, max: 10, step: 1 },
+      description: "Total number of steps",
+    },
+    stepper: {
+      control: "boolean",
+      description: "Whether to render the centered stepper",
+    },
+    onBack: { action: "back-clicked" },
+    onNext: { action: "next-clicked" },
+  },
+};
+
+export const Default = {
+  args: {
+    showBackButton: true,
+    showNextButton: true,
+    currentStep: 2,
+    totalSteps: 4,
+  },
+};
+
+export const NextDisabled = {
+  args: {
+    showBackButton: true,
+    showNextButton: true,
+    nextButtonDisabled: true,
+    currentStep: 1,
+    totalSteps: 4,
+  },
+};
+
+export const NextOnly = {
+  args: {
+    showBackButton: false,
+    showNextButton: true,
+  },
+};
diff --git a/stories/utility/ModalHeader.stories.js b/stories/utility/ModalHeader.stories.js
new file mode 100644
index 0000000..12498ee
--- /dev/null
+++ b/stories/utility/ModalHeader.stories.js
@@ -0,0 +1,42 @@
+import ModalHeader from "../../app/components/utility/ModalHeader";
+
+export default {
+  title: "Components/Utility/ModalHeader",
+  component: ModalHeader,
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    showCloseButton: {
+      control: "boolean",
+      description: "Whether to render the close button on the left",
+    },
+    showMoreOptionsButton: {
+      control: "boolean",
+      description: "Whether to render the more-options button on the right",
+    },
+    onClose: { action: "close-clicked" },
+    onMoreOptions: { action: "more-options-clicked" },
+  },
+};
+
+export const Default = {
+  args: {
+    showCloseButton: true,
+    showMoreOptionsButton: true,
+  },
+};
+
+export const CloseOnly = {
+  args: {
+    showCloseButton: true,
+    showMoreOptionsButton: false,
+  },
+};
+
+export const MoreOptionsOnly = {
+  args: {
+    showCloseButton: false,
+    showMoreOptionsButton: true,
+  },
+};
diff --git a/stories/utility/Separator.stories.js b/stories/utility/Separator.stories.js
new file mode 100644
index 0000000..f708afe
--- /dev/null
+++ b/stories/utility/Separator.stories.js
@@ -0,0 +1,28 @@
+import Separator from "../../app/components/utility/Separator";
+
+export default {
+  title: "Components/Utility/Separator",
+  component: Separator,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {},
+};
+
+export const Default = {
+  render: () => (
+    <div style={{ width: 320 }}>
+      <Separator />
+    </div>
+  ),
+};
+
+export const InContext = {
+  render: () => (
+    <div style={{ width: 320, display: "flex", flexDirection: "column", gap: 12 }}>
+      <p>Above the separator</p>
+      <Separator />
+      <p>Below the separator</p>
+    </div>
+  ),
+};
diff --git a/tests/components/ApplicableScopeField.test.tsx b/tests/components/ApplicableScopeField.test.tsx
index 0dee4b0..7daaa2c 100644
--- a/tests/components/ApplicableScopeField.test.tsx
+++ b/tests/components/ApplicableScopeField.test.tsx
@@ -3,7 +3,7 @@ import { describe, it, expect, vi } from "vitest";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom/vitest";
-import ApplicableScopeField from "../../app/create/components/ApplicableScopeField";
+import ApplicableScopeField from "../../app/(app)/create/components/ApplicableScopeField";
 import { componentTestSuite } from "../utils/componentTestSuite";
 import { renderWithProviders } from "../utils/test-utils";
 
diff --git a/tests/components/Button.test.tsx b/tests/components/Button.test.tsx
index a5a9957..4cd964d 100644
--- a/tests/components/Button.test.tsx
+++ b/tests/components/Button.test.tsx
@@ -39,6 +39,7 @@ const config: ComponentTestSuiteConfig<ButtonProps> = {
 
 componentTestSuite<ButtonProps>(config);
 
+// Pure presentational; no provider context needed.
 describe("Button (behavioral tests)", () => {
   it("calls onClick when clicked", async () => {
     const user = userEvent.setup();
diff --git a/tests/components/Chip.test.tsx b/tests/components/Chip.test.tsx
new file mode 100644
index 0000000..5463f39
--- /dev/null
+++ b/tests/components/Chip.test.tsx
@@ -0,0 +1,33 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import Chip from "../../app/components/controls/Chip";
+
+type Props = React.ComponentProps<typeof Chip>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: Chip,
+  name: "Chip",
+  props: {
+    label: "Worker cooperative",
+    state: "unselected",
+    palette: "default",
+    size: "m",
+  } as Props,
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: true,
+    disabledState: true,
+  },
+  states: {
+    disabledProps: { disabled: true, state: "disabled" },
+  },
+};
+
+describe("Chip", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/CommunityRuleDocument.test.tsx b/tests/components/CommunityRuleDocument.test.tsx
new file mode 100644
index 0000000..e52aa17
--- /dev/null
+++ b/tests/components/CommunityRuleDocument.test.tsx
@@ -0,0 +1,37 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import CommunityRuleDocument from "../../app/components/sections/CommunityRuleDocument";
+
+type Props = React.ComponentProps<typeof CommunityRuleDocument>;
+
+const sampleSections = [
+  {
+    categoryName: "Decision making",
+    entries: [
+      {
+        title: "How proposals pass",
+        body: "Important decisions require unanimous agreement.",
+      },
+    ],
+  },
+];
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: CommunityRuleDocument,
+  name: "CommunityRuleDocument",
+  props: {
+    sections: sampleSections,
+  } as Props,
+  requiredProps: ["sections"],
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("CommunityRuleDocument", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/CompletedPage.test.tsx b/tests/components/CompletedPage.test.tsx
index 4cc7474..cc30bd0 100644
--- a/tests/components/CompletedPage.test.tsx
+++ b/tests/components/CompletedPage.test.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import { CompletedScreen } from "../../app/create/screens/completed/CompletedScreen";
+import { CompletedScreen } from "../../app/(app)/create/screens/completed/CompletedScreen";
 
 describe("CompletedScreen", () => {
   it("renders without crashing", () => {
diff --git a/tests/components/ConfirmStakeholdersPage.test.tsx b/tests/components/ConfirmStakeholdersPage.test.tsx
index cdde162..8f85373 100644
--- a/tests/components/ConfirmStakeholdersPage.test.tsx
+++ b/tests/components/ConfirmStakeholdersPage.test.tsx
@@ -2,7 +2,7 @@ import { describe, it, expect } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import { ConfirmStakeholdersScreen } from "../../app/create/screens/select/ConfirmStakeholdersScreen";
+import { ConfirmStakeholdersScreen } from "../../app/(app)/create/screens/select/ConfirmStakeholdersScreen";
 
 describe("ConfirmStakeholdersScreen", () => {
   it("renders title and description", () => {
diff --git a/tests/components/ContentBanner.test.tsx b/tests/components/ContentBanner.test.tsx
index 0c73395..c4c7321 100644
--- a/tests/components/ContentBanner.test.tsx
+++ b/tests/components/ContentBanner.test.tsx
@@ -43,6 +43,7 @@ const mockPost: BlogPost = {
   lastModified: new Date("2025-04-15"),
 };
 
+// Pure presentational; no provider context needed.
 describe("ContentBanner", () => {
   it("renders without crashing", () => {
     render(<ContentBanner post={mockPost} />);
diff --git a/tests/components/ContextMenu.test.tsx b/tests/components/ContextMenu.test.tsx
index b5ac1f5..c2899df 100644
--- a/tests/components/ContextMenu.test.tsx
+++ b/tests/components/ContextMenu.test.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import ContextMenu from "../../app/components/ContextMenu/ContextMenu";
-import ContextMenuItem from "../../app/components/ContextMenu/ContextMenuItem";
+import ContextMenu from "../../app/components/modals/ContextMenu/ContextMenu";
+import ContextMenuItem from "../../app/components/modals/ContextMenuItem";
 import { componentTestSuite } from "../utils/componentTestSuite";
 
 type ContextMenuProps = React.ComponentProps<typeof ContextMenu>;
diff --git a/tests/components/ContextMenuItem.test.tsx b/tests/components/ContextMenuItem.test.tsx
index e14aa43..bdb27f3 100644
--- a/tests/components/ContextMenuItem.test.tsx
+++ b/tests/components/ContextMenuItem.test.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import ContextMenuItem from "../../app/components/ContextMenu/ContextMenuItem";
+import ContextMenuItem from "../../app/components/modals/ContextMenuItem";
 import { componentTestSuite } from "../utils/componentTestSuite";
 
 type ContextMenuItemProps = React.ComponentProps<typeof ContextMenuItem>;
diff --git a/tests/components/CoreValuesSelectScreen.test.tsx b/tests/components/CoreValuesSelectScreen.test.tsx
index c6ddaf7..a4ca54b 100644
--- a/tests/components/CoreValuesSelectScreen.test.tsx
+++ b/tests/components/CoreValuesSelectScreen.test.tsx
@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { screen, fireEvent, waitFor, within } from "@testing-library/react";
 import "@testing-library/jest-dom/vitest";
 import { renderWithProviders } from "../utils/test-utils";
-import { CoreValuesSelectScreen } from "../../app/create/screens/select/CoreValuesSelectScreen";
+import { CoreValuesSelectScreen } from "../../app/(app)/create/screens/select/CoreValuesSelectScreen";
 
 describe("CoreValuesSelectScreen", () => {
   beforeEach(() => {
diff --git a/tests/components/CreateFlowFooter.test.tsx b/tests/components/CreateFlowFooter.test.tsx
index 947d66e..fa8d5ae 100644
--- a/tests/components/CreateFlowFooter.test.tsx
+++ b/tests/components/CreateFlowFooter.test.tsx
@@ -35,6 +35,7 @@ const config: ComponentTestSuiteConfig<CreateFlowFooterProps> = {
 
 componentTestSuite<CreateFlowFooterProps>(config);
 
+// Pure presentational; no provider context needed (no useMessages/useAuthModal/useCreateFlow consumers).
 describe("CreateFlowFooter (behavioral tests)", () => {
   it("renders Back button", () => {
     render(<CreateFlowFooter />);
diff --git a/tests/components/FinalReviewPage.test.tsx b/tests/components/FinalReviewPage.test.tsx
index 231bb15..364c46a 100644
--- a/tests/components/FinalReviewPage.test.tsx
+++ b/tests/components/FinalReviewPage.test.tsx
@@ -6,8 +6,8 @@ import {
   waitFor,
 } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import { FinalReviewScreen } from "../../app/create/screens/review/FinalReviewScreen";
-import { useCreateFlow } from "../../app/create/context/CreateFlowContext";
+import { FinalReviewScreen } from "../../app/(app)/create/screens/review/FinalReviewScreen";
+import { useCreateFlow } from "../../app/(app)/create/context/CreateFlowContext";
 
 const FALLBACK_CARD_TITLE = "Your community";
 const FALLBACK_CARD_DESCRIPTION_SNIPPET =
diff --git a/tests/components/GovernanceTemplateGrid.test.tsx b/tests/components/GovernanceTemplateGrid.test.tsx
new file mode 100644
index 0000000..8c61694
--- /dev/null
+++ b/tests/components/GovernanceTemplateGrid.test.tsx
@@ -0,0 +1,28 @@
+import { describe, vi } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import { GovernanceTemplateGrid } from "../../app/components/sections/GovernanceTemplateGrid";
+import { GOVERNANCE_TEMPLATE_CATALOG } from "../../lib/templates/governanceTemplateCatalog";
+
+type Props = React.ComponentProps<typeof GovernanceTemplateGrid>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: GovernanceTemplateGrid,
+  name: "GovernanceTemplateGrid",
+  props: {
+    entries: GOVERNANCE_TEMPLATE_CATALOG.slice(0, 2),
+    onTemplateClick: vi.fn(),
+  } as Props,
+  requiredProps: ["entries", "onTemplateClick"],
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("GovernanceTemplateGrid", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/HeaderLockup.test.tsx b/tests/components/HeaderLockup.test.tsx
index 3a8e273..4c8912d 100644
--- a/tests/components/HeaderLockup.test.tsx
+++ b/tests/components/HeaderLockup.test.tsx
@@ -36,6 +36,7 @@ const config: ComponentTestSuiteConfig<HeaderLockupProps> = {
 
 componentTestSuite<HeaderLockupProps>(config);
 
+// Pure presentational; no provider context needed.
 describe("HeaderLockup (behavioral tests)", () => {
   it("renders title", () => {
     render(<HeaderLockup title="Test Title" />);
@@ -84,8 +85,8 @@ describe("HeaderLockup (behavioral tests)", () => {
     expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
   });
 
-  it("accepts PascalCase props", () => {
-    render(<HeaderLockup title="Test Title" justification="Left" size="L" />);
+  it("accepts justification and size props", () => {
+    render(<HeaderLockup title="Test Title" justification="left" size="L" />);
     expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
   });
 });
diff --git a/tests/components/Icon.test.tsx b/tests/components/Icon.test.tsx
new file mode 100644
index 0000000..27921f9
--- /dev/null
+++ b/tests/components/Icon.test.tsx
@@ -0,0 +1,26 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import { Icon } from "../../app/components/asset";
+
+type Props = React.ComponentProps<typeof Icon>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: Icon,
+  name: "Icon",
+  props: {
+    name: "exclamation",
+    size: 24,
+  } as Props,
+  requiredProps: ["name"],
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("Icon", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/IconCard.test.tsx b/tests/components/IconCard.test.tsx
index d4e9859..c39bbe0 100644
--- a/tests/components/IconCard.test.tsx
+++ b/tests/components/IconCard.test.tsx
@@ -38,6 +38,7 @@ const config: ComponentTestSuiteConfig<IconCardProps> = {
 
 componentTestSuite<IconCardProps>(config);
 
+// Pure presentational; no provider context needed.
 describe("IconCard (behavioral tests)", () => {
   it("calls onClick when clicked", () => {
     const handleClick = vi.fn();
diff --git a/tests/components/InformationalPage.test.tsx b/tests/components/InformationalPage.test.tsx
index 0d2f622..a0b8d98 100644
--- a/tests/components/InformationalPage.test.tsx
+++ b/tests/components/InformationalPage.test.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import { InformationalScreen } from "../../app/create/screens/informational/InformationalScreen";
+import { InformationalScreen } from "../../app/(app)/create/screens/informational/InformationalScreen";
 
 describe("InformationalScreen", () => {
   it("renders without crashing", () => {
diff --git a/tests/components/InputLabel.test.tsx b/tests/components/InputLabel.test.tsx
index f59966d..c177dbe 100644
--- a/tests/components/InputLabel.test.tsx
+++ b/tests/components/InputLabel.test.tsx
@@ -17,16 +17,16 @@ const config: ComponentTestSuiteConfig<Props> = {
     helpIcon: false,
     asterisk: false,
     helperText: false,
-    size: "S",
-    palette: "Default",
+    size: "s",
+    palette: "default",
   } as Props,
   requiredProps: ["label"],
   optionalProps: {
     helpIcon: true,
     asterisk: true,
     helperText: true,
-    size: "M",
-    palette: "Inverse",
+    size: "m",
+    palette: "inverse",
   },
   primaryRole: undefined, // InputLabel is not directly interactive
   testCases: {
@@ -67,28 +67,28 @@ describe("InputLabel – behaviour specifics", () => {
     expect(screen.getByText("Custom helper")).toBeInTheDocument();
   });
 
-  it("applies size S styling", () => {
-    render(<InputLabel label="Test Label" size="S" />);
+  it("applies size s styling", () => {
+    render(<InputLabel label="Test Label" size="s" />);
     const label = screen.getByText("Test Label");
     expect(label).toHaveClass("text-[length:var(--sizing-350,14px)]");
   });
 
-  it("applies size M styling", () => {
-    render(<InputLabel label="Test Label" size="M" />);
+  it("applies size m styling", () => {
+    render(<InputLabel label="Test Label" size="m" />);
     const label = screen.getByText("Test Label");
     expect(label).toHaveClass("text-[length:var(--sizing-400,16px)]");
   });
 
-  it("applies Default palette styling", () => {
-    render(<InputLabel label="Test Label" palette="Default" />);
+  it("applies default palette styling", () => {
+    render(<InputLabel label="Test Label" palette="default" />);
     const label = screen.getByText("Test Label");
     expect(label).toHaveClass(
       "text-[color:var(--color-content-default-secondary,#d2d2d2)]",
     );
   });
 
-  it("applies Inverse palette styling", () => {
-    render(<InputLabel label="Test Label" palette="Inverse" />);
+  it("applies inverse palette styling", () => {
+    render(<InputLabel label="Test Label" palette="inverse" />);
     const label = screen.getByText("Test Label");
     expect(label).toHaveClass(
       "text-[color:var(--color-content-inverse-secondary,#1f1f1f)]",
diff --git a/tests/components/InputWithCounter.test.tsx b/tests/components/InputWithCounter.test.tsx
new file mode 100644
index 0000000..93bd3a5
--- /dev/null
+++ b/tests/components/InputWithCounter.test.tsx
@@ -0,0 +1,31 @@
+import { describe, vi } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import InputWithCounter from "../../app/components/controls/InputWithCounter";
+
+type Props = React.ComponentProps<typeof InputWithCounter>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: InputWithCounter,
+  name: "InputWithCounter",
+  props: {
+    label: "Community name",
+    placeholder: "Enter a name",
+    value: "",
+    onChange: vi.fn(),
+    maxLength: 50,
+    showHelpIcon: false,
+  } as Props,
+  requiredProps: ["value", "onChange", "maxLength"],
+  primaryRole: "textbox",
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("InputWithCounter", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/LanguageSwitcher.test.tsx b/tests/components/LanguageSwitcher.test.tsx
new file mode 100644
index 0000000..daff467
--- /dev/null
+++ b/tests/components/LanguageSwitcher.test.tsx
@@ -0,0 +1,23 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import LanguageSwitcher from "../../app/components/localization/LanguageSwitcher";
+
+type Props = React.ComponentProps<typeof LanguageSwitcher>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: LanguageSwitcher,
+  name: "LanguageSwitcher",
+  props: {} as Props,
+  primaryRole: "combobox",
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("LanguageSwitcher", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/LoginForm.test.tsx b/tests/components/LoginForm.test.tsx
index 8a56e58..4ae6ab9 100644
--- a/tests/components/LoginForm.test.tsx
+++ b/tests/components/LoginForm.test.tsx
@@ -32,10 +32,10 @@ vi.mock("../../lib/create/api", () => ({
   requestMagicLink: vi.fn(),
 }));
 
-vi.mock("../../app/create/utils/anonymousDraftStorage", async (importOriginal) => {
+vi.mock("../../app/(app)/create/utils/anonymousDraftStorage", async (importOriginal) => {
   const actual =
     await importOriginal<
-      typeof import("../../app/create/utils/anonymousDraftStorage")
+      typeof import("../../app/(app)/create/utils/anonymousDraftStorage")
     >();
   return {
     ...actual,
@@ -44,7 +44,7 @@ vi.mock("../../app/create/utils/anonymousDraftStorage", async (importOriginal) =
 });
 
 import { requestMagicLink } from "../../lib/create/api";
-import { setTransferPendingFlag } from "../../app/create/utils/anonymousDraftStorage";
+import { setTransferPendingFlag } from "../../app/(app)/create/utils/anonymousDraftStorage";
 
 function renderLoginForm() {
   return renderWithProviders(
diff --git a/tests/components/Logo.test.tsx b/tests/components/Logo.test.tsx
index ffcbd66..7969ec7 100644
--- a/tests/components/Logo.test.tsx
+++ b/tests/components/Logo.test.tsx
@@ -27,6 +27,7 @@ const config: ComponentTestSuiteConfig<LogoProps> = {
 
 componentTestSuite<LogoProps>(config);
 
+// Pure presentational; no provider context needed.
 describe("Logo (behavioral tests)", () => {
   it("renders as a link to home", () => {
     render(<Logo />);
diff --git a/tests/components/ModalFooter.test.tsx b/tests/components/ModalFooter.test.tsx
new file mode 100644
index 0000000..80a7545
--- /dev/null
+++ b/tests/components/ModalFooter.test.tsx
@@ -0,0 +1,30 @@
+import { describe, vi } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import ModalFooter from "../../app/components/utility/ModalFooter";
+
+type Props = React.ComponentProps<typeof ModalFooter>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: ModalFooter,
+  name: "ModalFooter",
+  props: {
+    showBackButton: true,
+    showNextButton: true,
+    onBack: vi.fn(),
+    onNext: vi.fn(),
+    currentStep: 2,
+    totalSteps: 4,
+  } as Props,
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("ModalFooter", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/ModalHeader.test.tsx b/tests/components/ModalHeader.test.tsx
new file mode 100644
index 0000000..6ed1ed8
--- /dev/null
+++ b/tests/components/ModalHeader.test.tsx
@@ -0,0 +1,28 @@
+import { describe, vi } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import ModalHeader from "../../app/components/utility/ModalHeader";
+
+type Props = React.ComponentProps<typeof ModalHeader>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: ModalHeader,
+  name: "ModalHeader",
+  props: {
+    showCloseButton: true,
+    showMoreOptionsButton: true,
+    onClose: vi.fn(),
+    onMoreOptions: vi.fn(),
+  } as Props,
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("ModalHeader", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/ModalTextAreaField.test.tsx b/tests/components/ModalTextAreaField.test.tsx
index 98a5bd9..043b4b5 100644
--- a/tests/components/ModalTextAreaField.test.tsx
+++ b/tests/components/ModalTextAreaField.test.tsx
@@ -3,7 +3,7 @@ import { describe, it, expect, vi } from "vitest";
 import { screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom/vitest";
-import ModalTextAreaField from "../../app/create/components/ModalTextAreaField";
+import ModalTextAreaField from "../../app/(app)/create/components/ModalTextAreaField";
 import { componentTestSuite } from "../utils/componentTestSuite";
 import { renderWithProviders } from "../utils/test-utils";
 
diff --git a/tests/components/MultiSelect.test.tsx b/tests/components/MultiSelect.test.tsx
index 1f2b376..464ddb0 100644
--- a/tests/components/MultiSelect.test.tsx
+++ b/tests/components/MultiSelect.test.tsx
@@ -11,8 +11,8 @@ import {
 type Props = React.ComponentProps<typeof MultiSelect>;
 
 const defaultChipOptions = [
-  { id: "1", label: "Option 1", state: "Unselected" as const },
-  { id: "2", label: "Option 2", state: "Selected" as const },
+  { id: "1", label: "Option 1", state: "unselected" as const },
+  { id: "2", label: "Option 2", state: "selected" as const },
 ];
 
 const config: ComponentTestSuiteConfig<Props> = {
@@ -21,8 +21,8 @@ const config: ComponentTestSuiteConfig<Props> = {
   props: {
     label: "Test Label",
     showHelpIcon: false,
-    size: "S",
-    palette: "Default",
+    size: "s",
+    palette: "default",
     options: defaultChipOptions,
     addButton: true,
     addButtonText: "",
@@ -31,8 +31,8 @@ const config: ComponentTestSuiteConfig<Props> = {
   optionalProps: {
     label: "Optional Label",
     showHelpIcon: true,
-    size: "M",
-    palette: "Inverse",
+    size: "m",
+    palette: "inverse",
     onChipClick: vi.fn(),
     onAddClick: vi.fn(),
     addButton: false,
@@ -144,7 +144,7 @@ describe("MultiSelect – behaviour specifics", () => {
   it("handles custom chip confirm", async () => {
     const handleConfirm = vi.fn();
     const customOptions = [
-      { id: "custom-1", label: "", state: "Custom" as const },
+      { id: "custom-1", label: "", state: "custom" as const },
     ];
     render(
       <MultiSelect
@@ -169,7 +169,7 @@ describe("MultiSelect – behaviour specifics", () => {
   it("handles custom chip close", async () => {
     const handleClose = vi.fn();
     const customOptions = [
-      { id: "custom-1", label: "", state: "Custom" as const },
+      { id: "custom-1", label: "", state: "custom" as const },
     ];
     render(
       <MultiSelect options={customOptions} onCustomChipClose={handleClose} />,
diff --git a/tests/components/NavigationItem.test.tsx b/tests/components/NavigationItem.test.tsx
new file mode 100644
index 0000000..f05d24c
--- /dev/null
+++ b/tests/components/NavigationItem.test.tsx
@@ -0,0 +1,29 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import NavigationItem from "../../app/components/navigation/NavigationItem";
+
+type Props = React.ComponentProps<typeof NavigationItem>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: NavigationItem,
+  name: "NavigationItem",
+  props: {
+    children: "Templates",
+    href: "#",
+    variant: "default",
+    size: "default",
+  } as Props,
+  primaryRole: "link",
+  testCases: {
+    renders: true,
+    accessibility: true,
+    keyboardNavigation: true,
+  },
+};
+
+describe("NavigationItem", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/NumberedList.test.tsx b/tests/components/NumberedList.test.tsx
index 8e8f2f8..0b9b958 100644
--- a/tests/components/NumberedList.test.tsx
+++ b/tests/components/NumberedList.test.tsx
@@ -49,6 +49,7 @@ const config: ComponentTestSuiteConfig<NumberedListProps> = {
 
 componentTestSuite<NumberedListProps>(config);
 
+// Pure presentational; no provider context needed.
 describe("NumberedList (behavioral tests)", () => {
   it("renders all items", () => {
     render(<NumberedList items={mockItems} />);
diff --git a/tests/components/ProportionBar.test.tsx b/tests/components/ProportionBar.test.tsx
index abd28bb..c6fdd18 100644
--- a/tests/components/ProportionBar.test.tsx
+++ b/tests/components/ProportionBar.test.tsx
@@ -36,6 +36,7 @@ const config: ComponentTestSuiteConfig<ProportionBarProps> = {
 
 componentTestSuite<ProportionBarProps>(config);
 
+// Pure presentational; no provider context needed.
 describe("ProportionBar (behavioral tests)", () => {
   it("renders proportion bar with correct progress value", () => {
     render(<ProportionBar progress="2-1" />);
diff --git a/tests/components/RelatedArticles.test.tsx b/tests/components/RelatedArticles.test.tsx
index 65a2016..a0ecf58 100644
--- a/tests/components/RelatedArticles.test.tsx
+++ b/tests/components/RelatedArticles.test.tsx
@@ -63,6 +63,7 @@ const mockPosts: BlogPost[] = [
   },
 ];
 
+// Pure presentational; no provider context needed (mocked thumbnail + useIsMobile).
 describe("RelatedArticles", () => {
   it("renders without crashing", () => {
     render(
diff --git a/tests/components/ReviewPage.test.tsx b/tests/components/ReviewPage.test.tsx
index 612f2f9..880db9b 100644
--- a/tests/components/ReviewPage.test.tsx
+++ b/tests/components/ReviewPage.test.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import { CommunityReviewScreen } from "../../app/create/screens/review/CommunityReviewScreen";
+import { CommunityReviewScreen } from "../../app/(app)/create/screens/review/CommunityReviewScreen";
 
 describe("CommunityReviewScreen", () => {
   it("renders without crashing", () => {
diff --git a/tests/components/SelectPage.test.tsx b/tests/components/SelectPage.test.tsx
index 438a0e5..c940303 100644
--- a/tests/components/SelectPage.test.tsx
+++ b/tests/components/SelectPage.test.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import { CommunitySizeSelectScreen } from "../../app/create/screens/select/CommunitySizeSelectScreen";
+import { CommunitySizeSelectScreen } from "../../app/(app)/create/screens/select/CommunitySizeSelectScreen";
 
 describe("CommunitySizeSelectScreen", () => {
   it("renders HeaderLockup title", () => {
diff --git a/tests/components/Separator.test.tsx b/tests/components/Separator.test.tsx
new file mode 100644
index 0000000..5405ff1
--- /dev/null
+++ b/tests/components/Separator.test.tsx
@@ -0,0 +1,22 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import Separator from "../../app/components/utility/Separator";
+
+type Props = React.ComponentProps<typeof Separator>;
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: Separator,
+  name: "Separator",
+  props: {} as Props,
+  testCases: {
+    renders: true,
+    accessibility: true,
+  },
+};
+
+describe("Separator", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/Stepper.test.tsx b/tests/components/Stepper.test.tsx
index fe0edd9..bf81024 100644
--- a/tests/components/Stepper.test.tsx
+++ b/tests/components/Stepper.test.tsx
@@ -37,6 +37,7 @@ const config: ComponentTestSuiteConfig<StepperProps> = {
 
 componentTestSuite<StepperProps>(config);
 
+// Pure presentational; no provider context needed.
 describe("Stepper (behavioral tests)", () => {
   it("renders with correct number of steps", () => {
     render(<Stepper active={3} totalSteps={5} />);
diff --git a/tests/components/TemplateReviewCard.test.tsx b/tests/components/TemplateReviewCard.test.tsx
new file mode 100644
index 0000000..7367c7f
--- /dev/null
+++ b/tests/components/TemplateReviewCard.test.tsx
@@ -0,0 +1,52 @@
+import { describe } from "vitest";
+import {
+  componentTestSuite,
+  type ComponentTestSuiteConfig,
+} from "../utils/componentTestSuite";
+import { TemplateReviewCard } from "../../app/components/cards/TemplateReviewCard";
+
+type Props = React.ComponentProps<typeof TemplateReviewCard>;
+
+const sampleTemplate = {
+  id: "tmpl-1",
+  slug: "consensus",
+  title: "Consensus",
+  category: null,
+  description:
+    "Important decisions require unanimous agreement. Proposals pass only if no serious objections remain.",
+  body: {
+    sections: [
+      {
+        categoryName: "Decision making",
+        entries: [
+          {
+            title: "How proposals pass",
+            body: "Unanimous agreement is required.",
+          },
+        ],
+      },
+    ],
+  },
+  sortOrder: 1,
+  featured: true,
+};
+
+const config: ComponentTestSuiteConfig<Props> = {
+  component: TemplateReviewCard,
+  name: "TemplateReviewCard",
+  props: {
+    template: sampleTemplate,
+    size: "L",
+  } as Props,
+  primaryRole: "button",
+  testCases: {
+    renders: true,
+    // RuleCard contains nested interactive elements (chips inside a clickable card)
+    // which trigger axe's "nested-interactive" rule. Tracked by RuleCard itself.
+    accessibility: false,
+  },
+};
+
+describe("TemplateReviewCard", () => {
+  componentTestSuite<Props>(config);
+});
diff --git a/tests/components/TextInput.test.tsx b/tests/components/TextInput.test.tsx
index a565f36..77c1e28 100644
--- a/tests/components/TextInput.test.tsx
+++ b/tests/components/TextInput.test.tsx
@@ -32,6 +32,7 @@ componentTestSuite<TextInputProps>({
   },
 });
 
+// Pure presentational; no provider context needed.
 describe("TextInput (size tests)", () => {
   it("renders with medium size by default", () => {
     const { container } = render(<TextInput label="Test" inputSize="medium" />);
@@ -45,9 +46,4 @@ describe("TextInput (size tests)", () => {
     expect(input).toHaveClass("h-[32px]");
   });
 
-  it("accepts PascalCase size prop", () => {
-    const { container } = render(<TextInput label="Test" inputSize="Small" />);
-    const input = container.querySelector("input");
-    expect(input).toHaveClass("h-[32px]");
-  });
 });
diff --git a/tests/components/TextPage.test.tsx b/tests/components/TextPage.test.tsx
index 8be403c..6722f9e 100644
--- a/tests/components/TextPage.test.tsx
+++ b/tests/components/TextPage.test.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import { CreateFlowTextFieldScreen } from "../../app/create/screens/text/CreateFlowTextFieldScreen";
+import { CreateFlowTextFieldScreen } from "../../app/(app)/create/screens/text/CreateFlowTextFieldScreen";
 
 describe("CreateFlowTextFieldScreen (community name)", () => {
   it("renders main heading", () => {
diff --git a/tests/components/Tooltip.test.tsx b/tests/components/Tooltip.test.tsx
index 1a83aa9..983c651 100644
--- a/tests/components/Tooltip.test.tsx
+++ b/tests/components/Tooltip.test.tsx
@@ -30,6 +30,7 @@ componentTestSuite<TooltipProps>({
   },
 });
 
+// Pure presentational; no provider context needed.
 describe("Tooltip (behavioral tests)", () => {
   it("shows tooltip on hover", async () => {
     const user = userEvent.setup();
diff --git a/tests/components/Upload.test.tsx b/tests/components/Upload.test.tsx
index 27a79a7..dc16887 100644
--- a/tests/components/Upload.test.tsx
+++ b/tests/components/Upload.test.tsx
@@ -30,6 +30,7 @@ componentTestSuite<UploadProps>({
   },
 });
 
+// Pure presentational; no provider context needed.
 describe("Upload (behavioral tests)", () => {
   it("renders with active state by default", () => {
     render(<Upload label="Upload" />);
diff --git a/tests/components/UploadPage.test.tsx b/tests/components/UploadPage.test.tsx
index 772ddf7..0184bac 100644
--- a/tests/components/UploadPage.test.tsx
+++ b/tests/components/UploadPage.test.tsx
@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { renderWithProviders as render, screen } from "../utils/test-utils";
 import "@testing-library/jest-dom/vitest";
-import { CommunityUploadScreen } from "../../app/create/screens/upload/CommunityUploadScreen";
+import { CommunityUploadScreen } from "../../app/(app)/create/screens/upload/CommunityUploadScreen";
 
 describe("CommunityUploadScreen", () => {
   it("renders HeaderLockup", () => {
diff --git a/tests/components/AuthModalContext.test.tsx b/tests/contexts/AuthModalContext.test.tsx
similarity index 94%
rename from tests/components/AuthModalContext.test.tsx
rename to tests/contexts/AuthModalContext.test.tsx
index 70a2f7a..22b058e 100644
--- a/tests/components/AuthModalContext.test.tsx
+++ b/tests/contexts/AuthModalContext.test.tsx
@@ -31,10 +31,10 @@ vi.mock("../../lib/create/api", () => ({
   requestMagicLink: vi.fn(),
 }));
 
-vi.mock("../../app/create/utils/anonymousDraftStorage", async (importOriginal) => {
+vi.mock("../../app/(app)/create/utils/anonymousDraftStorage", async (importOriginal) => {
   const actual =
     await importOriginal<
-      typeof import("../../app/create/utils/anonymousDraftStorage")
+      typeof import("../../app/(app)/create/utils/anonymousDraftStorage")
     >();
   return {
     ...actual,
@@ -43,7 +43,7 @@ vi.mock("../../app/create/utils/anonymousDraftStorage", async (importOriginal) =
 });
 
 import { requestMagicLink } from "../../lib/create/api";
-import { setTransferPendingFlag } from "../../app/create/utils/anonymousDraftStorage";
+import { setTransferPendingFlag } from "../../app/(app)/create/utils/anonymousDraftStorage";
 
 function LoginTrigger() {
   const { openLogin, closeLogin } = useAuthModal();
diff --git a/tests/pages/communication-methods.test.jsx b/tests/pages/communication-methods.test.jsx
index 7c8441e..5ee3d16 100644
--- a/tests/pages/communication-methods.test.jsx
+++ b/tests/pages/communication-methods.test.jsx
@@ -6,7 +6,7 @@ import {
 } from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import { describe, test, expect, afterEach } from "vitest";
-import { CommunicationMethodsScreen } from "../../app/create/screens/card/CommunicationMethodsScreen";
+import { CommunicationMethodsScreen } from "../../app/(app)/create/screens/card/CommunicationMethodsScreen";
 
 afterEach(() => {
   cleanup();
diff --git a/tests/pages/decision-approaches.test.jsx b/tests/pages/decision-approaches.test.jsx
index 3a9c912..672f161 100644
--- a/tests/pages/decision-approaches.test.jsx
+++ b/tests/pages/decision-approaches.test.jsx
@@ -6,7 +6,7 @@ import {
 } from "../utils/test-utils";
 import userEvent from "@testing-library/user-event";
 import { describe, test, expect, afterEach } from "vitest";
-import { DecisionApproachesScreen } from "../../app/create/screens/right-rail/DecisionApproachesScreen";
+import { DecisionApproachesScreen } from "../../app/(app)/create/screens/right-rail/DecisionApproachesScreen";
 
 afterEach(() => {
   cleanup();
diff --git a/tests/unit/ContentContainer.test.jsx b/tests/unit/ContentContainer.test.jsx
index 0df31f5..3e18cf3 100644
--- a/tests/unit/ContentContainer.test.jsx
+++ b/tests/unit/ContentContainer.test.jsx
@@ -24,6 +24,7 @@ const mockPost = {
   },
 };
 
+// Pure presentational; no provider context needed.
 describe("ContentContainer", () => {
   it("renders with default props", () => {
     render(<ContentContainer post={mockPost} />);
diff --git a/tests/unit/ContentThumbnailTemplate.test.jsx b/tests/unit/ContentThumbnailTemplate.test.jsx
index 374684e..8bdc018 100644
--- a/tests/unit/ContentThumbnailTemplate.test.jsx
+++ b/tests/unit/ContentThumbnailTemplate.test.jsx
@@ -35,6 +35,7 @@ const mockPost = {
   },
 };
 
+// Pure presentational; no provider context needed.
 describe("ContentThumbnailTemplate", () => {
   describe("Vertical Variant", () => {
     it("should render vertical variant with responsive dimensions", () => {
diff --git a/tests/unit/Layout.test.jsx b/tests/unit/Layout.test.jsx
index aa48dae..84b18c8 100644
--- a/tests/unit/Layout.test.jsx
+++ b/tests/unit/Layout.test.jsx
@@ -1,5 +1,7 @@
 import { describe, test, expect, vi } from "vitest";
 import RootLayout from "../../app/layout";
+import MarketingLayout from "../../app/(marketing)/layout";
+import AppLayout from "../../app/(app)/layout";
 
 // Mock the font imports since they're Next.js specific
 vi.mock("next/font/google", () => ({
@@ -70,30 +72,46 @@ describe("RootLayout", () => {
     expect(container).toBeTruthy();
   });
 
-  test("renders main content area", () => {
-    const testContent = "Test content";
-    const tree = RootLayout({ children: <div>{testContent}</div> });
-    const main = findDescendant(
-      tree,
-      (n) => n.type === "main" && n.props?.className?.includes("flex-1"),
-    );
-    expect(main).toBeTruthy();
-
-    const childText = findDescendant(
-      main,
-      (n) => typeof n === "string" && n.includes(testContent),
-    );
-    expect(childText).toBeTruthy();
-  });
-
-  test("renders children content correctly", () => {
+  test("renders children directly inside the flex container (no <main> at root)", () => {
     const testContent = "This is test content";
     const tree = RootLayout({ children: <div>{testContent}</div> });
-    const main = findDescendant(tree, (n) => n.type === "main");
+
+    expect(findDescendant(tree, (n) => n?.type === "main")).toBeNull();
+
     const childText = findDescendant(
-      main,
+      tree,
       (n) => typeof n === "string" && n.includes(testContent),
     );
     expect(childText).toBeTruthy();
   });
 });
+
+describe("Group layouts (chrome composition)", () => {
+  test("MarketingLayout wraps children in <main flex-1> and appends Footer", () => {
+    const tree = MarketingLayout({ children: <div>marketing-child</div> });
+    const main = findDescendant(
+      tree,
+      (n) => n?.type === "main" && n.props?.className?.includes("flex-1"),
+    );
+    expect(main).toBeTruthy();
+    expect(
+      findDescendant(main, (n) => typeof n === "string" && n.includes("marketing-child")),
+    ).toBeTruthy();
+
+    // Footer is loaded via next/dynamic — it appears as a render prop component
+    // sibling to <main>. Verify the layout returns more than just <main>.
+    const childrenArr = Array.isArray(tree.props.children)
+      ? tree.props.children
+      : [tree.props.children];
+    expect(childrenArr.length).toBeGreaterThan(1);
+  });
+
+  test("AppLayout wraps children in <main flex-1> with no footer", () => {
+    const tree = AppLayout({ children: <div>app-child</div> });
+    expect(tree.type).toBe("main");
+    expect(tree.props.className).toContain("flex-1");
+    expect(
+      findDescendant(tree, (n) => typeof n === "string" && n.includes("app-child")),
+    ).toBeTruthy();
+  });
+});
diff --git a/tests/unit/LogoWall.test.jsx b/tests/unit/LogoWall.test.jsx
index 2b83130..302236e 100644
--- a/tests/unit/LogoWall.test.jsx
+++ b/tests/unit/LogoWall.test.jsx
@@ -6,6 +6,7 @@ afterEach(() => {
   cleanup();
 });
 
+// Pure presentational; no provider context needed.
 describe("LogoWall Component", () => {
   test("renders with default logos", () => {
     render(<LogoWall />);
diff --git a/tests/unit/NumberCard.test.jsx b/tests/unit/NumberCard.test.jsx
index 20d4bb7..0345d64 100644
--- a/tests/unit/NumberCard.test.jsx
+++ b/tests/unit/NumberCard.test.jsx
@@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/react";
 import { describe, it, expect } from "vitest";
 import NumberCard from "../../app/components/cards/NumberCard";
 
+// Pure presentational; no provider context needed.
 describe("NumberCard Component", () => {
   const defaultProps = {
     number: 1,
@@ -200,7 +201,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies Small size variant correctly", () => {
-    render(<NumberCard {...defaultProps} size="Small" />);
+    render(<NumberCard {...defaultProps} size="small" />);
 
     // For Small size, text is directly in card div (no wrapper), so use closest("div")
     const card = screen.getByText("Test Card Text").closest("div");
@@ -219,7 +220,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies Medium size variant correctly", () => {
-    render(<NumberCard {...defaultProps} size="Medium" />);
+    render(<NumberCard {...defaultProps} size="medium" />);
 
     const card = screen
       .getByText("Test Card Text")
@@ -237,7 +238,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies Large size variant correctly", () => {
-    render(<NumberCard {...defaultProps} size="Large" />);
+    render(<NumberCard {...defaultProps} size="large" />);
 
     const card = screen
       .getByText("Test Card Text")
@@ -257,7 +258,7 @@ describe("NumberCard Component", () => {
   });
 
   it("applies XLarge size variant correctly", () => {
-    render(<NumberCard {...defaultProps} size="XLarge" />);
+    render(<NumberCard {...defaultProps} size="xlarge" />);
 
     const card = screen
       .getByText("Test Card Text")
diff --git a/tests/unit/RuleCard.test.jsx b/tests/unit/RuleCard.test.jsx
index 5f1c29f..33befdc 100644
--- a/tests/unit/RuleCard.test.jsx
+++ b/tests/unit/RuleCard.test.jsx
@@ -159,7 +159,7 @@ describe("RuleCard Component", () => {
       {
         name: "Values",
         chipOptions: [
-          { id: "v1", label: "Consciousness", state: "Unselected" },
+          { id: "v1", label: "Consciousness", state: "unselected" },
         ],
       },
     ];
diff --git a/tests/unit/buildPublishPayload.test.ts b/tests/unit/buildPublishPayload.test.ts
index 1032109..7531fb5 100644
--- a/tests/unit/buildPublishPayload.test.ts
+++ b/tests/unit/buildPublishPayload.test.ts
@@ -4,7 +4,7 @@ import {
   parseDocumentSectionsForDisplay,
   parseSectionsFromCreateFlowState,
 } from "../../lib/create/buildPublishPayload";
-import type { CreateFlowState } from "../../app/create/types";
+import type { CreateFlowState } from "../../app/(app)/create/types";
 
 describe("buildPublishPayload", () => {
   it("returns error when title missing", () => {
@@ -97,8 +97,8 @@ describe("buildPublishPayload", () => {
       title: "T",
       selectedCoreValueIds: ["1", "2"],
       coreValuesChipsSnapshot: [
-        { id: "1", label: "Alpha", state: "Selected" },
-        { id: "2", label: "Beta", state: "Selected" },
+        { id: "1", label: "Alpha", state: "selected" },
+        { id: "2", label: "Beta", state: "selected" },
       ],
       coreValueDetailsByChipId: {
         "1": { meaning: "m1", signals: "s1" },
diff --git a/tests/unit/createFlowLayoutTokens.test.ts b/tests/unit/createFlowLayoutTokens.test.ts
index 7e96ba6..fda3e2f 100644
--- a/tests/unit/createFlowLayoutTokens.test.ts
+++ b/tests/unit/createFlowLayoutTokens.test.ts
@@ -3,7 +3,7 @@ import {
   CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS,
   CREATE_FLOW_MD_UP_GRID_CELL_CLASS,
   CREATE_FLOW_TWO_COLUMN_MAX_WIDTH_CLASS,
-} from "../../app/create/components/createFlowLayoutTokens";
+} from "../../app/(app)/create/components/createFlowLayoutTokens";
 
 describe("createFlowLayoutTokens", () => {
   it("exports create-flow column and two-column max class strings", () => {
diff --git a/tests/unit/createFlowProportionProgress.test.ts b/tests/unit/createFlowProportionProgress.test.ts
index 2733a50..722152b 100644
--- a/tests/unit/createFlowProportionProgress.test.ts
+++ b/tests/unit/createFlowProportionProgress.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { getProportionBarProgressForCreateFlowStep } from "../../app/create/utils/createFlowProportionProgress";
+import { getProportionBarProgressForCreateFlowStep } from "../../app/(app)/create/utils/createFlowProportionProgress";
 
 describe("getProportionBarProgressForCreateFlowStep", () => {
   it("uses 1-2 on community-structure (third Create Community step)", () => {
diff --git a/tests/unit/createFlowValidation.test.ts b/tests/unit/createFlowValidation.test.ts
index 45fe037..ec47882 100644
--- a/tests/unit/createFlowValidation.test.ts
+++ b/tests/unit/createFlowValidation.test.ts
@@ -83,8 +83,8 @@ describe("createFlowStateSchema", () => {
     const r = createFlowStateSchema.safeParse({
       communityStructureChipSnapshots: {
         organizationTypes: [
-          { id: "1", label: "Co-op", state: "Selected" },
-          { id: "custom-uuid", label: "My type", state: "Selected" },
+          { id: "1", label: "Co-op", state: "selected" },
+          { id: "custom-uuid", label: "My type", state: "selected" },
         ],
         scale: [{ id: "1", label: "Local" }],
         maturity: [],
diff --git a/tests/unit/flowSteps.test.ts b/tests/unit/flowSteps.test.ts
index f4d3b49..36a02b7 100644
--- a/tests/unit/flowSteps.test.ts
+++ b/tests/unit/flowSteps.test.ts
@@ -5,7 +5,7 @@ import {
   getPreviousStep,
   isValidStep,
   getStepIndex,
-} from "../../app/create/utils/flowSteps";
+} from "../../app/(app)/create/utils/flowSteps";
 
 describe("flowSteps", () => {
   it("places confirm-stakeholders immediately before final-review", () => {
diff --git a/tests/unit/hasCreateFlowUserInput.test.ts b/tests/unit/hasCreateFlowUserInput.test.ts
index dd71b0d..2f8ad15 100644
--- a/tests/unit/hasCreateFlowUserInput.test.ts
+++ b/tests/unit/hasCreateFlowUserInput.test.ts
@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { hasCreateFlowUserInput } from "../../app/create/utils/hasCreateFlowUserInput";
+import { hasCreateFlowUserInput } from "../../app/(app)/create/utils/hasCreateFlowUserInput";
 
 describe("hasCreateFlowUserInput", () => {
   it("returns false for empty state", () => {
diff --git a/tests/unit/saveDraftToServer.test.ts b/tests/unit/saveDraftToServer.test.ts
index bf4af65..a0d20c8 100644
--- a/tests/unit/saveDraftToServer.test.ts
+++ b/tests/unit/saveDraftToServer.test.ts
@@ -1,6 +1,6 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { saveDraftToServer } from "../../lib/create/api";
-import type { CreateFlowState } from "../../app/create/types";
+import type { CreateFlowState } from "../../app/(app)/create/types";
 
 const minimalState: CreateFlowState = {};
 
diff --git a/tests/utils/test-utils.tsx b/tests/utils/test-utils.tsx
index ae71a46..e5b219f 100644
--- a/tests/utils/test-utils.tsx
+++ b/tests/utils/test-utils.tsx
@@ -2,7 +2,7 @@ import React, { type ReactElement } from "react";
 import { render, type RenderOptions } from "@testing-library/react";
 import { AuthModalProvider } from "../../app/contexts/AuthModalContext";
 import { MessagesProvider } from "../../app/contexts/MessagesContext";
-import { CreateFlowProvider } from "../../app/create/context/CreateFlowContext";
+import { CreateFlowProvider } from "../../app/(app)/create/context/CreateFlowContext";
 import messages from "../../messages/en/index";
 
 /**
diff --git a/vitest.config.mjs b/vitest.config.mjs
index 5a0726f..9944ad7 100644
--- a/vitest.config.mjs
+++ b/vitest.config.mjs
@@ -26,10 +26,10 @@ export default defineConfig({
     setupFiles: ["./vitest.setup.ts"],
     include: [
       "tests/components/**/*.test.{js,jsx,ts,tsx}",
+      "tests/contexts/**/*.test.{js,jsx,ts,tsx}",
       "tests/pages/**/*.test.{js,jsx,ts,tsx}",
       "tests/utils/**/*.test.{js,jsx,ts,tsx}",
-      "tests/unit/**/*.test.{js,jsx,ts,tsx}", // Legacy - remaining non-component tests
-      "tests/e2e/**/*.e2e.test.{js,jsx,ts,tsx}",
+      "tests/unit/**/*.test.{js,jsx,ts,tsx}",
     ],
     exclude: ["tests/e2e/**/*.spec.{js,jsx,ts,tsx}"],
     // Disable CSS processing in tests to avoid jsdom parsing errors with Tailwind v4
@@ -40,7 +40,7 @@ export default defineConfig({
       reporter: ["text", "lcov"],
       include: [
         "app/**/*.{js,jsx,ts,tsx}",
-        "components/**/*.{js,jsx,ts,tsx}",
+        "lib/**/*.{js,jsx,ts,tsx}",
         "!**/*.test.{js,jsx,ts,tsx}",
         "!**/*.spec.{js,jsx,ts,tsx}",
         "!**/node_modules/**",