设计风格：复古/90年代怀旧 (Retro / 90s Nostalgia)

设计哲学

核心原则：拥抱早期网络的原始、未经过滤的美学。这种设计庆祝1990年代网站的"丑陋酷"魅力——斜面按钮、系统字体、花哨的颜色和动画元素。它刻意反现代，拒绝极简主义，追求最大视觉冲击和怀旧真实性。每个像素都应该感觉像是在1997年的Windows 95机器上制作的。

氛围：俏皮、混乱、怀旧、毫无歉意地响亮。想想GeoCities页面、"正在建设中"横幅、访问计数器和留言簿。这不是关于看起来过时——而是关于捕捉早期互联网的乐观、实验精神，当时每个人都在摸索。这种美学应该足够真实，让经历过那个时代的人会心一笑。

历史背景：这种风格在1995-1999年间达到顶峰，当时个人电脑使用Windows 95/98，显示器分辨率为800x600，网页浏览器提供的CSS有限。设计师在严重限制下工作，产生了一种我们正在忠实重现的独特视觉语言。

设计Token系统（DNA）

颜色（仅浅色模式）

这个调色板直接取自Windows 95系统颜色和早期网络十六进制值。

Token	值	用途	备注
`background`	`#C0C0C0`	主要页面背景	经典Windows 95按钮面灰色
`foreground`	`#000000`	纯黑文字	最大对比度，正文文字不使用灰色
`muted`	`#808080`	次要元素、元数据	正好50%灰色（128,128,128）
`accent`	`#0000FF`	超链接（未访问）	纯蓝色最大饱和度
`secondary`	`#FF0000`	热红色强调	纯红色最大饱和度
`tertiary`	`#FFFF00`	亮黄色高亮	纯黄色，用于徽章和高亮
`success`	`#00FF00`	柠檬绿	纯绿色最大饱和度
`successDark`	`#00AA00`	按钮的深绿色	更可读的绿色变体
`border`	`#000000`	纯黑边框	用于外边框
`borderLight`	`#FFFFFF`	3D高亮白色	顶部/左侧斜面边缘
`borderDark`	`#808080`	3D阴影灰色	底部/右侧斜面边缘
`titleBar`	`#000080`	Windows标题栏海军蓝	纯深蓝色（海军蓝）
`titleBarGradientEnd`	`#1084D0`	标题栏渐变	Windows 98活动窗口渐变
`panelYellow`	`#FFFFCC`	浅黄色内容面板	真实的Windows记事本/帮助颜色
`visitedLink`	`#800080`	已访问超链接	紫色/栗色
`hoverLink`	`#FF0000`	链接悬停状态	红色

颜色关系：

所有颜色都是最大饱和度（纯RGB值，至少一个通道在0或255）
没有渐变灰色 - 只有 #000000、#808080、#C0C0C0、#FFFFFF
链接遵循经典顺序：蓝色 → 紫色（已访问） → 红色（悬停）

字体排版

字体栈（唤起1995-1999年的系统字体）：

主要正文："MS Sans Serif", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif
标题："Arial Black", Impact, Haettenschweiler, sans-serif（仅粗重、粗体）
等宽："Courier New", Courier, monospace（用于日期、统计、计数器、类代码元素）
俏皮点缀（极少使用）："Comic Sans MS", cursive（仅用于"有趣"的装饰元素如果需要）

字号：

H1首屏：48px-96px（3xl到6xl），总是大写或首字母大写，Arial Black/Impact
H2章节：32-48px（2xl到4xl），经常大写，Arial Black
H3小节：20-24px（lg到xl），粗体字重
正文：14-16px，默认字重，可读密度
小/元数据：12px（xs），经常等宽用于日期和元数据
标签：10-12px，大写，有时等宽

字体排版模式：

