EchoChat/design-system/echochat/MASTER.md

Design System Master File

LOGIC: When building a specific page, first check design-system/echochat/pages/[page-name].md. If that file exists, its rules override this Master file. If not, strictly follow the rules below.

---

Project: EchoChat Generated: 2026-03-03 (via ui-ux-pro-max) Category: Mobile Messaging Application

---

Global Rules

Color Palette

Role	Hex	CSS Variable	Usage
Primary	#2563EB	--color-primary	按钮、链接、选中态、自己的消息气泡
Secondary	#3B82F6	--color-secondary	次级操作、hover 态
CTA/Accent	#10B981	--color-cta	在线状态、成功提示
Background	#F8FAFC	--color-background	页面主背景
Surface	#FFFFFF	--color-surface	卡片、列表项背景
Text	#1E293B	--color-text	主要文字
Muted	#94A3B8	--color-muted	辅助文字、时间戳、placeholder
Border	#E2E8F0	--color-border	分隔线
Border Light	#F1F5F9	--color-border-light	浅分隔线
Danger	#EF4444	--color-danger	错误、删除、未读 badge

Color Notes: Professional blue + clean slate gray

Typography (uni-app)

• Body Font: System default (uni-app 跨平台自动适配)
• Line Height: 1.5 for body, 1.3 for headings
• Font Size Scale (rpx):
  • xs: 22rpx — 极小辅助文字
  • sm: 24rpx — 时间戳、标签
  • base: 28rpx — 正文、列表内容
  • md: 30rpx — 列表标题
  • lg: 32rpx — 页面标题
  • xl: 36rpx — 大标题

Spacing Variables (rpx)

Token	Value	Usage
xs	8rpx	图标间距
sm	16rpx	行内间距
md	24rpx	列表项内边距
lg	32rpx	区域边距
xl	48rpx	大区域分隔

Shadow Depths

Level	Value	Usage
sm	0 1px 2px rgba(0,0,0,0.05)	微弱浮起
md	0 4px 6px rgba(0,0,0,0.07)	卡片
lg	0 10px 15px rgba(0,0,0,0.1)	弹出层

Border Radius Scale (rpx)

Token	Value	Usage
sm	8rpx	小元素
md	16rpx	按钮、输入框
lg	24rpx	卡片、头像
xl	36rpx	胶囊按钮、搜索框
full	50%	圆形按钮

---

Icon System (uni-icons)

图标方案: @dcloudio/uni-ui 的 uni-icons 组件（跨平台兼容）

严禁: 使用 emoji 或 HTML 实体字符（&#xxxx;）作为图标

场景	图标名	尺寸	颜色
搜索	search	20	#475569
返回	back	20	#1E293B
更多	more-filled	20	#475569
发送	paperplane	22	#FFFFFF
发送中	loop	16	#94A3B8
发送失败	info-filled	18	#EF4444
置顶	top	16	#94A3B8
聊天（空状态）	chatbubble	64	#CBD5E1
删除	trash	20	#EF4444
清除	clear	20	#EF4444

使用方式:

<uni-icons type="search" size="20" color="#475569" />

---

Component Specs

Touch Targets (CRITICAL for Mobile)

/* 所有可点击元素最小尺寸 */
.touchable {
  min-width: 88rpx;
  min-height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

Buttons

.btn-primary {
  background: #2563EB;
  color: #FFFFFF;
  padding: 24rpx 48rpx;
  border-radius: 16rpx;
  font-weight: 600;
  font-size: 28rpx;
  transition: opacity 200ms ease;
}

.btn-primary:active {
  opacity: 0.85;
}

.btn-danger {
  background: transparent;
  color: #EF4444;
  font-size: 30rpx;
}

Cards / List Items

.list-item {
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  background-color: #FFFFFF;
  border-bottom: 1rpx solid #F1F5F9;
  transition: background-color 150ms ease;
}

.list-item:active {
  background-color: #F1F5F9;
}

Avatar

.avatar {
  width: 96rpx;
  height: 96rpx;
  border-radius: 24rpx;
}

.avatar-placeholder {
  background-color: #2563EB;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-weight: 600;
}

.avatar-sm { width: 72rpx; height: 72rpx; border-radius: 18rpx; }
.avatar-lg { width: 120rpx; height: 120rpx; border-radius: 30rpx; }

Inputs

.input-wrap {
  background-color: #F1F5F9;
  border-radius: 36rpx;
  padding: 0 28rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
}

.input {
  flex: 1;
  font-size: 28rpx;
  color: #1E293B;
}

Badge

.badge {
  min-width: 36rpx;
  height: 36rpx;
  padding: 0 8rpx;
  background-color: #EF4444;
  border-radius: 18rpx;
  color: #FFFFFF;
  font-size: 20rpx;
  line-height: 36rpx;
  text-align: center;
}

---

Style Guidelines

Style: Clean & Functional Messaging

Keywords: Clean, functional, chat-focused, mobile-first, fast interactions, minimal visual noise

Best For: Instant messaging, social chat, real-time communication

Key Effects:

• :active 状态替代 :hover（移动端优先）
• 所有状态切换使用 transition: 150-200ms ease
• 消息气泡圆角差异化（自己 vs 对方）
• 列表项按压态反馈

---

Anti-Patterns (Do NOT Use)

• ❌ Emojis as icons — 使用 uni-icons 组件（跨平台兼容）
• ❌ HTML 实体字符 (&#xxxx;) as icons — 同上
• ❌ Low contrast text — 最低 4.5:1 对比度
• ❌ Instant state changes — 必须使用 transition (150-200ms)
• ❌ Touch targets < 44px (88rpx) — 所有可交互元素最小 88rpx
• ❌ 相邻触控元素间距 < 8px (16rpx) — 保证误触防护
• ❌ 硬编码 px — uni-app 中统一使用 rpx（状态栏除外）

---

Pre-Delivery Checklist

Before delivering any UI code, verify:

• No emojis or HTML entities used as icons (use uni-icons)
• All icons from @dcloudio/uni-ui uni-icons
• Touch targets ≥ 88rpx (44px) on all interactive elements
• :active states for press feedback (mobile)
• Transitions (150-200ms) on all state changes
• Text contrast 4.5:1 minimum
• No horizontal scroll on any screen
• Content not hidden behind navigation bars
• padding-bottom accounts for safe-area-inset-bottom
• Avatar placeholder with first character fallback
• Empty states with icon + text + hint