这是为您定制的 **《极简主义博客前端设计规范 v1.0 (The Minimalist Tech Spec)》**。

这份文档不仅是开发指南，更是视觉准则。它将指导您如何使用 Tailwind CSS 构建一个冷峻、理性且充满科技感的 AI 博客。

---

# 📐 前端设计规范 (Frontend Design System)

**项目名称**: Minimalist AI Blog
**核心理念**: 内容即界面 (Content is Interface)
**视觉风格**: 瑞士国际主义 (Swiss Style) + 科技极简 (Tech Utilitarianism)

---

## 1. 基础系统 (Foundations)

### 1.1 色彩体系 (Color Palette)

我们摒弃所有非功能性的色彩。界面只存在黑、白、灰。唯一的色彩将来自**文章配图**和**代码高亮**。

| 语义名称 | Tailwind 类名 | Hex 值 | 用途 |
| --- | --- | --- | --- |
| **Canvas** | `bg-white` | `#ffffff` | 页面背景，卡片背景 |
| **Ink** | `text-black` | `#000000` | 标题，主要按钮，强强调 |
| **Graphite** | `text-neutral-800` | `#262626` | 正文阅读色 (纯黑阅读易疲劳) |
| **Ash** | `text-neutral-500` | `#737373` | 辅助信息，日期，元数据 |
| **Vapor** | `bg-neutral-50` | `#fafafa` | 极淡背景 (代码块，引用) |
| **Line** | `border-neutral-200` | `#e5e5e5` | 结构分割线 (极少使用) |
| **Error** | `text-red-600` | `#dc2626` | 错误状态 (仅用于表单反馈) |

### 1.2 排版系统 (Typography)

全站强制使用 **Inter**。通过字重 (Weight) 和字间距 (Tracking) 的极端对比来建立层级，而非依赖颜色。

* **字体栈**: `font-sans` -> `Inter, system-ui, sans-serif`
* **字重策略**:
* **标题**: `font-bold` (700) 或 `font-medium` (500)
* **正文**: `font-normal` (400)
* **元数据**: `font-medium` (500) + 全大写



| 样式名称 | 大小 (Size) | 行高 (Leading) | 字间距 (Tracking) | Tailwind 组合 |
| --- | --- | --- | --- | --- |
| **Display** | 72px (6xl) | 1.1 | -0.04em | `text-6xl font-bold tracking-tighter leading-tight` |
| **Heading 1** | 48px (5xl) | 1.2 | -0.03em | `text-5xl font-bold tracking-tight leading-tight` |
| **Heading 2** | 30px (3xl) | 1.3 | -0.02em | `text-3xl font-semibold tracking-tight` |
| **Body** | 18px (lg) | 1.8 | -0.01em | `text-lg font-normal leading-relaxed text-neutral-800` |
| **Caption** | 12px (xs) | 1.5 | 0.05em | `text-xs font-medium tracking-wide uppercase text-neutral-500` |

### 1.3 网格与间距 (Grid & Spacing)

* **容器**: 最大宽度 `max-w-screen-xl` (1280px)。
* **网格**: 12 列网格，列间距 `gap-8` (32px)。
* **呼吸感**: 垂直方向的留白必须奢侈。
* **Section Spacing**: `py-24` (96px) 或 `py-32` (128px)。
* **Component Spacing**: `mb-12` (48px)。



---

## 2. 组件规范 (Components)

### 2.1 图片处理 (Imagery)

图片是极简页面中唯一的“重”元素。

* **形状**: **严格直角** (No Border Radius)。
* **比例**: 统一使用 `aspect-video` (16:9) 或 `aspect-[3/2]`。
* **边框**: 无边框。图片直接与背景接触。
* **蒙版**: 默认原图。Hover 时可叠加 5% 的黑色遮罩 (`bg-black/5`) 以增加质感。

```html
<figure class="relative w-full aspect-video overflow-hidden bg-neutral-100">
  <img src="..." class="object-cover w-full h-full" alt="Tech" />
</figure>

```

### 2.2 按钮与交互 (Buttons & Interactions)

拒绝实体色块按钮。使用 **“幽灵按钮” (Ghost Button)** 或 **“文本链接”**。

