Retro

Difficulty:
Visual Style
Retro Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryCurated

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralCurated

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Derived
sm · 4px
md · 8px
lg · 12px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Derived
  • Ag

    Headings 32px · bold

    Inter

  • Ag

    Body 16px · regular

    Inter

  • Ag

    Labels 13px · medium

    Inter

Retro is nostalgic design: vintage logotypes and rounded old-school type, weathered textures, and a high-contrast retro palette (violet #8B5CF6 accent) — the interface reinterprets 1970s posters and old advertising. Grain and color shift are deliberate warmth, and mood comes before efficiency. Made for music festivals, labels, and vintage lifestyle brands.

CreativeRetro

Prompt Template

Base Template
Design a Retro-inspired interface.  Colors: #8B5CF6, #16A34A, #D97706, #DC2626 with #8B5CF6 accent. Typography: #3B82F6.

Variant Prompts

📱 Mobile
Design a mobile app with Retro aesthetics. Use Retro color identity with #8B5CF6 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Retro style. Use Retro color identity with #8B5CF6 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Retro design language. Use Retro color identity with #8B5CF6 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Retro visual identity. Use Retro color identity with #8B5CF6 accents. Compelling, conversion-focused.

Usage Examples

Retro App

Web
Build a web app with Retro design language and #8B5CF6 color system.

Retro Dashboard

Dashboard
Create a dashboard using Retro style with data visualization and #3B82F6 typography.

✅ Best For

  • Retro
  • Nostalgia-themed pages
  • Vintage brand campaigns

❌ Avoid For

  • Frontier tech products
  • Modern enterprise applications

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download