标题是粗体或黑色字重 - 这个时代不存在细体或轻体
大写标题的字间距：tracking-tight 到 tracking-wide（不扩展）
行高：紧凑（标题1.2-1.4，正文1.5-1.6）
3D文字的文字阴影：text-shadow: 2px 2px 0 #808080（硬边，无模糊）

圆角与边框

圆角：到处都是 0px。没有例外。90年代没有圆角。

边框宽度：

标准：大多数元素 2px
强调：章节分隔线和高亮元素 4px
最小：仅微妙内部细节 1px（罕见）

3D斜面效果（标志性特征）：

这是最关键的视觉效果。Windows 95使用特定的4值边框颜色语法结合box-shadow创造深度。

外凸（凸起）- 看起来突出的元素：

border: 2px solid;
border-color: #ffffff #808080 #808080 #ffffff; /* 上 右 下 左 */
box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #dfdfdf;

顶部和左侧边缘：白色（#ffffff）
底部和右侧边缘：灰色（#808080）
内部阴影用更深（#404040）和更浅（#dfdfdf）的点缀增加深度

外凸增强（更深斜面）：

border: 2px solid;
border-color: #ffffff #808080 #808080 #ffffff;
box-shadow:
  inset -2px -2px 0 #808080,
  inset 2px 2px 0 #fff,
  inset -4px -4px 0 #404040,
  inset 4px 4px 0 #dfdfdf;

内凹（下沉）- 看起来压入的元素：

border: 2px solid;
border-color: #808080 #ffffff #ffffff #808080; /* 与外凸相反 */
box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;

顶部和左侧边缘：灰色（#808080）
底部和右侧边缘：白色（#ffffff）
内部阴影创造凹陷外观

活跃/按下状态：当外凸元素被点击时，它变成内凹并向下和向右平移1px：

border-color: #808080 #ffffff #ffffff #808080;
box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
transform: translate(1px, 1px);

Tailwind实现：使用下划线代替空格：

