§ 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.

Editorial · Atelier · Codex · Tokens 60 · Atoms 18 · Light + Dark
§ 01 · Page composition

## Complete product surface

总览预览把顶栏、世界入口、叙事主舞台、右侧上下文、底部输入与运行状态放在同一张页面里。 设计师可以在这里判断比例、密度、留白和信息优先级。

Covel
playing
cloudmere · turn 06
§ SESSION CANVAS 宗门外门 清瘴散 百灵沼泽

### 渡口起雾，选择下一步。

当前页面比例以叙事阅读为核心，中栏承载选择与输入，两侧保留配置、状态、图像和世界记忆。

老周头将深褐色药瓶推到你面前，瓶口有淡淡草木辛气。渡口外的雾像被谁从水底慢慢搅起，木桩上的铃铛无风自响。
§ NARRATIVE PROMPT
是否接过清瘴散，与苏婉师姐连夜进入百灵沼泽
scene
云梦泽渡口 · 酉时三刻
灵力 42 / 60
银钱 9.8 两
好感 苏婉 +12
§ 图像

### 图像

provider
dashscope openai
▧ 画廊 ◷ 任务 ✎ 生成

生成结果（最新在前）。Prompt 请在「任务」页查看。

done img-8a41c2…
18s
single-scene wan2.7 1024
pending job-f3b9d0…
7s

沼泽渡口边，雾色未散，老周头佝偻在木台前。

Store: SQLite
§ 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 § NARRATIVE · turn 06 · t·1
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。

muted

默认次要内容

info

提示与日志

warning

需要确认

success

动作完成

danger

阻断错误

.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 卡片。

№ 01 · CLOUDMERE

### 九州·云梦泽

修仙世界，灵气复苏，宗门林立。你是偏僻小宗的外门弟子。

XIANXIA ADVENTURE POLITICAL-INTRIGUE Enter →
№ 02 · MISTPORT

### 雾港·裂潮纪

一座被永恒浓雾包裹的港口城市。潮汐带来远古遗物，也带来危险。

DARK-FANTASY MYSTERY EXPLORATION Enter →
№ 03 · NEONRIDGE

### 霓虹脊·2087

赛博朋克城市，义体改造与企业战争是日常。你是街头的无名小卒。

CYBERPUNK NOIR THRILLER Enter →
№ 04 · SILVERLEAF

### 银叶·森境记

古老的精灵森林苏醒了，人类需要重新学会与之共存。

HIGH-FANTASY DRUID PASTORAL Enter →
§ 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 体系。

§ SETTINGS 外观
§ language 语言
§ theme library 主题库

导入自定义主题包，自动保存在本地，并在外观选择器里长期复用。

Paper 内置 ✓ 当前
paper
Modern 内置
modern
深渊 Abyss 内置
abyss
§ TRACE 追踪检查器 回合 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 主题时的参考。