Option E · v1 · 已锁定

视觉设计方案
这是后续所有页面
的唯一参照物。

本文档定义了 kupikupi v2 (Option E · 反向代购流派) 的视觉语言、组件规范、页面骨架,以及「在哪个情境用什么颜色」的取舍规则。下面所有的页面 — 列表、搜索、详情、订单、地址、充值、退款、设置 — 都必须从这里取样。不要凭直觉新增 token。

VERSIONv1.0 · 2026-05-15

TOKENS_tokens.css

COMPONENTS_e-fashion.css

MASCOTАвиатор Топ (медведь)

Содержание · 11 разделов

设计宣言 · 5 条(含数据来源红线)
色彩系统 · 角色分配
字体与字阶
间距 · 圆角 · 阴影
组件库 · 13 个核心
页面骨架 · 8 种原型
熊 · 使用守则
订单状态色谱
Mini App 差异
做与不做
页面路线图

01 · Принципы

设计宣言 · 5 条不可妥协的原则

每个页面设计完后,用这五条做最后检查。任何一个不过关 — 推倒重做。

CRITICAL · 00

数据全部来自
第三方搜索 API。

kupikupi 不是自营电商 · 不是 marketplace · 不持有 SKU。商品数据来自:Taobao · 1688 · Tmall · Pinduoduo · Weidian。

✗ 绝对不要设计任何 UI 依赖第三方未返回的字段:品牌筛选、颜色筛选、尺码筛选、商品评价、源平台评分、月销量、跨平台评分、统一折扣率、库存倒计时、配送商品图片。源平台 API 只返回搜索结果的基础字段。
✓ 可以使用:商品标题、价格(¥)、商品图、源平台名(Taobao/1688/...)、店铺名(可选,部分平台不给)+ kupikupi 自己产生的数据(订单 · 验货 · 物流 · 服务评分 · 累计代购数)。

如果不确定一个字段「真的存在」,问产品 — 不要凭直觉造数据。

信任是底层,娱乐
是包装。

俄罗斯电商用户先要保证不被坑 — 退款、保险、电话客服一定要露出。「6 фото」「Эскроу」是核心信号。

价格永远是
主角,不是配角。

价格用 Unbounded display 字 + 红色 (`#FF2E63`) + 划线原价。任何商品卡上,价格的视觉权重不能输给标题。

熊出现在
恰当的地方。

熊不是装饰。只在 4 个地方:首页 hero、空状态、成功页、加载页。订单详情 / 表单 / 列表里不要塞熊。

珊瑚 ≠ 青绿。
语义必须分离。

珊瑚 (`#FF6B4A`) 用于「拉新 / 营销 / 把人推向下一步」;青绿 (`#087A63`) 用于「确认 / 已选 / 正常状态」。永远不混用。

02 · Color

色彩系统 · 谁用什么色

7 个主色 + 5 个语义色 + 4 层中性。每个色都有唯一职责。设计时不要问「这里用什么色好看」,问「这里在做什么」,然后查这一节。

A主色 · Brand & CTA

青绿和珊瑚是这套系统的灵魂。两者并列、绝不混淆。

PRIMARY · 青绿

「确认 / 已选 / 安全」

--color-primary #0BA888 · --color-primary-fill #087A63

状态徽章 · 「Доставлено」「Оплачено」
选中态(已选卡片的 1px 边框)
navigation 当前页下划线
表单提交 / 「确认订单」次要 CTA
link / 强调文字

CTA · 珊瑚

「营销 / 推进 / 首次」

--color-cta #FF6B4A · hover #E54A2A

主 CTA · 「Создать заказ」「Найти」
购物车按钮 · 「Купить сейчас」
promo 卡上的箭头按钮
下载 APP / 首单优惠提示
购物车角标 · 通知数字

STICKER · 黄

「福利 / 限时 / 注意」

--color-sticker-yellow #FFD23F

−30% / 首单 / APP ONLY 贴纸(倾斜 −6°)
限时倒计时背景
积分 / 星星图标
warning alert(电子邮件未验证等)

