HTML Style Guide

Outrun

Palm-lined boulevards, chrome dashboards, and an endless sunset on the coastal highway

01

Color Palette

A spectrum ripped from a Miami sunset -- molten gold bleeds through coral and fuchsia into deep indigo night. Neon accents punctuate the darkness like roadside signs on the strip.

Sunset Horizon
Sunset Gold
#ffd319
Sunset Amber
#ff901f
Sunset Coral
#ff2a6d
Sunset Fuchsia
#d61c7c
Sunset Grape
#7b2d8e
Sunset Indigo
#1a1040
Neon Accents
Neon Cyan
#05d9e8
Neon Teal
#01c5c4
Neon Pink
#ff2a6d
Neon Violet
#c24cf6
Miami Pastels
Flamingo
#ff6b9d
Seafoam
#65dfc2
Peach
#ffb88c
02

Typography

Chrome display faces for impact. Rajdhani for mechanical headings. Exo 2 for comfortable reading at speed. Every letterform should feel like it belongs on a dashboard or a highway billboard.

Display / Orbitron 900 / Chrome
Night Drive
Neon Text / Orbitron 700 / Cyan Glow
Open Road
Neon Text / Orbitron 700 / Pink Glow
Vice City
H1 / Orbitron 900 / 3rem
Heading One
H2 / Orbitron 700 / 2.25rem
Heading Two
H3 / Rajdhani 700 / 1.75rem
Heading Three
H4 / Rajdhani 600 / 1.35rem
Heading Four
Body / Exo 2 / 1rem
The boulevard stretches south toward the water, flanked by royal palms whose fronds sway like metronomes against a sky the color of ripe mangoes. A white Testarossa glides past, its pop-up headlights catching the last rays. The radio bleeds synthesizer pads and gated snare through open windows. This is the golden hour -- when every chrome bumper becomes a mirror and every puddle on the asphalt turns to liquid fire.
Caption / Exo 2 Light Italic / 0.8rem
Ocean Drive, 1986. Photograph by unknown. Ektachrome 200, pushed one stop. The color cast is not a mistake -- it is the truth of that particular evening.
03

Spacing System

A 4px base unit scaled geometrically. Generous whitespace lets the neon breathe; tight spacing packs instrument clusters.

--space-xs
4px
--space-sm
8px
--space-md
16px
--space-lg
32px
--space-xl
64px
--space-2xl
96px
--space-3xl
128px
04

Buttons

Every button should feel like a dashboard toggle -- tactile, glowing, and satisfying to press. The sweep highlight on hover suggests forward motion.

Variants
Sizes
Disabled State
With Icons
05

Forms

Inputs styled like instrument readouts -- dark recessed fields with neon accent lines. Focus states shift from cyan to pink to indicate active engagement.

Encrypted channel. Max 500 characters. Signal strength: strong.

06

Cards & Panels

Content containers that float above the grid like billboards on the highway. Each variant serves a different atmospheric purpose.

Standard Cards
🌅
Sunset Strip

The sky is a bruise of orange and violet. Neon signs flicker to life along the boulevard as the last daylight drains behind the palms. This is the hour between worlds.

🏎
Night Cruiser

Low-slung and razor-edged, the machine idles at the light. Twin exhausts hum a baritone lullaby. The signal turns green and the city becomes a streak of neon in the mirrors.

🎶
FM Dial

Synthesizer arpeggios cascade through the cabin. The bass drum kicks on the downbeat like a heartbeat amplified. Every station is a memory from a decade that lives forever.

Sunset Variant
🌞
Golden Hour

For fifteen minutes, everything turns to gold. The ocean, the road, the faces of strangers. It is the most democratic light -- it flatters everything it touches equally.

🌴
Palm Boulevard

Washingtonia palms line the median like sentinels. Their silhouettes against the coral sky form a pattern that has become the universal symbol of paradise.

Neon Variant
Grid Runner

The perspective grid stretches to infinity beneath your wheels. Cyan lines pulse in rhythm with the engine, mapping the geometry of pure velocity. The horizon never arrives.

Chrome Variant
Mirror Finish

Every surface reflects the spectacle. Chrome is the aspirational material -- cold, brilliant, distorting the world into a funhouse of light. It promises a future that is always arriving.

07

Alerts & Notifications

Dashboard warnings for the digital cockpit. Each severity level maps to a distinct color in the sunset-to-neon spectrum.

Systems Online

All navigation and telemetry systems are operational. Autopilot engaged on the coastal highway. ETA to destination: sunset.

Checkpoint Cleared

Night run sector 7 completed. New personal best recorded at 3:42.08. Replay saved to onboard memory bank.

Caution

Approaching restricted zone. Reduce speed and disable turbo boost. Police radar activity detected in the southbound lanes.

Critical Warning

Engine temperature exceeding safe parameters. Immediate cooldown cycle required. Pull over at the next neon station and kill the ignition.

08

Badges & Tags

Outlined
Turbo V12 Nitro Overdrive
Filled
New Featured 1986
09

Data Table

Leaderboard telemetry for the midnight run circuit.

Pos Driver Vehicle Best Lap Status
01 Nighthawk Testarossa 512 TR 1:42.31 Racing
02 Chrome Viper Countach LP500 S 1:43.07 Racing
03 Solar Flare DeLorean DMC-12 1:44.89 Pit Stop
04 Phantom Diablo VT 1:45.12 Racing
05 Voltage Corvette C4 ZR-1 1:46.55 Retired
06 Dusk Runner Supra MK III 1:47.02 Racing
10

Design Principles

01
Sunset First

Every composition should feel backlit by a horizon on fire. Warm oranges and corals transition to cool violets and deep navy. The warmth is always earnest, never ironic.

02
Chrome Surfaces

Metallic gradients convey the polished, high-performance nature of the aesthetic. Chrome catches light the way a sports car catches the eye -- it demands attention without asking for it.

03
Vanishing Point

Perspective and depth are non-negotiable. The grid road, the converging palm rows, the sense of infinite distance. Every layout pulls the eye toward a focal point on the horizon.

04
Restrained Glow

Neon effects are supporting actors, not the lead. Use glow to accent interactive elements and key focal points. Overuse turns drama into noise. Less neon, more impact.

05
Forward Motion

The Outrun aesthetic is fundamentally about movement -- driving, accelerating, chasing the horizon. Animations should be smooth and directional. Even static compositions imply velocity.

06
VHS Warmth

Embrace analog imperfection. Scanlines, slight color bleed, warm noise. The aesthetic is nostalgic for a future that existed only on magnetic tape and in the amber glow of CRT screens.