Files
replypier/design/brand-refresh/README.md
T

36 lines
3.1 KiB
Markdown
Raw Normal View History

# 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/replypier.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. Product naming is ReplyPier throughout: UI copy, code identifiers, package and image names, domains and docs all use the same word, so a mismatch anywhere is a bug worth fixing.
## 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.