[border-color:#fff_#808080_#808080_#fff] 用于外凸
[border-color:#808080_#fff_#fff_#808080] 用于内凹
[box-shadow:inset_-1px_-1px_0_#404040,inset_1px_1px_0_#dfdfdf]

纹理与图案（强制性）

背景绝不能是平的。这对真实性至关重要。

90年代平铺图案（主要技术）：

background-color: #c0c0c0;
background-image:
  linear-gradient(45deg, #b8b8b8 25%, transparent 25%),
  linear-gradient(-45deg, #b8b8b8 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #b8b8b8 75%),
  linear-gradient(-45deg, transparent 75%, #b8b8b8 75%);
background-size: 4px 4px;
background-position: 0 0, 0 2px, 2px -2px, -2px 0px;

这创造出微妙的对角交叉线纹理，提供纹理而不会分散注意力。

施工警示条纹（用于强调区域）：

background: repeating-linear-gradient(
  45deg,
  #ffff00,
  #ffff00 10px,
  #000000 10px,
  #000000 20px
);

正好10px黄色，10px黑色条纹，45度角。

带凹槽效果的水平线（HR）：

border: none;
height: 4px;
background: linear-gradient(
  to bottom,
  #808080 0%, #808080 50%,
  #ffffff 50%, #ffffff 100%
);

创造出经典的"蚀刻"分隔线外观。

组件样式原则

按钮

视觉要求：

边框：2px，4值外凸颜色模式
背景：取决于变体的微妙渐变或纯色
文字：粗体、大写配合 tracking-wide，居中
内边距：垂直8px，水平16px（舒适的点击区域）
无圆角
无柔和投影

状态过渡：

默认：外凸斜面，悬停时背景稍亮
悬停：背景变亮1-2个色阶，保持外凸
活跃/按下：内凸斜面（反转border-color），translate(1px, 1px)
焦点：2px黑色虚线轮廓，2px偏移（Windows 95焦点环）
过渡：无或即时（transition-none 或最大50ms）- 无平滑缓动

变体：

默认/幽灵：#C0C0C0 背景，黑色文字，外凸斜面
点缀/主要：#0000FF 背景，白色文字，蓝色色调斜面边缘
危险：#FF0000 背景，白色文字，红色色调斜面边缘
成功：#00AA00（可读绿色）背景，白色文字，绿色色调斜面边缘
轮廓：白色背景，黑色文字，外凸斜面

斜面颜色着色：对于彩色按钮，将斜面边缘着色以匹配：

蓝色按钮：border-color: #5555ff #000080 #000080 #5555ff
红色按钮：border-color: #ff5555 #800000 #800000 #ff5555
绿色按钮：border-color: #00ff00 #006600 #006600 #00ff00

示例Tailwind类：

border-2
bg-[#c0c0c0]
text-black
[border-color:#fff_#808080_#808080_#fff]
[box-shadow:inset_-1px_-1px_0_#404040,inset_1px_1px_0_#dfdfdf]
hover:bg-[#d0d0d0]
active:[border-color:#808080_#fff_#fff_#808080]
active:[box-shadow:inset_1px_1px_0_#404040,inset_-1px_-1px_0_#dfdfdf]
active:translate-x-[1px]
active:translate-y-[1px]
focus-visible:outline-dotted
focus-visible:outline-2
focus-visible:outline-black
focus-visible:outline-offset-2

卡片/容器

面板/卡片结构：

容器：2px外凸斜面，#C0C0C0 背景
标题栏：渐变 linear-gradient(to right, #000080, #1084d0)，白色文字，粗体，4-8px内边距
内容区域：内凸斜面（下沉），白色或 #FFFFCC（黄色）背景

窗口风格卡片（最独特）：

外部容器：外凸斜面，灰色背景
├── 标题栏：海军蓝渐变（#000080 → #1084d0），白色粗体文字
└── 内容区域：内凸斜面，白色背景，内边距16px

交替行背景：对于表格状布局，在以下之间交替：

偶数行：#FFFFFF（白色）
奇数行：#E8E8E8（浅灰色）

这创造出经典的电子表格/数据库外观。

单元格之间的边框：使用 border-right-2 和 border-bottom-2 配合 #808080 创造可见网格线。

表单输入框

输入字段：

边框：2px内凹（下沉外观）
背景：白色
文字：黑色，14-16px
内边距：4-8px
焦点：2px黑色虚线轮廓，2px偏移
禁用：#C0C0C0 背景，50%不透明度

占位符文字：#808080（灰色）

选择下拉框：与输入框相同的内凹样式

复选框/单选：90年代网页不常见（使用文字指示器或简单方块）

链接（超链接）

90年代网络最具标志性的元素。

状态：

未访问：#0000FF（蓝色），总是有下划线
已访问：#800080（紫色）
悬停：#FF0000（红色）
活跃（点击时）：#FF0000（红色）

规则：

总是有下划线（绝不移除text-decoration）
颜色变化是即时的（无过渡）
悬停无背景
无额外样式效果

示例：

text-[#0000ff]
underline
hover:text-[#ff0000]
visited:text-[#800080]

图标

样式：

描边宽度：2px 或 stroke-[2px]（粗、粗线条）
颜色：匹配章节的点缀色（蓝色、红色、绿色）
尺寸：24px（h-6 w-6）标准，32px用于功能
无圆角或柔和形状
考虑在图标容器周围添加2px黑色边框

图标容器：如果将图标放在彩色框中：

框背景：纯亮色（#000080、#008080、#00AA00）
图标颜色：白色
框样式：外凸或带边框的平面

布局原则

页面结构

最大宽度：max-w-5xl (1024px) - 模仿800x600显示器内容区域带浏览器边框

间距系统：

基础单位：8px
元素内边距：16px（丰厚的内部间距）
元素外边距：8-16px（更紧的外部间距以获得密度）
章节内边距：垂直64px（py-16），水平16px（px-4）

章节分隔线：使用粗边框（border-b-4 border-[#808080]）或在主要章节之间使用凹槽HR效果。

网格布局：即使使用现代CSS Grid/Flexbox，也要让它看起来像表格：

用 border-2 或 border-r-2/border-b-2 可见单元格边框
交替行背景
尽可能等列宽
密集、紧凑的间距

响应式策略

桌面端 (768px+)：

完整的类表格布局，并排列
多列网格（2-4列）
可见的复杂边框

平板端 (640-768px)：

最多减少到2列
保持所有视觉样式（斜面、边框）
如果需要，堆叠复杂表格

移动端 (<640px)：

单列
保留斜面效果（对风格至关重要）
跑马灯继续滚动
稍微缩小字体但保持粗体字重
复杂表格的水平滚动是可接受的（真实！）

重要：美学比完美响应更重要。移动端体验稍微粗糙是可以的——这对那个时代是真实的。

"大胆因素"（非通用性）

强制性元素 - 这些必须存在，否则风格失败：

跑马灯滚动文字

使用 react-fast-marquee 或纯CSS跑马灯用于：

彩色文字的公告栏
推荐语轮播
"突发新闻"风格更新

设置：

速度：30-60（中等速度）
无渐变淡出（gradient={false}）
不同颜色的多个span

动画彩虹文字

CSS动画循环彩虹色用于首屏标题：

@keyframes rainbow {
  0% { color: #ff0000; }
  17% { color: #ff8000; }
  33% { color: #ffff00; }
  50% { color: #00ff00; }
  67% { color: #0080ff; }
  83% { color: #8000ff; }
  100% { color: #ff0000; }
}
animation: rainbow 4s linear infinite;

时长：4秒，线性缓动（无平滑）

所有元素斜面

每个交互元素和大多数容器必须有3D外凸/内凹效果。这是不可协商的。

"正在建设中"能量

添加小动画元素：

闪烁的"NEW!"徽章（使用 animate-pulse 或CSS闪烁配合step-end）
脉动的CTA徽章
颜色循环装饰元素

脉动光晕动画（用于徽章）：

@keyframes pulse-glow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 10px 2px rgba(255, 0, 0, 0.5);
  }
}
animation: pulse-glow 1.5s ease-in-out infinite;

水平线（HR）作为分隔线

在主要内容章节之间使用3D凹槽效果。这是90年代的标志性图案。

访问计数器美学

至少将一个统计部分样式化为经典访问计数器：

黑色或海军蓝背景
绿色等宽文字（#00FF00）
斜面内凹框架
文字如 "Visitors: 0001234 | Since 1995"

类表格视觉布局

即使使用现代CSS，也要创建HTML表格的外观：

可见单元格边框（border-2 border-[#808080]）
交替行背景
网格状精度

标题栏窗口

卡片应该看起来像Windows 95应用程序窗口：

海军蓝到蓝色渐变标题栏
标题中白色粗体文字
下方内凹内容区域

即时状态变化：transition-none 或 duration-0
颜色循环：linear（无缓动）
徽章/脉动：ease-in-out（用于注意效果可接受）
按钮按下：transition-none 或最大50ms

时长：

按钮按下：即时或50ms
悬停颜色变化：75ms或即时
彩虹文字循环：3-5秒
脉动光晕：1-2秒
跑马灯速度：中等（40-60px/秒）

关键动画：

彩虹文字：4s线性无限循环穿过光谱
脉动光晕：1.5s ease-in-out无限循环用于"NEW!"徽章
闪烁（极少使用）：1s step-end无限（硬开/关，非淡出）
跑马灯：连续滚动，悬停暂停以获得可用性

减少运动：尊重 prefers-reduced-motion：

停止彩虹动画（回退到单一亮色）
停止跑马灯（显示静态或更慢滚动）
停止脉动徽章（静态配合亮色）

无障碍

颜色对比：

银色（#C0C0C0）上的黑色（#000000）：7.5:1（AAA）
海军蓝（#000080）上的白色：8.6:1（AAA）
蓝色（#0000FF）上的白色：8.6:1（AAA）
调色板自然提供优秀的对比

焦点状态：

2px黑色虚线轮廓（Windows 95真实）
2px距元素偏移
高可见度，匹配美学
绝不移除焦点指示器

键盘导航：

所有交互元素必须可键盘访问
Tab顺序应遵循视觉顺序
Enter/Space上的按钮按下应显示活跃状态

屏幕阅读器：

跑马灯文字必须有静态替代或aria-live="polite"
装饰动画元素应aria-hidden
彩色方块和装饰图案不需要替代文字
即使有表格外观，也要确保语义HTML

运动敏感：提供 prefers-reduced-motion 替代：

@media (prefers-reduced-motion: reduce) {
  .text-rainbow { animation: none; color: #ff0000; }
  .animate-pulse-glow { animation: none; }
  /* 跑马灯由库或CSS处理 */
}

反模式（避免什么）

视觉禁忌：

无圆角 - 连1px都不行。零。总是。
无柔和投影 - 仅使用内阴影用于斜面
无渐变，除了：
- 标题栏渐变（海军蓝到蓝色）
- 背景图案（条纹、平铺）
- 微妙按钮背景
无半透明叠加 - 颜色总是不透明的（深色背景上白色/80用于次要文字除外）
无细字体 - 一切都是粗体或黑色字重
无微妙灰色 - 只有 #000000、#808080、#C0C0C0、#FFFFFF、#E8E8E8
无平滑缓动 - 使用线性或即时过渡
绝不移除链接下划线 - 总是可见
无现代极简间距 - 密集，不通风
不要尝试"现代化"美学 - 拥抱俗气

交互禁忌：

不要使用缩放元素的悬停状态（除了脉动徽章的1.05）
不要使用淡出过渡 - 变化应该即时或线性
不要把跑马灯文字做成基本内容 - 保持装饰性/补充性
不要覆盖浏览器默认选择颜色 - 实际上，要：使用 #000080 背景，白色文字
不要使用浮动操作按钮 或现代UI模式

内容禁忌：

不要使用不适合时代的占位文字（不要有"lorem ipsum"）
不要在装饰文字中引用现代技术（保持通用或90年代主题）
不要微妙 - 这种风格是响亮而自豪的

实现说明

Tailwind任意值

你会经常使用这些：

border-[2px]
[border-color:#fff_#808080_#808080_#fff]
[box-shadow:inset_-1px_-1px_0_#404040,inset_1px_1px_0_#dfdfdf]
bg-[#c0c0c0]
text-[#0000ff]

注意：在任意值中使用下划线代替空格。

需要自定义CSS

有些效果需要CSS文件：

@keyframes 用于彩虹、脉动光晕、闪烁
.hr-groove 用于水平线效果
.bg-90s-tile 用于平铺背景图案
.bg-construction 用于警示条纹

依赖

react-fast-marquee：真实滚动文字必备
考虑为可重用性创建CSS变量用于复杂的box-shadow值

颜色分层策略

基础：平铺的 #C0C0C0 背景
表面：白色或灰色（#E8E8E8）面板带斜面
点缀表面：海军蓝标题栏、彩色功能框
前景：黑色文字、彩色图标
高亮：黄色徽章、红色"NEW!"标签、彩虹文字

标志性视觉检查清单

在考虑设计完成之前，验证这些存在：

秘诀

让这种风格奏效的是对真实性的承诺胜过现代化。诱惑将是"清理它"或"让它更专业"。抵制这个。丑陋就是美。冲突的颜色、密集的布局、激进的动画——这些不是bug，它们是特性。

经历过1997年的人看着这个应该立即感觉被带回去。设计应该如此真实，以至于与现代网站并列时几乎令人吃惊。这种对比就是重点。

拥抱俗气。庆祝混乱。欢迎来到1997年。