设计系统 / v1.0

墨墨设计系统 v1.0

面向出版业 AI 内容产品（选题、撰稿、排版、播客、直播电商）的统一视觉与交互语言。本文档约定设计令牌、组件 API 与用法示例，所有业务线共享这一份资产。

设计令牌 #

系统级不可变值，所有组件引用令牌，禁止硬编码颜色 / 字号 / 圆角。

色板 · 8 色
Color Palette
--accent#6366f1 主品牌色 · 紫蓝
--accent-strong#4f46e5 强按下态
--fg#0f172a 主文本
--fg-soft#475569 次级文本
--fg-mute#94a3b8 占位 / 禁用
--success#10b981 成功语义
--warning#f59e0b 警告语义
--danger#ef4444 危险语义
字号 · 6 档
Typography Scale
--fs-xs12px / 1.5
选题灵感 · 笔记片段
--fs-sm13px / 1.6
正文段落、表单标签、按钮文字
--fs-md14px / 1.65
基础正文，全站默认
--fs-lg18px / 1.5
卡片标题、模块起首
--fs-xl24px / 1.3
页面小标题
--fs-2xl32px / 1.2
主标题
圆角 · 4 档
Radius
4px · sm
8px · md
12px · lg
20px · xl
间距 · 6 档
Spacing
4
8
12
16
24
40

基于 4px 栅格 · 4 / 8 / 12 / 16 / 24 / 40

阴影 · 4 档
Elevation
xs · card-flat
sm · hover
md · popover
lg · modal

基础组件 #

按钮、徽章、头像、标签、分隔线——构成所有页面的最小积木。

Button · 4 种语义
hover / disabled / size
Primary 主流程唯一按钮，每屏至多 1 个。
Secondary 辅助操作，与 Primary 并存。
Ghost 低权重操作如"取消"、"更多"。
Danger 不可逆操作，需二次确认。
Badge · 标签徽章
inline status
新功能 已上架 审核中 已驳回
Badge 状态徽章，紧贴数据/列表行使用。
Avatar · 头像
size · group
孙
李
魏
单头像 默认 36px，配用户名侧边显示。
孙
李
魏
+5
头像组 多人协作场景，超过 4 人折叠为 +N。
Tag · 标签
filter · topic
励志 历史 AI 写作 童书
Tag 分类筛选、议题标记，可点击切换。
Divider · 分隔线
section · text
或者使用 OR 登录
Divider 区块/字段分隔，支持中间文字。

表单组件 #

录入与选择类控件，焦点态统一 3px 淡紫光晕。

Input · 输入框
placeholder / focus / disabled
Input 单行文本，搜索/录入主控件。
Input · disabled 权限不足或不可编辑时使用。
Textarea · 多行输入
auto-grow · counter
Textarea 简介 / 备注 / 长文摘抄，3 行起。
Select · 选择器
native
Select 5 个以内选项用原生即可，超过 8 个触发 Combo。
Checkbox · 多选
list
Checkbox 渠道/标签等多选场景，保持横向排列。
Radio · 单选
mutually exclusive
Radio 互斥选择，至少 2 项、强制选 1。
Switch · 开关
on / off
启用智能审核 同步飞书
Switch 二元即时生效开关，避免与 Checkbox 混用。

反馈组件 #

让用户清晰知道系统发生了什么——提示、进度、占位。

Alert · 4 种语义
信息 / 成功 / 警告 / 危险
💡
本期选题热度上升 12%
系统根据近 7 天搜索热度推荐 5 个新话题。
✓
已上架
《墨墨 AI 写作助手》已成功发布到小红书、抖音。
⚠
注意配额
本月 AI 额度已使用 78%，建议升级或等待下月 1 日重置。
✕
操作失败
飞书 API 返回 401，请检查 Access Token 后重试。
Toast · 轻提示
auto-dismiss 3s
已保存到「短视频与直播电商」项目
上传失败，请检查网络

用于异步任务完成反馈、非阻塞提示。

Progress · 进度条
determinate · indeterminate
正在生成大纲 · 42%
排版渲染中 · 78%
已完成 · 100%
Skeleton · 骨架屏
shimmer · before-load

首屏加载 / 占位内容，等待真实数据返回后整体替换。

数据组件 #

用结构化形式呈现内容、表格与指标。

Card · 3 种风格
border / flat / elevated
📚
童书绘本选题包
12 个候选 · 上月新增 3
✍
AI 撰稿工作流
生产中 · 阶段 4/7
🎙
主播训练营
招生中 · 直播 20:00
Table · 数据表
hover 高亮 · sticky 表头
书名作者分类状态上周销量
墨墨 AI 写作助手孙建伟经管 · AI在售3,842
短视频内容方法论张嘉豪新媒体预售1,205
童书 IP 孵化笔记李佳薇童书审核—
磨铁出品人手册魏总管理在售2,108
已下架示例——下架—
Stat · 指标卡
数字 + 标签 + 趋势
本月 GMV
¥ 1,284,560
▲ 18.4% vs 上月
新增选题
328
▲ 6.1%
AI 调用次数
42.6k
— 持平
退货率
2.18%
▼ 0.4 pp