Retro Vintage

STYLEKIT_STYLE_REFERENCE
style_name: Retro Vintage
style_slug: retro-vintage
style_source: /styles/retro-vintage

# Hard Prompt

## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.

## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.

Strictly follow the style rules below and maintain consistency. No style drift allowed.

## Requirements

- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.

## Style Rules

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.

---

# Retro Vintage Design System

> Nostalgic retro design style with vintage typography, retro color tones, and handcrafted texture elements. Ideal for cafes, vintage brands, indie magazines, and music labels.

## Design Philosophy

Retro Vintage style draws inspiration from mid-20th century design aesthetics, creating a warm sense of time through vintage typography, aged textures, and nostalgic color tones.

Core principles:
- Time-worn patina: Design carries the warmth and stories of passing years
- Handcrafted warmth: Avoid overly digital coldness
- Timeless classics: Use design elements proven by time
- Cultural depth: Convey a sense of history and cultural identity

---

## Token Dictionary (exact class mapping)

### Border
```
Width: border-2
Color: border-[#8b4513]
Radius: rounded-none
```

### 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)]
hover: hover:shadow-[0_4px_12px_rgba(139,69,19,0.2)]
focus: focus:shadow-[0_2px_8px_rgba(139,69,19,0.15)]
```

### Interaction
```
Hover translate: (none)
Hover scale: (none)
Hover opacity: hover:opacity-85
Transition: transition-colors duration-200
Active: active:opacity-75
```

### Typefaces
```
Heading: font-serif uppercase tracking-widest
Body: font-serif
Mono: font-mono
```

### Type scale
```
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
Gap md: gap-5 md:gap-8
Gap lg: gap-8 md:gap-12
```

### Color roles
```
Background primary: bg-[#f5e6d3]
Background secondary: bg-[#e8d5c0]
Background accent: bg-[#c94c4c], bg-[#2e4a3f], bg-[#d4a373]
Text primary: text-[#8b4513]
Text secondary: text-[#f5e6d3]
Text muted: text-[#8b4513]/60
Button primary: bg-[#8b4513] text-[#f5e6d3]
Button secondary: bg-transparent text-[#8b4513] border-2 border-[#8b4513]
```

---

## [FORBIDDEN]

These classes are banned in this style. Check for them before returning code:

### Banned 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`

### Banned patterns
- matches `^bg-gradient-`
- matches `^rounded-(?:xl|2xl|3xl|full)$`
- matches `^bg-(?:pink|cyan|violet|fuchsia)-`
- matches `^text-(?:pink|cyan|violet|fuchsia)-`
- matches `^shadow-\[0_0_`
- matches `^backdrop-blur`

### Why they are banned
- `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

> WARNING: if your code contains any of the above, replace it before shipping.

---

## [REQUIRED]

### Every button must include
```
font-serif uppercase tracking-widest
transition-colors duration-200
```

### Every card must include
```
border-2 border-[#8b4513]
bg-[#f5e6d3]
font-serif
```

### Every input must include
```
border-2 border-[#8b4513]
bg-transparent
text-[#8b4513]
font-serif
focus:outline-none
focus:bg-[#8b4513]/5
transition-colors duration-200
```

---

## [COMPARE] Retro Vintage wrong vs right

The wrong examples below stand for generic library defaults that were never adapted to this style. Do not read them as visual suggestions.

### Button

[WRONG] **Wrong** (generic component library default, do not copy):
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
 Click me
</button>
```

[CORRECT] **Right** (uses this style's tokens):
```html
<button class="font-serif uppercase tracking-widest transition-colors duration-200 bg-[#8b4513] text-[#f5e6d3]">
 Click me
</button>
```

### Card

[WRONG] **Wrong** (generic card, not adapted to this style):
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
 <h3>{TITLE}</h3>
</div>
```

[CORRECT] **Right** (uses this style's card tokens):
```html
<div class="border-2 border-[#8b4513] bg-[#f5e6d3] font-serif p-6 md:p-8">
 <h3 class="font-serif uppercase tracking-widest text-lg md:text-xl">{TITLE}</h3>
</div>
```

### Input

[WRONG] **Wrong** (generic input, not adapted to this style):
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **Right** (uses this style's input tokens):
```html
<input class="border-2 border-[#8b4513] bg-transparent text-[#8b4513] font-serif focus:outline-none focus:bg-[#8b4513]/5 transition-colors duration-200" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Retro Vintage page skeletons

These skeletons use this style's tokens only. Replace `{PLACEHOLDER}` values, but keep every token in place:

### Navigation
```html
<nav class="bg-[#f5e6d3] text-[#8b4513] border-2 border-[#8b4513] px-6 md:px-10 lg:px-16">
 <div class="flex items-center justify-between max-w-6xl mx-auto gap-5 md:gap-8">
 <a href="/" class="font-serif uppercase tracking-widest text-lg md:text-xl">
 {LOGO_TEXT}
 </a>
 <div class="flex gap-5 md:gap-8 font-serif text-xs md:text-sm">
 {NAV_LINKS}
 </div>
 </div>
</nav>
```

### Hero section
```html
<section class="bg-[#c94c4c] text-[#8b4513] py-14 md:py-24 lg:py-32 px-6 md:px-10 lg:px-16">
 <div class="max-w-4xl mx-auto">
 <h1 class="font-serif uppercase tracking-widest text-4xl md:text-6xl lg:text-7xl">
 {HEADLINE}
 </h1>
 <p class="font-serif text-sm md:text-base max-w-xl">
 {SUBHEADLINE}
 </p>
 <button class="font-serif uppercase tracking-widest transition-colors duration-200 bg-[#8b4513] text-[#f5e6d3]">
 {CTA_TEXT}
 </button>
 </div>
</section>
```

### Card grid
```html
<section class="bg-[#f5e6d3] text-[#8b4513] py-14 md:py-24 lg:py-32 px-6 md:px-10 lg:px-16">
 <div class="max-w-6xl mx-auto">
 <h2 class="font-serif uppercase tracking-widest text-2xl md:text-3xl">{SECTION_TITLE}</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-8">
 <!-- Card template - repeat for each card -->
 <div class="border-2 border-[#8b4513] bg-[#f5e6d3] font-serif p-6 md:p-8">
 <h3 class="font-serif uppercase tracking-widest text-lg md:text-xl">{CARD_TITLE}</h3>
 <p class="font-serif text-sm md:text-base text-[#8b4513]/60">{CARD_DESCRIPTION}</p>
 </div>
 </div>
 </div>
</section>
```

### Form input
```html
<input class="border-2 border-[#8b4513] bg-transparent text-[#8b4513] font-serif focus:outline-none focus:bg-[#8b4513]/5 transition-colors duration-200" placeholder="{PLACEHOLDER}" />
```

### Footer
```html
<footer class="bg-[#e8d5c0] text-[#f5e6d3] py-14 md:py-24 lg:py-32 px-6 md:px-10 lg:px-16">
 <div class="max-w-6xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
 <div>
 <span class="font-serif uppercase tracking-widest text-lg md:text-xl">{LOGO_TEXT}</span>
 <p class="font-serif text-xs md:text-sm">{TAGLINE}</p>
 </div>
 <div>
 <h4 class="font-serif uppercase tracking-widest text-lg md:text-xl">{COLUMN_TITLE}</h4>
 <ul class="font-serif text-xs md:text-sm">
 {FOOTER_LINKS}
 </ul>
 </div>
 </div>
 </div>
</footer>
```

---

## [CHECKLIST] Retro Vintage post-generation self check

**Before returning code, verify every token and rule below. Fix any violation before delivering:**

### Token check
- [ ] Button includes: `font-serif uppercase tracking-widest transition-colors duration-200`
- [ ] Card includes: `border-2 border-[#8b4513] bg-[#f5e6d3] font-serif`
- [ ] Input includes: `border-2 border-[#8b4513] bg-transparent text-[#8b4513] font-serif focus:outline-none focus:bg-[#8b4513]/5 transition-colors duration-200`

### Forbidden check
- [ ] Not using `bg-gradient-to-r`
- [ ] Not using `bg-gradient-to-b`
- [ ] Not using `bg-gradient-to-l`
- [ ] Not using `rounded-xl`
- [ ] Not using `rounded-2xl`
- [ ] Not using `rounded-full`
- [ ] Not using `bg-[#ff00ff]`
- [ ] Not using `bg-[#00ffff]`

### Style rule check
- [ ] Use vintage color tones sepia, amber, brown series
- [ ] Add paper texture or aged effects to backgrounds
- [ ] Use serif fonts or vintage sans-serif fonts
- [ ] Borders use border-2 or border-4 thick borders
- [ ] Add decorative border elements (corner ornaments, dividers)

### Style drift check
- [ ] Does not violate: Do not use modern gradient effects
- [ ] Does not violate: Do not use neon/high-saturation colors
- [ ] Does not violate: Do not use minimalist/flat modern design language
- [ ] Does not violate: Do not use overly rounded corners
- [ ] Does not violate: Do not use glassmorphism effects

### Delivery check
- [ ] Responsive layout holds on phone, tablet and desktop with no horizontal overflow
- [ ] Every interactive element has a visible focus state, an accessible name and a reduced-motion path
- [ ] Text contrast meets WCAG AA and colour alone never carries state
- [ ] The result is still recognizable at a glance as Retro Vintage

---

## [EXAMPLES] Example prompts

### 1. 

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

## Absolute Bans (Match and Refuse)

If any of the following patterns appear, it is a style violation — rewrite without exception.

- use modern gradient effects
- use neon/high-saturation colors
- use minimalist/flat modern design language
- use overly rounded corners
- use glassmorphism effects
- use excessive animation interactions
- use any scale or translate-y animations (Antique Stillness -- old paper does not float or bounce)
- use duration-150 or faster transitions (Slow Passage -- oxidation is a geological process, not a click event)

## Self-Check (Verify Before Shipping)

If any item fails, the style has drifted — fix before shipping.

- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] do not use modern gradient effects
- [ ] do not use neon/high-saturation colors
- [ ] do not use minimalist/flat modern design language
- [ ] do not use overly rounded corners
- [ ] do not use glassmorphism effects