Portfolio
Earlier work

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

Peppr 设计系统

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

0

Mode

0

Web Component

0

Mobile Component

0

Token

Design System · Oversea-Peppr POS:Principles / Foundation Styles / Guideline / Components

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

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

Part 1 · Principles

三条原则:Efficiency · Consistency · Inclusive

Part 2 · Foundation

Color:Light Mode 与 Dark Mode 语义色板
Typography:字体、字重、字号
Typography · POS 收银端字阶
Typography · 手持设备字阶
Icon:Keyline · Round Cap · Round Corner · Line Style
Icon:图标库
Shape & Shadow:圆角梯度与四级 Elevation
Color · Typography(Web / POS / 手持)· Icon · Shape & Shadow

Part 3 · Guideline

Guideline:Auto Layout · Application · Variant Attributes

Part 4 · Components

Components:Mode 2 · Web Component 37 · Mobile Component 33 · Token 96