📐 前端设计规范 (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) 以增加质感。

<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。

/** @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 字体 和 锐利图片 的列表项设计。

<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、图片直角处理、黑白灰配色）满意，我将为您生成第二部分：前后端对接集成文档。

7.5 KiB Raw Blame History Unescape Escape