FOUNDATIONS

有手感的秩序。

暖纸留给内容，莓红留给重点，星芒只在需要时出现。把这些小约定写进语义令牌（semantic tokens），换一个页面、切一次主题，还是熟悉的手感。

Color

语义色彩

组件只消费用途，不猜测具体色值。切换右上角主题，观察每个角色如何保持关系。

Background--moe-color-background

Strong surface--moe-color-surface-strong

Text--moe-color-text

Soft text--moe-color-text-soft

Accent--moe-color-accent

Accent wash--moe-color-accent-wash

Success--moe-color-success

Border--moe-color-border

Rhythm

使用有限的间距阶梯形成节奏；正文优先保证可读行长，而不是塞满屏幕。

正文、控件和标注使用系统无衬线字体栈（sans-serif stack），仅标题与展示文字使用本地衬线字体；代码使用自托管 JetBrains Mono，公式由 KaTeX 排版；字体尚未加载时保留回退字体。

Tokens

适合网页和跨框架消费。

@import "@moesegfault/style/tokens.css";

.panel {
  color: var(--moe-color-text);
  border-radius: var(--moe-radius-lg);
}

适合图表、Canvas 和需要具体值的运行时代码。

import { tokens } from "@moesegfault/style";

const accent = tokens.color.accent;

适合设计工具与生成流水线；DTCG 为 Design Tokens Community Group 格式。

import tokens from "@moesegfault/style/tokens.json";
// 或远程获取 /v0.1.2/tokens/tokens.dtcg.json

主题由根元素属性控制，并尊重首次访问时的系统偏好。

<html data-moe-theme="dark">
  …
</html>