同一双手包出来的

所有组件共享同一套 tokens、同一个缓动、同一种圆角语言。绛红只出现在主按钮与徽章上——组件层面继续执行「一屏一印」。

06 · 01

CSS 变量

:root { --paper: #FAF7F1; --paper-2: #F3ECE2; --wood-light: #E7D8C2; --wood: #B08A5E; --ink: #241E1B; --ink-soft: #57504A; --gold: #C9A24B; --gold-light: #D7CA9E; --seal: #9F3B3B; --bamboo: #5E8B4C; --logo-red: #D70D18; /* 仅 LOGO 内部 */ --font-serif: 'Noto Serif SC', serif; --font-sans: 'Noto Sans SC', sans-serif; --font-en: 'Outfit', sans-serif; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* 全局唯一 */ --dur-hover: 240ms; --dur-enter: 800ms; --dur-page: 600ms; --radius: 14px; --radius-sm: 8px; --hairline: 1px solid var(--wood-light); }

06 · 02

按钮

主按钮是当屏的「印」，一屏只出现一次；其余动作交给墨描边与金下划线。

悬停：上浮 2px + 阴影，240ms · 热气缓动。禁变色闪烁、禁弹跳。最小触控高度 44px。

06 · 03

标签与徽章

早餐宵夜招牌当日鲜蔬吉尼斯纪录

绛红实底标签属于红实体——与主按钮不同屏共存。

06 · 04

产品卡

照片区 + 褶弧啮合边 + 信息区。摄影按 09 光语言执行，此处为占位。

PHOTO · 45° WARM

Imperial Shrimp

虾皇饺

¥2612 只 / 现包

PHOTO · 45° WARM

Garlic Chives Pork

韭菜鲜肉饺

¥1812 只 / 现包

PHOTO · TOP-DOWN

Scallion Oil Noodles

葱油拌面

¥15手工面

06 · 06

数据舞台

暖墨底 + 雅金数字，规格见 03 · 03。用于荣誉、里程碑与供应链数据。

Supply Chain · 智慧供应链

中心仓

事业部

T+1

核心城市配送

售后冷链响应

06 · 07

表单

焦点态用金圈，不用红——红只属于提交那一刻。

加盟意向登记

留下联系方式，招商顾问将在 1 个工作日内与您联系。

姓名

意向城市已覆盖 31 个省级行政区，1000+ 门店