* **Primary Button**: 黑框，白底，黑字。Hover 变黑底白字。
* `border border-black px-6 py-3 text-sm font-medium hover:bg-black hover:text-white transition-colors duration-300`


* **Text Link**: 纯文字，底部有一条 1px 的黑线。Hover 时线消失或变粗。
* `border-b border-black pb-0.5 hover:border-transparent transition-colors`


* **Input Field**: 无背景，仅保留底部边框。
* `w-full border-b border-neutral-200 py-3 bg-transparent focus:border-black focus:outline-none transition-colors`



### 2.3 代码块 (Code Blocks)

作为技术博客的核心，代码块必须干净。

* **Theme**: 推荐 GitHub Light 或类似的高对比度浅色主题。
* **容器**: 浅灰色背景 `#fafafa`，无边框，直角。
* **字体**: JetBrains Mono 或 Fira Code。

---

## 3. Tailwind 配置文件 (Configuration)

请将以下代码直接覆盖您的 `tailwind.config.js`。

```javascript
/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      // 1. 字体系统：强制 Inter
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
        mono: ['JetBrains Mono', 'Fira Code', ...defaultTheme.fontFamily.mono],
      },
      // 2. 扩展间距：为了极致的留白
      spacing: {
        '18': '4.5rem', // 72px
        '24': '6rem',   // 96px
        '32': '8rem',   // 128px
      },
      // 3. 极简色板
      colors: {
        neutral: {
          50: '#fafafa',
          100: '#f5f5f5',
          200: '#e5e5e5', // 边框
          300: '#d4d4d4',
          400: '#a3a3a3',
          500: '#737373', // 辅助文字
          600: '#525252',
          700: '#404040',
          800: '#262626', // 正文
          900: '#171717',
          950: '#0a0a0a', // 接近纯黑
        }
      },
      // 4. 排版微调
      letterSpacing: {
        tighter: '-0.04em',
        tight: '-0.02em',
        normal: '-0.01em',
        wide: '0.02em',
        widest: '0.08em', // 用于全大写标签
      },
      lineHeight: {
        relaxed: '1.8', // 黄金阅读行高
      }
    },
  },
  plugins: [
    require('@tailwindcss/typography'), // 必须安装: npm install -D @tailwindcss/typography
  ],
}

```

---

## 4. 典型页面布局示例 (Layout Mockup)

### 首页文章列表 (The "Grid" List)

这是一个结合了 **Inter 字体** 和 **锐利图片** 的列表项设计。

```html
<article class="group grid grid-cols-12 gap-6 md:gap-12 mb-24 cursor-pointer">
  
  <div class="col-span-12 md:col-span-5 relative">
    <div class="aspect-[3/2] w-full overflow-hidden bg-neutral-100">
      <img 
        src="/api/placeholder/800/600" 
        alt="AI Neural Network" 
        class="h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-105 group-hover:opacity-90"
      />
    </div>
  </div>

  <div class="col-span-12 md:col-span-7 flex flex-col justify-center">
    
    <div class="flex items-center space-x-3 mb-6">
      <span class="text-xs font-bold tracking-widest text-black uppercase border border-black px-2 py-1">
        Algorithm
      </span>
      <span class="text-xs font-medium tracking-wide text-neutral-400 uppercase">
        Oct 24, 2026
      </span>
    </div>

    <h2 class="text-3xl md:text-5xl font-bold tracking-tighter text-black mb-6 leading-[1.1] group-hover:underline decoration-1 underline-offset-8">
      Optimizing Transformer Attention Mechanisms
    </h2>

    <p class="text-lg text-neutral-600 leading-relaxed mb-8 md:w-10/12 line-clamp-3">
      Deep dive into the architecture of FlashAttention-2. We explore how memory hierarchy awareness can significantly speed up training for large language models.
    </p>

    <div class="flex items-center text-sm font-semibold text-black group-hover:translate-x-2 transition-transform duration-300">
      Read Analysis <span class="ml-2">→</span>
    </div>
  </div>
</article>

```

**下一步**：如果您确认这份风格文档（尤其是对字体 Inter、图片直角处理、黑白灰配色）满意，我将为您生成第二部分：**前后端对接集成文档**。