← 返回评审入口 ● Brand Identity · v1.0

kupikupi Brand Pack

Logo · Wordmark · Favicon · iOS/Android App icon · Telegram Mini App icon · Telegram Bot 头像 — 全部 SVG 矢量,可直接缩放使用。设计语言:「k」字符 + 圆角绿色方块 + 橙色 dot,延续现有页面 brand 视觉。

设计概念

kupikupi 是中俄跨境代购品牌,既要专业可信、又要友好亲和。Brand Mark 把品牌名首字母「k」拆成三条几何线 — 一根纵向脊柱代表稳定信赖,两条对角线代表「双向流动」(中国↔俄罗斯)。包裹在绿色圆角方块里(主色 #087A63),橙色 dot 是字符「i」的点 — 同时是商家眼里的「现货红点」,也是用户眼里的「订单激活」。

几何 · Geometric 14% 圆角 绿色权威 橙色友好 最小 16px 可用

Favicon

浏览器标签 · 书签 · 历史记录 — 极小尺寸下要清晰

03
16 × 16
24 × 24
32 × 32
48 × 48
64 × 64
128 × 128
kupikupi — Покупайте в Китае ✕
Google
FILE favicon.svg + favicon-{16,32,64}.png (待导出) HTML <link rel="icon" type="image/svg+xml" href="favicon.svg">

App Icon · iOS / Android

1024×1024 主版 · iOS 自动圆角 · Android 用 Adaptive 圆形 mask

04
iOS · Home screen
9:41● 5G
FaceTime
FaceTime
Mes
Messages
Mail
Mail
kupikupi
kupikupi
TG
Telegram
VK
ВК
YA
Yandex
OZ
Ozon
1024 × 1024 · 原图
kupikupi app icon
FILE app-icon.svg → 1024×1024 PNG 需要尺寸 1024 · 180 · 152 · 120 · 87 · 80 · 60 · 58 · 40

Telegram Mini App icon

512×512 · 启动 mini app 的封面 · 主体集中在中央圆形安全区

05
Telegram · Mini App button
bot
kupikupi bot
● online
👋 Привет! Вставьте ссылку с Taobao — я выкуплю.
Хочу кроссовки Nike
Открой mini-app ↓
Type a message…
mini app Open
512 × 512 · 原图
kupikupi mini app
FILE miniapp-icon.svg BotFather /setmenubuttonimage 上传 PNG

Telegram Bot 头像

640×640 圆形 · 多一点性格(对话气泡装饰) · 让人觉得「在和真人聊」

06
Telegram · Chat list
Мама
Когда придёшь?
14:23
kupikupi bot
Посылка прибыла в Москву ✈️
3
Иван Петров
Ок 👍
12:08
Антон 🇨🇳
Скинул фото
вчера
640 × 640 · 原图
kupikupi bot avatar
FILE bot-avatar.svg BotFather /setuserpic

色彩 · Brand Palette

4 个 brand 色 + 2 中性 — 全部在 _tokens.css 里

07
Primary
#087A63
深绿 · 按钮 · 文字链接
Brand
#0BA888
主色 · LOGO 渐变
CTA / Accent
#FF6B4A
橘 · 行动按钮 · 「i」dot
Highlight
#FFD23F
黄 · 标签 · sticker
Ink
#0F1F1A
深色 · 文字
Price
#FF2E63
红 · 价格 · 限定
Secondary
#6B4EFF
紫 · 推广 · APP-only
Surface
#F7FAF8
面 · 卡片底

使用规范

Do · Don't — 给设计师和实现者的快速指引

08
✓
保持安全边距Mark 周围至少留 1/4 mark 宽度的留白,不要紧贴文字或图片
✕
不要改 K 的几何三条线 + 一个 dot,不增加 serif、装饰线或其他笔画
✓
背景色保留原色#087A63 / 渐变绿色 — 这是 brand 识别核心
✕
不要拉伸或倾斜仅等比缩放 · 不水平/垂直拉伸 · 不旋转 · 不阴影叠加
✓
最小尺寸 16 px低于 16 px 用 favicon.svg 加粗版本
✕
不要换字体Wordmark 永远用 Unbounded 900 · 不要用 Inter 或系统字体替代
✓
橙色 dot 可省极小尺寸(<24px)可以去掉橙色 dot 优先保证 K 清晰
✕
不要在彩色背景上裸放避免在橙色 / 红色 / 紫色背景直接用 mark · 用 wordmark 反白版

下载

全部 SVG 矢量 · 可在 Figma / Sketch / 直接代码引用

09
◾
logo-mark.svg
SVG · 1KB · 64×64
↓
▭
logo-wordmark.svg
SVG · 1KB · 320×64
↓
⬛
logo-stacked.svg
SVG · 1KB · 260×180
↓
🔖
favicon.svg
SVG · 0.7KB · 32×32
↓
📱
app-icon.svg
SVG · 2KB · 1024×1024
↓
🍎
apple-touch-icon.svg
SVG · 0.7KB · 180×180
↓
▣
miniapp-icon.svg
SVG · 1KB · 512×512
↓
🤖
bot-avatar.svg
SVG · 1.5KB · 640×640
↓
🐻
mascot.svg
SVG · 4KB · 400×480 · 当前熊吉祥物
↓
📦 PNG 导出 — 上线时需要把 SVG 转 PNG(iOS / Android / Telegram 都需要 PNG)。可以用 npx svgo + sharp 批量导出,或用 Figma / IconKitchen 手动出图。常用尺寸: 16 / 32 / 64 / 128 / 180 / 192 / 256 / 512 / 1024

HTML head 接入示例

把这段贴进每个页面的 <head> 就能让浏览器和 iOS 正确显示图标

<!-- 现代浏览器 SVG favicon -->
<link rel="icon" type="image/svg+xml" href="/assets/brand/favicon.svg">

<!-- iOS / Android 主屏图标 -->
<link rel="apple-touch-icon" sizes="180x180" href="/assets/brand/apple-touch-icon.png">

<!-- PWA manifest -->
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#087A63">