SECONDARY · 紫

「新功能 / Info」

--color-secondary #6B4EFF

NEW 徽章(新上线功能 / 新商品)
info alert / 教程提示
amabssador / partner promo 卡背景
避免大面积使用 — 仅作点缀

B价格红 + 中性 + 语义

「价格红」专属于商品价格,不可挪用。中性色用 4 层:bg / surface / muted / text。

#FF2E63

--color-price商品价格、价格红、价签

#0F1F1A

--color-text正文 · 暖墨绿黑

#5E726B

--color-text-muted辅助文字 · 描述

#F7FAF8

--color-surface卡片底 / 段落分隔

#0BA888

--color-success成功 · 同 primary

#FFA200

--color-warning待支付 / ETA 提示

#FF2E63

--color-danger失败 / 取消(= price 复用)

#6B4EFF

--color-infoinfo alert / NEW

03 · Type

字体 · 「Unbounded × Inter」

两个字族,职责硬切:Unbounded 做大字 / 价格 / 标题(让品牌跳起来),Inter 做正文 / 表单 / 列表(让阅读稳下来)。绝不交叉。

AUnbounded · 大字专属

仅用于 h1 / h2 / hero / 价格 / brand wordmark。900 黑体 + −0.02em letter-spacing 是签名手势。

display-lg Покупайте. 52px / 900Hero h1 · только лендинг

display Тренды этой недели 38px / 900Section header

h1 Заказ № KK-203914 28px / 900Page title

h2 Адрес доставки 22px / 800Card title

price-lg 4 290 ₽ 22px / 900Product price (red)

BInter · 正文专属

所有 body / label / button / 表单文本 — 用 Inter。Cyrillic 行高永远 1.6。

body-lg Вставьте ссылку с Taobao, 1688, Pinduoduo — мы выкупим и отправим в Россию. 16px / 400Hero lede

body Стандартный размер для основного текста, описаний товаров, пунктов меню. 15px / 400Default body

body-sm Caption · мета-информация · вспомогательные подписи. 13px / 400Caption

button Создать заказ → Войти → Подтвердить 14px / 700Все кнопки

overline Шаг 03 · Section label 11px monoSection eyebrow

04 · Spacing · Radii · Shadow

间距 · 圆角 · 阴影

间距走 8 的倍数。圆角分 7 档,卡片默认 lg=16,装饰性容器(promo / hero)用 2xl=24。阴影都带青绿调。

ASpacing scale · 8 的倍数

--space-stack-xs · 4

inline gap, icon padding

--space-stack-sm · 8

chip gap, badge inline gap

--space-stack-md · 12

card 内段落间

--space-stack-lg · 16

grid gap mobile

--space-stack-xl · 24

card padding desktop

--space-stack-2xl · 32

section 内大间距

--space-section-y · 64

section 上下(desktop)

BRadius · 7 档

嵌套规则:内圆角 ≤ 外圆角 − 4px。pill 用 padding 撑开,不靠超大 radius。

xs · 4

sm · 8

md · 12

lg · 16 ★

xl · 20

2xl · 24

pill

默认:卡片 lg / 商品图 md / 输入框 md / 按钮 pill / promo 大卡 2xl / sticker sm。

CShadow · 5 级

nonefilled buttons

softorder-card mobile

card ★default

floatingdropdown · hover

cta珊瑚 CTA glow

05 · Components

组件库 · 13 个核心

所有页面都从这 13 个原子组件里取。如果发现某个页面要新增第 14 个 — 先回到这里加,再去用。

01 · Button.e-btn · 4 variants

02 · Pill / Chip语言切换 · 筛选

RU · RUB

03 · Sticker营销贴纸 · 倾斜

−30% APP ONLY −30%первый

04 · Badge状态徽章 · OrderStatus

Доставлено Ожидает оплаты Отменён NEW

05 · Card基础容器 · 4 variants

默认 · shadow-card

选中 · primary border ★

