shellcat-com · shellcat-com · Jul 17, 2026 · Jul 17, 2026
diff --git a/README.md b/README.md
@@ -9,17 +9,17 @@
 </p>
 
 <p>
-  <a href="https://parcel.parable.dev"><img alt="Live site" src="https://img.shields.io/badge/live_site-parcel.parable.dev-8b5cf6?style=flat-square&labelColor=1a1a1a"></a>
+  <a href="https://parcel-zeta-silk.vercel.app"><img alt="Live site" src="https://img.shields.io/badge/live_site-parcel--zeta--silk.vercel.app-8b5cf6?style=flat-square&labelColor=1a1a1a"></a>
   <img alt="macOS 13+" src="https://img.shields.io/badge/macOS-13%2B-000?style=flat-square&logo=apple&logoColor=white&labelColor=1a1a1a">
   <img alt="14 tools" src="https://img.shields.io/badge/tools-14-ec4899?style=flat-square&labelColor=1a1a1a">
   <img alt="0 cloud AI" src="https://img.shields.io/badge/cloud_AI-0-5ee4b5?style=flat-square&labelColor=1a1a1a">
   <a href="LICENSE"><img alt="MIT License" src="https://img.shields.io/badge/license-MIT-22c55e?style=flat-square&labelColor=1a1a1a"></a>
 </p>
 
 <p>
-  <a href="https://parcel.parable.dev"><b>Website</b></a>
+  <a href="https://parcel-zeta-silk.vercel.app"><b>Website</b></a>
   &nbsp;·&nbsp;
-  <a href="https://parcel.parable.dev/downloads/Parcel.zip"><b>Download</b></a>
+  <a href="https://parcel-zeta-silk.vercel.app/downloads/Parcel.zip"><b>Download</b></a>
   &nbsp;·&nbsp;
   <a href="docs/README.md">Docs</a>
   &nbsp;·&nbsp;
@@ -28,7 +28,7 @@
   <a href="CONTRIBUTING.md">Contributing</a>
 </p>
 
-<a href="https://parcel.parable.dev">
+<a href="https://parcel-zeta-silk.vercel.app">
   <img src=".github/assets/hero.svg" alt="Parcel — Capture, mark up, and ship" width="100%">
 </a>
 
@@ -116,7 +116,7 @@ Sources/Parcel/
   Vision/        On-device OCR, faces, QR, translation
   Upload/        Supabase Storage REST client
   Hotkeys/       Carbon global hotkey + Preferences
-Website/         Next.js marketing site (parcel.parable.dev)
+Website/         Next.js marketing site (parcel-zeta-silk.vercel.app)
 docs/            Architecture, parity, QA, integrations
 Scripts/         release.sh, generate_icons.sh
 Casks/           Homebrew cask (parcel.rb)
@@ -170,5 +170,5 @@ Parcel is released under the [MIT License](LICENSE) — free and open. Built by
 <br>
 
 <div align="center">
-  <sub>Part of the Parable ecosystem · <a href="https://github.com/bswxyz/parable">Parable components & templates</a> · <a href="https://parcel.parable.dev">parcel.parable.dev</a></sub>
+  <sub>Part of the Parable ecosystem · <a href="https://github.com/bswxyz/parable">Parable components & templates</a> · <a href="https://parcel-zeta-silk.vercel.app">parcel-zeta-silk.vercel.app</a></sub>
 </div>
