---
globs: *.tsx
alwaysApply: false
---
# UI 组件极简黑白风格规范

- 仅使用 Tailwind 语义色：主色用 bg-background、text-foreground，辅助色用 text-muted-foreground
- 所有卡片、区块、统计等背景统一 bg-background，文本统一 text-foreground
- 边框仅用 border，不加颜色（无 border-gray-xxx）
- 布局优先用 flex/grid，元素间距用 gap
- 响应式断点：sm/md/lg/xl/2xl，采用移动优先
- 禁止使用彩色/灰色背景和边框，仅允许黑白风格
- 说明/次要信息用 text-muted-foreground
- 主题切换仅依赖 Tailwind 语义色
- 保证充足的颜色对比度和可访问性

# Card style
- shadow-none border


# Icon style
- use lucide react icon first
- 一般不需要添加 className='size-4', just <HomeIcon />
- when btn size is 'sm', use className='size-4'

# border
- 不要滥用，如 input 等，都不要添加 border