SchemaX UI

设计系统即作品

设计系统是设计唯一真相，也是 SchemaX 自身的一件作品：令牌生成、组件契约与阅读规范同一套结构。

Style Dictionary · DTCG JSON 令牌 · 生成 CSS / TS
Astro 静态 · neubrutalism 组件 · 几何符号 · Tailwind 桥接

TokensComponentsContent

视觉双层

Structure 搭骨架 · Clash 上撞色

3px 黑框 · 零模糊硬影

单一 canonical 笔触 + 3/5/8/12px 纯黑偏移影 + 恒 0 圆角 + 抬升式 hover。neubrutalism 的物理骨架。

撞色贴纸堆

黄 + 珊瑚粉 + 天蓝 + 柔绿 + 橙，贴纸并置 + Bricolage 大写 display + 几何符号 icon。人格与可读共存。

从这里进入

按 Foundations → Tokens → Components → Content 阅读

Foundations设计语言的「为什么」：视觉方向、核心原则、基础取值。TokensReference / Semantic / Article / Component —— 读取生成产物，不手抄文档。Componentsneubrutalism 控件：Button、Card、Badge、Nav、Command……3px 框 + 抬升实体。ContentMarkdown / MDX 真实排版：阅读柱、代码块、引用与标注。

Patterns文章头、课程目录、项目 Hero、代码对比等组合模式。