MoMo Design System · v2.0

墨墨设计系统 v2.0

在 v1.0 令牌与组件之上扩充分级、暗色工作台与导航/媒体层。从稿件审校、选题评估到印厂排期，编辑台与模型工作台共用同一套纸面节奏——日间宣纸，夜间松烟。

Light + Dark 30+ Components 思源宋体 · system-ui · JetBrains Mono
SECTION 01 · DESIGN TOKENS

设计令牌

令牌是墨墨界面的最小可复用单位。12 色分中性与品牌两族；字号、圆角、间距、阴影、缓动按编辑台密度分级。深色模式通过 :root[data-theme="dark"] 覆写语义色。

中性色 · 6 Neutral
宣纸 Paper#FFFFFF
雾面 Mist#F8FAFC
栏线 Line#E2E8F0
青灰 Slate#64748B
松烟 Soft#334155
墨黑 Ink#1A1A1A
品牌色 · 6 Brand
靛蓝 Indigo#6366F1
靛深 Deep#4F46E5
天青 Sky#0EA5E9
竹青 Bamboo#059669
琥珀 Amber#D97706
朱砂 Rose#E11D48
字号 · 8 Type Scale
墨
xs
11 / Caption
墨
sm
12 / Meta
墨
md
13 / UI
墨
base
15 / Body
墨
lg
18 / Lead
墨
xl
24 / Title
墨
2xl
32 / H2
墨
3xl
48 / Display
圆角 · 5 Radius
none0 · 表格格
sm4px · 内角
md8px · 按钮
lg12px · 卡片
full9999px · 胶囊
间距 · 8 Spacing
s-1
4px
s-2
8px
s-3
12px
s-4
16px
s-5
24px
s-6
32px
s-7
48px
s-8
64px
阴影 · 5 Elevation
none平面 / 表内
sm令牌卡
md下拉菜单
lg抬升卡片
xl模态 / Toast
动效缓动 · 4 Easing
linear
cubic-bezier(0,0,1,1)
ease-out
cubic-bezier(.16,1,.3,1)
ease-in-out
cubic-bezier(.4,0,.2,1)
spring
cubic-bezier(.34,1.56,.64,1)
SECTION 02 · FOUNDATION

基础组件

编辑工作台最常出现的动作与身份元素。按钮五种语义互斥；徽章、标签、纸片用于稿件状态；头像用于责编与作者。

Button.btn-*五种：主操作、描边、幽灵、危险、轻量填充。高度 36px。
审校中 已过三校 待选题会 版权冲突
Badge.badge稿件生命周期胶囊，只承载 2–6 字状态。
林
周
墨
Avatar.avatar责编姓名末字入圆；sm / md / lg 三档。
虚构 少儿 AI 选题 加印
Tag.tag品类与渠道标签，圆点颜色对应色板语义。
秋季书单 馆配 电子先行
Chip.chip可开关、可关闭的过滤纸片，用于书单与渠道筛选。
第 3 校 · 责任校对
Divider.divider纯线分隔模块；带文案版本用于校次与章节。
SECTION 03 · FORMS

表单组件

选题单、版权合同与印厂指令共用同一套输入控件：聚焦时靛蓝光环，错误用朱砂，标签始终在上。

Input.input单行文本，占位符用真实书名示例。
Textarea.textarea多行说明，最小高度 88px，允许纵向拉伸。
Select.select有限枚举用原生选择器，自定义箭头。
Checkbox.check可并行的附加动作；强调色跟随 accent。
Radio.radio互斥装帧决策，一组内必须且只能选一项。
Switch.switch即时生效的能力开关，不需要保存。
建议印量28000
Slider.slider连续数值，右侧等宽数字即时回显。
ISBN 校验位错误，请与版权页核对。
FormError.form-error输入框朱砂描边 + 字段下错误说明，不占用 Toast。
SECTION 04 · FEEDBACK

反馈组件

模型任务、印厂回传与权限失败都要有可扫描的语义色。页面内 Alert 持久可见，Toast 只报瞬时结果，Empty 承接空队列。

