VibeUI Logo
VibeUI
ExploreStyle PacksFavorites
Get Started
VibeUI

Design ingredients for AI coding. Built for Cursor, Windsurf, and beyond.

Back to Explore

Spotify Vibrant

Color should hit you before words do. A full-bleed gradient that bleeds from green into black like stage lighting fading to darkness, an enormous extra-bold headline set in 0.95 line-height so the lines almost collide, and a left-aligned layout that leaves 60% of the screen as breathing room. The asymmetry is intentional — culture doesn't center itself, it occupies space unapologetically.

energeticboldmediacreativeecommerce

Interactive Preview

Spotify VibrantColor should hit you before words do.
Preview
Build a Spotify-style vibrant hero section.

Design philosophy — culture over convention:
1. Background: Full-bleed gradient from #1db954 (Spotify green) to #191414 (near-black), 135deg angle. The gradient should feel immersive, wrapping the user in color.
2. Headline: 64-96px (clamp(4rem, 7vw, 6rem)), font-weight 900 (extra bold), tracking -0.02em, pure white. Line-height 0.95 — the lines should almost touch. Use text-transform: uppercase on the first line for typographic contrast.
3. Subtitle: 18px, font-weight 400, rgba(255,255,255,0.7), line-height 1.6, max-width 480px.
4. CTA: Pill-shaped (rounded-full), bg #1db954, black text, px-8 py-4, text-base, font-weight 700. On hover: scale(1.05) and brightness(1.1). The button should feel like it's asking to be pressed.
5. Layout: Left-aligned content on desktop. The text block sits at 40% width, leaving 60% as negative space that lets the gradient breathe.
6. Animation: Headline slides up from 40px with opacity fade, staggered by line (150ms delay). CTA bounces in with a spring curve after content settles.

The hero should make you want to turn up the volume.