九州·云梦泽
修仙世界，灵气复苏，宗门林立。你是偏僻小宗的外门弟子。
§ 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 · 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
§ 02 · 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.
§ 03 · 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。
§ 04 · World list
Editorial plates
每个世界一个版面 — 印章式 № 编号、彩色 marker 头线、衬线/sans 大标题、 meta 标签。鼠标悬停时 marker 横线延伸。没有渐变 banner、没有 SaaS 卡片。
雾港·裂潮纪
一座被永恒浓雾包裹的港口城市。潮汐带来远古遗物，也带来危险。
霓虹脊·2087
赛博朋克城市，义体改造与企业战争是日常。你是街头的无名小卒。
银叶·森境记
古老的精灵森林苏醒了，人类需要重新学会与之共存。
§ 05 · Session canvas
Three rails, one rhythm
Studio rail (left) · narrative page (center) · context rail (right). Surfaces step in 3 tiers (page → rail → inset). Headers share a fixed height. Resize handles are 1px hairlines.
她转身要走，又回过头，目光落在那瓶回灵丹上：
"去沼泽的话，那瓶丹药不够。渡口边的老周头那儿有更好的清瘴散——记在我账上。"
不等你回答，她便快步汇入人群中，顷刻被坊市的热闹吞没。
"去沼泽的话，那瓶丹药不够。渡口边的老周头那儿有更好的清瘴散——记在我账上。"
不等你回答，她便快步汇入人群中，顷刻被坊市的热闹吞没。
§ NARRATIVE PROMPT
是否接受苏婉师姐的邀约，连夜前往百灵沼泽探查神秘的地下结构
§ 06 · 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
§ 07 · Messages & composer
Player ink, narrator type
Player input gets a 3px accent ribbon + tinted band — never a chat bubble. Narrative is large-body serif/sans, breathing in the page.
§ YOU
立刻去渡口找老周头要清瘴散，再赶往百灵沼泽。
老周头眯着眼瞅了你许久，从柜台底下摸出一个深褐色的小药瓶："你师姐倒是看得起我这把老骨头。这清瘴散用百灵苔配着冷雾草，要文火慢熬七天才成。我账上还记着她去年欠的九两八钱银子……。"
§ 08 · Token reference
Variables you can change
所有主题层都通过覆写 CSS variable 工作。这里是关键 token 清单 — 给设计师在 Figma 之外做 spec / 调色 / fork 主题时的参考。