06 · Field表单输入

07 · Search.e-search · hero / каталог

🔍 Вставьте ссылку…

08 · Product Card.e-product

👟 −42% Taobao

Nike Air Max 270

4 290 ₽ 7 350 ₽ 4.9

09 · Stepper订单状态进度 · 6 шагов

✓

10 · Alert提示条 · 4 颜色

ℹ Telegram-уведомления привязаны.

! Курс ¥ обновлён сегодня.

11 · Eyebrowpage meta · 上标

Россия ← Китай · 14 дней

12 · Empty State熊 + 文案 + CTA

🐻 Заказов пока нет Создайте первый — со скидкой 30%

13 · Bottom CTAmobile sticky · safe-area

Итого

4 290 ₽

06 · Page Archetypes

页面骨架 · 8 种原型

每个未来的页面,都必须归入这 8 个原型之一。新增页面时,先选骨架,再填内容。

A · Landing

главная / акция / партнёрам

天空 hero + 营销墙 + 6 шагов + 趋势商品 + stats + final CTA。熊 ✓

Hero = 天空背景
必须有 e-sticker 装饰
主 CTA 用珊瑚

Hero · 天空 · 大字 + 搜索框🐻

Promo 大卡(熊)

−30%

Амбасадор

6 шагов · tabs + mock

Trending grid · 4 col

Stats band

Final CTA + footer

B · List / Catalog

тренды / категория / результаты поиска / избранное

紧凑 header + 筛选侧栏 + 4 列商品网格。熊 ✗ · 信息密度优先。

无 hero · 直接进入
筛选用青绿选中态
价格红 · sticker 在图角
分页用 ghost 按钮

Breadcrumb + sort + count

筛选面板 · sticky

Цена
Платформа
Размер
Рейтинг

商品网格 · 4 列

Pagination · 1 / 12 / 24 ...

C · Product Detail

товар / промо-страница

左图右买。Sticky purchase rail。底部:相关推荐 + 评测 + 配送计算器。熊 ✗

图库 1:1 · 6 张
价格 display 字 + sticker
右侧 sticky bar 包含 SKU / 配送

Breadcrumb

商品图库 · 6 ракурсов

价格(display 字)
SKU 选择
e-sticker × 2
quantity · qty

珊瑚 CTA · В корзину

Tabs · описание / характеристики / отзывы

Похожие товары · 4 col

D · Order List

мои заказы / история / возвраты

Tabs(черновики / активные / доставлено / отменено) + OrderCard 列表。熊 ✗ · 空状态时 ✓

每张 OrderCard = id + title + meta + badge + total + actions
状态徽章用语义色(见 08)
移动端 OrderCard stack 排列

все · активные(3) · доставлено · отменено

№ KK-203914 · Выкупаем · 4 290 ₽

№ KK-203802 · Доставлено · 6 850 ₽

№ KK-203701 · Ожидает оплаты · 3 120 ₽

Загрузить ещё...

E · Order Detail

детали заказа / трекинг

Hero 区显示订单号 + 状态徽章 + 进度。下面:商品列表、6 шагов stepper、配送地址、收据。熊 ✗

顶部 stepper 是核心
每个 actor(byer / склад / курьер)有 ava
Photo-check 6 张 — 大图 lightbox

№ KK-203914 · badge: Выкупаем · ETA 26 мая

Stepper · 6 шагов · текущий = 3

Товары × 3
Фото-check (6 шт)
Сообщения от байера

Адрес доставки
Метод доставки

Расчёт стоимости

Итого с доставкой · 12 480 ₽

F · Form / Settings

адреса / профиль / уведомления / пароль

单列 max-width 560,清晰节奏。section heading + form field group。熊 ✗

无装饰
提交用青绿 primary(确认)
删除 / 退出用 danger ghost
验证错误用 danger-soft alert

Breadcrumb · Настройки → Адреса

H2 · Address title

ФИО

Город

Индекс

Улица, дом, кв

Телефон

Отмена

