Prompt & style library

An animated gradient background which transitions between colors for text.

Magic UI

Visually highlights selected items by sliding a background into view when hovered over or clicked. This smooth transition helps users focus on the active item, making it ideal for interactive lists, menus, or navigation…

Motion-Primitives

A premium SaaS aesthetic built on a real-time WebGL fragment-shader mesh gradient. A slowly breathing iridescent field flows across a near-black canvas while frosted-glass panels float above it, paired with a clean mode…

StyleKit

Vibrant modern gradient style with colorful gradient backgrounds, glass-textured cards, and dynamic lighting effects. Ideal for startups, digital products, and event pages.

StyleKit

Vivid gradient cards on dark backgrounds with thick colored borders and neon glow effects. Ideal for tech products, SaaS landing pages, and youth-oriented brands.

StyleKit

A animated background grid pattern made with SVGs, fully customizable using Tailwind CSS.

Magic UI

A design style inspired by watercolor painting, featuring soft color gradients, blurred edge effects, paper texture backgrounds, and flowing color diffusion, conveying artistry and poetry.

StyleKit

An animated beam of light which travels along a path. Useful for showcasing the "integration" features of a website.

Magic UI

Animated Circular Progress Bar is a component that displays a circular gauge with a percentage value.

Magic UI

A card with a time warping background effect.

Magic UI

A list that animates each item in sequence with a delay. Used to showcase notifications or events on your landing page.

Magic UI

A light glare effect which pans across text making it appear as if it is shimmering.

Magic UI

A beautiful neon card effect

Magic UI

Motion-Primitives

Easily animate numbers.

Motion-Primitives

A refined and professional fintech style featuring Stripe purple as the primary color, complemented by gradient grid backgrounds, elegant card shadows, and smooth animations, ideal for payment products and developer too…

StyleKit

80s-90s retro-futuristic aesthetics with pink-purple gradients, neon colors, and glitch art effects. Includes Vaporwave, Synthwave, and Cyberpunk variants.

StyleKit

A futuristic cyberpunk style with neon glow effects, dark backgrounds, and high-tech UI elements. Ideal for games, tech products, and creative studios.

StyleKit

Glass-textured aesthetics from the Windows Vista/7 era, blending sky-blue gradients, translucent frosted glass panels, and natural elements for a fresh, airy digital-nature feel.

StyleKit

A hero section layout with fullscreen images or video backgrounds that captures attention through stunning visuals, ideal for brand showcases, product launches, and event promotions.

StyleKit

Rainbow spectrum iridescent gradient aesthetics simulating holographic prismatic refraction and dynamic light effects for an otherworldly iridescent experience.

StyleKit

An immersive layout creating depth parallax effects through fixed backgrounds and scrolling content, with each full-screen section having its own background layer. Ideal for brand stories, product showcases, and immersi…

StyleKit

A floating particle network on deep dark tech backgrounds, using connection lines, pulses, and trails to create a sense of data flow. Ideal for tech companies, data visualization, and creative portfolios.

StyleKit

80s retro-futuristic music aesthetic with neon pink-purple palette, grid horizon, sunset gradients, and vintage tech feel -- brimming with nostalgic visions of the future.

StyleKit

Early-2000s futuristic aesthetic with metallic textures, transparent plastics, bubble elements, silver and rainbow gradients, brimming with optimistic visions of the digital age.

StyleKit

Frosted glass, transparent, blurred background, layered, vibrant background, light source, depth, multi-layer. Best for Modern SaaS, financial dashboards, high-end corporate, lifestyle apps, modal overlays, navigation.

UI/UX Pro Max

Vibrant gradients, smooth blend, Northern Lights effect, mesh gradient, luminous, atmospheric, abstract. Best for Modern SaaS, creative agencies, branding, music platforms, lifestyle, premium products, hero sections.

UI/UX Pro Max

Realistic, texture, depth, 3D appearance, real-world metaphors, shadows, gradients, tactile, detailed, material. Best for Legacy apps, gaming, immersive storytelling, premium products, luxury, realistic simulations, edu…

UI/UX Pro Max

Bold borders, black outlines, primary colors, thick shadows, no gradients, flat colors, 45° shadows, playful, Gen Z. Best for Gen Z brands, startups, creative agencies, Figma-style apps, Notion-style interfaces, tech bl…

UI/UX Pro Max

Motion text, animated type, moving letters, dynamic, typing effect, morphing, scroll-triggered text. Best for Hero sections, marketing sites, video platforms, storytelling, creative portfolios, landing pages.

UI/UX Pro Max

A cinematic opener led by a short looping video. A poster frame paints first as the LCP; the muted video autoplays and loops only once in view; text sits on a readability scrim. Dark grading and slow motion build a trai…

StyleKit

Constructivism set in motion. On bone-white paper, solid geometric primitives — discs, triangles, squares and thick diagonal bars in red, blue and yellow — are not placed but engineered to move along axes: discs orbit,…

StyleKit

Type is the interface. On an ink-black stage the variable font itself becomes the animation: letters arrive one by one, weights breathe, widths stretch with scroll velocity. Motion belongs to the words alone, and a sing…

