美团 · 海外 SaaS · 2023 · Design System · Oversea Peppr POS

Peppr 设计系统

海外 POS 设计系统：原则 · 基础样式 · 指南 · 组件

Mode

Web Component

Mobile Component

Token

业务设计主管 · 体系架构与规范定义

为美团海外餐饮 SaaS（Peppr POS）从 0 搭建的设计系统，包含 Principles / Foundation Styles / Guideline / Components 等：覆盖 Web、POS、手持三端与明暗两种模式，沉淀 2 套模式、37 个 Web 组件、33 个移动组件和 96 个 Token。

Part 1 · Principles

三条原则

01Efficiency
效率
收银场景分秒必争：信息优先级、触控尺寸与反馈速度都服务于「更少的步骤」。
02Consistency
一致
Web、POS、手持共用一套 Token 与组件语义，同一动作在任何端看起来、用起来一样。
03Inclusive
包容
面向不同国家、光照与操作习惯，明暗模式与对比度是基础能力而非可选项。

Part 2 · Foundation

基础样式

01 · Color · Light Mode
语义色板
Primary / Secondary / Tertiary、Error / Success / Warning、Surface 五级与 Inverse——每个语义色都有 On-color 与 Container 变体。
02 · Color · Dark Mode
Dark 不是反色，而是重新分配明度
同一套语义，在深色环境下重新分配明度与对比。
03 · Typography
Inter 为主的字体体系
Display / Headline / Title / Label / Body 五类字阶。
04 · Typography · POS
POS 收银端字阶
Nunito Sans 做 Display，POS 收银 Display 56/48。
05 · Typography · Handheld
手持设备字阶
手持设备 Display 36/48，Web、POS、手持各一套字号与行高。
06 · Icon · Keyline
Keyline · Round Cap · Round Corner · Line Style
统一的 Keyline 网格、圆头线帽与圆角，所有图标共用一套笔画逻辑。
07 · Icon · Library
图标库
覆盖收银、菜单、订单、会员、报表等业务场景。
08 · Shape & Shadow
圆角梯度与四级 Elevation
None → Full 的圆角梯度；Overlay / Raised / Default / Sunken 四级阴影表达层级关系。