Сохранить · primary

G · Wallet / Recharge

пополнение / баланс / купоны / транзакции

大字余额(display 字 + 价格红?不,用 teal)+ 预设充值额度 + 自定义。熊 ✗

余额用青绿 · 不是红(红留给商品价)
预设金额是 chip 选择
支付方式列表必须含 МИР · СБП · TG Stars · USDT
底部:最近交易表

Баланс · 4 290 ₽

Пресет суммы · 500 / 1k / 5k / 10k chips

Своя сумма

Способ оплаты · МИР · СБП · TG ★ · USDT (4 row选)

Пополнить · 5 000 ₽ · CTA

Последние операции · table

H · Empty / Success / Loading

пустая корзина / оплата прошла / 404 / загрузка

居中。熊 ✓ ★ · 这是熊出场的主战场。

熊摆中间 · 200×240
大字标题 · 一句
说明文字 · 一行
一个 primary 或 cta 按钮

🐻

Корзина пуста

Начните с поиска товара

Найти товар

07 · Mascot

熊 · 使用守则

名字:Топ(Топ = top,也是俄罗斯熊的常见名)。飞行员护目镜 + 红围巾 + 抱包裹。出场频率必须严格控制 — 滥用会立刻廉价化。

Топ · Авиатор

飞越中俄边境,把你的包裹安全送到家。护目镜是「视察」、围巾是「俄式」、珊瑚包裹是「kupikupi 的核心交付物」。

✓ Hero

landing 主图,飞翔姿态

✓ Empty

空购物车 · 空订单 · 404

✓ Success

支付成功 · 注册完成

✓ Loading

飞行动画 · 进度条

✓ 公告

系统通知 · 维护提示

✓ promo 大卡

邀请活动 · 抽奖

✓ 做这些

每个 landing 页 hero 区 1 次出场
空状态 / 成功页中心位置
大小固定:200×240 hero / 120×144 empty / 60×72 sticker
背景必须是青绿天空渐变,不要白底
始终配 sticker(−30% 或 APP ONLY)增加视觉趣味

✗ 别这么干

