sui_blog/UI.md

Design System — sui_blog

水墨纸质杂志风格。暖色纸张底色、近黑墨色文字、赭石色点缀，整体营造宋式文人审美。

色彩

Token	Hex	用途
parchment	#FDFCFA	页面背景
parchment-deep	#F5F2EE	深底（代码块、时间轴圆点、标签底色）
ink	#050404	主文字、标题
ink-light	#121010	略浅的墨色（about 正文）
ink-muted	#2A2624	辅助文字、meta、标签
terracotta	#A63D2F	强调色（链接、CTA、active 状态）
terracotta-light	#C46B5E	链接下划线装饰
sage	#6E8264	语义色——已发布/成功状态
sage-light	#A3B59B	预留
warm-gray	#C5BDB4	边框、分隔线、meta 点
cream	#FAF9F7	卡片背景、侧栏、深色按钮文字

辅助色：red-600（删除/错误）、red-50（删除 hover 背景）、white（内联编辑输入框）。

透明度层级：/80、/50、/30、/20、/15、/10、/5，用于边框和文字色微调。

选中文字：bg-terracotta + text-cream。

字体

Class	字体栈	场景
font-display	Noto Serif SC → Cormorant Garamond → Source Han Serif SC → Songti SC, serif	标题、logo、页面名、时间轴年份、分类名
font-body	Noto Serif SC → Source Serif 4 → Source Han Serif SC → Songti SC, serif	正文段落、摘要、prose 内容
font-sans	Noto Sans SC → DM Sans → system-ui, sans-serif	标签、meta、导航、按钮、表单、badge
font-mono	JetBrains Mono → Fira Code, monospace	prose 中的代码、admin HTML textarea

正文基础样式：line-height: 1.9、letter-spacing: 0.02em、开启 antialiased。

圆角

Class	用途
rounded-full	标签 pill、status badge、CTA 按钮、导航圆点、时间轴圆点
rounded-2xl	精选卡片、分类卡片、about 信息框
rounded-xl	标准卡片、表单输入框、admin 列表项、登录框
rounded-lg	侧栏导航项、操作按钮（保存/取消）、hover 背景

不使用 rounded-sm、rounded-md、rounded-3xl。层级关系：full（pill）> 2xl（大卡片）> xl（标准卡片/输入框）> lg（小元素）。

间距

页面水平内边距：px-page（clamp(1.5rem, 5vw, 6rem)）。

内容宽度层级：max-w-5xl（页面）→ max-w-3xl（标签云）→ max-w-2xl（文章正文）→ max-w-lg（描述文字）→ max-w-xs（页脚/短输入）。

页面垂直间距：pt-16 pb-24（标准区块）、pt-20 pb-24（hero 区）、mt-20（大段落分隔）。

常用 gap：gap-2（标签 pill）、gap-4（网格卡片）、gap-5（精选/分类网格）。

卡片内边距：p-7 md:p-10（精选大卡片）、p-7（分类卡片）、p-5（列表项）、p-4（统计卡片）。

卡片

所有卡片共享基础样式：

bg-cream border border-warm-gray/10

Hover 提升：

hover:border-terracotta/20

大卡片额外加阴影：

hover:shadow-lg hover:shadow-terracotta/5

精选卡片 / 分类卡片完整样式：

relative p-7 md:p-10 rounded-2xl bg-cream border border-warm-gray/10
hover:border-terracotta/20 hover:shadow-lg hover:shadow-terracotta/5
transition-all duration-500

不使用静态阴影。阴影仅出现在 hover 状态，且仅用于最大的两种卡片。

按钮

主要 CTA（圆角胶囊）：

px-6 py-3 rounded-full bg-ink text-cream font-sans text-sm tracking-wide
hover:bg-terracotta transition-colors duration-300

次要 CTA（描边胶囊）：

px-6 py-3 rounded-full border border-warm-gray/30 text-ink-muted font-sans text-sm tracking-wide
hover:border-terracotta/40 hover:text-terracotta transition-colors duration-300

Admin 主按钮（直角）：

px-4 py-2 rounded-lg bg-ink text-cream font-sans text-sm hover:bg-terracotta transition-colors

Admin 次要按钮：

px-6 py-2.5 rounded-lg border border-warm-gray/20 font-sans text-sm text-ink-muted
hover:text-ink transition-colors

联系链接（描边胶囊）：

inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-warm-gray/20
font-sans text-sm text-ink-muted
hover:border-terracotta hover:text-terracotta transition-all duration-300

过渡与动画

CSS 过渡（微交互）：

• transition-colors duration-300 — 最常用，所有链接和按钮
• transition-all duration-300 — 标签、联系按钮、列表项
• transition-all duration-500 — 精选/分类大卡片（更缓的动效）
• transition-opacity duration-300 — 箭头 hover 渐显

自定义缓动： --ease-literary: cubic-bezier(0.25, 0.1, 0.25, 1)

CSS 关键帧动画：

• animate-fade-up — translateY(20px) → 0，0.7s
• animate-fade-in — opacity 0 → 1，0.5s

GSAP（主要动画引擎）：

• 缓动函数：power3.out（标准）、power2.inOut（分隔线）、back.out(2)（弹跳缩放）
• 逐字动画：拆分 <span> + stagger y/opacity/blur，stagger 0.035s
• ScrollTrigger：start: "top 85%" ~ "top 92%"
• GsapReveal 组件变体：fade-up(y:40)、fade-in(opacity:0)、slide-left(x:-40)、slide-right(x:40)、scale(0.92)
• Stagger 值：0.035（逐字）、0.040.15（卡片）、0.080.12（列表）

悬停效果

文字： hover:text-terracotta（主要）、hover:text-ink（次要）、hover:text-red-600（删除）

背景： hover:bg-terracotta（按钮）、hover:bg-cream（列表行高亮）、hover:bg-warm-gray/10（侧栏导航）

边框： hover:border-terracotta/20（卡片）、hover:border-terracotta（联系按钮）、hover:border-terracotta/40（次要 CTA）

Group hover： group-hover:text-terracotta（卡片标题）、group-hover:opacity-100（箭头/删除按钮渐显）、group-hover:translate-x-0（箭头滑入）

表单聚焦： focus:border-terracotta/40 focus:outline-none，复选框/单选框 accent-terracotta

布局

根布局： min-h-full flex flex-col + <main className="flex-1">（sticky footer）

页面容器： px-page max-w-5xl mx-auto

Admin 布局： min-h-screen bg-parchment flex → aside w-56 shrink-0 + flex-1 overflow-auto p-8 max-w-5xl

网格：

• grid md:grid-cols-2 gap-5 — 精选文章
• grid sm:grid-cols-2 lg:grid-cols-3 gap-5 — 分类
• grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 — Admin 统计
• grid grid-cols-2 gap-4 — Admin 表单双列行

Prose 排版

文章正文使用 .prose-literary 类：字号 1.0625rem、行高 2、字距 0.04em。段落首行缩进 2em（首段不缩进），段间距 1.5em。h2 使用 font-display 1.75rem，h3 为 1.35rem。引用块左侧 3px terracotta 色竖线。代码使用 font-mono + bg-parchment-deep。链接使用 terracotta 色 + 下划线，hover 时下划线加深。

全局细节

• 滚动条：6px 宽，track 为 parchment-deep，thumb 为 warm-gray，hover 变 ink-muted
• 纸质纹理：body::before 叠加 SVG fractalNoise，opacity 0.03
• 分隔线装饰：.divider-ornament 使用两端渐变线 + 中间符号