StyleKit

StyleKit

Classic Japanese RPG menu and dialogue box aesthetics with beveled borders, gradient backgrounds, status bars, and ornate frames. Ideal for game interfaces, interactive narratives, and fantasy-style products.

StyleKit

StyleKit

A diagonal light glare on hover using a ::before gradient, CSS variables, and background-position animation—no extra global keyframes required.

Magic UI

Shine border is an animated background border effect.

Magic UI

A dark photography gallery portfolio: near-black canvases let full-bleed images command absolute attention; warm amber accents highlight metadata and captions while ultra-light typography retreats into the background. F…

StyleKit

Ultra-minimal flat design with no shadows or gradients, creating hierarchy through color and whitespace. Ideal for portfolios, creative agencies, and art websites.

StyleKit

Soft concave and convex 3D effects using dual shadows to simulate light sources. Light backgrounds with same-tone elements create a refined sense of depth.

StyleKit

Editorial layout with physical depth. On warm paper, foreground text and background layers scroll at different rates to build real parallax; sticky image-text interlock, chapter numbers and drop caps turn long-form into…

StyleKit

A React Native developer-platform whose marketing site reads like a quietly-confident infrastructure brand. The base canvas is pure white with a soft sky-blue gradient atmospheric wash behind the hero; near-black ink (`…

Inter

Awesome DESIGN.md

Lovable's website radiates warmth through restraint. The entire page sits on a creamy, parchment-toned background (`#f7f4ed`) that immediately separates it from the cold-white conventions of most developer tool sites. T…

Awesome DESIGN.md

MiniMax presents itself as a premium AI infrastructure brand through a striking duality — bold black-pill CTAs and stark white canvas for marketing, paired with vibrant gradient product cards (orange-red, magenta-pink,…

DM Sans

Awesome DESIGN.md

Mintlify presents documentation infrastructure with a dual-mode aesthetic — atmospheric sky-gradient marketing heroes (cloud illustration backdrops, soft cream-to-blue washes) paired with dense developer-grade documenta…

Inter

Awesome DESIGN.md

Mistral AI brands itself with a singular signature — atmospheric sunset gradients (mustard, orange, deep red) layered over photography of mountains, plus a horizontal "sunset stripe" bar that closes every page. The syst…

PP Editorial Old

Awesome DESIGN.md

An inspired interpretation of Slacc's design language — a workplace messaging brand built on a deep aubergine primary, with cream-lavender hero gradients, blue inline links, and pill CTAs. The system pairs a proprietary…

Salesforce-Avant-Garde

Awesome DESIGN.md

An inspired interpretation of Stripi's design language — a financial-infrastructure brand built on a deep navy ink, an electric indigo primary, and a recurring atmospheric gradient mesh that occupies the upper third of…

sohne-var

Awesome DESIGN.md

An inspired interpretation of Together AI's design language — an AI infrastructure platform whose surface alternates between near-black hero bands (with a three-color orange-magenta-periwinkle gradient as the single pie…

The Future

Awesome DESIGN.md

An inspired interpretation of Vercel's design language — a developer-platform brand whose surface is a stark black-and-ink duet on near-white canvas, broken at hero scale by a multi-color mesh gradient (cyan / blue / ma…

Geist

Awesome DESIGN.md

An inspired interpretation of xAI's design language — Elon Musk's frontier-AI company whose web surface is a strict near-black canvas broken only by white pill outlines, occasional warm sunset / dusk gradient accents, a…

universalSans

Awesome DESIGN.md

A deep navy (#142b6f) anchors Ritual's entire experience — not as a background but as the brand's primary identity color, appearing on every key CTA, the site header, and the signature subscription flow. This is a brand…

CircularXX

Awesome DESIGN.md — e-commerce

Magic Spoon's supplied CSS centers on a saturated violet-purple, #3f0791, used consistently as the button background, border, and CTA text color across both the review-widget (Okendo) custom properties and the site's ow…

Poppins

Awesome DESIGN.md — e-commerce

A return to the raw HTML aesthetics of the early 90s internet, with system fonts, blue underlined links, pure white backgrounds, and zero decoration -- content over form.

StyleKit

A rendering style inspired by traditional cel animation, featuring bold black outlines, flat color fills, hard shadows without gradients, and vivid saturated colors full of cartoon and game energy.

StyleKit

A soft clay-textured design that creates adorable 3D effects through extra-large border radii, combined inner and outer shadows, and gentle gradients, ideal for children's apps and playful products.

StyleKit

Elegant magazine typography style with serif headings, sans-serif body text, refined whitespace and grid systems. Inspired by high-end fashion magazines and newspaper layouts. Warm cream background, soft black text, fin…

StyleKit

Street graffiti art style with spray-paint textures, bold clashing colors, hand-lettered tags, and brick-wall backgrounds. A visual expression of urban culture and rebellious spirit.

StyleKit

High-end design style with marble textures and gold accents, featuring white marble-textured backgrounds, gold line separators, and black text. Ideal for luxury brands, hotels, and premium real estate.

StyleKit