# brutal-design-system

**Repository Path**: xiak/brutal-design-system

## Basic Information

- **Project Name**: brutal-design-system
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-30
- **Last Updated**: 2026-05-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: UI

## README

# Brutal Design System / 粗野主义设计系统

面向 Tailwind CSS v4 的粗野主义 UI 组件库。复制 `dist/` 下的两个文件即可接入任何项目。

## 文件结构

```
brutal-design-system/
├── src/
│   ├── brutal-system.css      ← 源样式（@theme + @layer components）
│   └── brutal-system.js       ← 交互逻辑（Toast / Modal / Accordion / Tab / Chat / ...）
├── dist/
│   ├── brutal-system.css      ← 编译后产出（可直接引用）
│   └── brutal-system.js       ← 脚本副本（可直接引用）
├── index.html                 ← 完整演示页面
├── package.json
└── README.md
```

## 快速开始

### 方式一：在自己的 Tailwind v4 项目中引入源码（推荐）

适用于 Vue、React 等已集成 Tailwind CSS v4 的项目。

1. 将 `src/brutal-system.css` 复制到你的项目（例如 `styles/brutal-system.css`）。
2. 在你的主 CSS 文件中导入：

```css
@import "tailwindcss";
@import "./brutal-system.css";
```

3. 将 `src/brutal-system.js` 复制到项目并引入（可选，纯引入设计可不需要）：

```js
import './brutal-system.js';   // 或直接在入口 HTML 中 <script src>
```

4. 引入外部依赖（jQuery、Font Awesome、marked）：

```html
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css" rel="stylesheet"/>
```

> 若项目不需要 Markdown 和 Chat 组件，marked 可省略。

### 方式二：直接引用产物（纯 HTML / 无构建环境）

适用于没有构建流程的静态页面。

复制 `dist/brutal-system.css` 和 `dist/brutal-system.js` 到你的项目目录，在 HTML 中引入：

```html
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css" rel="stylesheet"/>

<link rel="stylesheet" href="brutal-system.css"/>
<script src="brutal-system.js"></script>
```

### 本地开发

```bash
# 安装依赖
npm install

# 编译 CSS（输出到 dist/）
npm run build:css

# 监听修改并自动编译
npm run watch:css
```

开发时修改 `src/brutal-system.css`，运行 `npm run build:css` 后刷新 `index.html` 即可查看效果。

## 设计 Token

```css
@theme {
  --font-display: system-ui, sans-serif;
  --font-mono: "Cascadia Code", "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", ui-monospace, monospace;

  --color-brutal-yellow:   #FFD440;
  --color-brutal-pink:     #FE7DA8;
  --color-brutal-lavender: #BBAFE6;
  --color-brutal-cream:    #FFFAEF;
  --color-brutal-cyan:     #8FC4D9;
  --color-brutal-orange:   #ECA678;
  --color-brutal-lime:     #BFE07A;

  --shadow-bru:    4px 4px 0 #141111;
  --shadow-bru-sm: 2px 2px 0 #141111;
  --shadow-bru-lg: 6px 6px 0 #141111;
}
```

## 组件速查

### 按钮

```html
<button class="btn-bru px-5 py-2 bg-brutal-yellow text-sm">默认</button>
<button class="btn-bru-sm px-4 py-2 bg-brutal-pink text-xs">小</button>
<button class="btn-bru-lg px-6 py-3 bg-brutal-cyan text-base">大</button>
```

### 卡片

```html
<div class="card-bru p-6">内容</div>
```

### 输入框

```html
<input class="input-bru w-full" placeholder="输入内容">
```

### Toast（需要 JS）

```js
showToast('success', '保存成功', '数据已更新');
showToast('error',   '操作失败', '请重试');
showToast('info',    '提示',     '新消息');
showToast('warning', '注意',     '即将过期');
showCenterToast('success', '已保存'); // 居中轻提示
```

### Modal（需要 JS）

```js
openModal('confirm', '确认删除', '此操作不可撤销', 'confirm');
openModal('form',    '新建用户', '填写详细信息',   'form');
openModal('success', '完成',     '操作已成功',     'success');
closeModal();
```

### 选项卡

```html
<div class="tab-bru-row">
  <button class="tab-bru active" data-tab="tab1">Tab 1</button>
  <button class="tab-bru" data-tab="tab2">Tab 2</button>
</div>
<div id="tab1">...</div>
<div id="tab2" class="hidden">...</div>
```

### 折叠面板

```html
<div class="accordion-bru-header" data-acc>
  标题 <i data-acc-icon class="fa-solid fa-chevron-down"></i>
</div>
<div class="accordion-bru-body" data-acc-body>
  内容...
</div>
```

### 异形按钮

```html
<button class="btn-bru-skew px-5 py-2 bg-brutal-yellow text-sm">
  <span class="skew-inner">倾斜按钮</span>
</button>
<button class="btn-bru-skew-sm px-4 py-2 text-xs bg-brutal-pink">
  <span class="skew-inner">小</span>
</button>
<button class="btn-bru-skew-lg px-7 py-3 bg-brutal-lime text-base">
  <span class="skew-inner">大</span>
</button>
```

### 异形选项卡

```html
<!-- 下划线 -->
<div class="tab-bru-row-skew">
  <button class="tab-bru-skew active" data-tab="tab1">
    <span class="skew-inner">Tab 1</span>
  </button>
  <button class="tab-bru-skew" data-tab="tab2">
    <span class="skew-inner">Tab 2</span>
  </button>
</div>

<!-- 胶囊 -->
<div class="tab-bru-pill-skew-group">
  <button class="tab-bru-pill-skew active" data-pill-group="view">
    <span class="skew-inner">全部</span>
  </button>
  <button class="tab-bru-pill-skew" data-pill-group="view">
    <span class="skew-inner">进行中</span>
  </button>
</div>
```

### 代码块复制

代码块右上角自动生成复制按钮，无需额外配置。

## 设计语言

| 特性 | 规则 |
|------|------|
| 阴影 | 硬边像素偏移，无模糊：`4px 4px 0 #141111` |
| 边框 | `2px solid #141111` |
| 圆角 | 全部 `0`（直角） |
| 色彩 | 高饱和：黄 / 粉 / 紫 / 青 / 橙 / lime |
| 字体 | 系统无衬线 + 等宽 |
| 动效 | `cubic-bezier(.22,1,.36,1)` 弹性曲线；hover 抬起，active 按压 |

## 组件清单

- 导航 / 面包屑
- Hero / 色彩系统 / 排版 / 阴影
- 按钮（4 尺寸 × 多色 × 状态）
- 徽标 / 标签 / 计数器
- 选项卡（下划线 / 胶囊 / 异形）
- 步骤条
- 表单（输入框 / 多行文本 / 下拉 / 滑块 / 复选框 / 单选 / 开关 / 搜索 / 错误态）
- 文件上传（拖拽）
- 卡片 / 表格 / 分页
- 手风琴
- 警告提示 / Toast / 工具提示
- 加载 & 骨架屏
- 头像 / 下拉菜单
- 评分 / 模态弹窗 / 分隔线
- **Markdown 渲染**（GFM + Monokai 代码高亮 + 复制按钮）
- **Markdown 实时编辑器**（双栏：源码 / 预览）
- **IM 即时通讯**（频道 + 聊天区 + 任务面板）

![](./page.png)

## 许可证

MIT