SchemaX协议是一等公民
RSSGitHub
Design System · Components

组件 Components

一套可以直接落地的组件语法：3px 黑框、5px 中硬影、直角平面和明确的交互反馈。 每个组件都把实现代码和 live demo 放在同一条阅读路径上。

Button

主要、次要、幽灵、强调变体。

CSS
.btn {
  border: 3px solid var(--sx-sys-color-border);
  border-radius: 0;
  background: var(--sx-sys-color-accent);
  color: var(--sx-sys-color-text-primary);
  box-shadow: var(--sx-sys-shadow-md);
  font-weight: 700;
  padding: 12px 24px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--sx-sys-shadow-lg);
}

.btn:active {
  transform: translate(3px, 3px);
  box-shadow: none;
}

/* focus 永远别忘了 */
.btn:focus-visible {
  outline: 3px solid var(--sx-sys-color-sky);
  outline-offset: 3px;
}
Live Demo

Hover and click these:

卡片

内容容器。维度：圆角 / 边框 / 阴影 / 交互（链接 vs 静态容器）。

CSS
.card {
  border: 3px solid var(--sx-sys-color-border);
  background: var(--sx-sys-color-bg-surface);
  box-shadow: var(--sx-sys-shadow-md);
  padding: var(--sx-comp-card-padding);
  transition: transform 0.15s, box-shadow 0.15s;
}

.card--interactive:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--sx-sys-shadow-lg);
}

/* 变体级 token：边框与珊瑚色偏移影 */
box-shadow: var(--sx-comp-card-colored-shadow);

卡片变体 Card Variations

Standard Card

黑边 + 黑影。百搭主力，任何背景上都成立。

Default
Colored Shadow

同色边框 + 撞色偏移影，保留结构的同时加点个性。

Accent
Filled Card

满色底 + 黑框黑影把能量框住。适合 CTA。

Highlight

徽章

状态标记，含 default / accent / action / danger / success 五个变体，按内容状态语义映射颜色。

CSS
.badge {
  border: 3px solid var(--sx-sys-color-border);
  background: var(--sx-sys-color-bg-surface);
  box-shadow: var(--sx-sys-shadow-sm);
  text-transform: uppercase;
}

.badge--accent  { background: var(--sx-sys-color-accent); }
.badge--success { background: var(--sx-sys-color-success); }
DefaultAccentActionDangerSuccess

命令行

仿终端的命令行展示块。标题栏 + 深色屏幕，行类型覆盖命令 / 输出 / 成功 / 错误 / 注释，可选闪烁光标，零 JS。

CSS
.term {
  border: 3px solid var(--sx-sys-color-border);
  box-shadow: var(--sx-comp-term-shadow);
}
.term__screen {
  font-family: var(--sx-sys-font-family-mono-system);
  overflow-x: auto;
}

/* light：浅屏黑字（默认）/ dark：黑屏浅字 */
bash
$ npx astro dev --host ↳ Local http://127.0.0.1:4321 ↳ Network http://192.168.1.5:4321
output.log
$ npx astro dev --host ↳ Local http://127.0.0.1:4321 ↳ Network http://192.168.1.5:4321

FeatureCard

撞色 icon 方块 + 标题 + 描述 + 撞色偏移硬影（贴纸堆）。与首页 Entry 同款。

CSS
.featurecard {
  border: 3px solid var(--sx-sys-color-border);
  box-shadow: var(--sx-sys-shadow-md);
}
a.featurecard:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--sx-sys-shadow-lg);
}

/* 撞色机制：局部覆盖 shadow-color，偏移走 3/5/8 ramp token */
--sx-fc-icon-bg: var(--sx-sys-color-accent);
--sx-sys-shadow-color: var(--sx-sys-color-action-primary);
Courses体系化课程、章节与练习。Blog技术文章与工程笔记。Projects开源仓库与工程作品。Design SystemToken、组件与内容规范。

StaticCard

满色底静态展示卡 · 不可点 · 无 hover。纯展示用，与可点 FeatureCard 是两个独立组件。

CSS
.staticcard {
  background: var(--sx-sys-color-bg-surface);
  border: 3px solid var(--sx-sys-color-border);
}

/* 标签使用撞色 · 无 hover · 纯展示（不可点） */

Gumroad

The poster child. Sahil Lavingia's 2021 10-year rebrand traded the corporate SaaS look for flat candy fills, sharp black outlines, and hard offset shadows. Still unmistakably neubrutalist today.

Creator Economy

Tony's Chocolonely

Proof it scales past tech. Clashing flat color fields, oversized chunky display type, and square-cornered buttons drive a mainstream consumer brand — loud by design, on purpose.

Consumer / CPG

Panda CSS

CSS-in-JS library with a fully neubrutalist marketing site — 4px 4px 0 0 black shadows and 3px solid black borders straight from the production stylesheet. Dev tools are a natural home for the style.

Dev Tools

neobrutalism.dev

The canonical component library (5,000+ GitHub stars). A shadcn/ui-based React + Tailwind system whose own docs site is a textbook reference implementation: grid background, thick borders, hard shadows on every control.

Open Source

Dodonut

