项目信息
编辑我的产品
平台WebiOS技术栈Next.js + TypeScript + Tailwind CSS
风格简洁现代高对比可读避免拟物过度装饰
参考LinearNotion
色板
编辑primary
#4F86F7
primary-light
#E8EFFF
primary-dark
#3B6BD4
background
#FFFFFF
surface
#F7F8FA
text-primary
#111827
text-secondary
#6B7280
border
#E5E7EB
danger
#EF4444
success
#22C55E
字号阶梯
编辑display28px / 700
标题文字 Aa 1234
title22px / 600
标题文字 Aa 1234
title-sm17px / 600
标题文字 Aa 1234
body-strong15px / 500
标题文字 Aa 1234
body14px / 400
标题文字 Aa 1234
body-sm13px / 400
标题文字 Aa 1234
caption12px / 400
标题文字 Aa 1234
间距尺度
编辑space-1
8px
space-2
16px
space-3
24px
space-4
32px
space-6
48px
space-8
64px
组件（已启用）
编辑Button
变体：primary、secondary、ghost、destructive
- ❌ 禁止使用低于 44×44pt 的可点击区域（移动端）
- ✅ 主按钮同一屏最多一个
Input / Field
变体：default、error、disabled
- ✅ 错误态必须同时有文案与边框提示
- ❌ 禁止仅依赖颜色传达错误
Card
- ✅ 卡片内信息层级不超过 3 层
Modal / Sheet
- ✅ 必须提供关闭入口与焦点陷阱
- ❌ 禁止嵌套多个全屏模态
功能开关
编辑✓ 响应式布局✓ 深色模式✓ 安全区适配✓ 无障碍
Do / Don't
编辑✓Do
- •优先使用设计令牌，不写魔法数
✕Don't
- •不要随意引入第三套主色