diff --git a/Website/README.md b/Website/README.md
@@ -13,7 +13,38 @@ Same stack as [Parable](https://github.com/bswxyz/parable): Next.js App Router,
 | Fonts | Geist Sans, Geist Mono, Instrument Serif |
 | Theme | next-themes (dark default) |
 
-Visual components (`DitherAurora`, `ShimmerButton`, `VelocityMarquee`) are adapted from the Parable registry.
+## Brand colors
+
+Edit **`lib/theme.ts`** — one file controls accent, secondary, aurora gradient, and backgrounds site-wide:
+
+```ts
+export const theme = {
+  accent: "#5ee4b5",    // mint — CTAs, glow
+  secondary: "#8b5cf6", // violet — icons, links
+  tertiary: "#ec4899",  // fuchsia — gradient stops
+  ink: "#070708",       // hero/footer background
+  aurora: ["#8b5cf6", "#5ee4b5", "#ec4899"],
+};
+```
+
+Variables are injected on `<html>` in `app/layout.tsx` as `--brand-*` CSS custom properties.
+
+
+## Pages
+
+| Route | Purpose |
+|-------|---------|
+| `/` | Marketing landing — hero, features, workflow, install, FAQ |
+| `/docs` | User documentation index |
+| `/docs/getting-started` | Install & first Capture |
+| `/docs/capture` | Freeze-then-select, scroll stitch |
+| `/docs/editor` | Tools, Layers, Beautify, export |
+| `/docs/recording` | MP4, trim, GIF |
+| `/docs/shortcuts` | Keyboard reference |
+| `/docs/privacy` | On-device Vision, permissions |
+| `/docs/supabase` | Optional upload setup |
+
+Contributor architecture docs remain in the repo [`docs/`](../docs/) folder.
 
 ## Develop
 
@@ -47,6 +78,7 @@ Static output lands in `out/` — deployed to [parcel.parable.dev](https://parce
 | `public/downloads/Parcel.zip` | macOS app download |
 | `public/appcast.xml` | Sparkle update feed |
 | `public/og.svg` | Open Graph image |
+| `public/assets/hero-marketing.png` | Higgsfield-generated marketing visual |
 | `public/favicon.svg` | Favicon |
 
 Release builds copy `build/Parcel.zip` → `public/downloads/Parcel.zip` via `Scripts/release.sh`.
diff --git a/Website/app/docs/capture/page.tsx b/Website/app/docs/capture/page.tsx
@@ -0,0 +1,70 @@
+import { DocsBreadcrumb, DocsCallout } from "@/components/docs/docs-shell";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Capture & Selection",
+  description: "Freeze-then-select Capture, window snap, and scroll stitching.",
+};
+
+export default function CaptureDocPage() {
+  return (
+    <>
+      <DocsBreadcrumb section="Core workflows" title="Capture & Selection" />
+      <h1>Capture & Selection</h1>
+      <p className="docs-lead">
+        Parcel freezes every display with ScreenCaptureKit, then lets you choose
+        a <strong>Selection</strong> from those pixels — region drag, window snap,
+        or scroll stitch.
+      </p>
+
+      <h2>Freeze-then-select</h2>
+      <p>
+        On hotkey, Parcel captures full-resolution images of all displays and
+        shows them in the <strong>Overlay</strong> — a borderless full-screen
+        panel per display. You work on frozen pixels, not a live view.
+      </p>
+      <ul>
+        <li>
+          <strong>Region</strong> — click and drag any rectangle
+        </li>
+        <li>
+          <strong>Window snap</strong> — hover a highlighted window and click, or
+          press <kbd>Tab</kbd> to cycle targets
+        </li>
+        <li>
+          <strong>Cancel</strong> — <kbd>Esc</kbd> dismisses the Overlay with no
+          Editor
+        </li>
+      </ul>
+
+      <h2>Scroll Capture</h2>
+      <p>
+        For tall content that does not fit on screen, choose{" "}
+        <strong>Scroll Capture</strong> from the menu bar while the Overlay is
+        active:
+      </p>
+      <ol>
+        <li>Drag a tall Selection region in the Overlay.</li>
+        <li>Scroll the source content and add frames from the menu bar.</li>
+        <li>
+          Parcel stitches frames with on-device Vision registration — live preview
+          as frames stack.
+        </li>
+        <li>Finish to open the stitched Capture in the Editor.</li>
+      </ol>
+
+      <h2>Multi-display</h2>
+      <p>
+        One Overlay panel appears per display. Your Selection is cropped from the
+        display where you release — pixels stay at native resolution and retina
+        scale.
+      </p>
+
+      <DocsCallout variant="warning" title="Screen Recording permission">
+        ScreenCaptureKit requires Screen Recording TCC. If Capture fails after an
+        update, re-check System Settings and quit/reopen Parcel. Use a stable
+        Developer ID signing identity so permission persists across updates.
+      </DocsCallout>
+    </>
+  );
+}
diff --git a/Website/app/docs/editor/page.tsx b/Website/app/docs/editor/page.tsx
@@ -0,0 +1,71 @@
+import { DocsBreadcrumb, DocsCallout } from "@/components/docs/docs-shell";
+import { annotationTools } from "@/lib/site";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Editor & Annotations",
+  description: "Fourteen Tools, Layer stack, Beautify, Adjustments, and export.",
+};
+
+export default function EditorDocPage() {
+  return (
+    <>
+      <DocsBreadcrumb section="Core workflows" title="Editor & Annotations" />
+      <h1>Editor & Annotations</h1>
+      <p className="docs-lead">
+        The Editor is where you mark up a Capture, tune output, and copy or save.
+        One render pipeline drives display and export —{" "}
+        <strong>on screen = saved</strong>.
+      </p>
+
+      <h2>Fourteen Tools</h2>
+      <p>Select a Tool from the toolbar to create Annotations:</p>
+      <ul className="columns-1 sm:columns-2">
+        {annotationTools.map((tool) => (
+          <li key={tool}>{tool}</li>
+        ))}
+      </ul>
+
+      <h2>Click-to-edit</h2>
+      <p>
+        Switch to <strong>Select</strong>, click any Annotation, and use the style
+        bar to change stroke, color, arrow style, censor mode, or fill. Move and
+        resize with handles. The Layer stack supports reorder via the layers
+        panel.
+      </p>
+
+      <h2>Censor modes</h2>
+      <ul>
+        <li>
+          <strong>Blur / Pixelate / Solid</strong> — standard redaction
+        </li>
+        <li>
+          <strong>Erase</strong> — samples surrounding Capture pixels
+        </li>
+        <li>
+          <strong>Auto-redact</strong> — regex PII and detected faces via on-device
+          Vision
+        </li>
+      </ul>
+
+      <h2>Beautify & Adjustments</h2>
+      <p>
+        <strong>Beautify</strong> wraps your Canvas with gradient backgrounds,
+        window chrome, padding, radius, and shadow — plus saved brand kits.
+        <strong> Adjustments</strong> run a Core Image chain on the base Capture
+        (exposure, contrast, saturation, and more).
+      </p>
+      <DocsCallout variant="note">
+        Adjustments and Beautify are document-level — outside the undo stack. Use
+        each panel&apos;s Reset to revert.
+      </DocsCallout>
+
+      <h2>Export formats</h2>
+      <p>
+        Copy or save as PNG, JPEG, HEIC, or TIFF. Format and quality live in the
+        output panel. Re-open any past Capture from history (<kbd>⌘⇧H</kbd>) with
+        annotations and settings intact.
+      </p>
+    </>
+  );
+}
diff --git a/Website/app/docs/getting-started/page.tsx b/Website/app/docs/getting-started/page.tsx
@@ -0,0 +1,81 @@
+import { DocsBreadcrumb, DocsCallout } from "@/components/docs/docs-shell";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Quick start",
+  description: "Install Parcel, grant Screen Recording, and take your first Capture.",
+};
+
+export default function GettingStartedPage() {
+  return (
+    <>
+      <DocsBreadcrumb section="Getting started" title="Quick start" />
+      <h1>Quick start</h1>
+      <p className="docs-lead">
+        Parcel lives in your menu bar. After install, grant Screen Recording once,
+        quit and reopen — then press <kbd>⌘⇧2</kbd> to Capture.
+      </p>
+
+      <h2>1. Download & install</h2>
+      <p>
+        Download the signed Release build from the{" "}
+        <a href="/downloads/Parcel.zip">direct download</a> or build from source
+        with Xcode. Drag <strong>Parcel.app</strong> to Applications.
+      </p>
+      <DocsCallout variant="tip" title="Homebrew">
+        Once published to a tap:{" "}
+        <code>brew install --cask parcel</code>
+      </DocsCallout>
+
+      <h2>2. First launch</h2>
+      <ol>
+        <li>Complete the welcome onboarding flow.</li>
+        <li>
+          When prompted, open <strong>System Settings → Privacy & Security →
+          Screen Recording</strong> and enable Parcel.
+        </li>
+        <li>
+          <strong>Quit and reopen</strong> Parcel — TCC permissions only apply
+          after restart.
+        </li>
+      </ol>
+
+      <h2>3. Take your first Capture</h2>
+      <ol>
+        <li>
+          Press <kbd>⌘⇧2</kbd> (configurable in Preferences) from any app.
+        </li>
+        <li>
+          Every display freezes. Drag a region, press <kbd>Tab</kbd> to snap to
+          a window, or choose Scroll Capture from the menu bar.
+        </li>
+        <li>
+          Release to open the <strong>Editor</strong> with your Selection cropped
+          at full resolution.
+        </li>
+        <li>
+          Mark up, then <kbd>⌘C</kbd> to copy or <kbd>⌘S</kbd> to save. What you
+          see on screen is exactly what exports.
+        </li>
+      </ol>
+
+      <DocsCallout variant="note" title="No Accessibility permission">
+        Parcel uses Carbon global hotkeys — not <code>CGEventTap</code> — so you
+        never need Accessibility access for Capture.
+      </DocsCallout>
+
+      <h2>Next steps</h2>
+      <ul>
+        <li>
+          <a href="/docs/capture">Capture & Selection</a> — scroll stitch, multi-display
+        </li>
+        <li>
+          <a href="/docs/editor">Editor & Annotations</a> — all fourteen Tools
+        </li>
+        <li>
+          <a href="/docs/shortcuts">Keyboard shortcuts</a> — full reference
+        </li>
+      </ul>
+    </>
+  );
+}
diff --git a/Website/app/docs/layout.tsx b/Website/app/docs/layout.tsx
@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+import { DocsShell } from "@/components/docs/docs-shell";
+
+export const metadata: Metadata = {
+  title: "Documentation",
+  description:
+    "User guides for Parcel — install, Capture, annotate, record, and upload on macOS.",
+};
+
+export default function DocsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <main id="main" className="border-b">
+      <div className="relative overflow-hidden border-b bg-[#0a0a0b]">
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_50%_-10%,rgba(139,92,246,0.18),transparent_60%)]"
+        />
+        <div className="relative mx-auto max-w-7xl px-4 py-14 md:py-20">
+          <p className="font-mono text-xs uppercase tracking-widest text-zinc-400">
+            Parcel · User guides
+          </p>
+          <h1 className="mt-3 max-w-2xl text-3xl font-semibold tracking-tight text-zinc-50 md:text-4xl">
+            Everything you need to{" "}
+            <em className="font-display font-normal not-italic text-zinc-300">
+              Capture
+            </em>{" "}
+            with confidence.
+          </h1>
+          <p className="mt-4 max-w-xl text-zinc-300">
+            Install, permissions, workflows, and integrations — written for
+            daily macOS use, not just contributors.
+          </p>
+        </div>
+      </div>
+      <DocsShell>{children}</DocsShell>
+    </main>
+  );
+}