九州·云梦泽
修仙世界，灵气复苏，宗门林立。你是偏僻小宗的外门弟子。
§ Covel design system · 2026
Edit the world,
turn by turn.
A type-led, instrument-grade interface for building plugin-driven RPG worlds. Three coordinated themes, one shared atomic vocabulary — surfaces, rules, markers, plates. No flashy cards.
§ 01 · Page composition
Complete product surface
总览预览把顶栏、世界入口、叙事主舞台、右侧上下文、底部输入与运行状态放在同一张页面里。 设计师可以在这里判断比例、密度、留白和信息优先级。
Covel
playing
宗门外门
清瘴散
百灵沼泽
渡口起雾，选择下一步。
当前页面比例以叙事阅读为核心，中栏承载选择与输入，两侧保留配置、状态、图像和世界记忆。
老周头将深褐色药瓶推到你面前，瓶口有淡淡草木辛气。渡口外的雾像被谁从水底慢慢搅起，木桩上的铃铛无风自响。
§ NARRATIVE PROMPT
是否接过清瘴散，与苏婉师姐连夜进入百灵沼泽
§ 02 · Typography
Type as the carrier
Each theme picks one display family with character and one neutral body family. Meta/eyebrow text is always monospace — for IDs, numbers, labels.
Display 72
构建世界，运行回合。
Display Italic 56
A measured campaign.
H1 30
是否接受苏婉师姐的邀约
H2 22
巧妙之策 · A subtle path
Body 16
"去沼泽的话，那瓶丹药不够。渡口边的老周头那儿有更好的清瘴散——记在我账上。"她转身要走。
Meta 11
Mono 13
cloudmere-682fb5bf · core-narrator/P500 · 4.3s
§ 03 · Color
Surfaces, rules, accents
Three layered surfaces (page · rail · inset/elevated) carry hierarchy. One marker accent + four state accents handle every visual signal. No decorative palette. Hairline rules separate everything.
§ 04 · Atoms
Bands, sections, plates
Eight atomic primitives compose every surface. Marker bands replace cards. Sections separate via hairline rules. Plates carry editorial figure-style framing. No background-color stacks.
.ui-band — primary marker
§ INFO
默认 marker bar 用
--accent-primary。绝大多数内容区都用这个原语，不再 wrap 圆角 card。
.ui-section — divided block
§ characters
Active roster
3
section 用横线 hairline 分隔，配 monospace eyebrow + serif/sans title 锚定阅读层级。
§ world
Cloudmere · 云梦泽
不再用 Card 堆叠。每个 section 都"呼吸"在背景上。
.ui-frame — opt-in enclosure
§ NOTE
仅在内容必须从上下文剥离时使用 — modal 内部、popover、code block。其他地方一律 ui-band。
§ 05 · World list
Editorial plates
每个世界一个版面 — 印章式 № 编号、彩色 marker 头线、衬线/sans 大标题、 meta 标签。鼠标悬停时 marker 横线延伸。没有渐变 banner、没有 SaaS 卡片。
雾港·裂潮纪
一座被永恒浓雾包裹的港口城市。潮汐带来远古遗物，也带来危险。
霓虹脊·2087
赛博朋克城市，义体改造与企业战争是日常。你是街头的无名小卒。
银叶·森境记
古老的精灵森林苏醒了，人类需要重新学会与之共存。
§ 06 · Messages & composer
Player ink, narrator type
世界入口之后进入回合阅读。玩家输入使用 3px accent ribbon + tinted band， 叙事文本保持大字号 serif/sans 的阅读节奏。
§ YOU
立刻去渡口找老周头要清瘴散，再赶往百灵沼泽。
老周头眯着眼瞅了你许久，从柜台底下摸出一个深褐色的小药瓶："你师姐倒是看得起我这把老骨头。这清瘴散用百灵苔配着冷雾草，要文火慢熬七天才成。我账上还记着她去年欠的九两八钱银子……。"
§ 07 · Settings & Debug
Same vocabulary
会话交互之后是配置与运行观察。Settings 与 Debug 共用 eyebrow、ribbon-marker sidebar 和 hairline section 体系。
外观
§ language
语言
§ theme library
主题库
导入自定义主题包，自动保存在本地，并在外观选择器里长期复用。
Paper
内置
✓ 当前
Modern
内置
深渊 Abyss
内置
追踪检查器
回合 6 · 115 事件
flow
5f757965·t1
turn.start · cloudmere-682fb5bf · priority 100→1000
0ms
runtime
core-char-creator
runtime.invoke · scheduled @ P600 · streaming…
4.0ms
llm
deepseek-v4-flash
llm.delta · tokens=2814 · ttfb=312ms
11.4s
tool
create-character
tool.call · {"name":"苏婉","traits":["剑修","执拗"]} →
ok
12ms
hook
core-pregame
hook.PreStateCommit · validation-failed → retry
2ms
flow
5f757965·t1
turn.commit · 8 proposals · narrative.append + state.patch
×7
24.4s
§ 08 · Token reference
Variables you can change
所有主题层都通过覆写 CSS variable 工作。这里是关键 token 清单 — 给设计师在 Figma 之外做 spec / 调色 / fork 主题时的参考。