不要在订单详情 / 列表 / 表单页里放熊 — 显得不专业
不要换熊的颜色(#C8A678 / #D4B58A)
不要让熊抱别的东西 — 永远是 #FF6B4A 珊瑚包裹
不要去掉飞行员护目镜或围巾
不要把熊缩小到 < 60px(看不清)
不要在一个屏幕上出现 2 次以上熊

08 · Order Status

订单状态色谱 · 13 enums

所有订单状态徽章必须从这 13 个里选,绝不自创。柔色背景 + 深色文字 是默认呈现形式(可读 / 不喧宾夺主)。

📝 Черновик

draft · grey-on-surface

⏱ Ожидает оплаты

awaiting_payment · warning

✓ Оплачено

paid · success

🛒 Выкупаем

purchasing · primary-soft

📦 На складе

warehouse_in · info

📷 Фото-check

photo_check · sticker-yellow

✓ Готов к отправке

ready_to_ship · primary-soft

🚚 Отправлено

shipped · info

📍 В пути

in_transit · info

✓ Доставлено

delivered · success ★

✗ Отменён

cancelled · danger

↺ Возврат

refunded · info-purple

⏸ На паузе

on_hold · warning

规则: 徽章一律 soft-background + dark-text · 12 字符以内 · sentence case · 不加感叹号。outline 风格仅在「重要但暂时」的状态(photo_check · on_hold)使用。

09 · Mini App

Mini App 差异 · 一行 `data-telegram="1"` 切换

同一套 token,加上 [data-telegram="1"] 后自动降级。设计 Mini App 不用重画,只要遵守差异规则即可。

WEB · DEFAULT

kupikupi.ru

字体 · Unbounded + Inter --font-display
Hero h1 · 52px display-lg 52px
Card padding · 24px 24px
双层 shadow · slate-tinted teal RGB
Sticker 倾斜 −6° rotate
Shimmer skeleton · 1500ms animated
Container · 1280px max capped

MINI APP · OVERRIDE

Telegram WebView

字体 · system-ui only Inter 不加载
Hero h1 · 28px (display 强制降级) 28px
Card padding · 12px 12px ★
单层 shadow · pure black RGB no slate
Sticker 旋转关闭 transform:none avoid jitter
Shimmer skeleton · 0ms (static) disabled
Container · 100% (vertical only) phone

实操:所有页面默认按 Web 设计;然后在 <html data-telegram="1"> 模式下扫一遍,确认: ProductCard 强制 2 列 · 主 CTA 用 .tg-main-button sticky 在底部 · 不放过场动画 · 不放 backdrop-filter blur(性能差) · 整页 ≤ 100KB gzip。

10 · Discipline

做与不做 · 团队红线

设计师和 dev 都遵守。任何违反都拒绝 review。

✓ 必须这么干

所有色都引用 var(--color-*),不写 hex
所有间距是 8 的倍数,引 var(--space-*)
主 CTA 永远珊瑚 + 圆角 999px
商品价格永远 display 字 + --color-price 红
状态徽章永远从 13 个 enum 里选
俄文 sentence case · 行高 1.6 · 无斜体
每个表单字段有 hint 或 placeholder · 错误显示在下方

✗ 绝对不要

不要全大写按钮(俄文比英文长 30%,会爆框)
不要在订单 / 列表 / 表单页放熊
不要混用珊瑚和青绿的 CTA(语义错乱)
不要用 emoji 当状态指示(用 Lucide 或 SVG)
不要写手绘 SVG icon(用 Lucide 或商定的 set)
不要在 Mini App 上使用 backdrop-filter blur
不要新增 token — 缺东西先回 design system 加
不要电话 / SMS / OTP / WhatsApp · 已禁用

11 · Roadmap

页面路线图 · 接下来做什么

按这个顺序执行。每个页面完成后,在这里打勾。所有页面都引用 _tokens.css + _e-fashion.css,不要新建样式表。

A · web-home

主页 · web

Landing · 熊 · 促销墙 · 6 шагов

B · web-catalog

列表 · поиск

筛选 + 4 列商品网格 + 分页

C · web-product

商品详情

图库 + sticky 购买 + 相关

D · web-orders

订单列表

tabs + OrderCard 流

E · web-order-detail

订单详情

Stepper + photo-check + 收据

F1 · web-address

地址簿

Form 原型

F2 · web-profile

个人资料

Form 原型

G · web-wallet

充值 · 钱包

余额 + 充值额 + 交易表

H1 · empty-cart

空购物车

Empty 原型 + 熊

H2 · pay-success

支付成功

Success 原型 + 熊

M1 · mini-home

Mini App 主页

data-telegram="1" 切换

M2 · mini-orders

Mini App 订单

紧凑列表 + tg-main-button

视觉契约 · 接下来 8 个页面必须遵守

当我交付下一个页面时,审计如下 7 项 — 任何一项不过关,我会推倒重做。

引用 _tokens.css + _e-fashion.css,不写新样式表。
颜色全部 var(--color-*);主 CTA 珊瑚 / 选中态青绿;价格永远红;状态徽章从 13 enum 选。
字体 h1/h2/hero/价格 = Unbounded;正文 = Inter;Cyrillic 行高 1.6;无 italic;无 ALL-CAPS 按钮。
骨架归入 A–H 8 原型之一;头部 / 容器 / spacing 沿用范本。
熊只在 Landing / Empty / Success / Loading / 公告 / Promo 大卡出现;护目镜 + 红围巾 + 珊瑚包裹不可改。
俄文 sentence case;长度预算遵守(button ≤ 22, badge ≤ 18, label ≤ 30 ...);Mile-stone 词汇用 glossary 锁定项。
Mini App 一次性扫一遍 data-telegram="1" 模式:压缩、单 shadow、无旋转、底部 CTA。

视觉设计方案这是后续所有页面的唯一参照物。