# CLAWD Mail

**Your agent. Its own inbox.**

CLAWD Mail brings agent inboxes, threaded conversations, drafts, user accounts, and private files into one product. Its primary identity is the supplied plush lobster mascot, regenerated with a large ivory envelope, mint flap, and Solana emblem seal. Product copy uses **CLAWD Mail**; infrastructure identifiers such as `clawd-mail-inbox`, database tables, session cookies, provider names, and the private `clawd-mail` bucket retain their operational names.

## Visual identity

The design kit is copied from `/Users/8bit/sol-gpt/design`. The runtime uses the supplied ABC Diatype Regular, Medium, and Bold fonts and ABC Diatype Semi-Mono Regular for metadata. The exact supplied palette CSS/JSON, `solanaGradient.jpg`, dark gradient, and Solana SVG logos are retained in `public/brand/`.

| Element | Treatment |
| --- | --- |
| Primary action | Solana green `#14F195` |
| Accent and active folder | Solana purple `#9945FF`, lilac tint |
| Primary mascot | Plush green-to-cyan-to-violet lobster, ivory envelope and mint flap |
| Secondary mail art | Coral lobster, purple mailbox, mint accents |
| App background | Charcoal `#0E0E12` |
| Surface | `#16161C` |
| Primary typography | ABC Diatype |
| Technical metadata | ABC Diatype Semi-Mono |

The Solana logotype appears as a design-palette credit. The primary mascot retains the supplied character's Solana emblem as an envelope seal. CLAWD Mail's mail artwork is generated specifically for this product.

## Original artwork

All artwork was generated with the built-in **image_gen** tool and copied into this repository. The version 2 logo is an edit of the exact user-supplied plush mascot; its face, silhouette, and gradient are preserved. App and folder icons retain genuine transparency. Earlier PNGs remain available as secondary art. The exact final prompts are in [artwork-prompts.json](artwork-prompts.json), with the version 2 edit also recorded in [logo-v2-prompt.json](logo-v2-prompt.json).

| Asset | Use |
| --- | --- |
| `public/brand/clawd-mail-logo-v2.png` | Primary mascot and welcome hero, original transparent 1254px PNG |
| `public/brand/clawd-mail-logo-v2-256.png` | Optimized shared header mark and sidebar mascot |
| `public/brand/clawd-mail-favicon-v2.png` | 64px favicon |
| `public/brand/clawd-mail-apple-touch-v2.png` | 192px touch icon |
| `public/brand/clawd-mail-social-v2.png` | 1200×630 social preview with the mascot and wordmark |
| `public/brand/lobster-mail-hero.png` | Preserved secondary lobster courier illustration |
| `public/brand/lobster-mail-mark.png` | Preserved original coral app mark |
| `public/brand/icons/inbox.png` | Inbox folder and empty mail state |
| `public/brand/icons/sent.png` | Sent folder and empty sent state |
| `public/brand/icons/draft.png` | Draft folder, draft list, and empty draft state |
| `src/components/MailIcon.vue` | Matching editable utility icons with accessible button labels |

`public/brand/app.css` is the shared design system. `BrandMark.vue` supplies the wordmark. `MailDialog.vue` provides focus containment, Escape handling, and focus restoration. Mobile mail navigation uses a drawer; compose and settings use dialogs that fit the viewport. Reduced-motion preferences are respected.

## Logo motion

The editable 15-second brand animation and landscape/vertical exports are in `artifacts/video/clawd-mail-logo-2026-10-10/`. It uses the exact version 2 PNG and supplied ABC Diatype fonts, with a mascot reveal, moving mail accents, and a held CLAWD Mail end card. See that directory's README for rendering and verification. The exports are local deliverables.

## Product and provider behavior

The same interface supports private Cloudflare mailboxes and AgentMail. Account authentication and private files use the existing Neon/Better Auth integration. With accounts configured, sign in individually or create the initial owner using the installation setup key. Without accounts, the local shared-mailbox key flow is available.

Search filters the conversations loaded for the current inbox and folder. AgentMail currently loads up to 50 conversations. Folder buttons, stars, thread selection, trash restoration, draft reopening/editing/deletion, compose, replies, and attachment downloads are connected to their provider APIs. The UI distinguishes queued, delivered, and bounced mail. Drafts can be saved without sending. Private email HTML remains inside sandboxed frames.

Mailbox addresses follow backend `MAIL_DOMAIN`, which is now `clawdmail.app`. `MAIL_LEGACY_DOMAINS=musebook.trade` preserves existing inboxes. The earlier `mail.x402.wtf.zone` file is retained as historical AgentMail/SES DNS configuration. Website hosting and mailbox domains are configured separately.

## Verification and evidence

Run `npm run verify:ui` to build and exercise the branded app in an isolated browser. It starts a localhost-only fixture with in-memory accounts, storage, and mail providers. It never loads private environment files or sends real email. Chrome is used if installed; otherwise install the Playwright Chromium browser with `npx playwright install chromium`.

Screenshots and the verification report are saved in ignored `artifacts/qa/`. Desktop and mobile checks cover login, search, folders, stars, drafts, compose, replies, trash restoration, downloads, private file upload, logout, and protected navigation. Provider and database checks remain separate from this fixture.

The obsolete Gmail/Google sample artwork is archived under `archive/legacy-ui/` and is excluded from the public build.