Files
replypier/design/brand-refresh

ReplyPier 图标与头像更新

Brief

将网页标签图标、聊天底部品牌标识及客服头像重新设计并替换。保持现有页面布局与功能;其他图片先征求用户意见。现有工作区有未提交的界面更新,不覆盖。

Pipeline

  • Brief / inventory: complete
  • Style exploration: complete; user selected round 3 option 2, Paper Boat.
  • Design spec / tokens: DESIGN.md; complete.
  • Assets / consumers / QA: asset-manifest.json.
  • Production assets: twelve generated portraits, ten native paper-craft SVGs, shared boat mark and favicon/install exports.
  • Implementation: shared BrandMark.vue, compatible avatar utilities, dashboard preview, live widget and standalone loader.
  • Verification: type check and local dashboard/widget/loader builds passed. Targeted tests passed (76 total across the affected suites). Browser QA includes the preset picker and switching from paper artwork to an uploaded portrait and back.

Current sources

  • Browser icon: frontend/public/favicon.svg; duplicate frontend/public/assets/favicon.svg; ICO fallbacks at both locations.
  • Brand mark: frontend/src/assets/logo.svg, frontend/public/images/logo.svg, frontend/public/assets/images/logo.svg, logo_dark.svg.
  • Footer marks: shared frontend/src/components/common/BrandMark.vue; frontend/src/webclient/chattermate.js imports the same source SVG for its error footer.
  • Preset portraits: 12 PNGs in frontend/src/assets/avatars/avatar-*.png; selected through AgentDetail.vue.
  • Paper-craft avatars: ten SVGs under frontend/src/assets/avatars/paper-*.svg; loaded by frontend/src/utils/orb.ts under the original stored variant indexes. Old generated data URIs are refreshed from avatar metadata at render time. Uploaded photos remain unchanged.
  • Additional candidates: PWA/install icons, default user/robot and role avatars, login/signup illustration. Third-party integration logos should retain official identities.

Design constraints

Use existing ink/porcelain foundation: paper #F4F1EB, ink #16171A, vermilion #B23A22, celadon #2E6A5C, brass #8A6326. Keep 16px brand marks simple and readable. No change to customer-uploaded images or unrelated UI. Visible product naming currently mixes ReplyPier and ChatterMate; do not infer a full rename from the asset request.

Concepts

A — Harbour / 港湾:restrained celadon speech-bubble mark, flat editorial portraits; low complexity; safe for business use, less distinctive. B — Seal / 回音印:vermilion reply seal, warm illustrated portraits and restrained AI medallions; medium complexity; best match to existing tokens, detail must survive small sizes. C — Beacon / 信标:ink/celadon geometric beacon, playful abstract AI companions and graphic portraits; medium complexity; memorable but more characterful than conventional support branding.

Each board shows brand mark, compact lockup, 16/32px icon simulation, chat footer/header application and portrait/AI avatar samples. Typography follows the existing Hanken Grotesk / Chinese sans foundation; only the concept headings may be editorial.