视觉风格retro

复古怀旧风

Retro Vintage

怀旧复古的设计风格，老式排版、复古色调、手工质感元素。适合咖啡馆、复古品牌、独立杂志、音乐厂牌。

打开交互展示查看实现规则

主色#8b4513

次色#f5e6d3

强调色 1#c94c4c

强调色 2#2e4a3f

强调色 3#d4a373

强调色 4#816904

AI 实现规则

STYLE: Retro Vintage
TYPE: Nostalgic, classic design aesthetic

MUST USE:
- Vintage color palette: sepia, amber, brown tones
- Paper texture or aged effects on backgrounds
- Serif fonts or vintage sans-serif
- Thick borders: border-2 or border-4
- Decorative elements (corner ornaments, dividers)
- Old-style typography: uppercase, tracking-widest
- Image filters: sepia, brightness-90

MUST AVOID:
- Modern gradients
- Neon/high saturation colors
- Minimalist/flat modern design
- Very rounded corners
- Glass morphism effects
- Heavy animations

COLOR PALETTE:
- Primary: Saddle brown (#8b4513)
- Background: Cream/Parchment (#f5e6d3)
- Accent: Rust red (#c94c4c), Forest green (#2e4a3f)

TYPOGRAPHY:
- Headings: font-serif, uppercase option
- Labels: text-xs uppercase tracking-[0.2em]
- Body: font-serif, relaxed leading

## Animation & Interaction Rules

- Antique Stillness: Absolutely zero `scale` or `translate-y` motion. Old parchment lies flat on the table — it does not float, lift, or bounce. Forbidden: `hover:-translate-y-*`, `hover:scale-*`.
- Ink & Oxidation: Hover subtly darkens the background (`hover:bg-[#eedbc2]`) and deepens text color (`group-hover:text-[#5c2e0a]`). This simulates paper yellowing and ink darkening over time — not a modern color swap.
- Slow Passage of Time: All transitions must use `duration-700 ease-in-out` or longer. Historical materials change slowly. Never use `duration-150` or faster.
- Corner Reveal: Decorative corner ornaments use `opacity-30 group-hover:opacity-100 transition-opacity duration-700` — as if readers discover hidden details by leaning in closely.

组件预览与实现

组件变体

font-serif uppercase tracking-widest border-2 border-[#8b4513] transition-colors duration-200 bg-[#8b4513] text-[#f5e6d3] hover:bg-[#5c2e0a] hover:text-[#f5e6d3] active:bg-[#4a2408]

button

按钮

Retro Vintage 风格按钮，Antique Stillness 零位移 + Slow Passage `duration-700` + Ink & Oxidation 颜色加深

<button className="
  px-10 py-4
  bg-[#f5e6d3] text-[#8b4513]
  border-4 border-double border-[#8b4513]
  font-serif uppercase tracking-[0.2em] text-sm
  hover:bg-[#8b4513] hover:text-[#f5e6d3]
  hover:tracking-[0.25em]
  active:bg-[#5c2e0a] active:border-[#5c2e0a]
  transition-all duration-700 ease-in-out
">
  Discover History
</button>

card

卡片

Retro Vintage 风格卡片，Corner Reveal 角落装饰缓慢显现 + Ink & Oxidation 背景氧化加深

<div className="group bg-[#f5e6d3] border-2 border-[#8b4513]/40 p-10 relative hover:bg-[#eedbc2] hover:border-[#8b4513] transition-colors duration-700 ease-in-out cursor-default">
  {/* Corner decorations — emerge slowly on hover (Corner Reveal) */}
  <div className="absolute top-2 left-2 w-6 h-6 border-2 border-2 border-[#8b4513] opacity-30 group-hover:opacity-100 transition-opacity duration-700" />
  <div className="absolute top-2 right-2 w-6 h-6 border-2 border-2 border-[#8b4513] opacity-30 group-hover:opacity-100 transition-opacity duration-700" />
  <div className="absolute bottom-2 left-2 w-6 h-6 border-2 border-2 border-[#8b4513] opacity-30 group-hover:opacity-100 transition-opacity duration-700" />
  <div className="absolute bottom-2 right-2 w-6 h-6 border-2 border-2 border-[#8b4513] opacity-30 group-hover:opacity-100 transition-opacity duration-700" />
  <span className="text-xs font-serif uppercase tracking-[0.3em] text-[#8b4513]/60">Chapter One</span>
  <h3 className="text-3xl font-serif text-[#8b4513] mt-4 mb-6">The Grand Archives</h3>
  <p className="text-[#8b4513]/80 leading-loose font-serif group-hover:text-[#5c2e0a] transition-colors duration-700">
    A story that spans generations, told through craftsmanship and the slow passage of time.
  </p>
</div>

input

输入框

Retro Vintage 风格的输入框

<div className="space-y-2">
  <label className="block text-xs font-serif uppercase tracking-[0.2em] text-[#8b4513]">Your Name</label>
  <input
    type="text"
    className="w-full px-4 py-3 bg-transparent border-2 border-[#8b4513] text-[#8b4513] font-serif placeholder:text-[#8b4513]/40 focus:outline-none focus:bg-[#8b4513]/5 transition-colors duration-200"
    placeholder="Enter your name..."
  />
</div>

交互展示

独立打开展示

适用范围与设计理念

应用场景

视觉关键词

Retro Vintage 风格从20世纪中期的设计美学中汲取灵感，通过复古排版、做旧纹理和怀旧色调创造温暖的时光感。

核心理念：

- 时光沉淀：设计带有岁月的温度和故事

- 手工温度：避免过于数字化的冷感

- 经典永恒：使用经过时间检验的设计元素

- 文化底蕴：传达历史感和文化认同

设计原则：

- 视觉一致性：所有组件必须遵循统一的视觉语言，从色彩到字体到间距保持谐调

- 层次分明：通过颜色深浅、字号大小、留白空间建立清晰的信息层级

- 交互反馈：每个可交互元素都必须有明确的 hover、active、focus 状态反馈

- 响应式适配：设计必须在移动端、平板、桌面端上保持一致的体验

- 无障碍性：确保色彩对比度符合 WCAG 2.1 AA 标准，所有交互元素可键盘访问

应该这样做

使用复古色调 sepia, amber, brown 系列
背景添加纸张纹理或做旧效果
使用 serif 字体或复古无衬线字体
边框使用 border-2 或 border-4 的粗边框
添加装饰性边框元素（角花、分隔线）
使用老式排版风格（大写标题、字间距）
图片添加做旧滤镜 sepia brightness-90
Antique Stillness: zero `scale` or `translate-y` — old paper lies flat, it does not float or bounce
Ink & Oxidation: hover slightly darkens background (`hover:bg-[#eedbc2]`) and deepens text (`group-hover:text-[#5c2e0a]`) — simulating paper yellowing and ink settling over decades
Slow Passage of Time: all transitions use `duration-700 ease-in-out` — historical materials change slowly, never use `duration-150` or faster
Corner Reveal: decorative corner ornaments use `opacity-30 group-hover:opacity-100 transition-opacity duration-700` — historical details emerge slowly as readers lean in

避免这样做

禁止使用现代渐变效果
禁止使用霓虹/高饱和度颜色
禁止使用极简/扁平的现代设计语言
禁止使用过于圆润的圆角
禁止使用玻璃态效果
禁止使用动效过多的交互
禁止使用任何 `scale` 或 `translate-y` 动画（Antique Stillness — 旧纸张不会浮起或弹跳）
禁止使用 `duration-150` 或更快的过渡（Slow Passage — 氧化是地质过程，不是点击事件）
禁止 hover 时引入新的饱和颜色（只能加深现有的复古色调，不能替换为现代色）

全局 CSS

/* Retro Vintage Global Styles */
@layer base {
  body {
    @apply bg-[#f5e6d3] text-[#8b4513] antialiased;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
  }

  h1, h2, h3, h4 {
    @apply font-serif;
  }
}

/* Decorative divider */
.retro-divider {
  @apply flex items-center gap-4;
}
.retro-divider::before,
.retro-divider::after {
  content: '';
  @apply flex-1 h-px bg-[#8b4513]/30;
}
/* Retro Vintage Design Tokens */
:root {
  --retro-vintage-primary: #8b4513;
  --retro-vintage-secondary: #f5e6d3;
  --retro-vintage-accent: #c94c4c;
  --retro-vintage-glow: rgba(139, 69, 19, 0.3);
}

@keyframes retro-vintage-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes retro-vintage-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.retro-vintage-gradient {
  background: linear-gradient(135deg, #8b4513, #c94c4c);
}

.retro-vintage-gradient-text {
  background: linear-gradient(135deg, #8b4513, #c94c4c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.retro-vintage-frosted {
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  background: rgba(139, 69, 19, 0.08);
}

.retro-vintage-accent-corner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}

.retro-vintage-animate-in {
  animation: retro-vintage-fade-in 0.5s ease-out both;
}

.retro-vintage-focus { outline: 2px solid var(--retro-vintage-primary, currentColor); outline-offset: 2px; }

/* Responsive utilities */
@media (prefers-reduced-motion: reduce) {
  .retro-vintage-animate-in {
    animation: none;
  }
}

@media (min-width: 768px) {
  .retro-vintage-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
}

/* Print styles */
@media print {
  .retro-vintage-gradient,
  .retro-vintage-frosted {
    background: none;
    backdrop-filter: none;
  }
}

布局、色板与 Tokens

主色#8b4513

次色#f5e6d3

强调色 1#c94c4c

强调色 2#2e4a3f

强调色 3#d4a373

强调色 4#816904

{
  "border": {
    "width": "border-2",
    "color": "border-[#8b4513]",
    "radius": "rounded-none",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_2px_4px_rgba(139,69,19,0.1)]",
    "md": "shadow-[0_4px_8px_rgba(139,69,19,0.15)]",
    "lg": "shadow-[0_8px_16px_rgba(139,69,19,0.2)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_4px_12px_rgba(139,69,19,0.2)]",
    "focus": "focus:shadow-[0_2px_8px_rgba(139,69,19,0.15)]",
    "colored": {
      "brown": "shadow-[0_4px_12px_rgba(139,69,19,0.2)]",
      "rust": "shadow-[0_4px_12px_rgba(201,76,76,0.2)]"
    }
  },
  "interaction": {
    "transition": "transition-colors duration-200",
    "active": "active:opacity-75",
    "hoverOpacity": "hover:opacity-85"
  },
  "typography": {
    "heading": "font-serif uppercase tracking-widest",
    "body": "font-serif",
    "mono": "font-mono",
    "sizes": {
      "hero": "text-4xl md:text-6xl lg:text-7xl",
      "h1": "text-3xl md:text-5xl",
      "h2": "text-2xl md:text-3xl",
      "h3": "text-lg md:text-xl",
      "body": "text-sm md:text-base",
      "small": "text-xs md:text-sm"
    }
  },
  "spacing": {
    "section": "py-14 md:py-24 lg:py-32",
    "container": "px-6 md:px-10 lg:px-16",
    "card": "p-6 md:p-8",
    "gap": {
      "sm": "gap-3 md:gap-5",
      "md": "gap-5 md:gap-8",
      "lg": "gap-8 md:gap-12"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#f5e6d3]",
      "secondary": "bg-[#e8d5c0]",
      "accent": [
        "bg-[#c94c4c]",
        "bg-[#2e4a3f]",
        "bg-[#d4a373]"
      ]
    },
    "text": {
      "primary": "text-[#8b4513]",
      "secondary": "text-[#f5e6d3]",
      "muted": "text-[#8b4513]/60"
    },
    "button": {
      "primary": "bg-[#8b4513] text-[#f5e6d3]",
      "secondary": "bg-transparent text-[#8b4513] border-2 border-[#8b4513]",
      "danger": "bg-[#c94c4c] text-[#f5e6d3]"
    }
  },
  "forbidden": {
    "classes": [
      "bg-gradient-to-r",
      "bg-gradient-to-b",
      "bg-gradient-to-l",
      "rounded-xl",
      "rounded-2xl",
      "rounded-full",
      "bg-[#ff00ff]",
      "bg-[#00ffff]",
      "bg-[#ff71ce]",
      "text-[#ff00ff]",
      "text-[#00ffff]",
      "shadow-[0_0_",
      "backdrop-blur",
      "font-sans",
      "bg-white"
    ],
    "patterns": [
      "^bg-gradient-",
      "^rounded-(?:xl|2xl|3xl|full)$",
      "^bg-(?:pink|cyan|violet|fuchsia)-",
      "^text-(?:pink|cyan|violet|fuchsia)-",
      "^shadow-\\[0_0_",
      "^backdrop-blur"
    ],
    "reasons": {
      "bg-gradient-to-r": "Retro Vintage uses solid vintage tones, not modern gradients",
      "rounded-xl": "Retro Vintage uses minimal rounding to maintain classic feel",
      "bg-[#ff00ff]": "Retro Vintage uses warm brown/cream palette, not neon colors",
      "shadow-[0_0_": "Retro Vintage avoids neon glow shadows",
      "font-sans": "Retro Vintage uses serif typography (font-serif)",
      "bg-white": "Retro Vintage uses cream/parchment (#f5e6d3), not pure white"
    }
  },
  "required": {
    "button": [
      "font-serif uppercase tracking-widest",
      "transition-colors duration-200"
    ],
    "card": [
      "border-2 border-[#8b4513]",
      "bg-[#f5e6d3]",
      "font-serif"
    ],
    "input": [
      "border-2 border-[#8b4513]",
      "bg-transparent",
      "text-[#8b4513]",
      "font-serif",
      "focus:outline-none",
      "focus:bg-[#8b4513]/5",
      "transition-colors duration-200"
    ]
  }
}

示例提示词

咖啡馆网站

生成复古咖啡馆网站

Create a coffee shop website using Retro Vintage style:
- Hero with sepia-toned coffee imagery
- Menu section with decorative borders
- About us with vintage typography
- Contact with old-style form styling
- Paper texture backgrounds
- Ornamental corner decorations
- Serif fonts throughout

SaaS 着陆页

生成复古怀旧风风格的 SaaS 产品着陆页

Create a SaaS landing page using Retro Vintage style with hero section, feature grid, testimonials, pricing table, and footer.

作品集展示

生成复古怀旧风风格的作品集页面

Create a portfolio showcase page using Retro Vintage style with project grid, about section, contact form, and consistent visual language.