信息选题会将于周四 14:00 召开，请提交一页纸评估。
成功三校 PDF 已归档至「2026 秋季书单 / 虚构」。
警告封面出血不足 3mm，输出前请让美编复核。
错误版权合同未签署，禁止下发印厂指令。
Alert.alert-*四语义：info / success / warning / error。
墨
校样已发送责编周宁 · 刚刚
Toast.toast墨黑底瞬时确认，3 秒后消失。
OCR 识别书稿64%
Progress.progress长任务百分比条，左侧任务名、右侧等宽数字。
Skeleton.skel书目卡片占位，避免模型返回前布局跳动。
正在生成腰封文案…
Spinner.spinner不确定时长的旋转指示，用于模型推理。
空

本周尚无待三校稿件

新选题通过后会出现在这里。

Empty.empty空队列插画位 + 一句原因 + 一个主操作。
SECTION 05 · DATA

数据组件

选题看板、印量报表与流程节点。卡片三种密度，表格必须有悬停与可排序表头，时间轴记录校次。

Card · 3 Variants

深夜食堂·四季番

秋季重点虚构。AI 已完成竞品对标与渠道卖点抽取。

责编 周宁审校中
Card / Media带封面色带，用于选题墙与新书预告。

抬升卡片

用于需要从宣纸底浮起的决策摘要，阴影取 lg。

印厂排期Q3 · W32
Card / Elevated轻描边、大阴影，适合仪表盘焦点模块。

虚线占位卡

「添加选题」或空态草稿位，提示可写入但尚未落库。

+ 新建选题单—
Card / Outline虚线 + 雾面底，表示尚未确认的容器。
Table · hover + sortable
书名 ↕ 责编 ↕ 状态 ↕ 印量 ↕ 渠道 ↕
深夜食堂·四季番周宁审校中28000电商 / 馆配
给孩子的天文课林夏已过三校40000教育渠道
编辑部手记韩牧待选题会12000垂类书店
版权冲突样本苏晚冻结0—
Tablehover + sortable行悬停浅靛底；点击表头切换升/降序。
Stat
本周新选题
18
↑ 12% 较上周
Stat / Up整数指标 + 标签 + 竹青上涨趋势。
平均三校周期
6.4 天
↓ 0.8 天 变慢
Stat / Down周期类指标用一位小数，下跌用朱砂。
AI 采纳率
71%
↑ 5pt 责编接受建议
Stat / Rate百分比用 tabular 数字，趋势句说明口径。
Timeline
一校完成林夏 · 08-12 · 错别字 41 处
二校 + AI 润色模型采纳 71% · 08-16
三校进行中周宁 · 今日
Timeline.timeline校次与责任人纵向排列，当前节点高亮圆点。
Pagination
Pagination.pager书目列表分页，当前页靛蓝实心。
SECTION 07 · MEDIA

媒体组件

共编席位与短提示。头像组表达多人在场；Tooltip 只在悬停时出现，不打断阅读。

周
林
韩
苏
+3
Avatar Group.avatar-group叠放白边 2px，超额用 +N 收口。
13 位数字，最后一位为校验码 待选题会 周四 14:00 · 需一页纸评估
Tooltip.tip:hover悬停显示短说明，不抢焦点、不进 DOM 模态。
墨
已写入校样队列3 秒后自动关闭
lementById("sortTable"); var sortDir = 1; var lastCol = -1; table.querySelectorAll("th").forEach(function (th) { th.addEventListener("click", function () { var col = +th.getAttribute("data-col"); var num = th.getAttribute("data-num"); sortDir = lastCol === col ? -sortDir : 1; lastCol = col; table.querySelectorAll("th").forEach(function (h) { h.classList.toggle("active", h === th); }); var rows = Array.prototype.slice.call(table.tBodies[0].rows); rows.sort(function (a, b) { var av = a.cells[col].innerText.trim(); var bv = b.cells[col].innerText.trim(); if (num) return (parseFloat(av) - parseFloat(bv)) * sortDir; return av.localeCompare(bv, "zh") * sortDir; }); rows.forEach(function (r) { table.tBodies[0].appendChild(r); }); }); }); var toastBtn = document.getElementById("toastBtn"); var toast = document.getElementById("liveToast"); var timer; toastBtn.addEventListener("click", function () { toast.style.display = "block"; clearTimeout(timer); timer = setTimeout(function () { toast.style.display = "none"; }, 3000); }); })();