VibeUI
ExploreStyle PacksFavorites
Get Started
VibeUI

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

Color PaletteTypographyShadowBorder RadiusGradientSpacingNavbarButtonCardHero SectionEasing CurveMicro InteractionBackgroundStyle Pack
Visual FoundationColor PaletteTypographyShadowBorder RadiusGradient
LayoutSpacing
ComponentsNavbarButtonCardHero Section
MotionEasing CurveMicro Interaction
DecorationBackground
PackagesStyle Pack

Hero Section

6 of 6 materials

Built for what’s next.

Beautifully simple tools that let you focus on what matters.

Get StartedLearn more ›

Apple Minimal

Whitespace is not empty — it's a statement of confidence. A single oversized headline, a one-line subtitle, and a solitary call-to-action floating in a sea of white. Eighty percent of the screen says nothing, and that silence is the loudest thing on the page.

View Source
Build software that
feels inevitable.

Streamline issues, projects, and roadmaps with purpose-built tools.

Start BuildingExplore

Linear Dark Narrative

Text emerges from the void like a signal from deep space. The headline fades from dim to bright across its lines, a radial glow pulses beneath the content, and the dark background says: the problems we solve are serious, and so are we. This isn't a hero section — it's an entrance.

View Source
Introducing Payments v4 →

Financial infrastructure for the internet

Build, scale, and manage your revenue with tools designed for growth.

Start nowContact sales

Stripe Warm Gradient

Authority doesn't require austerity. A gentle top-to-bottom gradient wash from white to pale lavender, navy headlines that command without shouting, blue-gray body text that reads like a conversation, and a CTA button with a signature violet glow. This hero says: we handle serious things, but we're not going to make it feel serious.

View Source
Vercel Split GridInfrastructure demands symmetry.
Preview

Vercel Split Grid

Infrastructure demands symmetry. A hard vertical split — code on the left, deploy preview on the right — with a headline that reads like a terminal command. The dark background and dot-grid pattern whisper 'developer tool' before a single word is read. What makes this hero section work isn't what it shows, but what it omits: no gradients, no illustrations, no marketing theatre. The empty right panel IS the product demo.

View Source
Notion PlayfulProductivity tools should feel human, not corporate.
Preview

Notion Playful

Productivity tools should feel human, not corporate. An oversized sans-serif headline with a hand-drawn wavy underline beneath the key word, warm near-black text (#37352f) that's softer than true black, and a conversational subtitle that reads like a friend explaining their favorite tool. The approachability is strategic — lowering emotional resistance is the fastest path to a sign-up. Every pixel of warmth in the design is one fewer objection in the user's mind.

View Source
Spotify VibrantColor should hit you before words do.
Preview

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.

View Source