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.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Spotify-style vibrant hero section.
Design philosophy — culture over convention:
1. Background: Full-bleed gradient from #059669 (Spotify green) to #0A1A1A (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, #FFFFFFB3, line-height 1.6, max-width 480px.
4. CTA: Pill-shaped (rounded-full), bg #059669, 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.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.