DESIGN SYSTEM

一麦通 设计系统 · 样机库

这里集中陈列官网正在使用的全部设计令牌与组件实物。所有色板、按钮、卡片、表单都直接引用 assets/css/style.css 的真实变量——改样式表一处,本页与全站 5 个页面同步生效

📌 怎么用这份样机库下指令:每个区块都有「引用代号 §N」。以后想调整,直接说 "§4 主按钮圆角改成 16px" 或 "§1 品牌色再暖一点",我就能零歧义、一次性改对,无需来回确认。
§1 颜色 §2 字体 §3 间距 §4 按钮 §5 卡片 §6 其它组件
§1 颜色 COLOR TOKENS

颜色令牌

品牌色、辅助色、中性色均收在 :root。下方色块即真实取值。

品牌色 Brand

--brand
#ff5b22
--brand-2
#ff8a3d
--brand-deep
#e8431a
--brand-50
#fff5f0
--brand-100
#ffe9dd
--brand-soft
#fff1ea

辅助色 Accent

--violet
#6d5df6
--violet-2
#a78bfa
--violet-soft
#efeaff
--emerald
#0ea371
--emerald-soft
#e6fbf4

中性色 Neutral

--bg
#ffffff
--bg-soft
#f7f8fc
--bg-dark
#0a0e1a
--ink
#0f172a
--ink-soft
#475569
--muted
#8a98ad
--line
rgba(.08)
--card
#ffffff

渐变 Gradients

--grad-brand
--grad-violet
--grad-dark
--grad-mesh
§2 字体 TYPOGRAPHY

字体与字阶

标题字体 Sora,正文 Noto Sans SC。字号用 clamp() 自适应,标题 text-wrap:balance、正文 text-wrap:pretty

.display · 首页大标题
智慧零售,一键开店
.h2 · 区块标题
为每一家小店,装上增长引擎
.h3 · 卡片/小节标题
商品管理
.lead · 引导段落

从商品上架到会员复购,一麦通 把线下门店的经营能力,完整搬进你的手机。

.eyebrow · 小标签
SMART RETAIL
.text-gradient · 渐变文字
一麦通
body · 正文 16px / 1.75

这是一段示例正文,用于观察行高、字重与可读性的实际效果。良好的行高让长段落更耐读,移动端也不会显得拥挤。

§3 间距 SPACING

8px 间距刻度

所有留白、内边距、栅格间距都基于 8px 基线,保证全站节奏统一。下方条宽即真实取值。

--sp-1
8px
--sp-2
16px
--sp-3
24px
--sp-4
32px
--sp-5
40px
--sp-6
56px
--sp-7
80px
--sp-8
110px

圆角:--radius 20px / --radius-sm 14px / --radius-lg 28px。阴影:--shadow-sm / --shadow / --shadow-lg / --shadow-brand。

§4 按钮 BUTTONS

按钮

圆角胶囊形,hover 上浮、:active 按压缩放,点击带波纹反馈。类名:.btn .btn-primary / .btn-ghost / .btn-outline / .btn-dark

亮色背景上的按钮
带图标 / 不同尺寸
暗色背景上的按钮(.btn-ghost)
§5 卡片 CARDS

卡片

.card(通用)/ .module(功能模块,顶部强调条)。hover 上浮 + 渐变描边光晕。

.card 通用卡片

商品管理

一键上架、批量改价、库存同步,门店经营从繁琐变轻松。

.module 功能模块卡
会员营销

私域复购引擎

积分、储值、精准优惠券,把一次性顾客变成长期资产。

积分商城储值卡生日礼
§6 其它组件 COMPONENTS

其它复用组件

联系信息、表单字段、FAQ、统计数字、徽章、标签、场景卡等,均来自同一套类名。

联系信息 .info-item(可点击复制)
开通热线
18827240087
商务邮箱
bd@yzx-wh.store
表单字段 .field
FAQ 折叠 .faq
开通需要技术背景吗?+

不需要。全流程自助开通,手机端即可完成进件与上线。

支持多门店管理吗?+

支持。多门店连锁可统一商品、库存与会员数据。

统计数字 / 徽章 / 标签
服务商户 0
覆盖城市 0
稳定运行 会员营销 Golang微服务
场景卡 .s-card(解决方案页复用)
智能点单
顾客扫码自助下单,后厨实时出票
会员积分
消费自动累计,复购率提升 38%
已复制到剪贴板