Neon Noir Urban Industrial E-Commerce Experience

Client: Neon Noir (Concept Project) Type: Brand Landing Page Design & Development Platform: Framer Role: Design & Development

Design and develop a landing page for a streetwear brand rooted in urban nightlife culture. The goal: a digital presence that feels raw, rebellious, and unapologetically bold—mirroring the grit and energy of city streets.

Streetwear websites often fall into two traps:

Over-designed chaos: Too many effects, losing authenticity.

Sterile minimalism: Too clean, lacking energy.

Neon Noir needed to strike a balance—dangerous yet premium, like a late-night city walk.

Capture urban nightlife energy without clichés.

Feel premium despite a raw aesthetic.

Showcase product photography as the hero.

Balance lookbook browsing with conversion-focused design.

The design is anchored in three material concepts that embody the brand’s urban identity:

Concrete — Durability. Built to withstand the city’s abrasiveness.

Asphalt — Street-level. Aesthetics grounded in the urban environment.

Signal — High visibility. Cutting through the noise.

These concepts drive every design decision, from color to typography.

ElementApproachBackgroundPure black (#000000) — uncompromising darkness.AccentSignal red (#FF3B30) — bold, dangerous, visible.TypographyCondensed industrial display + monospace body.ImagesHigh-contrast portraits with colored lighting gels.LayoutSharp edges, brutalist influence — no softness.

Hero — "Street Level Rebel" headline with bold typography, single hero image, and dual CTAs.

Brand Pillars — A three-column manifesto highlighting Concrete, Asphalt, and Signal.

Archive — Editorial photo grid with dramatic portraits.

Footer — Minimal, functional, and branded.

Typography The stacked, condensed headline creates vertical impact.

Color Restraint Limited to black and orange, the palette forces the photography to take centre stage, keeping the design focused and bold.

Photography Grid The archive grid uses varying image heights to create rhythm without chaos.

Sharp Edges Every element features sharp edges—rounded corners feel too friendly for Neon Noir’s rebellious identity.

Built in Framer with:

Scroll-triggered fade animations.

Hover states with subtle scale and overlay effects.

Fully responsive across all breakpoints.

Dark theme throughout (no light mode).

A landing page that:

Instantly establishes brand identity.

Feels both premium and underground.

Showcases photography without competing with it.

Delivers visual impact across desktop, tablet, and mobile.

Brand landing page design

Framer development

Dark theme UI design

Editorial grid layouts

Responsive implementation

Tools: Framer, Figma Typography: Industrial condensed display + monospace