replypier/design/brand-refresh/DESIGN.md

Paper Boat / 纸舟

Selected direction: round 3, option 2 / Paper Boat. Confirmed by user.

Visual specification

• Preserve the existing dashboard and widget layout, typography, product naming and third-party logos.
• Primary symbol: folded boat, three solid facets, no gradients, thin details, outline or lettering. Celadon #2E6A5C, sage #8BB49C, fold #568B73.
• Small-size mark uses the same silhouette with stronger separation between hull facets; native SVG at 16–32px. Install icons have warm porcelain #F4F1EB background and sufficient maskable safe area.
• Human presets: twelve editorial cut-paper portraits, consistent close crop, muted circular background, diverse adults. Replace the bundled preset images; preserve uploaded personal photos.
• AI presets: ten vector paper-craft emblems (boat, letter, pinwheel, book, plane, kite, folded heart, house, leaf, boat in ink). Replace generated orb rendering while retaining stored variant indexes. Existing terminal option remains available with a muted celadon accent.
• Shared brand SVG component for dashboard/chat footer marks; the standalone loader uses the same boat geometry.

Element inventory / asset loop

Element	Decision	Format / location	Consumers
Selected board	reuse, reference only	reference-paper-boat.png	design reference
Primary boat mark	export as native vector	existing logo SVG paths	logo, favicon, footer
App/install icons	export from boat vector	existing public PNG/ICO paths	PWA, iOS, notification badge
Twelve human headshots	generate sheet, extract individual cells	existing src/assets/avatars/avatar-*.png	preset picker and uploaded preset selections
Ten AI paper emblems	export native vector	src/assets/avatars/paper-*.svg	legacy orb variants, preview, widget
Existing UI and uploaded photos	reuse	unchanged	all existing callers

State: COMPLETE. Direction confirmation, asset creation, implementation and visual QA passed. Asset inventory and consumer paths are in asset-manifest.json. The local dashboard, widget and standalone loader have been rebuilt and the existing browser's PWA update has been activated.

Acceptance

• npm run type-check: passed.
• ./deploy/local/local.sh build: passed for dashboard, widget and loader. Production loader also regenerated with scripts/build-webclient-prod.ts.
• Targeted Vitest suites: 76 tests passed across the avatar, upload URL, loader lifecycle/identity, startup refusal, login, sidebar and dashboard paths. On this machine, use NODE_OPTIONS=--no-experimental-webstorage so Node 26's Web Storage global does not mask jsdom storage.
• Browser inspection: favicon, sidebar mark, all preset thumbnails, preview avatar/header/message bubbles and actual embedded widget footer/header/message avatars. Selected a human preset, verified its upload and preview, then restored the demo's selected paper boat and inspected the real widget.
• Updated the dashboard badge test's stale .notification-badge selector to the existing .topbar .badge-float markup; notification behavior was unchanged.
• No browser relaunch or new debugging socket, service restart or database migration was needed.

Compatibility

Keep avatar_style: orb, orb_variant and the existing utility exports as storage/API compatibility names. Generated orb data URIs are replaced at render time from metadata, without modifying customer uploads or database history. No database migration is needed.