Style Library

Outrun

Styleretro

80s sunsets, palm tree silhouettes, sports cars, grid horizons, and retro wave aesthetics. Magenta and purple neon with cyan skies -- brimming with speed and nostalgic futurism.

#ff006e
#a020f0
#00d4ff
#0a0a0a
#ff6b35
#9f9aff

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs
Tasks done1,284+12% this week
Sign in
Emailyou@example.com
Remember meContinue
Today
Review roadmapDone
Ship onboardingIn progress
Team sync3 pm
Prompt
Paste into any AI assistant before describing what to build — or attach it to a project below.
# Visual style: Outrun

80s sunsets, palm tree silhouettes, sports cars, grid horizons, and retro wave aesthetics. Magenta and purple neon with cyan skies -- brimming with speed and nostalgic futurism.

## Philosophy
Outrun is a visual aesthetic rooted in 80s pop culture, named after the eponymous video game. It fuses sunsets, sports cars, palm trees, and neon lights into an eternal retro-futuristic visual language.

Core principles:
- Sunset drive: An eternal road trip under the orange-pink-purple sunset sky
- Neon speed: Magenta and purple neon lights expressing speed and passion
- Grid horizon: Perspective grid floor extending toward an infinite horizon
- Palm silhouettes: Black palm trees set against gradient skies

## Do
- Use magenta, purple, and cyan neon palette
- Add sunset gradient sky background
- Use perspective grid floor effect
- Add neon glow effects
- Use bold sans-serif fonts
- Add palm tree or sports car silhouette elements
- Interactions layer dual neon glow: hover:shadow-[0_0_20px_#ff006e,0_0_40px_#00d4ff] (Dual Neon Glow)
- Grid or scanlines use bg-position shift on hover to create a rushing-toward-horizon feel (Perspective Drive)
- Active state includes slight screen flash (active:bg-[#ff006e]/20) with short press feedback

## Don't
- Do not use bright white backgrounds
- Do not use modern minimalist style
- Do not omit neon glow effects
- Do not use soft low-saturation palette
- Do not use single-color glow only (Outrun must have magenta+cyan chromatic dispersion layers)
- Do not use completely static grid backgrounds (lacking speed illusion loses the style's core)

## Rules for the AI
You are an Outrun retro-futuristic design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Bright white backgrounds
- Modern minimalist design
- Omitting neon glow effects
- Formal fonts

## Must Follow

- Magenta-purple-cyan palette from-[#ff006e], from-[#a020f0], text-[#00d4ff]
- Dark backgrounds bg-[#0a0a0a]
- Neon glow shadow-[0_0_20px_rgba(255,0,110,0.5)]
- Grid background decorations
- Sunset gradient from-[#ff6b35] via-[#ff006e] to-[#a020f0]

## Color Palette

Primary:
- Magenta: #ff006e
- Purple: #a020f0
- Cyan: #00d4ff
- Black: #0a0a0a
- Orange: #ff6b35

## Special Elements

- Perspective grid floor
- Sunset sun
- Palm tree silhouettes
- Scanline effects

## Animation & Interaction Rules

- Perspective Drive: Grid or scanlines create a high-speed forward-rush illusion through bg-position shift on hover.
- Dual Neon Glow: Hover glow layers at least magenta and cyan dual shadows for retro neon chromatic dispersion.
- CRT Jitter: Active state allows brief flashing and slight press-down, simulating vintage screen feedback.
- Horizon Tilt: Card interactions can pair with very slight lift and bottom light band enhancement for horizon momentum.
Example prompts
Ready-made page requests in this style.
Retro Racing Interface
用 Outrun 风格创建一个复古赛车界面,要求:
1. 背景:日落渐变 + 网格地板
2. 标题:霓虹发光效果
3. 按钮:洋红霓虹边框
4. 添加太阳和棕榈树剪影
5. 整体复古未来速度感
SaaS Landing Page
Create a SaaS landing page using Outrun style with hero section, feature grid, testimonials, pricing table, and footer.
Portfolio Showcase
Create a portfolio showcase page using Outrun style with project grid, about section, contact form, and consistent visual language.
Use it in an app
Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

From StyleKit (MIT, commit 0156849).View source