Appearance
Shop 设计规范
类型：产品设计规范 · 在设计基线（
REFERENCE）之上，只写本产品覆盖 / 新增的设计思路，其余继承基线。品牌不变量（命名与 Logo、账号接入、支付接入）为INVARIANT，照做不改。本文只立设计思路；具体数值落在两个前端项目的样式令牌里（
frontend/src/styles/base.css与admin/src/styles/base.css，两份同源、改动需同步），不在此复制。
一、一句话气质：白与 Cloud 的平面货架，薄荷只做一个点
Shop 是品牌自营的小商店，不是大型电商：首页一段 Cloud 底 Hero（一枚薄荷光球作装饰）、按分组平铺的商品行、白底 1px 描边的商品卡（Cloud 图区 + 白色角标），没有购物车——点购买即下单、直接进收银台。
铁律是薄荷只做强调色，不做背景色：大面积永远是白与 Cloud，薄荷只落在按钮、选中态胶囊、链接与光球上。曾经的薄荷渐变 Hero、点阵纹理、彩色光晕已在「去糖」改版中全部收敛，别再加回来。
二、相对设计基线的自定义清单
在基线允许的边界内做如下偏离，未列出的项一律继承基线：
| 项 | 基线默认 | Shop | 性质 |
|---|---|---|---|
| 主色 | Mint 绿 #17D1A7 | 沿用；另设文字档 Mint Ink #087A5C（#17D1A7 在白底对比度不足 AA，链接 / 按钮上的文字用这一档） | 继承 + 新增 |
| 展示字体 | Newsreader（默认）/ Fredoka（可选） | 选 Fredoka（SemiBold），只用于词标、Hero 标题、价格、商品图占位字 | 选项内选择 |
| 正文字体 | Space Grotesk | Space Grotesk（Fontsource 自托管，400–700） | 继承 |
| 圆角 | 8 / 6 / 999 | 卡片 8 / 按钮 6 / 药丸 999 沿用；新增面板级 14（商品卡、Hero、详情面板） | 新增 |
| 页面底 | 白 / Cloud 分层 | 页面底 Cloud #F4F8F6，卡片与面板纯白，阴影统一单档 0 1px 3px | 继承 |
| 语义色 | — | 新增危险色 #E5484D；订单状态色见 §三 | 新增 |
| 明暗模式 | — | 仅浅色 | — |
| 管理端 | — | 固定中文、无双语；令牌另存一份（见 §五） | 新增 |
三、色彩原则
薄荷的三种用法，仅此三种：① 实底按钮 / 选中态胶囊（薄荷底 + Ink 字）；② 文字与链接（用 Mint Ink 档）；③ 装饰光球（Hero 与商品图区各一枚，柔化、不抢商品）。薄荷不做大面积背景、不做渐变。
商品卡不带主题色：图区一律 Cloud 底、商品图居中 contain 不裁切；角标白底 Ink 字，压在图区左上。后端的
accent字段与前端accent.ts色表是去糖前的遗留，已无引用，新页面不要再消费它，待清理。订单状态色是语义色，不复用为装饰色：
状态 色相 PENDING待支付琥珀 PAID已付款天蓝 COMPLETED已完成绿 FAILED失败 / 取消红 未知状态灰色兜底。状态色只上药丸标签，不上按钮、不上背景。
焦点态用薄荷软环（外发光式），不用浏览器默认蓝框。
四、字体原则
- Fredoka 只承担「品牌声音」：顶栏词标的
Shop副标、Hero 标题、价格、商品图占位字。正文、表单、订单表格、说明文字一律 Space Grotesk，不要把圆体铺到交易信息上。 - 字体构建期自托管（
@fontsource/*，无外链），与品牌字体规范一致、满足全球可达。中文不自托管，挂系统字体回退（PingFang SC → Hiragino Sans GB → Microsoft YaHei → Noto Sans CJK SC）。
五、管理端的自定义
管理端与商城共用同一份基线令牌，但它是给店主用的工作台，另有几处偏离：
- 页面底中性灰
#F2F4F4（不是 Cloud），卡面纯白，两层拉开层次即可。 - 「事实」字体：系统生成的数字与标识（价格、数量、订单号、时间）用等宽 IBM Plex Mono + 表格数字（
tabular-nums），令牌名--font-fact；人写的内容（商品名、描述）仍是 Space Grotesk。 - 焦点绿单独压暗到
#0A9B73：品牌绿本身对比度只有 2.7，画成焦点线达不到 3:1 的非文字门槛。 - 闸门页（未登录 / 无权限）是左右分屏：左侧深墨品牌面板 + 一条穿出边缘的薄荷横条，右侧白底放字标与操作；窄屏时面板收成顶部横带。这是管理端唯一允许大面积深色的地方，与 MintPop 其它产品的管理端登录页同一版式。
六、图标气质
图标把品牌 Pop Mark 的圆盘换成购物袋，保留「半色调渐隐 + 黑色爆裂短线」的波普 DNA。由此可延伸的设计线索：
- 半调圆点从角落渐隐可作为空状态的装饰母题，但要克制——去糖后页面本身没有点阵纹理，圆点只留给图标与空状态插画。
- 黑色爆裂短线只在浅背景成立，深色场景用 Cloud 底瓦片（见图标用法）。