Retro1980s Aesthetic Revival

AFTERHOURS — MIAMI 1986

Retro style inspired by "AFTERHOURS — MIAMI 1986". Flexbox, Blend Modes, CSS Filters. With animations.

vaporwavesunsetretroanimatedgradientblur

Use case: Retro apps, Creative landing pages, Experimental projects

Historical Context

Contemporary style (1980s Aesthetic Revival) combining Flexbox and Blend Modes with Blur and Glow.

When to Use

Use for retro projects that need Blur and Glow effects.

Design Principles

Leverage Flexbox for layout structure
Apply Blur consistently across components
Maintain visual consistency

DESIGN.md

---
version: "alpha"
name: "AFTERHOURS — MIAMI 1986"
description: "Retro style with Flexbox and Blend Modes."
colors:
  primary: "#FF2E88"
  secondary: "#FF8A3D"
  tertiary: "#6C2BD9"
typography:
  h1:
    fontFamily: system-ui
    fontSize: 2.5rem
    fontWeight: 700
  body-md:
    fontFamily: system-ui
    fontSize: 1rem
    fontWeight: 400
rounded:
  sm: 4px
  md: 8px
  lg: 16px
spacing:
  sm: 1rem
  md: 2rem
  lg: 4rem
---

## Overview

AFTERHOURS — MIAMI 1986 - Retro style from the 1980s Aesthetic Revival era.

- Density: 5/10
- Variance: 6/10
- Motion: 8/10 — Animated

- **Style:** Retro
- **Keywords:** vaporwave, sunset
- **Era:** 1980s Aesthetic Revival
- **Light/Dark:** ✓ Light / ○ Dark

## Colors

- **#FF2E88**
- **#FF8A3D**
- **#6C2BD9**
- **#19E3D2**
- **#1A0B34**

## Typography

- **system-ui**
- **Arial Narrow**
- **Courier New**
- **inherit**

## Layout

- **Features:** Flexbox, Blend Modes, CSS Filters, Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Text Shadows, Border Radius, Aspect Ratio, CSS Masks

## Effects

- Blur
- Glow
- Gradients
- 3D/Parallax
- Hover Effects

## Use Case

Retro apps, Landing pages, Experimental projects.

Download DESIGN.md

Technical Specs

CSS

Flexbox, Blend Modes, CSS Filters, Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Text Shadows, Border Radius, Aspect Ratio, CSS Masks

Variables

--pink: #FF2E88, --tangerine: #FF8A3D, --violet: #6C2BD9, --teal: #19E3D2, --grade-a: #FF2E88

Checklist

☐ Flexbox ☐ Blend Modes ☐ CSS Filters ☐ Responsive ☐ Acessibilidade

Colors

Primary

#FF2E88

#FF8A3D

#6C2BD9

Secondary

#19E3D2

#1A0B34

#0B0618

Effects

Blur, Glow, Gradients, 3D/Parallax, Hover Effects

Light/Dark

✓ Light / ○ Dark

AI Prompt

Act as a Senior Frontend Engineer and Expert UI Designer.
Your task is to code a complete Landing Page on the first attempt.
- Landing Page Theme: <INSERT THEME>
- Sections to add: <INSERT SECTIONS>

Generate the final code immediately following these definitions:

## Style

- **Name:** AFTERHOURS — MIAMI 1986
- **Type:** Retro
- **Keywords:** vaporwave, sunset, retro, animated, gradient, blur
- **Era:** 1980s Aesthetic Revival
- **Light/Dark:** ✓ Light / ○ Dark

## Color Palette

- **Primary:** #FF2E88, #FF8A3D, #6C2BD9
- **Secondary:** #19E3D2, #1A0B34, #0B0618

## Visual Effects

Blur, Glow, Gradients, 3D/Parallax, Hover Effects

## AI Visual Direction

Design a retro landing page inspired by "AFTERHOURS — MIAMI 1986". Use: Flexbox, Blend Modes, CSS Filters, Keyframe Animations. Colors: #FF2E88, #FF8A3D, #6C2BD9. Effects: Blur, Glow, Gradients.

## CSS Technical

```css
Flexbox, Blend Modes, CSS Filters, Keyframe Animations, Transitions, Transforms, Gradients, Box Shadows, Text Shadows, Border Radius, Aspect Ratio, CSS Masks
```

## Design System Variables

```css
--pink: #FF2E88, --tangerine: #FF8A3D, --violet: #6C2BD9, --teal: #19E3D2, --grade-a: #FF2E88
```

## Implementation Checklist

- ☐ Flexbox ☐ Blend Modes ☐ CSS Filters ☐ Responsive ☐ Acessibilidade

## Execution Rules

1. Strictly follow the defined visual style.
2. Use high-quality inline SVG icons (Heroicons or Lucide style) — NEVER use emojis as icons.
3. Add `cursor-pointer` and smooth `hover` states (transition-all) on all interactive elements.
4. Required Page Structure:
   - Navbar (Logo + Links + CTA)
   - Hero Section (Impactful Headline + Subtitle + 2 buttons + 3D/Abstract visual element via CSS)
   - Features (3 cards with icons)
   - Testimonials (3 cards)
   - Pricing (3 tiers, highlight the middle one)
   - Final CTA
   - Full Footer with social links, privacy policy, terms of use, contact and SEO links.
5. All text content must be in English.
6. The visual must be CLEARLY distinct — do not create a "default Bootstrap" design. Force the use of the provided design system variables.
7. Use `<style>` tags in the head for custom classes (especially for complex backdrop-filter effects and animations) that Tailwind CDN doesn't cover.
8. Full Responsiveness: Layout must adapt perfectly to Mobile, Tablet and Desktop (vertical stack on mobile).
9. Include basic SEO, Viewport and Open Graph meta tags in `<head>`.
10. Footer must contain: Copyright 2026, Secondary navigation links and Social media icons.
11. Make the creative decisions needed to deliver the complete, functional result now.

Last synced: 8/15/2026