diff --git a/.github/workflows/landing-visual.yml b/.github/workflows/landing-visual.yml
new file mode 100644
index 00000000..bc5275f6
--- /dev/null
+++ b/.github/workflows/landing-visual.yml
@@ -0,0 +1,110 @@
+name: Landing Visual Regression
+
+on:
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'shared/assets/**'
+      - 'templates/**/Landing*'
+      - 'templates/**/landing*'
+      - 'templates/**/page.module.css'
+      - 'templates/**/index.astro'
+      - 'templates/**/Newtab.*'
+      - 'templates/**/Popup.*'
+      - 'scripts/landing-visual/**'
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  visual:
+    name: Visual regression on ${{ matrix.template }}
+    strategy:
+      fail-fast: false
+      matrix:
+        template:
+          - react-vite-starter
+          - nextjs-starter
+          - remix-starter
+          - astro-starter
+          - webextension-react-vite-starter
+        port:
+          - 5173
+        include:
+          - template: nextjs-starter
+            port: 3000
+          - template: astro-starter
+            port: 4321
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version: 22
+
+      - name: Install Playwright
+        working-directory: scripts/landing-visual
+        run: |
+          npm install
+          npx playwright install chromium --with-deps
+
+      - name: Scaffold test project
+        id: scaffold
+        continue-on-error: true
+        run: |
+          CI=true npx create-awesome-node-app visual-test-project \
+            -t "file://${PWD}?subdir=templates/${{ matrix.template }}"
+          echo "Project scaffolded"
+
+      - name: Install and start dev server
+        if: steps.scaffold.outcome == 'success'
+        working-directory: visual-test-project
+        run: |
+          npm install
+          case "${{ matrix.template }}" in
+            webextension-react-vite-starter)
+              npm run build
+              echo "Build succeeded — webextension has no dev server"
+              exit 0
+              ;;
+            nextjs-starter)
+              npm run dev -- --port "${{ matrix.port }}" &
+              ;;
+            *)
+              npm run dev -- --host 0.0.0.0 --port "${{ matrix.port }}" &
+              ;;
+          esac
+          echo "Waiting for dev server on port ${{ matrix.port }}..."
+          for i in $(seq 1 30); do
+            curl -sf "http://localhost:${{ matrix.port }}" > /dev/null 2>&1 && echo "Server ready on port ${{ matrix.port }}" && break
+            sleep 1
+          done
+          curl -sf "http://localhost:${{ matrix.port }}" > /dev/null 2>&1 || { echo "Server failed to start on port ${{ matrix.port }}"; exit 1; }
+
+      - name: Run visual tests
+        if: steps.scaffold.outcome == 'success' && matrix.template != 'webextension-react-vite-starter'
+        working-directory: scripts/landing-visual
+        run: |
+          npx playwright test --project=chromium
+        env:
+          TEMPLATE: ${{ matrix.template }}
+          BASE_URL: http://localhost:${{ matrix.port }}
+
+      - name: Upload screenshots (always)
+        if: always() && steps.scaffold.outcome == 'success' && matrix.template != 'webextension-react-vite-starter'
+        uses: actions/upload-artifact@v4
+        with:
+          name: screenshots-${{ matrix.template }}
+          path: |
+            scripts/landing-visual/test-results/
+            scripts/landing-visual/__screenshots__/
diff --git a/.github/workflows/smoke-test.yml b/.github/workflows/smoke-test.yml
index ef1f5916..d7bdec98 100644
--- a/.github/workflows/smoke-test.yml
+++ b/.github/workflows/smoke-test.yml
@@ -10,23 +10,69 @@ on:
       - reopened
   workflow_dispatch:
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 permissions:
   contents: read
 
 jobs:
+  validate-registry:
+    name: Validate template registry
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version: 22
+      - name: Validate templates.json
+        run: node scripts/validate-templates.js
+
+  landing-audit:
+    name: Landing page audit
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version: 22
+      - name: Audit landing pages
+        run: node scripts/landing-audit.js
+
   smoke-test:
-    name: Smoke test scaffolded projects
+    name: Smoke test ${{ matrix.template }}
+    needs: [validate-registry, landing-audit]
     strategy:
       fail-fast: false
       matrix:
         include:
+          - template: react-vite-starter
+            addons: ""
+            build-env: ""
           - template: nextjs-starter
             addons: ""
-          - template: nestjs-boilerplate
+            build-env: ""
+          - template: astro-starter
             addons: ""
-          - template: react-vite-boilerplate
-            addons: '--addons "file://${PWD}?subdir=extensions/react-material-ui" "file://${PWD}?subdir=extensions/react-zustand"'
+            build-env: ""
+          - template: remix-starter
+            addons: ""
+            build-env: ""
+          - template: webextension-react-vite-starter
+            addons: ""
+            build-env: ""
+          - template: turborepo-starter
+            addons: ""
+            build-env: ""
     runs-on: ubuntu-latest
+    timeout-minutes: 15
     steps:
       - name: Checkout repository
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
@@ -47,6 +93,8 @@ jobs:
 
       - name: Run basic checks
         working-directory: smoke-test-project
+        env:
+          SKIP_ENV_VALIDATION: 'true'
         run: |
           npm install
           npm run format --if-present
@@ -55,3 +103,51 @@ jobs:
           npm run type-check --if-present || echo "Type-check warnings found (non-blocking)"
           SKIP_ENV_VALIDATION=true npm run build --if-present || echo "Build warnings found (non-blocking)"
           echo "Smoke test passed for ${{ matrix.template }}"
+
+  extension-isolation:
+    name: Isolate ${{ matrix.combination.template }} + ${{ matrix.combination.extension }}
+    needs: [validate-registry, landing-audit]
+    strategy:
+      fail-fast: false
+      matrix:
+        combination:
+          - template: react-vite-starter
+            extension: react-tailwindcss
+          - template: react-vite-starter
+            extension: react-shadcn
+          - template: react-vite-starter
+            extension: react-material-ui
+          - template: nextjs-starter
+            extension: nextjs-tailwindcss
+          - template: nextjs-starter
+            extension: nextjs-shadcn
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+        with:
+          persist-credentials: false
+
+      - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version: 22
+
+      - name: Scaffold with extension
+        run: |
+          CI=true npx create-awesome-node-app isolate-test-project \
+            -t "file://${PWD}?subdir=templates/${{ matrix.combination.template }}" \
+            --addons "file://${PWD}?subdir=extensions/${{ matrix.combination.extension }}"
+          echo "Project scaffolded with ${{ matrix.combination.extension }}"
+
+      - name: Run basic checks
+        working-directory: isolate-test-project
+        env:
+          SKIP_ENV_VALIDATION: 'true'
+        run: |
+          npm install
+          npm run format --if-present
+          npm run lint:fix --if-present
+          npm run lint --if-present || echo "Lint warnings found (non-blocking)"
+          npm run type-check --if-present || echo "Type-check warnings found (non-blocking)"
+          npm run build --if-present || echo "Build warnings found (non-blocking)"
+          echo "Isolated test passed for ${{ matrix.combination.template }} + ${{ matrix.combination.extension }}"
diff --git a/.github/workflows/test-combinations.yml b/.github/workflows/test-combinations.yml
index ce1fd615..072a3e98 100644
--- a/.github/workflows/test-combinations.yml
+++ b/.github/workflows/test-combinations.yml
@@ -4,10 +4,25 @@ on:
   push:
     branches:
       - main
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'templates.json'
+      - 'extensions/**'
+      - '.github/workflows/test-combinations.yml'
+    types:
+      - opened
+      - synchronize
+      - reopened
   schedule:
-    - cron: "0 0 * * 0" # Weekly full matrix on Sunday at midnight UTC
+    - cron: "0 0 * * 0"
   workflow_dispatch:
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 permissions:
   contents: read
 
@@ -43,7 +58,6 @@ jobs:
           }));
           const extensions = data.extensions;
 
-          // Build local URL for each extension using its url path
           const extLocalUrl = (ext) => {
             const match = ext.url.match(/\/extensions\/([^/]+)(?:\/|$)/);
             const dir = match ? match[1] : null;
@@ -78,7 +92,6 @@ jobs:
               if (ext) selectedExtensions.push(ext);
             }
 
-            // Derive local template URL from the url field in templates.json
             const tplMatch = template.url.match(/\/templates\/([^/]+)(?:\/|$)/);
             const tplDir = tplMatch ? tplMatch[1] : null;
             const templateUrl = tplDir ? \`file://${repoDir}?subdir=templates/${tplDir}\` : template.slug;
@@ -98,6 +111,7 @@ jobs:
       matrix:
         combination: ${{ fromJson(needs.generate-combinations.outputs.matrix) }}
     runs-on: ubuntu-latest
+    timeout-minutes: 15
     steps:
       - name: Checkout repository
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
@@ -138,7 +152,6 @@ jobs:
 
           tree -I 'node_modules|dist|.git'
 
-  # Full matrix - tests ALL combinations (runs weekly, not on PRs)
   generate-full-matrix:
     name: Generate full test matrix
     if: github.event_name == 'schedule' || github.event_name == 'workflow_dispatch'
@@ -166,7 +179,6 @@ jobs:
 
           const extensions = data.extensions;
 
-          // Build local URL for each extension using its url path
           const extLocalUrl = (ext) => {
             const match = ext.url.match(/\/extensions\/([^/]+)(?:\/|$)/);
             const dir = match ? match[1] : null;
@@ -185,7 +197,6 @@ jobs:
             return false;
           };
 
-          // Generate ALL non-conflicting combinations (template x all compatible extensions)
           const combinations = [];
 
           for (const template of data.templates) {
@@ -194,7 +205,6 @@ jobs:
               return extTypes.includes(template.type);
             });
 
-            // Test with all mutually-compatible extensions for this template
             const selectedExtensions = [];
             for (const ext of compatibleExtensions) {
               if (!hasIncompatibility(selectedExtensions, ext)) {
@@ -205,7 +215,6 @@ jobs:
             if (selectedExtensions.length > 0) {
               const extUrls = selectedExtensions.map(ext => extLocalUrl(ext)).filter(Boolean);
 
-              // Derive local template URL from the url field in templates.json
               const tplMatch = template.url.match(/\/templates\/([^/]+)(?:\/|$)/);
               const tplDir = tplMatch ? tplMatch[1] : null;
               const templateUrl = tplDir ? \`file://${repoDir}?subdir=templates/${tplDir}\` : template.slug;
@@ -232,6 +241,7 @@ jobs:
       matrix:
         combination: ${{ fromJson(needs.generate-full-matrix.outputs.matrix) }}
     runs-on: ubuntu-latest
+    timeout-minutes: 15
     steps:
       - name: Checkout repository
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
diff --git a/docs/DEFAULT_LANDING_DESIGN.md b/docs/DEFAULT_LANDING_DESIGN.md
index de6cf756..8636b245 100644
--- a/docs/DEFAULT_LANDING_DESIGN.md
+++ b/docs/DEFAULT_LANDING_DESIGN.md
@@ -22,10 +22,10 @@
 
 | Token | Hex | Usage |
 |---|---|---|
-| `brand-amber` | `#f59e0b` | Primary accent, highlights, CTAs |
-| `brand-amber-dark` | `#d97706` | Hover states, secondary accents |
-| `brand-teal` | `#0d9488` | Success, links, secondary accent |
-| `brand-teal-soft` | `#14b8a6` | Soft teal surfaces |
+| `--cna-amber` | `#f59e0b` | Primary accent, highlights, CTAs |
+| `--cna-amber-dark` | `#d97706` | Hover states, secondary accents |
+| `--cna-teal` | `#0d9488` | Success, links, secondary accent |
+| `--cna-teal-soft` | `#14b8a6` | Soft teal surfaces |
 
 ### Neutral colors
 
@@ -104,13 +104,13 @@ font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Me
 ### Shadows
 
 ```css
---shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
---shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
---shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
---shadow-glow: 0 0 40px -10px rgba(245, 158, 11, 0.25);
+--cna-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+--cna-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+--cna-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+--cna-shadow-glow: 0 0 40px -10px rgba(245, 158, 11, 0.25);
 ```
 
-Use `shadow-glow` sparingly on hero containers.
+Use `--cna-shadow-glow` sparingly on hero containers.
 
 ---
 
@@ -119,7 +119,7 @@ Use `shadow-glow` sparingly on hero containers.
 ### Entrance animation
 
 ```css
-@keyframes fade-in-up {
+@keyframes cna-fade-in-up {
   from {
     opacity: 0;
     transform: translateY(12px);
@@ -134,8 +134,8 @@ Use `shadow-glow` sparingly on hero containers.
 Apply with staggered delays:
 
 ```css
-animation: fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
-animation-delay: calc(var(--index) * 80ms);
+animation: cna-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+animation-delay: calc(var(--index, 0) * 80ms);
 ```
 
 ### Hover transitions
@@ -147,9 +147,9 @@ transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s eas
 Card hover:
 
 ```css