Design-studio portfolio leaning all the way in: black-bordered nav and buttons with hard offset shadows, flat lime and purple fills, oversized type. Agencies use the style as a craft signal.

Agency

Figma Cautionary

An early, influential adopter (~2019–2023): heavy black outlines and bold flat color. But its 2024 rebrand deliberately dropped those outlines — a reminder that even category leaders cycle out of a trend.

Moved on

代码转换对比

双窗口代码转换展示块。左侧源 + 中间双箭头 + 右侧目标；bar 控制顶栏深浅（dark/light），用于展示 Markdown→HTML 等格式转换。

MARKDOWN.MD
# 标题
## 副标题
- 项目一
- 项目二
INDEX.HTML
<h1>标题</h1>
<h2>副标题</h2>
<ul>
  <li>项目一</li>
  <li>项目二</li>
</ul>
MARKDOWN.MD
**粗体** _斜体_ `code`
INDEX.HTML
<strong>粗体</strong>
<em>斜体</em>
<code>code</code>
CSS
.cmp {
  display: flex;
  gap: 1.25rem;
}
.win {
  border: 2px solid var(--sx-sys-color-border);
  background: var(--sx-sys-color-beige);
}

/* 中间黑底黄箭头连接源 ↔ 目标 */

文档侧栏

文档左侧边栏导航。多组 eyebrow + 链接列表；支持当前页高亮与 planned 灰显，数据驱动、零 JS。

CSS
.doc-side__link {
  font-family: var(--sx-sys-font-family-mono);
}
.doc-side__link[aria-current='page'] {
  label: 黄底徽章 + 指示条加粗;
}

/* planned：灰显不可点 span */

调参台

拖动滑块实时感受 neubrutalism grammar——边框 / 硬影 / 圆角 / 底色。React island。

Live Preview

3px 框 · 5px 影 · 0px 角

Background

表单控件

input / select / textarea / checkbox / radio / toggle——全部 neubrutalism 化：黑框硬影零圆角，focus 蓝色 outline。

Checkboxes
Radio Buttons
Toggle Switches

通知

success / error / warning / info 四种 toast，点击触发、3 秒自动消失，assertive / polite 双语义。React island。

点击上方按钮触发通知

分割线

平面黑条结构分隔线——neubrutalism 语法，承接被替换的涂鸦分割线。零 JS 静态组件。

CSS
.sectiondivider {
  height: var(--sx-sd-weight);
  background: var(--sx-sd-color);
  border: 0;
}

/* weight → border token */
thin     var(--sx-sys-border-width)         2px
default  var(--sx-sys-border-width-strong)  3px
thick    calc(...strong × 2)              6px
thin · 2px
default · 3px
thick · 6px
撞色 · accent

对比度检查器

双 hex 输入 → WCAG 对比度比值 + AA/AAA（normal/large）pass/fail + 实时文本预览。React island。

WCAG
// WCAG 对比度阈值
AA   normal ≥ 4.5   large ≥ 3.0
AAA  normal ≥ 7.0   large ≥ 4.5

// ratio = (L_lighter + 0.05) / (L_darker + 0.05)
21.00 : 1
AA ✓ normalAAA ✓ normalAA ✓ largeAAA ✓ large
The quick brown fox jumps over the lazy dog. 0123456789

风格对照切换

Standard SaaS ↔ Neubrutalist 同内容切换：同一张卡片只改边框 / 圆角 / 阴影三属性，气质反转。React island。

DIFF
/* 同一张卡片，只改三个属性 */
border-radius  12px            → 0
box-shadow     0 4px 12px rgba() → 5px 5px 0 #000
border         1px solid #d4d4d8 → 3px solid #000
border IS ornament

同一段内容

切换 toggle，看同一张卡片只改边框 / 圆角 / 阴影三件事，气质如何反转。

Token 速查

neubrutalism grammar 的全部参数——边框两档、硬影 3/5/8/12 四档、圆角恒 0。硬影色由--sx-sys-shadow-color 控制（默认 ink 黑，组件可局部覆盖做撞色偏移）。

Token取值用途
--sx-sys-border-width2px细笔触 · 次级元素 / SectionDivider thin 档
--sx-sys-border-width-strong3px主组件默认（按钮 / 卡片 / 输入 / toast / 分割线）
--sx-sys-shadow-sm3px 3px 0 var(--sx-sys-shadow-color)小硬影 · badge / 输入 / 卡片默认
--sx-sys-shadow-md5px 5px 0 var(--sx-sys-shadow-color)中硬影 · toast / 输入 focus 升级
--sx-sys-shadow-lg8px 8px 0 var(--sx-sys-shadow-color)大硬影 · hover 抬升档
--sx-sys-shadow-xl12px 12px 0 var(--sx-sys-shadow-color)重硬影 · hero / dialog
--sx-sys-radius-control0恒 0 圆角（全站控件 / 容器无例外）

计划中

尚未实现。用脚手架生成本体 + demo 后，把 registry 条目改 live 即可出现在上方。

  • Tag等宽字体的轻量标记。pnpm gen:component Tag
  • Callout引用 / 警告 / 想法等内容提示。pnpm gen:component Callout