Option E · Token-swap 落地预览
没有改一行 assets/components.css —— 只把 colors_and_type.css 的 token 换成了 Option E 的等价值。
生产做法:cp option-e-mulebuy-style/globals.css → app/[locale]/globals.css,所有 .btn / .card / .badge / .hero / .product-card / .order-card / .stepper / .alert 自动跟随。
00 · Tokens
Token 落差速查
每个语义 token 旧 → 新对照,确认产品语境兼容性。
--color-primary-fill
#00838F · cyan-800(旧)
--font-display(新增)
Inter Bold(旧 · 全 Inter)
→
Unbounded Black · 仅 h1/h2/hero
--color-cta(新增,珊瑚 CTA)
不存在(旧 · primary 同时管 CTA + link)
--color-text
#0F1A2D · slate-900(冷)
01 · Color
调色板
青绿(信任/link/选中) · 珊瑚(CTA/促销) · 黄(sticker/福利) · 粉(强调) · 紫(NEW/info)。
primary#0BA888--color-primary
primary-fill#087A63CTA(青绿)
cta#FF6B4ACTA(珊瑚)
sticker-yellow#FFD23F福利/sticker
sticker-pink#FF4F8B强调
secondary#6B4EFFNEW / info
price#FF2E63价格红
success#0BA888= primary
warning#FFA200配送 ETA
text#0F1F1A墨绿黑
text-muted#5E726B辅助文字
surface#F7FAF8卡片底
02 · Buttons
按钮(用现有 .btn 类,新增 .btn--cta 变体)
.btn--primary = 青绿(信任 / 主操作);.btn--cta = 珊瑚(营销 / 拉新);两者并列,语义分离。
03 · Badges + Stickers
徽章与 sticker
badge 用于 OrderStatusBadge / 状态;sticker 是 E 独有的「营销贴纸」,角度倾斜、视觉跳脱。
Выкуплено
Доставлено
Ожидает оплаты
Отменён
NEW
Черновик
Photo-check
Архив
−30% первый заказ
APP ONLY
🔥 Хит недели
−30%первый
sticker 通过 transform: rotate(-6deg|8deg) 实现「贴上去」感;Mini App 自动禁用旋转。
04 · Hero
Hero · 天空渐变 + 大字 display + 双 CTA
复用现有 .hero 容器,只换 background 与 display 字体。吉祥物区域留占位。
● Россия ← Китай · 14–18 дней
Покупайте в Китае.
Получайте посылки
в России.
Taobao · 1688 · Pinduoduo · Tmall — выкупим, проверим, объединим и отправим. Telegram-уведомления на каждом шаге.
✓ SSL
✓ Возврат средств
✓ Telegram 24/7
✓ Фото перед отправкой
🐻
3D-mascot placeholder
Нужен 3D-персонаж · медведь / лиса / ёжик с самолётом или коробкой
−30%первый
✈️
📦
05 · Promo wall
促销卡片墙(Mulebuy 招牌)
Hero 下方的「彩色卡片矩阵」—— 营销活动、APP 限定、抽奖、新人礼包。E 的核心识别符号。
06 · Cards
卡片(.card 自动跟随)
.card 默认样式继承新 radius / shadow / surface。selected 变体的 primary border 变成青绿。
Доставка авиа
14–18 дней до Москвы. Включён страховой пакет.
Доставка морем
35–45 дней. Самый экономичный вариант для крупных посылок.
Доставка ж/д
21–28 дней. Хороший баланс цены и скорости.
07 · Alerts
提示条
ℹ
Telegram-уведомления
Привяжите аккаунт — будете первыми узнавать о фото со склада.
!
Курс ¥ обновлён
Цены пересчитаны по курсу ЦБ РФ на сегодня, 13.05.2026.
✓
Заказ #KK-203914 оплачен
Передан байеру — выкуп начнётся в течение часа.
×
Товар недоступен
Продавец снял позицию с продажи. Деньги возвращены на баланс.
09 · Product cards
商品卡(.product-card)
现有 .product-card 自动获得新 radius / shadow;价格用 .price 类显示折扣红 + 划线原价。
10 · Order card + Stepper
订单卡 + 流程步骤
№ KK-203914 · 12 мая 2026
Кроссовки Nike Air Max 270 + 2 позиции
Taobao · 3 товара
·
Авиа в Москву
·
ETA: 26–30 мая
Выкупаем у продавца
12 480 ₽
✓
Передан байеру
12 мая, 15:08
Открыт диалог с продавцом по 3 позициям.
3
Выкупаем у продавца
Сейчас · обновлено 5 мин назад
4
На складе в Гуанчжоу
Ожидается ~14 мая
11 · Mini App
Telegram Mini App(data-telegram="1" 覆盖生效)
字体回落系统字 · Unbounded 不加载 · sticker 旋转关闭 · 单层 shadow · radius 上限 16px。
Ваши заказы
№ KK-203914
Nike + 2 позиции
Выкупаем
№ KK-203802
Пуховик Uniqlo
Доставлено
Next steps
1. PR refactor/option-e — replace app/[locale]/globals.css with refactor/option-e-mulebuy-style/globals.css.
2. layout.tsx — добавить Unbounded через next/font/google(только weights 700/800/900).
3. components/ui/Button.tsx — добавить вариант cta(coral).
4. Загрузить 3D-маскота(медведь / лиса) в public/mascot.glb или 4-кадровый PNG-sprite.
5. Hero / Promo grid секции — скопировать разметку отсюда в app/[locale]/page.tsx.