-.feature-card:hover {
+.cna-landing__card:hover {
   transform: translateY(-3px);
-  box-shadow: var(--shadow-lg), var(--shadow-glow);
+  box-shadow: var(--cna-shadow-lg), var(--cna-shadow-glow);
 }
 ```
 
@@ -208,7 +208,7 @@ Every template landing should follow this layout:
 |  [Primary CTA]  [Secondary]      |
 |                                  |
 +----------------------------------+
-|  Feature cards (3-6 items)       |
+|  Feature cards (6 items)         |
 +----------------------------------+
 |  Docs + next steps               |
 +----------------------------------+
@@ -225,21 +225,22 @@ Each feature card contains:
 3. One-sentence description.
 4. Optional doc link rendered as a plain link with a label and arrow.
 
-Example cards per template:
+Each template has exactly **6 feature cards** with consistent icons and tone. Canonical data is in [`shared/landings/features.ts`](../shared/landings/features.ts).
 
-- **React Vite**: React 19, Vite 8, React Router 7, TypeScript, ESLint + Prettier, feature-based structure.
-- **Next.js**: Next.js 16 App Router, TypeScript, feature-based structure, login example, ESLint + Prettier.
-- **Remix**: React Router v7, TypeScript, ESLint + Prettier, fast builds.
-- **Astro**: Astro 7, static output, partial hydration, TypeScript.
+- **React Vite**: Vite, React, React Router v7, TypeScript + ESLint + Prettier, feature-based structure, addon ready.
+- **Next.js**: Next.js App Router, React, TypeScript + ESLint + Prettier, feature-based structure, login example, addon ready.
+- **Remix**: React Router v7, React, TypeScript, Vite, feature-based structure, addon ready.
+- **Astro**: Astro, React-ready, TypeScript, feature-based structure, static output, addon ready.
+- **WebExtension**: Browser extension shell, React + Vite, TypeScript, feature-based structure, CNA identity, addon ready.
 
 ### Documentation links
 
-Link to the generated docs folder using relative paths:
+Link to the generated docs folder using root-absolute paths:
 
-- `docs/README.md`
-- `docs/PROJECT_STRUCTURE.md`
-- `docs/COMPONENTS_AND_STYLING.md`
-- `docs/STATE_MANAGEMENT.md`
+- `/docs/README.md`
+- `/docs/PROJECT_STRUCTURE.md`
+- `/docs/COMPONENTS_AND_STYLING.md`
+- `/docs/STATE_MANAGEMENT.md`
 
 Use a simple link with a label and an arrow. A shared `DocsLink` helper is optional when the template already has a component library installed.
 
@@ -266,7 +267,7 @@ Use a simple link with a label and an arrow. A shared `DocsLink` helper is optio
 
 ### Astro
 
-- Use scoped `<style>` inside `index.astro`.
+- Use `<style is:global>` inside `index.astro`.
 - Use CSS variables on `:root` for theming.
 
 ### WebExtension
diff --git a/docs/DEFAULT_LANDING_GUIDE.md b/docs/DEFAULT_LANDING_GUIDE.md
index 2533a423..92f82abd 100644
--- a/docs/DEFAULT_LANDING_GUIDE.md
+++ b/docs/DEFAULT_LANDING_GUIDE.md
@@ -31,7 +31,7 @@ Every default landing should contain:
 
 1. **Header** with the CNA mark and brand name.
 2. **Hero** with an eyebrow, project name, one-line description, primary CTA, and secondary docs link.
-3. **Feature cards** (3–6 items) highlighting what the template includes.
+3. **Feature cards** (6 items) highlighting what the template includes.
 4. **Documentation links** pointing to `docs/README.md`, `docs/PROJECT_STRUCTURE.md`, `docs/COMPONENTS_AND_STYLING.md`, and `docs/STATE_MANAGEMENT.md`.
 5. **Footer** with a link back to `create-awesome-node-app` on npm.
 
@@ -80,7 +80,7 @@ Respect `prefers-reduced-motion` by collapsing animation and transition duration
 
 ### CTAs
 
-Primary CTA should point to the main editable file of the template (e.g. `src/pages/Landing.tsx`, `src/app/page.tsx`). The secondary CTA should link to `./docs/README.md`.
+Primary CTA should be a non-navigable `<span>` with a `<code>` snippet showing the main editable file of the template (e.g. `src/pages/Landing.tsx`). The secondary CTA should link to `/docs/README.md`.
 
 ### Interpolation in `.template` files
 
@@ -104,16 +104,35 @@ className={`${styles.button} ${styles.buttonPrimary}`}
 | `nextjs-starter` | `src/app/page.tsx.template`, `page.module.css`, `globals.css` | CSS Modules | Use `Image` with `unoptimized` for SVG; add `favicon.svg` to `src/app/` |
 | `nextjs-saas-ai-starter` | Brand component only | Existing design system | Full SaaS landing out of scope; align fallback logo only |
 | `remix-starter` | `app/routes/_index.tsx.template`, `app/styles/landing.css` | Plain CSS + import | Add `app/types/css.d.ts` for CSS side-effect imports |
-| `astro-starter` | `src/pages/index.astro` | Scoped global `<style>` | Copy SVG mark/favicon to `public/` |
+| `astro-starter` | `src/pages/index.astro` | Global `<style is:global>` | Copy SVG mark/favicon to `public/` |
 | `webextension-react-vite-starter` | `src/newtab/Newtab.tsx.template`, `src/popup/Popup.tsx.template` | Plain CSS | Keep popup compact; newtab can use full landing layout |
 | `turborepo-starter` | `apps/playground/src/stories/Introduction.stories.mdx` | Storybook docs | Update intro copy and page styling only |
 
 ---
 
-## 6. Testing checklist
+## 6. CI automation
+
+Landing pages are checked automatically on every PR:
+
+- **`landing-audit`** — statically verifies feature card count, docs link paths, CSS token usage, reduced-motion support, and CTA structure. Runs as part of `smoke-test.yml`.
+- **`landing-visual`** — Playwright screenshot comparison for dark mode, light mode, and reduced-motion across all UI templates. Blocking on PRs that touch landing or asset files.
+- **`validate-registry`** — `scripts/validate-templates.js` checks schema, slugs, and directory references.
+
+To update visual baselines locally:
+
+```bash
+cd scripts/landing-visual
+npm ci
+UPDATE_SNAPSHOTS=true npx playwright test --project=chromium
+# Commit the updated __screenshots__/ baselines
+```
+
+## 8. Updating the system
 
 For every new or updated landing:
 
+- [ ] CI landing-audit passes.
+- [ ] CI visual regression passes (or baselines updated intentionally).
 - [ ] `CI=true npx create-awesome-node-app@latest <test-dir> -t "file://...?subdir=templates/<name>"` succeeds.
 - [ ] `npm run lint` passes.
 - [ ] `npm run type-check` passes.
@@ -124,17 +143,18 @@ For every new or updated landing:
 
 ---
 
-## 7. Updating the system
+## 9. Updating the system
 
 1. Open an issue describing the change and affected templates.
 2. Update `shared/assets/` and `DEFAULT_LANDING_DESIGN.md` first.
-3. Copy assets and update each affected landing.
-4. Run the template-specific checklist above.
-5. Run the full CI matrix before merging.
+3. Copy assets and update each affected landing (or run `node scripts/sync-assets.js`).
+4. Run `node scripts/landing-audit.js` and `node scripts/validate-templates.js`.
+5. Update visual baselines if the landing appearance changed: `cd scripts/landing-visual && npm ci && UPDATE_SNAPSHOTS=true npx playwright test --project=chromium`.
+6. Run the full CI matrix before merging.
 
 ---
 
-## 8. Related documents
+## 10. Related documents
 
 - [`DEFAULT_LANDING_DESIGN.md`](./DEFAULT_LANDING_DESIGN.md) — tokens, typography, motion, logo rules
 - [`docs/TESTING.md`](./TESTING.md) — local testing commands and CI details
diff --git a/docs/MAINTENANCE_RUNBOOK.md b/docs/MAINTENANCE_RUNBOOK.md
index 5b678e1b..91444324 100644
--- a/docs/MAINTENANCE_RUNBOOK.md
+++ b/docs/MAINTENANCE_RUNBOOK.md
@@ -191,6 +191,8 @@ npm run lint
 | [docs/AUTHORING.md](./AUTHORING.md) | File conventions, EJS, `package/index.js`, `customOptions` |
 | [docs/TESTING.md](./TESTING.md) | Local test commands |
 | [docs/MAINTENANCE_TEMPLATES.md](./MAINTENANCE_TEMPLATES.md) | Working with templates and extensions |
+| [docs/DEFAULT_LANDING_GUIDE.md](./DEFAULT_LANDING_GUIDE.md) | Building and maintaining default landing pages |
+| [docs/DEFAULT_LANDING_DESIGN.md](./DEFAULT_LANDING_DESIGN.md) | Design tokens, typography, and motion |
 | [docs/MAINTENANCE_DEPENDENCIES.md](./MAINTENANCE_DEPENDENCIES.md) | Updating and resolving dependencies |
 | [docs/MAINTENANCE_SECURITY.md](./MAINTENANCE_SECURITY.md) | Security alerts, audits, Dependabot |
 | [docs/MAINTENANCE_CI.md](./MAINTENANCE_CI.md) | CI workflows, troubleshooting, YAML/JS scripts |
diff --git a/extensions/react-tailwindcss/package.json b/extensions/react-tailwindcss/package.json
index 63580daa..091453c8 100644
--- a/extensions/react-tailwindcss/package.json
+++ b/extensions/react-tailwindcss/package.json
@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "@tailwindcss/postcss": "^4.3.2",
     "tailwindcss": "^4.3.2",
     "postcss": "^8.4.47",
     "autoprefixer": "^10.4.20"
diff --git a/extensions/react-tailwindcss/postcss.config.js.template b/extensions/react-tailwindcss/postcss.config.js.template
index 5201f1d8..71f3fe17 100644
--- a/extensions/react-tailwindcss/postcss.config.js.template
+++ b/extensions/react-tailwindcss/postcss.config.js.template
@@ -1,7 +1,7 @@
 /** PostCSS Config */
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 };
diff --git a/scripts/landing-audit.js b/scripts/landing-audit.js
new file mode 100755
index 00000000..2ca2bb16
--- /dev/null
+++ b/scripts/landing-audit.js
@@ -0,0 +1,225 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+const TEMPLATES_DIR = path.join(__dirname, '..', 'templates');
+
+const UI_TEMPLATES = [
+  {
+    name: 'react-vite-starter',
+    entry: '[src]/pages/Landing.tsx.template',
+    cssEntry: '[src]/pages/Landing.css',
+    ctaFile: '<%= srcDir %>/pages/Landing.tsx',
+  },
+  {
+    name: 'nextjs-starter',
+    entry: '[src]/app/page.tsx.template',
+    cssEntry: '[src]/app/page.module.css',
+    ctaFile: '<%= srcDir %>/app/page.tsx',
+  },
+  {
+    name: 'remix-starter',
+    entry: 'app/routes/_index.tsx.template',
+    cssEntry: 'app/styles/landing.css',
+    ctaFile: 'app/routes/_index.tsx',
+  },
+  {
+    name: 'astro-starter',
+    entry: 'src/pages/index.astro',
+    cssEntry: null,
+    ctaFile: 'src/pages/index.astro',
+  },
+  {
+    name: 'webextension-react-vite-starter',
+    entry: '[src]/newtab/Newtab.tsx.template',
+    cssEntry: '[src]/newtab/Newtab.css',
+    ctaFile: '<%= srcDir %>/newtab/Newtab.tsx',
+  },
+];
+
+const ALLOWED_CTA_ELEMENTS = ['span'];
+const HARDCODED_PATTERNS = [
+  /rgba\(245\s*,\s*158\s*,\s*11/,
+  /#f59e0b(?!\s*;)/,
+  /#d97706/,
+  /#0d9488/,
+];
+
+let hasErrors = false;
+
+function error(template, message) {
+  console.error(`  ERROR  [${template}] ${message}`);
+  hasErrors = true;
+}
+
+function success(template, message) {
+  console.log(`  OK     [${template}] ${message}`);
+}
+
+function extractBalancedBlock(str, startIndex) {
+  let depth = 0;
+  let i = startIndex;
+  while (i < str.length) {
+    if (str[i] === '{') depth++;
+    if (str[i] === '}') { depth--; if (depth === 0) return str.slice(startIndex + 1, i); }
+    i++;
+  }
+  return '';
+}
+
+function readFile(templateDir, filePath) {
+  const fullPath = path.join(templateDir, filePath);
+  if (!fs.existsSync(fullPath)) return null;
+  return fs.readFileSync(fullPath, 'utf8');
+}
+
+function auditTemplate(config) {
+  const templateDir = path.join(TEMPLATES_DIR, config.name);
+  const content = readFile(templateDir, config.entry);
+
+  if (!content) {
+    error(config.name, `Entry file not found: ${config.entry}`);
+    return;
+  }
+
+  // 1. Feature cards: count === 6
+  const cardDataStart = content.match(/const\s+features\s*[=:]/);
+  const cardDataEnd = content.match(/const\s+docs\s*[=:]/);
+  const featuresSlice = cardDataStart && cardDataEnd
+    ? content.slice(cardDataStart.index, cardDataEnd.index)
+    : content;
+  const cardMatches = featuresSlice.match(/icon:\s*['"][^'"]*['"]/g);
+  const cardCount = cardMatches ? cardMatches.length : 0;
+  if (cardCount !== 6) {
+    error(config.name, `Expected 6 feature cards, found ${cardCount}`);
+  } else {
+    success(config.name, `Feature cards: ${cardCount}`);
+  }
+
+  // 2. Docs links: all hrefs start with /docs/
+  const docLinkPattern = /href:\s*['"](\.\/docs\/|docs\/)/g;
+  if (docLinkPattern.test(content)) {
+    error(config.name, 'Docs links use relative path (./docs/ or docs/) instead of root-absolute /docs/');
+  } else {
+    success(config.name, 'Docs links use root-absolute /docs/');
+  }
+
+  // 3a. CTA "Start editing": element should NOT be <a href>
+  const ctaPattern = /<a\s[^>]*href=[^>]*>[\s\n]*Start editing/g;
+  if (ctaPattern.test(content)) {
+    error(config.name, 'CTA "Start editing" is an <a href> — should be a <span>');
+  } else {
+    success(config.name, 'CTA "Start editing" is not a navigable link');
+  }
+
+  // 3b. CTA should reference the correct editable file
+  if (config.ctaFile) {
+    const filePath = config.ctaFile.replace('<%= srcDir %>', '');
+    const ctaPattern = filePath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const ctaHasFileRegex = new RegExp(ctaPattern);
+    if (!ctaHasFileRegex.test(content)) {
+      error(config.name, `CTA does not reference the correct editable file: ${config.ctaFile}`);
+    } else {
+      success(config.name, `CTA references correct file: ${config.ctaFile}`);
+    }
+  }
+
+  // 4. CSS audit (check if CSS exists and has token usage)
+  if (config.cssEntry) {
+    const css = readFile(templateDir, config.cssEntry);
+    if (css) {
+      // Check for hardcoded colors outside :root blocks
+      const outsideRoot = css.replace(/:\s*root\s*\{[^}]*\}/g, '');
+      for (const pattern of HARDCODED_PATTERNS) {
+        if (pattern.test(outsideRoot)) {
+          error(config.name, `Hardcoded color found outside :root: ${pattern}`);
+          break;
+        }
+      }
+
+      // Check for prefers-reduced-motion
+      if (!css.includes('prefers-reduced-motion')) {
+        error(config.name, 'Missing @media (prefers-reduced-motion: reduce)');
+      }
+
+      // Check for --cna-amber-soft in light mode
+      const lightMediaMatch = css.match(/@media\s*\(prefers-color-scheme:\s*light\)\s*\{/);
+      if (lightMediaMatch) {
+        const blockContent = extractBalancedBlock(css, lightMediaMatch.index + lightMediaMatch[0].length - 1);
+        if (!blockContent.includes('--cna-amber-soft')) {
+          error(config.name, 'Light mode block does not override --cna-amber-soft');
+        }
+      }
+
+      // Check animation selector includes the card class
+      if (config.name === 'react-vite-starter' || config.name === 'remix-starter' || config.name === 'webextension-react-vite-starter') {
+        const staggerSelector = css.match(/\.(?:cna-)?landing__(?:hero|features|docs|footer|card)[^}]*\{[^}]*animation[^}]*\}/);
+        if (staggerSelector) {
+          const hasCard = css.match(/\.(?:cna-)?landing__card[^}]*\{[^}]*animation-delay[^}]*\}/);
+          if (!hasCard) {
+            error(config.name, 'Animation stagger selector does not include card class');
+          } else {
+            success(config.name, 'Animation stagger includes card class');
+          }
+        }
+      }
+
+      // Check for token-based gradient in --primary button
+      const hasTokenGradient = css.match(/linear-gradient[^}]*var\(--cna-amber\)[^}]*var\(--cna-amber-dark\)[^}]*var\(--cna-teal\)/);
+      if (!hasTokenGradient) {
+        const hasButtonGradient = css.match(/\.(?:cna-)?landing__button--primary\s*\{[^}]*background:\s*linear-gradient[^}]*\}/);
+        if (hasButtonGradient && !css.includes('var(--cna-amber)')) {
+          error(config.name, 'Primary button gradient uses hardcoded colors instead of --cna-* tokens');
+        }
+      }
+    }
+  }
+
+  // Astro-specific: check inline styles
+  if (config.name === 'astro-starter') {
+    const astroCSS = content.match(/<style[^>]*>([\s\S]*)<\/style>/);
+    if (astroCSS) {
+      const styleContent = astroCSS[1];
+      const outsideRoot = styleContent.replace(/:\s*root\s*\{[^}]*\}/g, '');
+      for (const pattern of HARDCODED_PATTERNS) {
+        if (pattern.test(outsideRoot)) {
+          error(config.name, `Hardcoded color found in inline <style> outside :root: ${pattern}`);
+          break;
+        }
+      }
+    }
+  }
+
+  // Logo check for webext (imports from @/assets/img/)
+  if (config.name === 'webextension-react-vite-starter') {
+    if (!content.includes("import logo from")) {
+      error(config.name, 'Missing logo import (should import from @/assets/img/logo.svg)');
+    }
+  } else {
+    if (!content.includes('/logo.svg')) {
+      error(config.name, 'Missing logo reference as /logo.svg');
+    }
+  }
+}
+
+function main() {
+  console.log('Landing Audit\n');
+  console.log('Checking', UI_TEMPLATES.length, 'UI templates...\n');
+
+  for (const config of UI_TEMPLATES) {
+    console.log(`--- ${config.name} ---`);
+    auditTemplate(config);
+    console.log();
+  }
+
+  if (hasErrors) {
+    console.log('Audit FAILED — fix errors above.\n');
+    process.exit(1);
+  } else {
+    console.log('All landings passed audit!\n');
+    process.exit(0);
+  }
+}
+
+main();
diff --git a/scripts/landing-visual/landing.spec.ts b/scripts/landing-visual/landing.spec.ts
new file mode 100644
index 00000000..6f934f84
--- /dev/null
+++ b/scripts/landing-visual/landing.spec.ts
@@ -0,0 +1,31 @@
+import { test } from '@playwright/test';
+import path from 'path';
+
+const TEMPLATE = process.env.TEMPLATE || 'unknown';
+const LANDING_PATH = process.env.LANDING_PATH || '/';
+const OUTPUT_DIR = path.resolve(__dirname, '__screenshots__');
+
+test.describe(`Landing page visual regression - ${TEMPLATE}`, () => {
+  const filename = (suffix: string) => path.join(OUTPUT_DIR, `${TEMPLATE}-${suffix}.png`);
+
+  test('dark mode', async ({ page }) => {
+    await page.emulateMedia({ colorScheme: 'dark', reducedMotion: 'no-preference' });
+    await page.goto(LANDING_PATH);
+    await page.waitForLoadState('networkidle');
+    await page.screenshot({ path: filename('dark'), fullPage: true });
+  });
+
+  test('light mode', async ({ page }) => {
+    await page.emulateMedia({ colorScheme: 'light', reducedMotion: 'no-preference' });
+    await page.goto(LANDING_PATH);
+    await page.waitForLoadState('networkidle');
+    await page.screenshot({ path: filename('light'), fullPage: true });
+  });
+
+  test('reduced motion', async ({ page }) => {
+    await page.emulateMedia({ colorScheme: 'dark', reducedMotion: 'reduce' });
+    await page.goto(LANDING_PATH);
+    await page.waitForLoadState('networkidle');
+    await page.screenshot({ path: filename('motion'), fullPage: true });
+  });
+});
diff --git a/scripts/landing-visual/package.json b/scripts/landing-visual/package.json
new file mode 100644
index 00000000..d369d070
--- /dev/null
+++ b/scripts/landing-visual/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "cna-landing-visual",
+  "private": true,
+  "scripts": {
+    "test": "playwright test",
+    "test:update": "UPDATE_SNAPSHOTS=true playwright test",
+    "test:ui": "playwright test --ui"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.0"
+  }
+}
diff --git a/scripts/landing-visual/playwright.config.ts b/scripts/landing-visual/playwright.config.ts
new file mode 100644
index 00000000..dc73a5c4
--- /dev/null
+++ b/scripts/landing-visual/playwright.config.ts
@@ -0,0 +1,25 @@
+import { defineConfig } from '@playwright/test';
+
+const BASE_URL = process.env.BASE_URL || 'http://localhost:5173';
+
+export default defineConfig({
+  testDir: '.',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 1 : 0,
+  workers: 1,
+  reporter: process.env.CI ? 'github' : 'list',
+  snapshotDir: '__screenshots__',
+  updateSnapshots: process.env.UPDATE_SNAPSHOTS === 'true' ? 'all' : 'none',
+  use: {
+    baseURL: BASE_URL,
+    trace: process.env.CI ? 'retain-on-failure' : 'off',
+    screenshot: 'only-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { browserName: 'chromium' },
+    },
+  ],
+});
diff --git a/scripts/sync-assets.js b/scripts/sync-assets.js
new file mode 100644
index 00000000..cb1a490c
--- /dev/null
+++ b/scripts/sync-assets.js
@@ -0,0 +1,72 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+
+const SHARED_ASSETS = path.join(__dirname, '..', 'shared', 'assets');
+const TEMPLATES_DIR = path.join(__dirname, '..', 'templates');
+
+const assetMap = [
+  // { asset: source, targetPath: relative to template dir }
+  { asset: 'logo-mark.svg', targetPath: 'public/logo.svg' },
+  { asset: 'favicon.svg', targetPath: 'public/favicon.svg' },
+];
+
+const templateOverrides = {
+  'webextension-react-vite-starter': [
+    { asset: 'logo-mark.svg', targetPath: '[src]/assets/img/logo.svg' },
+  ],
+  'nextjs-starter': [
+    { asset: 'logo-mark.svg', targetPath: 'public/logo.svg' },
+    { asset: 'favicon.svg', targetPath: '[src]/app/favicon.svg' },
+  ],
+  'nextjs-saas-ai-starter': [
+    { asset: 'logo-mark.svg', targetPath: 'public/logo.svg' },
+  ],
+};
+
+function syncAssets() {
+  const templates = fs.readdirSync(TEMPLATES_DIR, { withFileTypes: true })
+    .filter(d => d.isDirectory())
+    .map(d => d.name);
+
+  let copied = 0;
+  let errors = 0;
+
+  for (const template of templates) {
+    const templateDir = path.join(TEMPLATES_DIR, template);
+    const overrides = templateOverrides[template] || [];
+
+    const mappings = [...assetMap, ...overrides];
+
+    for (const { asset, targetPath } of mappings) {
+      const sourceFile = path.join(SHARED_ASSETS, asset);
+      const targetFile = path.join(templateDir, targetPath);
+
+      if (!fs.existsSync(sourceFile)) {
+        console.error(`  SKIP  ${asset} → ${template}/${targetPath} (source not found)`);
+        errors++;
+        continue;
+      }
+
+      const targetDir = path.dirname(targetFile);
+      if (!fs.existsSync(targetDir)) {
+        fs.mkdirSync(targetDir, { recursive: true });
+      }
+
+      try {
+        fs.copyFileSync(sourceFile, targetFile);
+        console.log(`  COPY  ${asset} → ${template}/${targetPath}`);
+        copied++;
+      } catch (err) {
+        console.error(`  FAIL  ${asset} → ${template}/${targetPath}: ${err.message}`);
+        errors++;
+      }
+    }
+  }
+
+  console.log(`\nDone: ${copied} asset(s) copied, ${errors} error(s).`);
+  process.exit(errors > 0 ? 1 : 0);
+}
+
+syncAssets();
diff --git a/shared/assets/favicon.svg b/shared/assets/favicon.svg
index ba6a6a12..455d826b 100644
--- a/shared/assets/favicon.svg
+++ b/shared/assets/favicon.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle" role="img">
   <title id="faviconTitle">Create Awesome Node App</title>
   <defs>
     <linearGradient id="cnaFav" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse">
diff --git a/shared/assets/logo-mark-dark.svg b/shared/assets/logo-mark-dark.svg
index 24e04937..d24f37b6 100644
--- a/shared/assets/logo-mark-dark.svg
+++ b/shared/assets/logo-mark-dark.svg
@@ -2,12 +2,12 @@
   <title id="logoTitle">Create Awesome Node App</title>
   <desc id="logoDesc">A cozy nest of three connected nodes forming the CNA mark on a dark background.</desc>
   <defs>
-    <linearGradient id="cnaNest" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
+    <linearGradient id="cnaNestDark" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
       <stop offset="0%" stop-color="#fbbf24"/>
       <stop offset="55%" stop-color="#f59e0b"/>
       <stop offset="100%" stop-color="#14b8a6"/>
     </linearGradient>
-    <linearGradient id="cnaDotTop" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
+    <linearGradient id="cnaDotTopDark" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
       <stop offset="0%" stop-color="#fbbf24"/>
       <stop offset="100%" stop-color="#f59e0b"/>
     </linearGradient>
@@ -15,13 +15,13 @@
   <rect width="64" height="64" rx="16" fill="#0f172a"/>
   <path
     d="M32 10c-1.6 0-3.1.8-4 2.1l-11 17.6c-1.8 2.9-.3 6.7 3 7.5V46c0 3.3 2.7 6 6 6h12c3.3 0 6-2.7 6-6V37.2c3.3-.8 4.8-4.6 3-7.5L36 12.1C35.1 10.8 33.6 10 32 10Z"
-    stroke="url(#cnaNest)"
+    stroke="url(#cnaNestDark)"
     stroke-width="5"
     stroke-linecap="round"
     stroke-linejoin="round"
     fill="none"
   />
-  <circle cx="32" cy="27" r="5" fill="url(#cnaDotTop)"/>
+  <circle cx="32" cy="27" r="5" fill="url(#cnaDotTopDark)"/>
   <circle cx="20" cy="43" r="5" fill="#14b8a6"/>
   <circle cx="44" cy="43" r="5" fill="#f59e0b"/>
 </svg>
diff --git a/shared/assets/logo-mark.svg b/shared/assets/logo-mark.svg
index d1914673..6f77d55e 100644
--- a/shared/assets/logo-mark.svg
+++ b/shared/assets/logo-mark.svg
@@ -2,7 +2,7 @@
   <title id="logoTitle">Create Awesome Node App</title>
   <desc id="logoDesc">A cozy nest of three connected nodes forming the CNA mark.</desc>
   <defs>
-    <linearGradient id="cnaNest" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
+    <linearGradient id="cnaNestMark" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
       <stop offset="0%" stop-color="#f59e0b"/>
       <stop offset="55%" stop-color="#d97706"/>
       <stop offset="100%" stop-color="#0d9488"/>
@@ -11,7 +11,7 @@
   <!-- Cozy nest: three rounded nodes connected by thick strokes -->
   <path
     d="M32 10c-1.6 0-3.1.8-4 2.1l-11 17.6c-1.8 2.9-.3 6.7 3 7.5V46c0 3.3 2.7 6 6 6h12c3.3 0 6-2.7 6-6V37.2c3.3-.8 4.8-4.6 3-7.5L36 12.1C35.1 10.8 33.6 10 32 10Z"
-    stroke="url(#cnaNest)"
+    stroke="url(#cnaNestMark)"
     stroke-width="5"
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/shared/assets/logo-wordmark-dark.svg b/shared/assets/logo-wordmark-dark.svg
new file mode 100644
index 00000000..dfa32779
--- /dev/null
+++ b/shared/assets/logo-wordmark-dark.svg
@@ -0,0 +1,40 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 64" fill="none" aria-labelledby="wordmarkTitle wordmarkDesc" role="img">
+  <title id="wordmarkTitle">Create Awesome Node App</title>
+  <desc id="wordmarkDesc">CNA wordmark combining a cozy node nest mark with the project name on a dark background.</desc>
+  <defs>
+    <linearGradient id="cnaNestWordDark" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#fbbf24"/>
+      <stop offset="55%" stop-color="#f59e0b"/>
+      <stop offset="100%" stop-color="#14b8a6"/>
+    </linearGradient>
+    <linearGradient id="cnaAccentWordDark" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#fbbf24"/>
+      <stop offset="100%" stop-color="#14b8a6"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Mark -->
+  <g transform="translate(0 0)">
+    <path
+      d="M32 10c-1.6 0-3.1.8-4 2.1l-11 17.6c-1.8 2.9-.3 6.7 3 7.5V46c0 3.3 2.7 6 6 6h12c3.3 0 6-2.7 6-6V37.2c3.3-.8 4.8-4.6 3-7.5L36 12.1C35.1 10.8 33.6 10 32 10Z"
+      stroke="url(#cnaNestWordDark)"
+      stroke-width="5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+    />
+    <circle cx="32" cy="27" r="5" fill="url(#cnaAccentWordDark)"/>
+    <circle cx="20" cy="43" r="5" fill="#14b8a6"/>
+    <circle cx="44" cy="43" r="5" fill="#f59e0b"/>
+  </g>
+
+  <!-- Text -->
+  <g transform="translate(80 14)" aria-hidden="true">
+    <text x="0" y="30" fill="#f8fafc" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="28" font-weight="800" letter-spacing="-0.5">
+      Create Awesome
+    </text>
+    <text x="0" y="30" fill="url(#cnaNestWordDark)" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="28" font-weight="800" letter-spacing="-0.5">
+      <tspan dx="190">Node App</tspan>
+    </text>
+  </g>
+</svg>
diff --git a/shared/assets/logo-wordmark.svg b/shared/assets/logo-wordmark.svg
index 98903bdd..4d6d82fe 100644
--- a/shared/assets/logo-wordmark.svg
+++ b/shared/assets/logo-wordmark.svg
@@ -2,12 +2,12 @@
   <title id="wordmarkTitle">Create Awesome Node App</title>
   <desc id="wordmarkDesc">CNA wordmark combining a cozy node nest mark with the project name.</desc>
   <defs>
-    <linearGradient id="cnaNest" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
+    <linearGradient id="cnaNestWord" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
       <stop offset="0%" stop-color="#f59e0b"/>
       <stop offset="55%" stop-color="#d97706"/>
       <stop offset="100%" stop-color="#0d9488"/>
     </linearGradient>
-    <linearGradient id="cnaAccent" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
+    <linearGradient id="cnaAccentWord" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
       <stop offset="0%" stop-color="#f59e0b"/>
       <stop offset="100%" stop-color="#0d9488"/>
     </linearGradient>
@@ -17,23 +17,23 @@
   <g transform="translate(0 0)">
     <path
       d="M32 10c-1.6 0-3.1.8-4 2.1l-11 17.6c-1.8 2.9-.3 6.7 3 7.5V46c0 3.3 2.7 6 6 6h12c3.3 0 6-2.7 6-6V37.2c3.3-.8 4.8-4.6 3-7.5L36 12.1C35.1 10.8 33.6 10 32 10Z"
-      stroke="url(#cnaNest)"
+      stroke="url(#cnaNestWord)"
       stroke-width="5"
       stroke-linecap="round"
       stroke-linejoin="round"
       fill="none"
     />
-    <circle cx="32" cy="27" r="5" fill="url(#cnaAccent)"/>
+    <circle cx="32" cy="27" r="5" fill="url(#cnaAccentWord)"/>
     <circle cx="20" cy="43" r="5" fill="#0d9488"/>
     <circle cx="44" cy="43" r="5" fill="#d97706"/>
   </g>
 
   <!-- Text -->
-  <g transform="translate(80 14)">
+  <g transform="translate(80 14)" aria-hidden="true">
     <text x="0" y="30" fill="#1f2937" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="28" font-weight="800" letter-spacing="-0.5">
       Create Awesome
     </text>
-    <text x="0" y="30" fill="url(#cnaNest)" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="28" font-weight="800" letter-spacing="-0.5">
+    <text x="0" y="30" fill="url(#cnaNestWord)" font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="28" font-weight="800" letter-spacing="-0.5">
       <tspan dx="190">Node App</tspan>
     </text>
   </g>
diff --git a/shared/landings/features.ts b/shared/landings/features.ts
new file mode 100644
index 00000000..4ee68d81
--- /dev/null
+++ b/shared/landings/features.ts
@@ -0,0 +1,112 @@
+export interface Feature {
+  icon: string;
+  title: string;
+  description: string;
+}
+
+export interface DocsLink {
+  label: string;
+  href: string;
+}
+
+export interface TemplateLandingData {
+  eyebrow: string;
+  lead: string;
+  features: Feature[];
+  docs: DocsLink[];
+}
+
+export const reactVite: TemplateLandingData = {
+  eyebrow: 'Your project is ready',
+  lead: 'A cozy React + Vite starter with a feature-based foundation. Everything you need to start building your next screen.',
+  features: [
+    { icon: '⚡', title: 'Vite', description: 'Instant HMR and a fast, opinionated build pipeline.' },
+    { icon: '⚛️', title: 'React', description: 'Latest React with modern patterns and future-ready APIs.' },
+    { icon: '🧭', title: 'React Router v7', description: 'Client-side routing already wired for nested routes.' },
+    { icon: '🛡️', title: 'TypeScript + ESLint + Prettier', description: 'Static typing and consistent, automated code style.' },
+    { icon: '📦', title: 'Feature-based structure', description: 'Scale by co-locating routes, state, and components.' },
+    { icon: '🧩', title: 'Addon ready', description: 'Layer UI libraries, state tools, testing, and deployment.' },
+  ],
+  docs: [
+    { label: 'Project overview', href: '/docs/README.md' },
+    { label: 'Project structure', href: '/docs/PROJECT_STRUCTURE.md' },
+    { label: 'Components & styling', href: '/docs/COMPONENTS_AND_STYLING.md' },
+    { label: 'State management', href: '/docs/STATE_MANAGEMENT.md' },
+  ],
+};
+
+export const nextjs: TemplateLandingData = {
+  eyebrow: 'Your project is ready',
+  lead: 'A cozy Next.js starter with a feature-based foundation. Everything you need to start building your next page.',
+  features: [
+    { icon: '▲', title: 'Next.js App Router', description: 'File-system routing, layouts, and latest React features out of the box.' },
+    { icon: '⚛️', title: 'React', description: 'Latest React with modern patterns and future-ready APIs.' },
+    { icon: '🛡️', title: 'TypeScript + ESLint + Prettier', description: 'Static typing and consistent, automated code style.' },
+    { icon: '📦', title: 'Feature-based structure', description: 'Scale by co-locating routes, state, and components.' },
+    { icon: '🔐', title: 'Login example', description: 'A ready-made auth route to kickstart protected flows.' },
+    { icon: '🧩', title: 'Addon ready', description: 'Layer UI libraries, state tools, testing, and deployment.' },
+  ],
+  docs: [
+    { label: 'Project overview', href: '/docs/README.md' },
+    { label: 'Project structure', href: '/docs/PROJECT_STRUCTURE.md' },
+    { label: 'Components & styling', href: '/docs/COMPONENTS_AND_STYLING.md' },
+    { label: 'State management', href: '/docs/STATE_MANAGEMENT.md' },
+  ],
+};
+
+export const remix: TemplateLandingData = {
+  eyebrow: 'Your project is ready',
+  lead: 'A cozy React Router starter with feature-based folders. Everything you need to start building your next route.',
+  features: [
+    { icon: '🧭', title: 'React Router v7', description: 'Modern data APIs and fast client-side navigation.' },
+    { icon: '⚛️', title: 'React', description: 'Latest React with modern patterns and future-ready APIs.' },
+    { icon: '🛡️', title: 'TypeScript', description: 'Static typing across routes and components.' },
+    { icon: '⚡', title: 'Vite', description: 'Fast builds and instant HMR for rapid development.' },
+    { icon: '📦', title: 'Feature-based structure', description: 'Scale by co-locating routes, state, and components.' },
+    { icon: '🧩', title: 'Addon ready', description: 'Layer UI libraries, state tools, testing, and deployment.' },
+  ],
+  docs: [
+    { label: 'Project overview', href: '/docs/README.md' },
+    { label: 'Project structure', href: '/docs/PROJECT_STRUCTURE.md' },
+    { label: 'Components & styling', href: '/docs/COMPONENTS_AND_STYLING.md' },
+    { label: 'State management', href: '/docs/STATE_MANAGEMENT.md' },
+  ],
+};
+
+export const astro: TemplateLandingData = {
+  eyebrow: 'Your project is ready',
+  lead: 'A cozy Astro starter with static-first performance and a feature-based foundation.',
+  features: [
+    { icon: '🚀', title: 'Astro', description: 'Fast static sites with partial hydration and content islands.' },
+    { icon: '⚛️', title: 'React-ready', description: 'Add interactive islands with React, Preact, or Solid when needed.' },
+    { icon: '🛡️', title: 'TypeScript', description: 'Type-safe components and pages out of the box.' },
+    { icon: '📦', title: 'Feature-based structure', description: 'Organize components and pages as the project grows.' },
+    { icon: '✨', title: 'Static output', description: 'Ship pre-rendered HTML with zero runtime by default.' },
+    { icon: '🧩', title: 'Addon ready', description: 'Layer UI libraries, state tools, testing, and deployment.' },
+  ],
+  docs: [
+    { label: 'Project overview', href: '/docs/README.md' },
+    { label: 'Project structure', href: '/docs/PROJECT_STRUCTURE.md' },
+    { label: 'Components & styling', href: '/docs/COMPONENTS_AND_STYLING.md' },
+    { label: 'State management', href: '/docs/STATE_MANAGEMENT.md' },
+  ],
+};
+
+export const webext: TemplateLandingData = {
+  eyebrow: 'Your extension is ready',
+  lead: 'A cozy browser-extension starter built with React and Vite. Customize the popup, options page, background scripts, and content scripts as your product evolves.',
+  features: [
+    { icon: '🔌', title: 'Browser extension shell', description: 'Popup, options, background, and content scripts already wired.' },
+    { icon: '⚛️', title: 'React + Vite', description: 'Fast HMR and a modern component model for every extension page.' },
+    { icon: '🛡️', title: 'TypeScript', description: 'Typed APIs and extension messaging from day one.' },
+    { icon: '📦', title: 'Feature-based structure', description: 'Keep content, background, and UI organized as you grow.' },
+    { icon: '🎨', title: 'CNA identity', description: 'Cozy amber + teal palette with dark/light support.' },
+    { icon: '🧩', title: 'Addon ready', description: 'Layer state tools, storage wrappers, and deployment configs.' },
+  ],
+  docs: [
+    { label: 'Project overview', href: '/docs/README.md' },
+    { label: 'Project structure', href: '/docs/PROJECT_STRUCTURE.md' },
+    { label: 'Components & styling', href: '/docs/COMPONENTS_AND_STYLING.md' },
+    { label: 'State management', href: '/docs/STATE_MANAGEMENT.md' },
+  ],
+};
diff --git a/templates/astro-starter/docs/COMPONENTS_AND_STYLING.md b/templates/astro-starter/docs/COMPONENTS_AND_STYLING.md
new file mode 100644
index 00000000..983fe78e
--- /dev/null
+++ b/templates/astro-starter/docs/COMPONENTS_AND_STYLING.md
@@ -0,0 +1,89 @@
+# 🧱 Components And Styling
+
+## Components Best Practices
+
+### Colocate things as close as possible to where it's being used
+
+Keep components, functions, styles, state, etc. as close as possible to the component where it's being used. This will not only make your codebase more readable and easier to understand but it will also improve your application performance since it will reduce redundant re-renders on state updates.
+
+### Avoid large components with nested rendering functions
+
+Do not add multiple rendering functions inside your application, this gets out of control pretty quickly. What you should do instead is if there is a piece of UI that can be considered as a unit, is to extract it in a separate component.
+
+```javascript
+// this is very difficult to maintain as soon as the component starts growing
+function Component() {
+  function renderItems() {
+    return <ul>...</ul>;
+  }
+  return <div>{renderItems()}</div>;
+}
+
+// extract it in a separate component
+function Items() {
+  return <ul>...</ul>;
+}
+
+function Component() {
+  return (
+    <div>
+      <Items />
+    </div>
+  );
+}
+```
+
+### Stay consistent
+
+### Limit the number of props a component is accepting as input
+
+If your component is accepting too many props you might consider splitting it into multiple components or use the composition technique via children or slots.
+
+### Abstract shared components into a component library
+
+For larger projects, it is a good idea to build abstractions around all the shared components. It makes the application more consistent and easier to maintain. Identify repetitions before creating the components to avoid wrong abstractions.
+
+It is a good idea to wrap 3rd party components as well in order to adapt them to the application's needs. It might be easier to make the underlying changes in the future without affecting the application's functionality.
+
+## Component libraries
+
+Every project requires some UI components such as modals, tabs, sidebars, menus, etc. Instead of building those from scratch, you might want to use some of the existing, battle-tested component libraries.
+
+### Fully featured component libraries
+
+These component libraries come with their components fully styled.
+
+- [Chakra UI](https://chakra-ui.com/) - great library with probably the best developer experience, allows very fast prototyping with decent design defaults. Plenty of components that are very customizable and flexible with accessibility already configured out of the box.
+
+- [AntD](https://ant.design/) - another great component library that has a lot of different components. Best suitable for creating admin dashboards. However, it might be a bit difficult to change the styles in order to adapt them to a custom design.
+
+- [MUI](https://mui.com/) - the most popular component library for React. Has a lot of different components. Can be used as a styled solution by implementing Material Design or as unstyled headless component library.
+
+### Headless component libraries
+
+These component libraries come with their components unstyled. If you have a specific design system to implement, it might be easier and better solution to go with headless components that come unstyled than to adapt a styled components library such as Material UI to your needs. Some good options are:
+
+- [Reakit](https://reakit.io/)
+- [Headless UI](https://headlessui.dev/)
+- [Radix UI](https://www.radix-ui.com/)
+- [react-aria](https://react-spectrum.adobe.com/react-aria/)
+
+## Styling Solutions
+
+There are multiple ways to style a react application. Some good options are:
+
+- [tailwind](https://tailwindcss.com/)
+- [styled-components](https://styled-components.com/)
+- [emotion](https://emotion.sh/docs/introduction)
+- [stitches](https://stitches.dev/)
+- [vanilla-extract](https://github.com/seek-oss/vanilla-extract)
+- [CSS modules](https://github.com/css-modules/css-modules)
+- [linaria](https://github.com/callstack/linaria)
+
+## Good combinations
+
+Some good combinations of component library + styling
+
+- [Chakra UI](https://chakra-ui.com/) + [emotion](https://emotion.sh/docs/introduction) - The best choice for most applications
+- [Headless UI](https://headlessui.dev/) + [tailwind](https://tailwindcss.com/)
+- [Radix UI](https://www.radix-ui.com/) + [stitches](https://stitches.dev/)
diff --git a/templates/astro-starter/docs/PERFORMANCE.md b/templates/astro-starter/docs/PERFORMANCE.md
new file mode 100644
index 00000000..4fe19962
--- /dev/null
+++ b/templates/astro-starter/docs/PERFORMANCE.md
@@ -0,0 +1,43 @@
+# 🚄 Performance
+
+## Code Splitting
+
+Code splitting is a technique of splitting production JavaScript into smaller files, thus allowing the application to be only partially downloaded. Any unused code will not be downloaded until it is required by the application.
+
+Most of the time code splitting should be done on the routes level, but can also be used for other lazy loaded parts of application.
+
+Do not code split everything as it might even worsen your application's performance.
+
+## Component and state optimizations
+
+- Do not put everything in a single state. That might trigger unnecessary re-renders. Instead split the global state into multiple stores according to where it is being used.
+
+- Keep the state as close as possible to where it is being used. This will prevent re-rendering components that do not depend on the updated state.
+
+- If you have a piece of state that is initialized by an expensive computation, use the state initializer function instead of executing it directly because the expensive function will be run only once as it is supposed to. e.g:
+
+```javascript
+import { useState } from "react";
+
+// instead of this which would be executed on every re-render:
+const [state, setState] = useState(myExpensiveFn());
+
+// prefer this which is executed only once:
+const [state, setState] = useState(() => myExpensiveFn());
+```
+
+- If you develop an application that requires the state to track many elements at once, you might consider state management libraries with atomic updates such as [recoil](https://recoiljs.org/) or [jotai](https://jotai.pmnd.rs/).
+
+- If your application is expected to have frequent updates that might affect performance, consider switching from runtime styling solutions ([Chakra UI](https://chakra-ui.com/), [emotion](https://emotion.sh/docs/introduction), [styled-components](https://styled-components.com/) that generate styles during runtime) to zero runtime styling solutions ([tailwind](https://tailwindcss.com/), [linaria](https://github.com/callstack/linaria), [vanilla-extract](https://github.com/seek-oss/vanilla-extract), [CSS modules](https://github.com/css-modules/css-modules) which generate styles during build time).
+
+## Image optimizations
+
+Consider lazy loading images that are not in the viewport.
+
+Use modern image formats such as WEBP for faster image loading.
+
+Use `srcset` to load the most optimal image for the clients screen size.
+
+## Web vitals
+
+Since Google started taking web vitals in account when indexing websites, you should keep an eye on web vitals scores from [Lighthouse](https://web.dev/measure/) and [Pagespeed Insights](https://pagespeed.web.dev/).
diff --git a/templates/astro-starter/docs/PROJECT_CONFIGURATION.md.template b/templates/astro-starter/docs/PROJECT_CONFIGURATION.md.template
new file mode 100644
index 00000000..a0038d7c
--- /dev/null
+++ b/templates/astro-starter/docs/PROJECT_CONFIGURATION.md.template
@@ -0,0 +1,55 @@
+# ⚙️ Project Configuration
+
+The application has been bootstrapped using [create-awesome-node-app](https://www.npmjs.com/package/create-awesome-node-app) for simplicity reasons. It allows us to create applications quickly without dealing with a complex tooling setup such as bundling, transpiling etc.
+
+You should always configure and use the following tools:
+
+## ESLint
+
+ESLint is a linting tool for JavaScript. By providing specific configuration defined in the`eslint.config.mjs` file it prevents developers from making silly mistakes in their code and enforces consistency in the codebase.
+
+[ESLint Configuration](../eslint.config.mjs)
+
+## Prettier
+
+This is a great tool for formatting code. It enforces a consistent code style across your entire codebase. By utilizing the "format on save" feature in your IDE you can automatically format the code based on the configuration provided in the `.prettierrc.js` file. It will also give you good feedback when something is wrong with the code. If the auto-format doesn't work, something is wrong with the code.
+
+[Prettier Configuration](../.prettierrc.js)
+
+## TypeScript
+
+ESLint is great for catching some of the bugs related to the language, but since JavaScript is a dynamic language ESLint cannot check data that run through the applications, which can lead to bugs, especially on larger projects. That is why TypeScript should be used. It is very useful during large refactors because it reports any issues you might miss otherwise. When refactoring, change the type declaration first, then fix all the TypeScript errors throughout the project and you are done. One thing you should keep in mind is that TypeScript does not protect your application from failing during runtime, it only does type checking during build time, but it increases development confidence drastically anyways. Here is a [great resource on using TypeScript with React](https://react-typescript-cheatsheet.netlify.app/).
+
+## Husky
+
+Husky is a tool for executing git hooks. Use Husky to run your code validations before every commit, thus making sure the code is in the best shape possible at any point of time and no faulty commits get into the repo. It can run linting, code formatting and type checking, etc. before it allows pushing the code. You can check how to configure it [here](https://typicode.github.io/husky/#/?id=usage).
+
+## Absolute imports
+
+Absolute imports should always be configured and used because it makes it easier to move files around and avoid messy import paths such as `../../../Component`. Wherever you move the file, all the imports will remain intact. Here is how to configure it:
+
+For JavaScript (`jsconfig.json`) projects:
+
+```json
+"compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "<%= projectImportPath%>*": ["./<%= srcDir%>/*"]
+    }
+  }
+```
+
+For TypeScript (`tsconfig.json`) projects:
+
+```json
+"compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "<%= projectImportPath%>*": ["./<%= srcDir%>/*"]
+    }
+  }
+```
+
+[Paths Configuration](../tsconfig.json)
+
+It is also possible to define multiple paths for various folders(such as `<%= projectImportPath%>components`, `<%= projectImportPath%>hooks`, etc.), but using `<%= projectImportPath%>*` works very well because it is short enough so there is no need to configure multiple paths and it differs from other dependency modules so there is no confusion in what comes from `node_modules` and what is our source folder. That means that anything in the `src` folder can be accessed via `@`, e.g some file that lives in `<%= srcDir%>/components/MyComponent` can be accessed using `<%= projectImportPath%>components/MyComponent`.
diff --git a/templates/astro-starter/docs/PROJECT_STRUCTURE.md.template b/templates/astro-starter/docs/PROJECT_STRUCTURE.md.template
new file mode 100644
index 00000000..3af6f7ff
--- /dev/null
+++ b/templates/astro-starter/docs/PROJECT_STRUCTURE.md.template
@@ -0,0 +1,178 @@
+# 🗄️ Project Structure
+
+This project follows a Feature-Based Architecture adapted for Astro, combining the best practices of Feature-Based Architecture with Astro conventions. The main goal is to organize code around business capabilities while leveraging Astro's file-based routing and islands architecture.
+
+## Architecture Overview
+
+The codebase is organized into three main categories:
+
+1. **Pages** (`<%= srcDir%>/pages/`) - Astro file-based routing
+2. **Features** (`<%= srcDir%>/features/`) - Business capabilities
+3. **Shared Infrastructure** (`<%= srcDir%>/shared/`) - Common utilities and components
+
+### Directory Structure
+
+```sh
+<%= srcDir%>
+|
++-- pages # Astro file-based routing
+|   |
+|   +-- index.astro # Home page
+|   +-- login.astro # Login page
+|   +-- register.astro # Register page
+|   +-- dashboard.astro # Dashboard page
+|   +-- layouts # Layout components
+|   |   +-- BaseLayout.astro
+|   |   +-- AuthLayout.astro
+|   +-- components # Page-specific components
+|
++-- features # Feature modules
+|   |
+|   +-- auth # Authentication feature
+|   |   |
+|   |   +-- components # Feature-specific components
+|   |   |   +-- LoginForm.astro
+|   |   |   +-- RegisterForm.astro
+|   |   |
+|   |   +-- hooks # Feature-specific hooks
+|   |   |   +-- useAuth.ts
+|   |   |
+|   |   +-- services # Feature-specific services
+|   |   |   +-- authService.ts
+|   |   |
+|   |   +-- types # Feature-specific types
+|   |   |   +-- auth.types.ts
+|   |   |
+|   |   +-- utils # Feature-specific utilities
+|   |   |   +-- validation.ts
+|   |   |
+|   |   +-- index.ts # Public API
+|   |
+|   +-- dashboard # Dashboard feature
+|   |   |
+|   |   +-- components
+|   |   +-- hooks
+|   |   +-- services
+|   |   +-- types
+|   |   +-- utils
+|   |   +-- index.ts
+|
++-- shared # Shared infrastructure
+    |
+    +-- components # Shared components
+    |   +-- ui # UI components
+    |   |   +-- Button.astro
+    |   |   +-- Input.astro
+    |   |
+    |   +-- layout # Layout components
+    |   |   +-- Header.astro
+    |   |   +-- Footer.astro
+    |
+    +-- hooks # Shared hooks
+    |   +-- useMediaQuery.ts
+    |   +-- useLocalStorage.ts
+    |
+    +-- lib # Shared libraries
+    |   +-- api.ts
+    |   +-- storage.ts
+    |
+    +-- styles # Shared styles
+    |   +-- theme.ts
+    |   +-- globals.css
+    |
+    +-- utils # Shared utilities
+    |   +-- format.ts
+    |   +-- validation.ts
+
++-- public # Static assets
+    +-- favicon.ico
+```
+
+## Key Principles
+
+1. **Feature Encapsulation**
+   - Each feature is a self-contained module
+   - Features should not depend on the internal structure of other features
+   - All feature exports should go through the `index.ts` file
+
+2. **Astro Integration**
+   - Use `src/pages/` for file-based routing — each `.astro` file becomes a route
+   - Leverage Astro's islands architecture for interactive components
+   - Use `client:load`, `client:idle`, or `client:visible` directives to hydrate framework components
+
+3. **Public API**
+   - Features expose their functionality through a public API (`index.ts`)
+   - Other parts of the application should only import from the feature's root:
+   ```typescript
+   // ✅ Good
+   import { LoginForm } from '<%= projectImportPath%>features/auth';
+
+   // ❌ Bad
+   import { LoginForm } from '<%= projectImportPath%>features/auth/components/LoginForm';
+   ```
+
+4. **Import Rules**
+   To enforce these principles, add the following ESLint rule:
+   ```js
+   {
+       rules: {
+           'no-restricted-imports': [
+               'error',
+               {
+                   patterns: ['<%= projectImportPath%>features/*/*'],
+               },
+           ],
+       }
+   }
+   ```
+
+## Best Practices
+
+1. **Route Organization**
+   - Use `src/pages/` to organize routes by file naming conventions
+   - Keep page components focused on layout and composition
+   - Delegate business logic to features
+
+2. **Feature Development**
+   - Keep features focused on a single business capability
+   - Minimize dependencies between features
+   - Use the shared infrastructure for common functionality
+
+3. **Islands Architecture**
+   - Use static `.astro` components for content and layout
+   - Only add interactivity with framework components (React, Vue, Svelte) where needed
+   - Use `client:*` directives to control hydration behavior
+
+4. **State Management**
+   - Prefer static generation and server-side rendering where possible
+   - Use Astro's `Astro.props` for passing data between components
+   - Use framework-specific state management (React hooks, etc.) for interactive islands
+
+5. **Data Fetching**
+   - Fetch data at the page level using Astro's top-level `await`
+   - Pass data down to components via props
+   - Use client-side fetching only for dynamic, post-hydration data
+
+## Example: Auth Feature
+
+Here's how a typical feature might be structured:
+
+```astro
+---
+// src/pages/login.astro
+import Layout from '<%= projectImportPath%>pages/layouts/BaseLayout.astro';
+import { LoginForm } from '<%= projectImportPath%>features/auth';
+---
+
+<Layout title="Login">
+  <LoginForm client:load />
+</Layout>
+```
+
+## Benefits
+
+1. **Maintainability**: Changes to a feature are isolated and don't affect other parts of the application
+2. **Scalability**: New features can be added without modifying existing code
+3. **Performance**: Static by default, interactive only where needed via islands
+4. **Developer Experience**: Clear organization and separation of concerns
+5. **Type Safety**: Full TypeScript support throughout the application
diff --git a/templates/astro-starter/docs/README.md b/templates/astro-starter/docs/README.md
new file mode 100644
index 00000000..3d306223
--- /dev/null
+++ b/templates/astro-starter/docs/README.md
@@ -0,0 +1,23 @@
+# Extra Documentation
+
+This folder contains detailed documentation for the Astro Starter template. Each document focuses on a specific aspect of the project:
+
+## Core Documentation
+
+- [Project Configuration](./PROJECT_CONFIGURATION.md) - Setup and configuration of development tools
+- [Components and Styling](./COMPONENTS_AND_STYLING.md) - Best practices for components and styling solutions
+- [Performance](./PERFORMANCE.md) - Performance optimization guidelines
+- [State Management](./STATE_MANAGEMENT.md) - State management patterns and recommendations
+
+## Additional Resources
+
+- [Astro Documentation](https://docs.astro.build)
+- [React Documentation](https://reactjs.org/docs/getting-started.html)
+- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
+
+## Getting Help
+
+If you need additional help or have questions:
+
+1. Check the [Astro Discord](https://astro.build/chat)
+2. Open an issue in this repository
diff --git a/templates/astro-starter/docs/STATE_MANAGEMENT.md b/templates/astro-starter/docs/STATE_MANAGEMENT.md
new file mode 100644
index 00000000..f73580c7
--- /dev/null
+++ b/templates/astro-starter/docs/STATE_MANAGEMENT.md
@@ -0,0 +1,40 @@
+# 🗃️ State Management
+
+There is no need to keep all of your state in a single centralized store. There are different needs for different types of state that can be split into several types:
+
+## Component State
+
+This is the state that only a component needs, and it is not meant to be shared anywhere else. But you can pass it as prop to children components if needed. Most of the time, you want to start from here and lift the state up if needed elsewhere. For this type of state, you will usually need:
+
+- [useState](https://reactjs.org/docs/hooks-reference.html#usestate) - for simpler states that are independent
+- [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer) - for more complex states where on a single action you want to update several pieces of state
+
+## Application State
+
+This is the state that controls interactive parts of an application. Opening modals, notifications, changing color mode, etc. For best performance and maintainability, keep the state as close as possible to the components that are using it. Don't make everything global out of the box.
+
+Our recommendation is to use any of the following state management libraries:
+
+- [jotai](https://github.com/pmndrs/jotai)
+- [recoil](https://recoiljs.org/)
+- [zustand](https://github.com/pmndrs/zustand)
+
+## Server Cache State
+
+This is the state that comes from the server which is being cached on the client for further usage. It is possible to store remote data inside a state management store such as redux, but there are better solutions for that.
+
+Our recommendation is:
+
+- [react-query](https://react-query.tanstack.com/)
+
+## Form State
+
+This is a state that tracks users inputs in a form.
+
+Forms in React can be [controlled](https://reactjs.org/docs/forms.html#controlled-components) and [uncontrolled](https://reactjs.org/docs/uncontrolled-components.html).
+
+Depending on the application needs, they might be pretty complex with many different fields which require validation.
+
+Although it is possible to build any form using only React, there are pretty good solutions out there that help with handling forms such as:
+
+- [React Hook Form](https://react-hook-form.com/)
diff --git a/templates/astro-starter/public/favicon.svg b/templates/astro-starter/public/favicon.svg
index ba6a6a12..455d826b 100644
--- a/templates/astro-starter/public/favicon.svg
+++ b/templates/astro-starter/public/favicon.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle" role="img">
   <title id="faviconTitle">Create Awesome Node App</title>
   <defs>
     <linearGradient id="cnaFav" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse">
diff --git a/templates/astro-starter/public/logo.svg b/templates/astro-starter/public/logo.svg
index d1914673..6f77d55e 100644
--- a/templates/astro-starter/public/logo.svg
+++ b/templates/astro-starter/public/logo.svg
@@ -2,7 +2,7 @@
   <title id="logoTitle">Create Awesome Node App</title>
   <desc id="logoDesc">A cozy nest of three connected nodes forming the CNA mark.</desc>
   <defs>
-    <linearGradient id="cnaNest" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
+    <linearGradient id="cnaNestMark" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
       <stop offset="0%" stop-color="#f59e0b"/>
       <stop offset="55%" stop-color="#d97706"/>
       <stop offset="100%" stop-color="#0d9488"/>
@@ -11,7 +11,7 @@
   <!-- Cozy nest: three rounded nodes connected by thick strokes -->
   <path
     d="M32 10c-1.6 0-3.1.8-4 2.1l-11 17.6c-1.8 2.9-.3 6.7 3 7.5V46c0 3.3 2.7 6 6 6h12c3.3 0 6-2.7 6-6V37.2c3.3-.8 4.8-4.6 3-7.5L36 12.1C35.1 10.8 33.6 10 32 10Z"
-    stroke="url(#cnaNest)"
+    stroke="url(#cnaNestMark)"
     stroke-width="5"
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/templates/astro-starter/src/components/Welcome.astro b/templates/astro-starter/src/components/Welcome.astro
deleted file mode 100644
index 3859d92c..00000000
--- a/templates/astro-starter/src/components/Welcome.astro
+++ /dev/null
@@ -1,8 +0,0 @@
----
-const { title } = /** @type {{ title: string }} */ (Astro.props);
----
-
-<section>
-  <h2>{title}</h2>
-  <p>Start editing <code>src/pages/index.astro</code> to get started.</p>
-</section>
diff --git a/templates/astro-starter/src/pages/index.astro b/templates/astro-starter/src/pages/index.astro
index 524dbca2..89b946e2 100644
--- a/templates/astro-starter/src/pages/index.astro
+++ b/templates/astro-starter/src/pages/index.astro
@@ -3,19 +3,19 @@
 const projectName = "<%= projectName %>";
 
 const features = [
-  { icon: "🚀", title: "Astro 7", description: "Fast static sites with partial hydration and content islands." },
-  { icon: "⚛️", title: "React-ready", description: "Add interactive islands with React, Preact, or Solid when needed." },
-  { icon: "🛡️", title: "TypeScript", description: "Type-safe components and pages out of the box." },
-  { icon: "📦", title: "Feature-based structure", description: "Organize components and pages as the project grows." },
-  { icon: "✨", title: "Static output", description: "Ship pre-rendered HTML with zero runtime by default." },
-  { icon: "🧩", title: "Addon ready", description: "Layer UI libraries, state tools, testing, and deployment." },
+  { icon: "\uD83D\uDE80", title: "Astro", description: "Fast static sites with partial hydration and content islands." },
+  { icon: "\u269B\uFE0F", title: "React-ready", description: "Add interactive islands with React, Preact, or Solid when needed." },
+  { icon: "\uD83D\uDEE1\uFE0F", title: "TypeScript", description: "Type-safe components and pages out of the box." },
+  { icon: "\uD83D\uDCE6", title: "Feature-based structure", description: "Organize components and pages as the project grows." },
+  { icon: "\u2728", title: "Static output", description: "Ship pre-rendered HTML with zero runtime by default." },
+  { icon: "\uD83E\uDDE9", title: "Addon ready", description: "Layer UI libraries, state tools, testing, and deployment." },
 ];
 
 const docs = [
-  { label: "Project overview", href: "./docs/README.md" },
-  { label: "Project structure", href: "./docs/PROJECT_STRUCTURE.md" },
-  { label: "Components & styling", href: "./docs/COMPONENTS_AND_STYLING.md" },
-  { label: "State management", href: "./docs/STATE_MANAGEMENT.md" },
+  { label: "Project overview", href: "/docs/README.md" },
+  { label: "Project structure", href: "/docs/PROJECT_STRUCTURE.md" },
+  { label: "Components & styling", href: "/docs/COMPONENTS_AND_STYLING.md" },
+  { label: "State management", href: "/docs/STATE_MANAGEMENT.md" },
 ];
 ---
 
@@ -41,8 +41,10 @@ const docs = [
             A cozy Astro starter with static-first performance and a feature-based foundation.
           </p>
           <div class="cna-landing__actions">
-            <a href="/src/pages/index.astro" class="cna-landing__button cna-landing__button--primary">Start editing</a>
-            <a href="./docs/README.md" class="cna-landing__button cna-landing__button--secondary">Read the docs</a>
+            <span class="cna-landing__button cna-landing__button--primary">
+              Start editing <code class="cna-landing__code">src/pages/index.astro</code>
+            </span>
+            <a href="/docs/README.md" class="cna-landing__button cna-landing__button--secondary">Read the docs</a>
           </div>
         </section>
 
@@ -117,6 +119,7 @@ const docs = [
       --cna-text: #1f2937;
       --cna-text-muted: #6b7280;
       --cna-border: #fed7aa;
+      --cna-amber-soft: #d97706;
       --cna-glow: rgba(245, 158, 11, 0.08);
       --cna-shadow-glow: 0 0 40px -10px rgba(245, 158, 11, 0.18);
     }
@@ -177,7 +180,8 @@ const docs = [
   .cna-landing__hero,
   .cna-landing__features,
   .cna-landing__docs,
-  .cna-landing__footer {
+  .cna-landing__footer,
+  .cna-landing__card {
     animation: cna-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
     animation-delay: calc(var(--index, 0) * 80ms);
   }
@@ -196,7 +200,7 @@ const docs = [
     margin-bottom: 1rem;
     padding: 0.35rem 0.9rem;
     border-radius: 999px;
-    background: rgba(245, 158, 11, 0.12);
+    background: var(--cna-glow);
     color: var(--cna-amber-soft);
     font-size: 0.8125rem;
     font-weight: 700;
@@ -230,6 +234,7 @@ const docs = [
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    gap: 0.5rem;
     padding: 0.75rem 1.25rem;
     border-radius: 0.75rem;
     font-weight: 700;
@@ -238,12 +243,21 @@ const docs = [
     transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
   }
 
+  .cna-landing__code {
+    padding: 0.15rem 0.4rem;
+    border-radius: 0.375rem;
+    background: rgba(0, 0, 0, 0.25);
+    font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 0.8125rem;
+    font-weight: 600;
+  }
+
   .cna-landing__button:hover {
     transform: translateY(-2px);
   }
 
   .cna-landing__button--primary {
-    background: linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #0d9488 100%);
+    background: linear-gradient(135deg, var(--cna-amber), var(--cna-amber-dark) 55%, var(--cna-teal));
     color: #fff;
     box-shadow: var(--cna-shadow-md);
   }
@@ -299,7 +313,7 @@ const docs = [
     height: 2.25rem;
     margin-bottom: 0.75rem;
     border-radius: 0.625rem;
-    background: rgba(245, 158, 11, 0.12);
+    background: var(--cna-glow);
     font-size: 1.125rem;
   }
 
diff --git a/templates/hono-starter/public/favicon.svg b/templates/hono-starter/public/favicon.svg
new file mode 100644
index 00000000..455d826b
--- /dev/null
+++ b/templates/hono-starter/public/favicon.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle" role="img">
+  <title id="faviconTitle">Create Awesome Node App</title>
+  <defs>
+    <linearGradient id="cnaFav" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="100%" stop-color="#0d9488"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="8" fill="#fff8f1"/>
+  <path
+    d="M16 5c-1.2 0-2.3.6-3 1.5l-7 11.2c-1.1 1.8-.2 4.2 2 4.7V24c0 2 1.6 3.6 3.6 3.6h8.8c2 0 3.6-1.6 3.6-3.6v-1.6c2.2-.5 3.1-2.9 2-4.7L19 6.5C18.3 5.6 17.2 5 16 5Z"
+    stroke="url(#cnaFav)"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+  <circle cx="16" cy="14" r="2.5" fill="#f59e0b"/>
+  <circle cx="9.5" cy="24" r="2.5" fill="#0d9488"/>
+  <circle cx="22.5" cy="24" r="2.5" fill="#d97706"/>
+</svg>
diff --git a/templates/hono-starter/public/logo.svg b/templates/hono-starter/public/logo.svg
new file mode 100644
index 00000000..6f77d55e
--- /dev/null
+++ b/templates/hono-starter/public/logo.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none" aria-labelledby="logoTitle logoDesc" role="img">
+  <title id="logoTitle">Create Awesome Node App</title>
+  <desc id="logoDesc">A cozy nest of three connected nodes forming the CNA mark.</desc>
+  <defs>
+    <linearGradient id="cnaNestMark" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="55%" stop-color="#d97706"/>
+      <stop offset="100%" stop-color="#0d9488"/>
+    </linearGradient>
+  </defs>
+  <!-- Cozy nest: three rounded nodes connected by thick strokes -->
+  <path
+    d="M32 10c-1.6 0-3.1.8-4 2.1l-11 17.6c-1.8 2.9-.3 6.7 3 7.5V46c0 3.3 2.7 6 6 6h12c3.3 0 6-2.7 6-6V37.2c3.3-.8 4.8-4.6 3-7.5L36 12.1C35.1 10.8 33.6 10 32 10Z"
+    stroke="url(#cnaNestMark)"
+    stroke-width="5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+  <circle cx="32" cy="27" r="5" fill="#f59e0b"/>
+  <circle cx="20" cy="43" r="5" fill="#0d9488"/>
+  <circle cx="44" cy="43" r="5" fill="#d97706"/>
+</svg>
diff --git a/templates/nestjs-starter/public/favicon.svg b/templates/nestjs-starter/public/favicon.svg
new file mode 100644
index 00000000..455d826b
--- /dev/null
+++ b/templates/nestjs-starter/public/favicon.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle" role="img">
+  <title id="faviconTitle">Create Awesome Node App</title>
+  <defs>
+    <linearGradient id="cnaFav" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="100%" stop-color="#0d9488"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="8" fill="#fff8f1"/>
+  <path
+    d="M16 5c-1.2 0-2.3.6-3 1.5l-7 11.2c-1.1 1.8-.2 4.2 2 4.7V24c0 2 1.6 3.6 3.6 3.6h8.8c2 0 3.6-1.6 3.6-3.6v-1.6c2.2-.5 3.1-2.9 2-4.7L19 6.5C18.3 5.6 17.2 5 16 5Z"
+    stroke="url(#cnaFav)"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+  <circle cx="16" cy="14" r="2.5" fill="#f59e0b"/>
+  <circle cx="9.5" cy="24" r="2.5" fill="#0d9488"/>
+  <circle cx="22.5" cy="24" r="2.5" fill="#d97706"/>
+</svg>
diff --git a/templates/nestjs-starter/public/logo.svg b/templates/nestjs-starter/public/logo.svg
new file mode 100644
index 00000000..6f77d55e
--- /dev/null
+++ b/templates/nestjs-starter/public/logo.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none" aria-labelledby="logoTitle logoDesc" role="img">
+  <title id="logoTitle">Create Awesome Node App</title>
+  <desc id="logoDesc">A cozy nest of three connected nodes forming the CNA mark.</desc>
+  <defs>
+    <linearGradient id="cnaNestMark" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="55%" stop-color="#d97706"/>
+      <stop offset="100%" stop-color="#0d9488"/>
+    </linearGradient>
+  </defs>
+  <!-- Cozy nest: three rounded nodes connected by thick strokes -->
+  <path
+    d="M32 10c-1.6 0-3.1.8-4 2.1l-11 17.6c-1.8 2.9-.3 6.7 3 7.5V46c0 3.3 2.7 6 6 6h12c3.3 0 6-2.7 6-6V37.2c3.3-.8 4.8-4.6 3-7.5L36 12.1C35.1 10.8 33.6 10 32 10Z"
+    stroke="url(#cnaNestMark)"
+    stroke-width="5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+  <circle cx="32" cy="27" r="5" fill="#f59e0b"/>
+  <circle cx="20" cy="43" r="5" fill="#0d9488"/>
+  <circle cx="44" cy="43" r="5" fill="#d97706"/>
+</svg>
diff --git a/templates/nextjs-saas-ai-starter/public/favicon.svg b/templates/nextjs-saas-ai-starter/public/favicon.svg
new file mode 100644
index 00000000..455d826b
--- /dev/null
+++ b/templates/nextjs-saas-ai-starter/public/favicon.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle" role="img">
+  <title id="faviconTitle">Create Awesome Node App</title>
+  <defs>
+    <linearGradient id="cnaFav" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="100%" stop-color="#0d9488"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="8" fill="#fff8f1"/>
+  <path
+    d="M16 5c-1.2 0-2.3.6-3 1.5l-7 11.2c-1.1 1.8-.2 4.2 2 4.7V24c0 2 1.6 3.6 3.6 3.6h8.8c2 0 3.6-1.6 3.6-3.6v-1.6c2.2-.5 3.1-2.9 2-4.7L19 6.5C18.3 5.6 17.2 5 16 5Z"
+    stroke="url(#cnaFav)"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+  <circle cx="16" cy="14" r="2.5" fill="#f59e0b"/>
+  <circle cx="9.5" cy="24" r="2.5" fill="#0d9488"/>
+  <circle cx="22.5" cy="24" r="2.5" fill="#d97706"/>
+</svg>
diff --git a/templates/nextjs-saas-ai-starter/public/logo.svg b/templates/nextjs-saas-ai-starter/public/logo.svg
index d1914673..6f77d55e 100644
--- a/templates/nextjs-saas-ai-starter/public/logo.svg
+++ b/templates/nextjs-saas-ai-starter/public/logo.svg
@@ -2,7 +2,7 @@
   <title id="logoTitle">Create Awesome Node App</title>
   <desc id="logoDesc">A cozy nest of three connected nodes forming the CNA mark.</desc>
   <defs>
-    <linearGradient id="cnaNest" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
+    <linearGradient id="cnaNestMark" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
       <stop offset="0%" stop-color="#f59e0b"/>
       <stop offset="55%" stop-color="#d97706"/>
       <stop offset="100%" stop-color="#0d9488"/>
@@ -11,7 +11,7 @@
   <!-- Cozy nest: three rounded nodes connected by thick strokes -->
   <path
     d="M32 10c-1.6 0-3.1.8-4 2.1l-11 17.6c-1.8 2.9-.3 6.7 3 7.5V46c0 3.3 2.7 6 6 6h12c3.3 0 6-2.7 6-6V37.2c3.3-.8 4.8-4.6 3-7.5L36 12.1C35.1 10.8 33.6 10 32 10Z"
-    stroke="url(#cnaNest)"
+    stroke="url(#cnaNestMark)"
     stroke-width="5"
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/templates/nextjs-saas-ai-starter/public/next.svg b/templates/nextjs-saas-ai-starter/public/next.svg
deleted file mode 100644
index 5174b28c..00000000
--- a/templates/nextjs-saas-ai-starter/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/templates/nextjs-saas-ai-starter/public/vercel.svg b/templates/nextjs-saas-ai-starter/public/vercel.svg
deleted file mode 100644
index d2f84222..00000000
--- a/templates/nextjs-saas-ai-starter/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/templates/nextjs-starter/[src]/app/favicon.svg b/templates/nextjs-starter/[src]/app/favicon.svg
index ba6a6a12..455d826b 100644
--- a/templates/nextjs-starter/[src]/app/favicon.svg
+++ b/templates/nextjs-starter/[src]/app/favicon.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle" role="img">
   <title id="faviconTitle">Create Awesome Node App</title>
   <defs>
     <linearGradient id="cnaFav" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse">
diff --git a/templates/nextjs-starter/[src]/app/page.module.css b/templates/nextjs-starter/[src]/app/page.module.css
index 0bbd5439..bd53ac12 100644
--- a/templates/nextjs-starter/[src]/app/page.module.css
+++ b/templates/nextjs-starter/[src]/app/page.module.css
@@ -1,4 +1,4 @@
-@keyframes fade-in-up {
+@keyframes cna-fade-in-up {
   from {
     opacity: 0;
     transform: translateY(12px);
@@ -21,7 +21,7 @@
   gap: 0.75rem;
   padding: 1.25rem 1.5rem;
   border-bottom: 1px solid var(--cna-border);
-  animation: fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation: cna-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
 .logo {
@@ -45,10 +45,11 @@
 }
 
 .hero,
-.card,
+.features,
 .docs,
-.footer {
-  animation: fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+.footer,
+.card {
+  animation: cna-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
   animation-delay: calc(var(--index, 0) * 80ms);
 }
 
@@ -102,6 +103,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
   padding: 0.75rem 1.25rem;
   border-radius: 0.75rem;
   font-weight: 700;
@@ -115,7 +118,7 @@
 }
 
 .buttonPrimary {
-  background: linear-gradient(135deg, var(--cna-amber) 0%, var(--cna-amber-dark) 55%, var(--cna-teal) 100%);
+  background: linear-gradient(135deg, var(--cna-amber), var(--cna-amber-dark) 55%, var(--cna-teal));
   color: #fff;
   box-shadow: var(--cna-shadow-md);
 }
@@ -135,6 +138,15 @@
   background: var(--cna-border);
 }
 
+.code {
+  padding: 0.15rem 0.4rem;
+  border-radius: 0.375rem;
+  background: rgba(0, 0, 0, 0.25);
+  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
 .sectionTitle {
   margin: 3rem 0 1.25rem;
   font-size: clamp(1.25rem, 3vw, 1.75rem);
@@ -262,3 +274,13 @@
     width: 100%;
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .landing *,
+  .landing *::before,
+  .landing *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/templates/nextjs-starter/[src]/app/page.tsx b/templates/nextjs-starter/[src]/app/page.tsx
deleted file mode 100644
index 6a211b9a..00000000
--- a/templates/nextjs-starter/[src]/app/page.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import Image from "next/image";
-import styles from "./page.module.css";
-
-const features = [
-  {
-    icon: "▲",
-    title: "Next.js 16 App Router",
-    description: "File-system routing, layouts, and latest React features out of the box.",
-  },
-  {
-    icon: "🛡️",
-    title: "TypeScript + ESLint + Prettier",
-    description: "Static typing and consistent, automated code style.",
-  },
-  {
-    icon: "📦",
-    title: "Feature-based structure",
-    description: "Scale by co-locating routes, state, and components.",
-  },
-  {
-    icon: "🔐",
-    title: "Login example",
-    description: "A ready-made auth route to kickstart protected flows.",
-  },
-  {
-    icon: "🧩",
-    title: "Addon ready",
-    description: "Layer UI libraries, state tools, testing, and deployment.",
-  },
-];
-
-const docs = [
-  { label: "Project overview", href: "./docs/README.md" },
-  { label: "Project structure", href: "./docs/PROJECT_STRUCTURE.md" },
-  { label: "Components & styling", href: "./docs/COMPONENTS_AND_STYLING.md" },
-  { label: "State management", href: "./docs/STATE_MANAGEMENT.md" },
-];
-
-export default function Home() {
-  return (
-    <div className={styles.landing}>
-      <header className={styles.header}>
-        <Image
-          src="/logo.svg"
-          alt="Create Awesome Node App"
-          className={styles.logo}
-          width={40}
-          height={40}
-          unoptimized
-        />
-        <span className={styles.brand}>Create Awesome Node App</span>
-      </header>
-
-      <main className={styles.main}>
-        <section className={styles.hero} style={{ "--index": 0 } as React.CSSProperties}>
-          <span className={styles.eyebrow}>Your project is ready</span>
-          <h1 className={styles.title}>Next.js Starter</h1>
-          <p className={styles.lead}>
-            A cozy Next.js starter with a feature-based foundation. Everything you need to start building your next
-            page.
-          </p>
-          <div className={styles.actions}>
-            <a href="src/app/page.tsx" className={`${styles.button} ${styles.buttonPrimary}`}>
-              Start editing
-            </a>
-            <a href="./docs/README.md" className={`${styles.button} ${styles.buttonSecondary}`}>
-              Read the docs
-            </a>
-          </div>
-        </section>
-
-        <section className={styles.features}>
-          <h2 className={styles.sectionTitle}>What is inside</h2>
-          <div className={styles.grid}>
-            {features.map((feature, index) => (
-              <article
-                key={feature.title}
-                className={styles.card}
-                style={{ "--index": index + 1 } as React.CSSProperties}
-              >
-                <span className={styles.cardIcon} aria-hidden="true">
-                  {feature.icon}
-                </span>
-                <h3 className={styles.cardTitle}>{feature.title}</h3>
-                <p className={styles.cardText}>{feature.description}</p>
-              </article>
-            ))}
-          </div>
-        </section>
-
-        <section
-          className={styles.docs}
-          style={{ "--index": features.length + 1 } as React.CSSProperties}
-        >
-          <h2 className={styles.sectionTitle}>Next steps</h2>
-          <nav className={styles.docList} aria-label="Documentation">
-            {docs.map((doc) => (
-              <a key={doc.label} href={doc.href} className={styles.docLink}>
-                <span className={styles.docLabel}>{doc.label}</span>
-                <span className={styles.docArrow} aria-hidden="true">
-                  →
-                </span>
-              </a>
-            ))}
-          </nav>
-        </section>
-      </main>
-
-      <footer
-        className={styles.footer}
-        style={{ "--index": features.length + 2 } as React.CSSProperties}
-      >
-        <p>
-          Generated with{" "}
-          <a
-            href="https://www.npmjs.com/package/create-awesome-node-app"
-            target="_blank"
-            rel="noreferrer"
-          >
-            create-awesome-node-app
-          </a>
-        </p>
-      </footer>
-    </div>
-  );
-}
diff --git a/templates/nextjs-starter/[src]/app/page.tsx.template b/templates/nextjs-starter/[src]/app/page.tsx.template
index f4d3420c..e7b9836d 100644
--- a/templates/nextjs-starter/[src]/app/page.tsx.template
+++ b/templates/nextjs-starter/[src]/app/page.tsx.template
@@ -2,31 +2,12 @@ import Image from "next/image";
 import styles from "./page.module.css";
 
 const features = [
-  {
-    icon: "▲",
-    title: "Next.js 16 App Router",
-    description: "File-system routing, layouts, and latest React features out of the box.",
-  },
-  {
-    icon: "🛡️",
-    title: "TypeScript + ESLint + Prettier",
-    description: "Static typing and consistent, automated code style.",
-  },
-  {
-    icon: "📦",
-    title: "Feature-based structure",
-    description: "Scale by co-locating routes, state, and components.",
-  },
-  {
-    icon: "🔐",
-    title: "Login example",
-    description: "A ready-made auth route to kickstart protected flows.",
-  },
-  {
-    icon: "🧩",
-    title: "Addon ready",
-    description: "Layer UI libraries, state tools, testing, and deployment.",
-  },
+  { icon: "\u25B2", title: "Next.js App Router", description: "File-system routing, layouts, and latest React features out of the box." },
+  { icon: "\u269B\uFE0F", title: "React", description: "Latest React with modern patterns and future-ready APIs." },
+  { icon: "\uD83D\uDEE1\uFE0F", title: "TypeScript + ESLint + Prettier", description: "Static typing and consistent, automated code style." },
+  { icon: "\uD83D\uDCE6", title: "Feature-based structure", description: "Scale by co-locating routes, state, and components." },
+  { icon: "\uD83D\uDD10", title: "Login example", description: "A ready-made auth route to kickstart protected flows." },
+  { icon: "\uD83E\uDDE9", title: "Addon ready", description: "Layer UI libraries, state tools, testing, and deployment." },
 ];
 
 const docs = [
@@ -62,9 +43,9 @@ export default function Home() {
             page.
           </p>
           <div className={styles.actions}>
-            <a href="/<%= srcDir %>/app/page.tsx" className={styles.button + " " + styles.buttonPrimary}>
-              Start editing
-            </a>
+            <span className={styles.button + " " + styles.buttonPrimary}>
+              Start editing <code className={styles.code}><%= srcDir %>/app/page.tsx</code>
+            </span>
             <a href="/docs/README.md" className={styles.button + " " + styles.buttonSecondary}>
               Read the docs
             </a>
diff --git a/templates/nextjs-starter/public/favicon.svg b/templates/nextjs-starter/public/favicon.svg
new file mode 100644
index 00000000..455d826b
--- /dev/null
+++ b/templates/nextjs-starter/public/favicon.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle" role="img">
+  <title id="faviconTitle">Create Awesome Node App</title>
+  <defs>
+    <linearGradient id="cnaFav" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="100%" stop-color="#0d9488"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="8" fill="#fff8f1"/>
+  <path
+    d="M16 5c-1.2 0-2.3.6-3 1.5l-7 11.2c-1.1 1.8-.2 4.2 2 4.7V24c0 2 1.6 3.6 3.6 3.6h8.8c2 0 3.6-1.6 3.6-3.6v-1.6c2.2-.5 3.1-2.9 2-4.7L19 6.5C18.3 5.6 17.2 5 16 5Z"
+    stroke="url(#cnaFav)"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+  <circle cx="16" cy="14" r="2.5" fill="#f59e0b"/>
+  <circle cx="9.5" cy="24" r="2.5" fill="#0d9488"/>
+  <circle cx="22.5" cy="24" r="2.5" fill="#d97706"/>
+</svg>
diff --git a/templates/nextjs-starter/public/logo.svg b/templates/nextjs-starter/public/logo.svg
index d1914673..6f77d55e 100644
--- a/templates/nextjs-starter/public/logo.svg
+++ b/templates/nextjs-starter/public/logo.svg
@@ -2,7 +2,7 @@
   <title id="logoTitle">Create Awesome Node App</title>
   <desc id="logoDesc">A cozy nest of three connected nodes forming the CNA mark.</desc>
   <defs>
-    <linearGradient id="cnaNest" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
+    <linearGradient id="cnaNestMark" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
       <stop offset="0%" stop-color="#f59e0b"/>
       <stop offset="55%" stop-color="#d97706"/>
       <stop offset="100%" stop-color="#0d9488"/>
@@ -11,7 +11,7 @@
   <!-- Cozy nest: three rounded nodes connected by thick strokes -->
   <path
     d="M32 10c-1.6 0-3.1.8-4 2.1l-11 17.6c-1.8 2.9-.3 6.7 3 7.5V46c0 3.3 2.7 6 6 6h12c3.3 0 6-2.7 6-6V37.2c3.3-.8 4.8-4.6 3-7.5L36 12.1C35.1 10.8 33.6 10 32 10Z"
-    stroke="url(#cnaNest)"
+    stroke="url(#cnaNestMark)"
     stroke-width="5"
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/templates/nextjs-starter/public/next.svg b/templates/nextjs-starter/public/next.svg
deleted file mode 100644
index 5174b28c..00000000
--- a/templates/nextjs-starter/public/next.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
diff --git a/templates/nextjs-starter/public/vercel.svg b/templates/nextjs-starter/public/vercel.svg
deleted file mode 100644
index d2f84222..00000000
--- a/templates/nextjs-starter/public/vercel.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>
\ No newline at end of file
diff --git a/templates/react-vite-starter/[src]/pages/Landing.css b/templates/react-vite-starter/[src]/pages/Landing.css
index 599fd36a..d1949400 100644
--- a/templates/react-vite-starter/[src]/pages/Landing.css
+++ b/templates/react-vite-starter/[src]/pages/Landing.css
@@ -87,7 +87,8 @@
 .cna-landing__hero,
 .cna-landing__features,
 .cna-landing__docs,
-.cna-landing__footer {
+.cna-landing__footer,
+.cna-landing__card {
   animation: cna-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
   animation-delay: calc(var(--index, 0) * 80ms);
 }
@@ -164,7 +165,7 @@
 }
 
 .cna-landing__button--primary {
-  background: linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #0d9488 100%);
+  background: linear-gradient(135deg, var(--cna-amber), var(--cna-amber-dark) 55%, var(--cna-teal));
   color: #fff;
   box-shadow: var(--cna-shadow-md);
 }
diff --git a/templates/react-vite-starter/[src]/pages/Landing.tsx.template b/templates/react-vite-starter/[src]/pages/Landing.tsx.template
index e5ee7f67..83d9b503 100644
--- a/templates/react-vite-starter/[src]/pages/Landing.tsx.template
+++ b/templates/react-vite-starter/[src]/pages/Landing.tsx.template
@@ -8,36 +8,12 @@ interface Feature {
 }
 
 const features: Feature[] = [
-  {
-    icon: '⚡',
-    title: 'Vite 8',
-    description: 'Instant HMR and a fast, opinionated build pipeline.',
-  },
-  {
-    icon: '⚛️',
-    title: 'React 19',
-    description: 'Latest React with modern patterns and future-ready APIs.',
-  },
-  {
-    icon: '🧭',
-    title: 'React Router 7',
-    description: 'Client-side routing already wired for nested routes.',
-  },
-  {
-    icon: '🛡️',
-    title: 'TypeScript + ESLint + Prettier',
-    description: 'Static typing and consistent, automated code style.',
-  },
-  {
-    icon: '📦',
-    title: 'Feature-based structure',
-    description: 'Scale by co-locating routes, state, and components.',
-  },
-  {
-    icon: '🧩',
-    title: 'Addon ready',
-    description: 'Layer UI libraries, state tools, testing, and deployment.',
-  },
+  { icon: '⚡', title: 'Vite', description: 'Instant HMR and a fast, opinionated build pipeline.' },
+  { icon: '⚛️', title: 'React', description: 'Latest React with modern patterns and future-ready APIs.' },
+  { icon: '🧭', title: 'React Router v7', description: 'Client-side routing already wired for nested routes.' },
+  { icon: '🛡️', title: 'TypeScript + ESLint + Prettier', description: 'Static typing and consistent, automated code style.' },
+  { icon: '📦', title: 'Feature-based structure', description: 'Scale by co-locating routes, state, and components.' },
+  { icon: '🧩', title: 'Addon ready', description: 'Layer UI libraries, state tools, testing, and deployment.' },
 ];
 
 const docs = [
diff --git a/templates/react-vite-starter/public/favicon.svg b/templates/react-vite-starter/public/favicon.svg
index ba6a6a12..455d826b 100644
--- a/templates/react-vite-starter/public/favicon.svg
+++ b/templates/react-vite-starter/public/favicon.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle" role="img">
   <title id="faviconTitle">Create Awesome Node App</title>
   <defs>
     <linearGradient id="cnaFav" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse">
diff --git a/templates/react-vite-starter/public/logo.svg b/templates/react-vite-starter/public/logo.svg
index d1914673..6f77d55e 100644
--- a/templates/react-vite-starter/public/logo.svg
+++ b/templates/react-vite-starter/public/logo.svg
@@ -2,7 +2,7 @@
   <title id="logoTitle">Create Awesome Node App</title>
   <desc id="logoDesc">A cozy nest of three connected nodes forming the CNA mark.</desc>
   <defs>
-    <linearGradient id="cnaNest" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
+    <linearGradient id="cnaNestMark" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
       <stop offset="0%" stop-color="#f59e0b"/>
       <stop offset="55%" stop-color="#d97706"/>
       <stop offset="100%" stop-color="#0d9488"/>
@@ -11,7 +11,7 @@
   <!-- Cozy nest: three rounded nodes connected by thick strokes -->
   <path
     d="M32 10c-1.6 0-3.1.8-4 2.1l-11 17.6c-1.8 2.9-.3 6.7 3 7.5V46c0 3.3 2.7 6 6 6h12c3.3 0 6-2.7 6-6V37.2c3.3-.8 4.8-4.6 3-7.5L36 12.1C35.1 10.8 33.6 10 32 10Z"
-    stroke="url(#cnaNest)"
+    stroke="url(#cnaNestMark)"
     stroke-width="5"
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/templates/remix-starter/app/routes/_index.tsx.template b/templates/remix-starter/app/routes/_index.tsx.template
index 4ed8d4cb..c4067372 100644
--- a/templates/remix-starter/app/routes/_index.tsx.template
+++ b/templates/remix-starter/app/routes/_index.tsx.template
@@ -1,19 +1,19 @@
 import type { MetaFunction } from "react-router";
 
 const features = [
-  { icon: "🧭", title: "React Router v7", description: "Modern data APIs and fast client-side navigation." },
-  { icon: "⚛️", title: "React 19", description: "Latest React with modern patterns and future-ready APIs." },
-  { icon: "🛡️", title: "TypeScript", description: "Static typing across routes and components." },
-  { icon: "⚡", title: "Vite", description: "Fast builds and instant HMR for rapid development." },
-  { icon: "📦", title: "Feature-based structure", description: "Scale by co-locating routes, state, and components." },
-  { icon: "🧩", title: "Addon ready", description: "Layer UI libraries, state tools, testing, and deployment." },
+  { icon: "\uD83E\uDDED", title: "React Router v7", description: "Modern data APIs and fast client-side navigation." },
+  { icon: "\u269B\uFE0F", title: "React", description: "Latest React with modern patterns and future-ready APIs." },
+  { icon: "\uD83D\uDEE1\uFE0F", title: "TypeScript", description: "Static typing across routes and components." },
+  { icon: "\u26A1", title: "Vite", description: "Fast builds and instant HMR for rapid development." },
+  { icon: "\uD83D\uDCE6", title: "Feature-based structure", description: "Scale by co-locating routes, state, and components." },
+  { icon: "\uD83E\uDDE9", title: "Addon ready", description: "Layer UI libraries, state tools, testing, and deployment." },
 ];
 
 const docs = [
-  { label: "Project overview", href: "./docs/README.md" },
-  { label: "Project structure", href: "./docs/PROJECT_STRUCTURE.md" },
-  { label: "Components & styling", href: "./docs/COMPONENTS_AND_STYLING.md" },
-  { label: "State management", href: "./docs/STATE_MANAGEMENT.md" },
+  { label: "Project overview", href: "/docs/README.md" },
+  { label: "Project structure", href: "/docs/PROJECT_STRUCTURE.md" },
+  { label: "Components & styling", href: "/docs/COMPONENTS_AND_STYLING.md" },
+  { label: "State management", href: "/docs/STATE_MANAGEMENT.md" },
 ];
 
 export const meta: MetaFunction = () => {
@@ -37,10 +37,10 @@ export default function Home() {
             route.
           </p>
           <div className="cna-landing__actions">
-            <a href="/app/routes/_index.tsx" className="cna-landing__button cna-landing__button--primary">
-              Start editing
-            </a>
-            <a href="./docs/README.md" className="cna-landing__button cna-landing__button--secondary">
+            <span className="cna-landing__button cna-landing__button--primary">
+              Start editing <code className="cna-landing__code">app/routes/_index.tsx</code>
+            </span>
+            <a href="/docs/README.md" className="cna-landing__button cna-landing__button--secondary">
               Read the docs
             </a>
           </div>
diff --git a/templates/remix-starter/app/styles/landing.css b/templates/remix-starter/app/styles/landing.css
index 9f4cee46..6bead039 100644
--- a/templates/remix-starter/app/styles/landing.css
+++ b/templates/remix-starter/app/styles/landing.css
@@ -26,6 +26,7 @@
     --cna-text: #1f2937;
     --cna-text-muted: #6b7280;
     --cna-border: #fed7aa;
+    --cna-amber-soft: #d97706;
     --cna-glow: rgba(245, 158, 11, 0.08);
     --cna-shadow-glow: 0 0 40px -10px rgba(245, 158, 11, 0.18);
   }
@@ -86,7 +87,8 @@
 .cna-landing__hero,
 .cna-landing__features,
 .cna-landing__docs,
-.cna-landing__footer {
+.cna-landing__footer,
+.cna-landing__card {
   animation: cna-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
   animation-delay: calc(var(--index, 0) * 80ms);
 }
@@ -105,7 +107,7 @@
   margin-bottom: 1rem;
   padding: 0.35rem 0.9rem;
   border-radius: 999px;
-  background: rgba(245, 158, 11, 0.12);
+  background: var(--cna-glow);
   color: var(--cna-amber-soft);
   font-size: 0.8125rem;
   font-weight: 700;
@@ -139,6 +141,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   padding: 0.75rem 1.25rem;
   border-radius: 0.75rem;
   font-weight: 700;
@@ -147,12 +150,22 @@
   transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
 }
 
-.cna-landing__button:hover {
+.cna-landing__code {
+  padding: 0.15rem 0.4rem;
+  border-radius: 0.375rem;
+  background: rgba(0, 0, 0, 0.25);
+  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
+a.cna-landing__button:hover,
+button.cna-landing__button:hover {
   transform: translateY(-2px);
 }
 
 .cna-landing__button--primary {
-  background: linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #0d9488 100%);
+  background: linear-gradient(135deg, var(--cna-amber), var(--cna-amber-dark) 55%, var(--cna-teal));
   color: #fff;
   box-shadow: var(--cna-shadow-md);
 }
@@ -208,7 +221,7 @@
   height: 2.25rem;
   margin-bottom: 0.75rem;
   border-radius: 0.625rem;
-  background: rgba(245, 158, 11, 0.12);
+  background: var(--cna-glow);
   font-size: 1.125rem;
 }
 
diff --git a/templates/remix-starter/docs/COMPONENTS_AND_STYLING.md b/templates/remix-starter/docs/COMPONENTS_AND_STYLING.md
new file mode 100644
index 00000000..983fe78e
--- /dev/null
+++ b/templates/remix-starter/docs/COMPONENTS_AND_STYLING.md
@@ -0,0 +1,89 @@
+# 🧱 Components And Styling
+
+## Components Best Practices
+
+### Colocate things as close as possible to where it's being used
+
+Keep components, functions, styles, state, etc. as close as possible to the component where it's being used. This will not only make your codebase more readable and easier to understand but it will also improve your application performance since it will reduce redundant re-renders on state updates.
+
+### Avoid large components with nested rendering functions
+
+Do not add multiple rendering functions inside your application, this gets out of control pretty quickly. What you should do instead is if there is a piece of UI that can be considered as a unit, is to extract it in a separate component.
+
+```javascript
+// this is very difficult to maintain as soon as the component starts growing
+function Component() {
+  function renderItems() {
+    return <ul>...</ul>;
+  }
+  return <div>{renderItems()}</div>;
+}
+
+// extract it in a separate component
+function Items() {
+  return <ul>...</ul>;
+}
+
+function Component() {
+  return (
+    <div>
+      <Items />
+    </div>
+  );
+}
+```
+
+### Stay consistent
+
+### Limit the number of props a component is accepting as input
+
+If your component is accepting too many props you might consider splitting it into multiple components or use the composition technique via children or slots.
+
+### Abstract shared components into a component library
+
+For larger projects, it is a good idea to build abstractions around all the shared components. It makes the application more consistent and easier to maintain. Identify repetitions before creating the components to avoid wrong abstractions.
+
+It is a good idea to wrap 3rd party components as well in order to adapt them to the application's needs. It might be easier to make the underlying changes in the future without affecting the application's functionality.
+
+## Component libraries
+
+Every project requires some UI components such as modals, tabs, sidebars, menus, etc. Instead of building those from scratch, you might want to use some of the existing, battle-tested component libraries.
+
+### Fully featured component libraries
+
+These component libraries come with their components fully styled.
+
+- [Chakra UI](https://chakra-ui.com/) - great library with probably the best developer experience, allows very fast prototyping with decent design defaults. Plenty of components that are very customizable and flexible with accessibility already configured out of the box.
+
+- [AntD](https://ant.design/) - another great component library that has a lot of different components. Best suitable for creating admin dashboards. However, it might be a bit difficult to change the styles in order to adapt them to a custom design.
+
+- [MUI](https://mui.com/) - the most popular component library for React. Has a lot of different components. Can be used as a styled solution by implementing Material Design or as unstyled headless component library.
+
+### Headless component libraries
+
+These component libraries come with their components unstyled. If you have a specific design system to implement, it might be easier and better solution to go with headless components that come unstyled than to adapt a styled components library such as Material UI to your needs. Some good options are:
+
+- [Reakit](https://reakit.io/)
+- [Headless UI](https://headlessui.dev/)
+- [Radix UI](https://www.radix-ui.com/)
+- [react-aria](https://react-spectrum.adobe.com/react-aria/)
+
+## Styling Solutions
+
+There are multiple ways to style a react application. Some good options are:
+
+- [tailwind](https://tailwindcss.com/)
+- [styled-components](https://styled-components.com/)
+- [emotion](https://emotion.sh/docs/introduction)
+- [stitches](https://stitches.dev/)
+- [vanilla-extract](https://github.com/seek-oss/vanilla-extract)
+- [CSS modules](https://github.com/css-modules/css-modules)
+- [linaria](https://github.com/callstack/linaria)
+
+## Good combinations
+
+Some good combinations of component library + styling
+
+- [Chakra UI](https://chakra-ui.com/) + [emotion](https://emotion.sh/docs/introduction) - The best choice for most applications
+- [Headless UI](https://headlessui.dev/) + [tailwind](https://tailwindcss.com/)
+- [Radix UI](https://www.radix-ui.com/) + [stitches](https://stitches.dev/)
diff --git a/templates/remix-starter/docs/PERFORMANCE.md b/templates/remix-starter/docs/PERFORMANCE.md
new file mode 100644
index 00000000..4fe19962
--- /dev/null
+++ b/templates/remix-starter/docs/PERFORMANCE.md
@@ -0,0 +1,43 @@
+# 🚄 Performance
+
+## Code Splitting
+
+Code splitting is a technique of splitting production JavaScript into smaller files, thus allowing the application to be only partially downloaded. Any unused code will not be downloaded until it is required by the application.
+
+Most of the time code splitting should be done on the routes level, but can also be used for other lazy loaded parts of application.
+
+Do not code split everything as it might even worsen your application's performance.
+
+## Component and state optimizations
+
+- Do not put everything in a single state. That might trigger unnecessary re-renders. Instead split the global state into multiple stores according to where it is being used.
+
+- Keep the state as close as possible to where it is being used. This will prevent re-rendering components that do not depend on the updated state.
+
+- If you have a piece of state that is initialized by an expensive computation, use the state initializer function instead of executing it directly because the expensive function will be run only once as it is supposed to. e.g:
+
+```javascript
+import { useState } from "react";
+
+// instead of this which would be executed on every re-render:
+const [state, setState] = useState(myExpensiveFn());
+
+// prefer this which is executed only once:
+const [state, setState] = useState(() => myExpensiveFn());
+```
+
+- If you develop an application that requires the state to track many elements at once, you might consider state management libraries with atomic updates such as [recoil](https://recoiljs.org/) or [jotai](https://jotai.pmnd.rs/).
+
+- If your application is expected to have frequent updates that might affect performance, consider switching from runtime styling solutions ([Chakra UI](https://chakra-ui.com/), [emotion](https://emotion.sh/docs/introduction), [styled-components](https://styled-components.com/) that generate styles during runtime) to zero runtime styling solutions ([tailwind](https://tailwindcss.com/), [linaria](https://github.com/callstack/linaria), [vanilla-extract](https://github.com/seek-oss/vanilla-extract), [CSS modules](https://github.com/css-modules/css-modules) which generate styles during build time).
+
+## Image optimizations
+
+Consider lazy loading images that are not in the viewport.
+
+Use modern image formats such as WEBP for faster image loading.
+
+Use `srcset` to load the most optimal image for the clients screen size.
+
+## Web vitals
+
+Since Google started taking web vitals in account when indexing websites, you should keep an eye on web vitals scores from [Lighthouse](https://web.dev/measure/) and [Pagespeed Insights](https://pagespeed.web.dev/).
diff --git a/templates/remix-starter/docs/PROJECT_CONFIGURATION.md.template b/templates/remix-starter/docs/PROJECT_CONFIGURATION.md.template
new file mode 100644
index 00000000..a0038d7c
--- /dev/null
+++ b/templates/remix-starter/docs/PROJECT_CONFIGURATION.md.template
@@ -0,0 +1,55 @@
+# ⚙️ Project Configuration
+
+The application has been bootstrapped using [create-awesome-node-app](https://www.npmjs.com/package/create-awesome-node-app) for simplicity reasons. It allows us to create applications quickly without dealing with a complex tooling setup such as bundling, transpiling etc.
+
+You should always configure and use the following tools:
+
+## ESLint
+
+ESLint is a linting tool for JavaScript. By providing specific configuration defined in the`eslint.config.mjs` file it prevents developers from making silly mistakes in their code and enforces consistency in the codebase.
+
+[ESLint Configuration](../eslint.config.mjs)
+
+## Prettier
+
+This is a great tool for formatting code. It enforces a consistent code style across your entire codebase. By utilizing the "format on save" feature in your IDE you can automatically format the code based on the configuration provided in the `.prettierrc.js` file. It will also give you good feedback when something is wrong with the code. If the auto-format doesn't work, something is wrong with the code.
+
+[Prettier Configuration](../.prettierrc.js)
+
+## TypeScript
+
+ESLint is great for catching some of the bugs related to the language, but since JavaScript is a dynamic language ESLint cannot check data that run through the applications, which can lead to bugs, especially on larger projects. That is why TypeScript should be used. It is very useful during large refactors because it reports any issues you might miss otherwise. When refactoring, change the type declaration first, then fix all the TypeScript errors throughout the project and you are done. One thing you should keep in mind is that TypeScript does not protect your application from failing during runtime, it only does type checking during build time, but it increases development confidence drastically anyways. Here is a [great resource on using TypeScript with React](https://react-typescript-cheatsheet.netlify.app/).
+
+## Husky
+
+Husky is a tool for executing git hooks. Use Husky to run your code validations before every commit, thus making sure the code is in the best shape possible at any point of time and no faulty commits get into the repo. It can run linting, code formatting and type checking, etc. before it allows pushing the code. You can check how to configure it [here](https://typicode.github.io/husky/#/?id=usage).
+
+## Absolute imports
+
+Absolute imports should always be configured and used because it makes it easier to move files around and avoid messy import paths such as `../../../Component`. Wherever you move the file, all the imports will remain intact. Here is how to configure it:
+
+For JavaScript (`jsconfig.json`) projects:
+
+```json
+"compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "<%= projectImportPath%>*": ["./<%= srcDir%>/*"]
+    }
+  }
+```
+
+For TypeScript (`tsconfig.json`) projects:
+
+```json
+"compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "<%= projectImportPath%>*": ["./<%= srcDir%>/*"]
+    }
+  }
+```
+
+[Paths Configuration](../tsconfig.json)
+
+It is also possible to define multiple paths for various folders(such as `<%= projectImportPath%>components`, `<%= projectImportPath%>hooks`, etc.), but using `<%= projectImportPath%>*` works very well because it is short enough so there is no need to configure multiple paths and it differs from other dependency modules so there is no confusion in what comes from `node_modules` and what is our source folder. That means that anything in the `src` folder can be accessed via `@`, e.g some file that lives in `<%= srcDir%>/components/MyComponent` can be accessed using `<%= projectImportPath%>components/MyComponent`.
diff --git a/templates/remix-starter/docs/PROJECT_STRUCTURE.md.template b/templates/remix-starter/docs/PROJECT_STRUCTURE.md.template
new file mode 100644
index 00000000..b84e11ff
--- /dev/null
+++ b/templates/remix-starter/docs/PROJECT_STRUCTURE.md.template
@@ -0,0 +1,189 @@
+# 🗄️ Project Structure
+
+This project follows a Feature-Based Architecture adapted for Remix, combining the best practices of Feature-Based Architecture with Remix conventions. The main goal is to organize code around business capabilities while leveraging Remix's file-based routing, loaders, and actions.
+
+## Architecture Overview
+
+The codebase is organized into three main categories:
+
+1. **Routes** (`<%= srcDir%>/routes/`) - Remix file-based routing and nested layouts
+2. **Features** (`<%= srcDir%>/features/`) - Business capabilities
+3. **Shared Infrastructure** (`<%= srcDir%>/shared/`) - Common utilities and components
+
+### Directory Structure
+
+```sh
+<%= srcDir%>
+|
++-- routes # Remix file-based routing
+|   |
+|   +-- _auth.login.tsx # Login route
+|   +-- _auth.register.tsx # Register route
+|   +-- _auth.tsx # Auth layout
+|   +-- dashboard.tsx # Dashboard route
+|   +-- dashboard._index.tsx # Dashboard index
+|   +-- _index.tsx # Home page
+|   +-- _layout.tsx # Root layout
+|
++-- features # Feature modules
+|   |
+|   +-- auth # Authentication feature
+|   |   |
+|   |   +-- components # Feature-specific components
+|   |   |   +-- LoginForm.tsx
+|   |   |   +-- RegisterForm.tsx
+|   |   |
+|   |   +-- hooks # Feature-specific hooks
+|   |   |   +-- useAuth.ts
+|   |   |
+|   |   +-- services # Feature-specific services
+|   |   |   +-- authService.ts
+|   |   |
+|   |   +-- types # Feature-specific types
+|   |   |   +-- auth.types.ts
+|   |   |
+|   |   +-- utils # Feature-specific utilities
+|   |   |   +-- validation.ts
+|   |   |
+|   |   +-- index.ts # Public API
+|   |
+|   +-- dashboard # Dashboard feature
+|   |   |
+|   |   +-- components
+|   |   +-- hooks
+|   |   +-- services
+|   |   +-- types
+|   |   +-- utils
+|   |   +-- index.ts
+|
++-- shared # Shared infrastructure
+    |
+    +-- components # Shared components
+    |   +-- ui # UI components
+    |   |   +-- Button.tsx
+    |   |   +-- Input.tsx
+    |   |
+    |   +-- layout # Layout components
+    |   |   +-- Header.tsx
+    |   |   +-- Footer.tsx
+    |
+    +-- hooks # Shared hooks
+    |   +-- useMediaQuery.ts
+    |   +-- useLocalStorage.ts
+    |
+    +-- lib # Shared libraries
+    |   +-- api.ts
+    |   +-- storage.ts
+    |
+    +-- styles # Shared styles
+    |   +-- theme.ts
+    |   +-- globals.css
+    |
+    +-- utils # Shared utilities
+    |   +-- format.ts
+    |   +-- validation.ts
+```
+
+## Key Principles
+
+1. **Feature Encapsulation**
+   - Each feature is a self-contained module
+   - Features should not depend on the internal structure of other features
+   - All feature exports should go through the `index.ts` file
+
+2. **Remix Integration**
+   - Use `app/routes/` for file-based routing with flat route conventions
+   - Leverage loaders for server-side data fetching and actions for mutations
+   - Use nested layouts via the `_layout` route naming convention
+
+3. **Public API**
+   - Features expose their functionality through a public API (`index.ts`)
+   - Other parts of the application should only import from the feature's root:
+   ```typescript
+   // ✅ Good
+   import { LoginForm } from '<%= projectImportPath%>features/auth';
+
+   // ❌ Bad
+   import { LoginForm } from '<%= projectImportPath%>features/auth/components/LoginForm';
+   ```
+
+4. **Import Rules**
+   To enforce these principles, add the following ESLint rule:
+   ```js
+   {
+       rules: {
+           'no-restricted-imports': [
+               'error',
+               {
+                   patterns: ['<%= projectImportPath%>features/*/*'],
+               },
+           ],
+       }
+   }
+   ```
+
+## Best Practices
+
+1. **Route Organization**
+   - Use Remix's flat route conventions for file-based routing
+   - Keep route modules focused on data loading and rendering
+   - Delegate business logic to features
+
+2. **Feature Development**
+   - Keep features focused on a single business capability
+   - Minimize dependencies between features
+   - Use the shared infrastructure for common functionality
+
+3. **Loaders and Actions**
+   - Use `loader` functions to fetch data on the server
+   - Use `action` functions for form submissions and mutations
+   - Keep route modules thin — delegate to feature services
+
+4. **State Management**
+   - Use Remix's built-in state management via loaders and actions
+   - Leverage URL search params and form data for client state
+   - Use React Context or Zustand for complex client-only state
+
+5. **Data Fetching**
+   - Fetch data in loaders on the server — no API routes needed for your own data
+   - Use Remix's caching and revalidation strategies
+   - Keep data fetching logic in feature services
+
+## Example: Auth Feature
+
+Here's how a typical feature might be structured:
+
+```typescript
+// app/routes/_auth.login.tsx
+import type { LoaderFunctionArgs, ActionFunctionArgs } from '@remix-run/node';
+import { useLoaderData } from '@remix-run/react';
+import { LoginForm } from '<%= projectImportPath%>features/auth';
+import { requireGuest } from '<%= projectImportPath%>features/auth/services';
+
+export async function loader({ request }: LoaderFunctionArgs) {
+  await requireGuest(request);
+  return null;
+}
+
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+  // Handle login mutation
+}
+
+export default function LoginPage() {
+  return (
+    <div>
+      <h1>Login</h1>
+      <LoginForm />
+    </div>
+  );
+}
+```
+
+## Benefits
+
+1. **Maintainability**: Changes to a feature are isolated and don't affect other parts of the application
+2. **Scalability**: New features can be added without modifying existing code
+3. **Performance**: Leverages Remix's server-side rendering and data loading
+4. **Developer Experience**: Clear organization and separation of concerns
+5. **Type Safety**: Full TypeScript support throughout the application
diff --git a/templates/remix-starter/docs/README.md b/templates/remix-starter/docs/README.md
new file mode 100644
index 00000000..56930b0c
--- /dev/null
+++ b/templates/remix-starter/docs/README.md
@@ -0,0 +1,23 @@
+# Extra Documentation
+
+This folder contains detailed documentation for the Remix Starter template. Each document focuses on a specific aspect of the project:
+
+## Core Documentation
+
+- [Project Configuration](./PROJECT_CONFIGURATION.md) - Setup and configuration of development tools
+- [Components and Styling](./COMPONENTS_AND_STYLING.md) - Best practices for components and styling solutions
+- [Performance](./PERFORMANCE.md) - Performance optimization guidelines
+- [State Management](./STATE_MANAGEMENT.md) - State management patterns and recommendations
+
+## Additional Resources
+
+- [Remix Documentation](https://remix.run/docs)
+- [React Documentation](https://reactjs.org/docs/getting-started.html)
+- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
+
+## Getting Help
+
+If you need additional help or have questions:
+
+1. Check the [Remix GitHub Discussions](https://github.com/remix-run/remix/discussions)
+2. Open an issue in this repository
diff --git a/templates/remix-starter/docs/STATE_MANAGEMENT.md b/templates/remix-starter/docs/STATE_MANAGEMENT.md
new file mode 100644
index 00000000..f73580c7
--- /dev/null
+++ b/templates/remix-starter/docs/STATE_MANAGEMENT.md
@@ -0,0 +1,40 @@
+# 🗃️ State Management
+
+There is no need to keep all of your state in a single centralized store. There are different needs for different types of state that can be split into several types:
+
+## Component State
+
+This is the state that only a component needs, and it is not meant to be shared anywhere else. But you can pass it as prop to children components if needed. Most of the time, you want to start from here and lift the state up if needed elsewhere. For this type of state, you will usually need:
+
+- [useState](https://reactjs.org/docs/hooks-reference.html#usestate) - for simpler states that are independent
+- [useReducer](https://reactjs.org/docs/hooks-reference.html#usereducer) - for more complex states where on a single action you want to update several pieces of state
+
+## Application State
+
+This is the state that controls interactive parts of an application. Opening modals, notifications, changing color mode, etc. For best performance and maintainability, keep the state as close as possible to the components that are using it. Don't make everything global out of the box.
+
+Our recommendation is to use any of the following state management libraries:
+
+- [jotai](https://github.com/pmndrs/jotai)
+- [recoil](https://recoiljs.org/)
+- [zustand](https://github.com/pmndrs/zustand)
+
+## Server Cache State
+
+This is the state that comes from the server which is being cached on the client for further usage. It is possible to store remote data inside a state management store such as redux, but there are better solutions for that.
+
+Our recommendation is:
+
+- [react-query](https://react-query.tanstack.com/)
+
+## Form State
+
+This is a state that tracks users inputs in a form.
+
+Forms in React can be [controlled](https://reactjs.org/docs/forms.html#controlled-components) and [uncontrolled](https://reactjs.org/docs/uncontrolled-components.html).
+
+Depending on the application needs, they might be pretty complex with many different fields which require validation.
+
+Although it is possible to build any form using only React, there are pretty good solutions out there that help with handling forms such as:
+
+- [React Hook Form](https://react-hook-form.com/)
diff --git a/templates/remix-starter/public/favicon.svg b/templates/remix-starter/public/favicon.svg
index ba6a6a12..455d826b 100644
--- a/templates/remix-starter/public/favicon.svg
+++ b/templates/remix-starter/public/favicon.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle" role="img">
   <title id="faviconTitle">Create Awesome Node App</title>
   <defs>
     <linearGradient id="cnaFav" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse">
diff --git a/templates/remix-starter/public/logo.svg b/templates/remix-starter/public/logo.svg
index d1914673..6f77d55e 100644
--- a/templates/remix-starter/public/logo.svg
+++ b/templates/remix-starter/public/logo.svg
@@ -2,7 +2,7 @@
   <title id="logoTitle">Create Awesome Node App</title>
   <desc id="logoDesc">A cozy nest of three connected nodes forming the CNA mark.</desc>
   <defs>
-    <linearGradient id="cnaNest" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
+    <linearGradient id="cnaNestMark" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
       <stop offset="0%" stop-color="#f59e0b"/>
       <stop offset="55%" stop-color="#d97706"/>
       <stop offset="100%" stop-color="#0d9488"/>
@@ -11,7 +11,7 @@
   <!-- Cozy nest: three rounded nodes connected by thick strokes -->
   <path
     d="M32 10c-1.6 0-3.1.8-4 2.1l-11 17.6c-1.8 2.9-.3 6.7 3 7.5V46c0 3.3 2.7 6 6 6h12c3.3 0 6-2.7 6-6V37.2c3.3-.8 4.8-4.6 3-7.5L36 12.1C35.1 10.8 33.6 10 32 10Z"
-    stroke="url(#cnaNest)"
+    stroke="url(#cnaNestMark)"
     stroke-width="5"
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/templates/turborepo-starter/public/favicon.svg b/templates/turborepo-starter/public/favicon.svg
new file mode 100644
index 00000000..455d826b
--- /dev/null
+++ b/templates/turborepo-starter/public/favicon.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle" role="img">
+  <title id="faviconTitle">Create Awesome Node App</title>
+  <defs>
+    <linearGradient id="cnaFav" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="100%" stop-color="#0d9488"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="8" fill="#fff8f1"/>
+  <path
+    d="M16 5c-1.2 0-2.3.6-3 1.5l-7 11.2c-1.1 1.8-.2 4.2 2 4.7V24c0 2 1.6 3.6 3.6 3.6h8.8c2 0 3.6-1.6 3.6-3.6v-1.6c2.2-.5 3.1-2.9 2-4.7L19 6.5C18.3 5.6 17.2 5 16 5Z"
+    stroke="url(#cnaFav)"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+  <circle cx="16" cy="14" r="2.5" fill="#f59e0b"/>
+  <circle cx="9.5" cy="24" r="2.5" fill="#0d9488"/>
+  <circle cx="22.5" cy="24" r="2.5" fill="#d97706"/>
+</svg>
diff --git a/templates/turborepo-starter/public/logo.svg b/templates/turborepo-starter/public/logo.svg
new file mode 100644
index 00000000..6f77d55e
--- /dev/null
+++ b/templates/turborepo-starter/public/logo.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none" aria-labelledby="logoTitle logoDesc" role="img">
+  <title id="logoTitle">Create Awesome Node App</title>
+  <desc id="logoDesc">A cozy nest of three connected nodes forming the CNA mark.</desc>
+  <defs>
+    <linearGradient id="cnaNestMark" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="55%" stop-color="#d97706"/>
+      <stop offset="100%" stop-color="#0d9488"/>
+    </linearGradient>
+  </defs>
+  <!-- Cozy nest: three rounded nodes connected by thick strokes -->
+  <path
+    d="M32 10c-1.6 0-3.1.8-4 2.1l-11 17.6c-1.8 2.9-.3 6.7 3 7.5V46c0 3.3 2.7 6 6 6h12c3.3 0 6-2.7 6-6V37.2c3.3-.8 4.8-4.6 3-7.5L36 12.1C35.1 10.8 33.6 10 32 10Z"
+    stroke="url(#cnaNestMark)"
+    stroke-width="5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+  <circle cx="32" cy="27" r="5" fill="#f59e0b"/>
+  <circle cx="20" cy="43" r="5" fill="#0d9488"/>
+  <circle cx="44" cy="43" r="5" fill="#d97706"/>
+</svg>
diff --git a/templates/wdio-starter/public/favicon.svg b/templates/wdio-starter/public/favicon.svg
new file mode 100644
index 00000000..455d826b
--- /dev/null
+++ b/templates/wdio-starter/public/favicon.svg
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle" role="img">
+  <title id="faviconTitle">Create Awesome Node App</title>
+  <defs>
+    <linearGradient id="cnaFav" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="100%" stop-color="#0d9488"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="8" fill="#fff8f1"/>
+  <path
+    d="M16 5c-1.2 0-2.3.6-3 1.5l-7 11.2c-1.1 1.8-.2 4.2 2 4.7V24c0 2 1.6 3.6 3.6 3.6h8.8c2 0 3.6-1.6 3.6-3.6v-1.6c2.2-.5 3.1-2.9 2-4.7L19 6.5C18.3 5.6 17.2 5 16 5Z"
+    stroke="url(#cnaFav)"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+  <circle cx="16" cy="14" r="2.5" fill="#f59e0b"/>
+  <circle cx="9.5" cy="24" r="2.5" fill="#0d9488"/>
+  <circle cx="22.5" cy="24" r="2.5" fill="#d97706"/>
+</svg>
diff --git a/templates/wdio-starter/public/logo.svg b/templates/wdio-starter/public/logo.svg
new file mode 100644
index 00000000..6f77d55e
--- /dev/null
+++ b/templates/wdio-starter/public/logo.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none" aria-labelledby="logoTitle logoDesc" role="img">
+  <title id="logoTitle">Create Awesome Node App</title>
+  <desc id="logoDesc">A cozy nest of three connected nodes forming the CNA mark.</desc>
+  <defs>
+    <linearGradient id="cnaNestMark" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="55%" stop-color="#d97706"/>
+      <stop offset="100%" stop-color="#0d9488"/>
+    </linearGradient>
+  </defs>
+  <!-- Cozy nest: three rounded nodes connected by thick strokes -->
+  <path
+    d="M32 10c-1.6 0-3.1.8-4 2.1l-11 17.6c-1.8 2.9-.3 6.7 3 7.5V46c0 3.3 2.7 6 6 6h12c3.3 0 6-2.7 6-6V37.2c3.3-.8 4.8-4.6 3-7.5L36 12.1C35.1 10.8 33.6 10 32 10Z"
+    stroke="url(#cnaNestMark)"
+    stroke-width="5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+  <circle cx="32" cy="27" r="5" fill="#f59e0b"/>
+  <circle cx="20" cy="43" r="5" fill="#0d9488"/>
+  <circle cx="44" cy="43" r="5" fill="#d97706"/>
+</svg>
diff --git a/templates/webextension-react-vite-starter/[src]/assets/img/logo.svg b/templates/webextension-react-vite-starter/[src]/assets/img/logo.svg
index d1914673..6f77d55e 100644
--- a/templates/webextension-react-vite-starter/[src]/assets/img/logo.svg
+++ b/templates/webextension-react-vite-starter/[src]/assets/img/logo.svg
@@ -2,7 +2,7 @@
   <title id="logoTitle">Create Awesome Node App</title>
   <desc id="logoDesc">A cozy nest of three connected nodes forming the CNA mark.</desc>
   <defs>
-    <linearGradient id="cnaNest" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
+    <linearGradient id="cnaNestMark" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
       <stop offset="0%" stop-color="#f59e0b"/>
       <stop offset="55%" stop-color="#d97706"/>
       <stop offset="100%" stop-color="#0d9488"/>
@@ -11,7 +11,7 @@
   <!-- Cozy nest: three rounded nodes connected by thick strokes -->
   <path
     d="M32 10c-1.6 0-3.1.8-4 2.1l-11 17.6c-1.8 2.9-.3 6.7 3 7.5V46c0 3.3 2.7 6 6 6h12c3.3 0 6-2.7 6-6V37.2c3.3-.8 4.8-4.6 3-7.5L36 12.1C35.1 10.8 33.6 10 32 10Z"
-    stroke="url(#cnaNest)"
+    stroke="url(#cnaNestMark)"
     stroke-width="5"
     stroke-linecap="round"
     stroke-linejoin="round"
diff --git a/templates/webextension-react-vite-starter/[src]/newtab/Newtab.css b/templates/webextension-react-vite-starter/[src]/newtab/Newtab.css
index 7da16d68..b20911a2 100644
--- a/templates/webextension-react-vite-starter/[src]/newtab/Newtab.css
+++ b/templates/webextension-react-vite-starter/[src]/newtab/Newtab.css
@@ -26,6 +26,7 @@
     --cna-text: #1f2937;
     --cna-text-muted: #6b7280;
     --cna-border: #fed7aa;
+    --cna-amber-soft: #d97706;
     --cna-glow: rgba(245, 158, 11, 0.08);
     --cna-shadow-glow: 0 0 40px -10px rgba(245, 158, 11, 0.18);
   }
@@ -93,7 +94,8 @@ body {
 .cna-landing__hero,
 .cna-landing__features,
 .cna-landing__docs,
-.cna-landing__footer {
+.cna-landing__footer,
+.cna-landing__card {
   animation: cna-fade-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
   animation-delay: calc(var(--index, 0) * 80ms);
 }
@@ -112,7 +114,7 @@ body {
   margin-bottom: 1rem;
   padding: 0.35rem 0.9rem;
   border-radius: 999px;
-  background: rgba(245, 158, 11, 0.12);
+  background: var(--cna-glow);
   color: var(--cna-amber-soft);
   font-size: 0.8125rem;
   font-weight: 700;
@@ -146,6 +148,7 @@ body {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: 0.5rem;
   padding: 0.75rem 1.25rem;
   border-radius: 0.75rem;
   font-weight: 700;
@@ -154,12 +157,21 @@ body {
   transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
 }
 
+.cna-landing__code {
+  padding: 0.15rem 0.4rem;
+  border-radius: 0.375rem;
+  background: rgba(0, 0, 0, 0.25);
+  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+
 .cna-landing__button:hover {
   transform: translateY(-2px);
 }
 
 .cna-landing__button--primary {
-  background: linear-gradient(135deg, #f59e0b 0%, #d97706 55%, #0d9488 100%);
+  background: linear-gradient(135deg, var(--cna-amber), var(--cna-amber-dark) 55%, var(--cna-teal));
   color: #fff;
   box-shadow: var(--cna-shadow-md);
 }
@@ -215,7 +227,7 @@ body {
   height: 2.25rem;
   margin-bottom: 0.75rem;
   border-radius: 0.625rem;
-  background: rgba(245, 158, 11, 0.12);
+  background: var(--cna-glow);
   font-size: 1.125rem;
 }
 
diff --git a/templates/webextension-react-vite-starter/[src]/newtab/Newtab.tsx.template b/templates/webextension-react-vite-starter/[src]/newtab/Newtab.tsx.template
index e636dc03..e9a04db3 100644
--- a/templates/webextension-react-vite-starter/[src]/newtab/Newtab.tsx.template
+++ b/templates/webextension-react-vite-starter/[src]/newtab/Newtab.tsx.template
@@ -2,19 +2,19 @@ import logo from '@/assets/img/logo.svg';
 import './Newtab.css';
 
 const features = [
-  { icon: '🔌', title: 'Browser extension shell', description: 'Popup, options, background, and content scripts already wired.' },
-  { icon: '⚛️', title: 'React + Vite', description: 'Fast HMR and a modern component model for every extension page.' },
-  { icon: '🛡️', title: 'TypeScript', description: 'Typed APIs and extension messaging from day one.' },
-  { icon: '📦', title: 'Feature-based structure', description: 'Keep content, background, and UI organized as you grow.' },
-  { icon: '🎨', title: 'CNA identity', description: 'Cozy amber + teal palette with dark/light support.' },
-  { icon: '🧩', title: 'Addon ready', description: 'Layer state tools, storage wrappers, and deployment configs.' },
+  { icon: '\uD83D\uDD0C', title: 'Browser extension shell', description: 'Popup, options, background, and content scripts already wired.' },
+  { icon: '\u269B\uFE0F', title: 'React + Vite', description: 'Fast HMR and a modern component model for every extension page.' },
+  { icon: '\uD83D\uDEE1\uFE0F', title: 'TypeScript', description: 'Typed APIs and extension messaging from day one.' },
+  { icon: '\uD83D\uDCE6', title: 'Feature-based structure', description: 'Keep content, background, and UI organized as you grow.' },
+  { icon: '\uD83C\uDFA8', title: 'CNA identity', description: 'Cozy amber + teal palette with dark/light support.' },
+  { icon: '\uD83E\uDDE9', title: 'Addon ready', description: 'Layer state tools, storage wrappers, and deployment configs.' },
 ];
 
 const docs = [
-  { label: 'Project overview', href: './docs/README.md' },
-  { label: 'Project structure', href: './docs/PROJECT_STRUCTURE.md' },
-  { label: 'Components & styling', href: './docs/COMPONENTS_AND_STYLING.md' },
-  { label: 'State management', href: './docs/STATE_MANAGEMENT.md' },
+  { label: 'Project overview', href: '/docs/README.md' },
+  { label: 'Project structure', href: '/docs/PROJECT_STRUCTURE.md' },
+  { label: 'Components & styling', href: '/docs/COMPONENTS_AND_STYLING.md' },
+  { label: 'State management', href: '/docs/STATE_MANAGEMENT.md' },
 ];
 
 const Newtab = () => {
@@ -34,10 +34,10 @@ const Newtab = () => {
             scripts, and content scripts as your product evolves.
           </p>
           <div className="cna-landing__actions">
-            <a href="/<%= srcDir %>/popup/Popup.tsx" className="cna-landing__button cna-landing__button--primary">
-              Start editing
-            </a>
-            <a href="./docs/README.md" className="cna-landing__button cna-landing__button--secondary">
+            <span className="cna-landing__button cna-landing__button--primary">
+              Start editing <code className="cna-landing__code"><%= srcDir %>/newtab/Newtab.tsx</code>
+            </span>
+            <a href="/docs/README.md" className="cna-landing__button cna-landing__button--secondary">
               Read the docs
             </a>
           </div>
diff --git a/templates/webextension-react-vite-starter/[src]/popup/Popup.css b/templates/webextension-react-vite-starter/[src]/popup/Popup.css
index afd37949..5ed76b2d 100644
--- a/templates/webextension-react-vite-starter/[src]/popup/Popup.css
+++ b/templates/webextension-react-vite-starter/[src]/popup/Popup.css
@@ -26,7 +26,7 @@
   height: 52px;
   padding: 0.5rem;
   border-radius: 0.95rem;
-  background: rgba(245, 158, 11, 0.12);
+  background: var(--cna-glow, rgba(245, 158, 11, 0.12));
 }
 
 .popup__eyebrow {
diff --git a/templates/webextension-react-vite-starter/[src]/popup/index.css b/templates/webextension-react-vite-starter/[src]/popup/index.css
index 24f53907..edfd60e5 100644
--- a/templates/webextension-react-vite-starter/[src]/popup/index.css
+++ b/templates/webextension-react-vite-starter/[src]/popup/index.css
@@ -1,12 +1,16 @@
 body {
+  --cna-amber-soft: #fbbf24;
+  --cna-amber: #f59e0b;
+  --cna-teal: #0d9488;
+  --cna-glow: rgba(245, 158, 11, 0.14);
   --popup-background: #0f172a;
   --popup-surface: rgba(30, 41, 59, 0.96);
   --popup-border: rgba(254, 215, 170, 0.2);
   --popup-text: #f8fafc;
   --popup-muted: #94a3b8;
-  --popup-accent: #fbbf24;
-  --popup-button-gradient-start: #f59e0b;
-  --popup-button-gradient-end: #0d9488;
+  --popup-accent: var(--cna-amber-soft, #fbbf24);
+  --popup-button-gradient-start: var(--cna-amber, #f59e0b);
+  --popup-button-gradient-end: var(--cna-teal, #0d9488);
   --popup-button-text: #ffffff;
   width: 320px;
   min-height: 280px;
@@ -16,6 +20,28 @@ body {
   -moz-osx-font-smoothing: grayscale;
   color: var(--popup-text);
   background:
-    radial-gradient(circle at top, rgba(245, 158, 11, 0.14), transparent 38%),
+    radial-gradient(circle at top, var(--cna-glow, rgba(245, 158, 11, 0.14)), transparent 38%),
     var(--popup-background);
 }
+
+@media (prefers-color-scheme: light) {
+  body {
+    --popup-background: #fffcf5;
+    --popup-surface: rgba(255, 255, 255, 0.96);
+    --popup-border: rgba(254, 215, 170, 0.6);
+    --popup-text: #1f2937;
+    --popup-muted: #6b7280;
+    --cna-amber-soft: #d97706;
+    --popup-accent: var(--cna-amber-soft, #d97706);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/templates/webextension-react-vite-starter/public/favicon.svg b/templates/webextension-react-vite-starter/public/favicon.svg
index ba6a6a12..455d826b 100644
--- a/templates/webextension-react-vite-starter/public/favicon.svg
+++ b/templates/webextension-react-vite-starter/public/favicon.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none" aria-labelledby="faviconTitle" role="img">
   <title id="faviconTitle">Create Awesome Node App</title>
   <defs>
     <linearGradient id="cnaFav" x1="4" y1="4" x2="28" y2="28" gradientUnits="userSpaceOnUse">
diff --git a/templates/webextension-react-vite-starter/public/logo.svg b/templates/webextension-react-vite-starter/public/logo.svg
new file mode 100644
index 00000000..6f77d55e
--- /dev/null
+++ b/templates/webextension-react-vite-starter/public/logo.svg
@@ -0,0 +1,23 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none" aria-labelledby="logoTitle logoDesc" role="img">
+  <title id="logoTitle">Create Awesome Node App</title>
+  <desc id="logoDesc">A cozy nest of three connected nodes forming the CNA mark.</desc>
+  <defs>
+    <linearGradient id="cnaNestMark" x1="10" y1="10" x2="54" y2="54" gradientUnits="userSpaceOnUse">
+      <stop offset="0%" stop-color="#f59e0b"/>
+      <stop offset="55%" stop-color="#d97706"/>
+      <stop offset="100%" stop-color="#0d9488"/>
+    </linearGradient>
+  </defs>
+  <!-- Cozy nest: three rounded nodes connected by thick strokes -->
+  <path
+    d="M32 10c-1.6 0-3.1.8-4 2.1l-11 17.6c-1.8 2.9-.3 6.7 3 7.5V46c0 3.3 2.7 6 6 6h12c3.3 0 6-2.7 6-6V37.2c3.3-.8 4.8-4.6 3-7.5L36 12.1C35.1 10.8 33.6 10 32 10Z"
+    stroke="url(#cnaNestMark)"
+    stroke-width="5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    fill="none"
+  />
+  <circle cx="32" cy="27" r="5" fill="#f59e0b"/>
+  <circle cx="20" cy="43" r="5" fill="#0d9488"/>
+  <circle cx="44" cy="43" r="5" fill="#d97706"/>
+</svg>